玉环建设规划局网站,网页设计网站概述怎么写,广州最大网站建设,云免网站空间版本说明
当前版本号[20231120]。
版本修改说明20231120初版
目录 文章目录 版本说明目录移动 Web 第三天01-移动 Web 基础谷歌模拟器屏幕分辨率视口二倍图适配方案 02-rem简介媒体查询rem 布局flexible.jsrem 移动适配 03-less注释运算嵌套变量导入导出禁止导出 04-综合案例…版本说明
当前版本号[20231120]。
版本修改说明20231120初版
目录 文章目录 版本说明目录移动 Web 第三天01-移动 Web 基础谷歌模拟器屏幕分辨率视口二倍图适配方案 02-rem简介媒体查询rem 布局flexible.jsrem 移动适配 03-less注释运算嵌套变量导入导出禁止导出 04-综合案例-极速问诊准备工作头部布局头部内容banner 区域问诊类型布局问诊类型内容 移动 Web 第三天
01-移动 Web 基础
谷歌模拟器
模拟移动设备方便查看页面效果 屏幕分辨率
分类
物理分辨率硬件分辨率出厂设置逻辑分辨率软件 / 驱动设置
结论以后编写代码时就要参考 逻辑分辨率 来制作了。 视口
作用显示 HTML 网页的区域用来约束 HTML 的尺寸
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedge!– 视口标签 --meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body/body
/htmlwidthdevice-width视口宽度 设备宽度逻辑分辨率的宽度initial-scale1.0缩放1倍不缩放
二倍图
概念设计稿里面每个元素的尺寸的倍数
作用防止图片在高分辨率屏幕下模糊失真
使用方法 适配方案 宽度适配宽度自适应 百分比布局Flex 布局 等比适配宽高等比缩放 remvw
02-rem
简介 rem单位是相对单位 rem单位是相对于HTML标签的字号计算结果 如此时我们给html标签大小为font-size:30px 而width:5rem; height: 3rem;最后盒子在移动端显示的大小就是30* 5*30*3150 * 90 pxc 了。 1rem 1HTML字号大小
1、看看是否能等比例缩小/放大看移动端的适配效果
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{width: 5rem;height: 5rem;background-color: pink;}/style
/head
bodydiv /divscript src../js/flexible.js/script
/body
/html就可以发现可以等比例缩小了。 媒体查询
媒体查询能够检测视口的宽度然后编写差异化的 CSS 样式
当某个条件成立, 执行对应的CSS样式 media (width:320px) {html {background-color: green;}
}通过对比可以看到符合视口宽度的背景颜色才会变成绿色不符合的不会。 rem 布局
目前rem布局方案中将网页等分成10份 HTML标签的字号为视口宽度的 1/10。 flexible.js
flexible.js 是手淘开发出的一个用来适配移动端的 js 库。
核心原理就是根据不同的视口宽度给网页中 html 根节点设置不同的 font-size。
【意思主要是在自己写代码的时候就不用自己写媒体查询了。】
body......script src./js/flexible.js/script
/bodyrem 移动适配
rem单位尺寸
确定基准根字号
查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号1/10视口宽度目前大部分视口宽度为375所以基准根字号可以旋转37.5
rem单位的尺寸
rem单位的尺寸 px单位数值 / 基准根字号
在上面我们可以看到求rem的尺寸特别的麻烦每一个都要除以37.5这时我们就可以使用less去统一的操作。
03-less
Less是一个CSS预处理器, Less文件后缀是.less。扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力
注意浏览器不识别 Less 代码目前阶段网页要引入对应的 CSS 文件
VS Code 插件Easy LESS保存 less文件后自动生成对应的 CSS 文件 注释
单行注释 语法// 注释内容快捷键ctrl / 块注释 语法/* 注释内容 */快捷键 Shift Alt A
运算
加、减、乘直接书写计算表达式除法需要添加 小括号 或 . 注但使用 . 这种用法的话会出现红色波浪线易让你以为是报错的代码提示 表达式存在多个单位以第一个单位为准 嵌套
作用快速生成后代选择器 提示用 表示当前选择器不会生成后代选择器通常配合伪类或伪元素使用 如下图所示 有例外如表示的是当前选择器代码写到谁的大括号里面就表示谁不会生成后代选择器。 变量
概念容器存储数据
作用存储数据方便使用和修改
语法
定义变量变量名: 数据;使用变量CSS属性变量名;
// 定义变量
myColor: pink;
// 使用变量
.box {color: myColor;
}
a {color: myColor;
}导入
作用导入 less 公共样式文件
语法导入: import “文件路径”;
提示如果是 less 文件可以省略后缀
import ./base.less;
import ./common;注这里是在less文件中导入别的less文件哦并不是在html文件中导入html文件是不可以导入less文件的可以把less文件转成css文件才能进行导入 导出
写法在 less 文件的第一行添加 // out: 存储URL
提示文件夹名称后面添加 /
// out: ./index.css
// out: ./css/禁止导出
写法在 less 文件第一行添加: // out: false 04-综合案例-极速问诊 准备工作
项目目录 1、建立 less 文件并导出成 css 文件。
// out: ../css/import ./base.less;下图便是 /base.less 转的 /base.css 。 引入HTML 结构
link relstylesheet href./iconfont/iconfont.css
link relstylesheet href./css/index.cssbody......script src./js/flexible.js/script
/body头部布局
HTML 结构
!-- 头部 --
header1/headerless 样式
// 头部
header {display: flex;justify-content: space-between;padding: 0 (15 / rootSize);height: (44 / rootSize);background-color: pink;line-height: (44 / rootSize);
}根据设计图一步步来弄 头部内容
HTML 结构
a href# classbackspan classiconfont icon-left/span/a
h3极速问诊/h3
a href# classnote问诊记录/aless 样式
.icon-left {font-size: (22 / rootSize);
}h3 {font-size: (17 / rootSize);
}.note {font-size: (15 / rootSize);color: #2CB5A5;
}1、建立好框架。
body!-- 头部 --header1/headerscript src./js/flexible.js/script
/body/* 头部 */
header{height: (44 / 37.5rem);background-color: pink;
}2、将头部的文字填充好并设置好居中的位置。
!-- 头部 --headera href# classback1/ah3极速问诊/h3a href# classnote问诊记录/a/header/* 头部 */
header{display: flex;justify-content: space-between;height: (44 / 37.5rem);background-color: pink;
}3、设置好内边距。
padding: 0 (15 / 37.5rem);4、设置行高。
line-height: (44 / 37.5rem);5、再定义。
/* 定义变量 */
rootSize:37.5rem;/* 头部 */
header{display: flex;justify-content: space-between;padding: 0 (15 / rootSize);height: (44 / rootSize);line-height: (44 / rootSize);background-color: pink;
}a href# classbackspan classiconfont icon-left/span/a6、将文字的大小尺寸修改好。
header .back{font-size: (22 / rootSize);
}header h3{font-size: (17 / rootSize);
}header .note{font-size: (15 / rootSize);color: #2CB5A5;
}7、把背景颜色注销掉后便是我们想要的背景。 banner 区域
HTML 结构
!-- banner --
div classbannerimg src./assets/entry.png altpspan20s/span 快速匹配专业医生/p
/divless 样式
// banner
.banner {margin-top: (30 / rootSize);margin-bottom: (34 / rootSize);text-align: center;img {margin-bottom: (18 / rootSize);width: (240 / rootSize);height: (206 / rootSize);}p {font-size: (16 / rootSize);span {color: #16C2A3;}}
}1、插入图片。
!-- banner区域 --div classbannerimg src./assets/entry.png altpspan20s/span 快速匹配专业医生/p/div// bannner区域
.banner{text-align: center;
}2、使文字部分与图片之间有间隔。
margin-top: (30 / rootSize);
margin-bottom: (34 / rootSize);3、设置宽高。
img{height: (206 / rootSize);width: (240 / rootSize);}4、图片加上底部外边距。
margin-bottom: (18 / rootSize);5、修改好字体的大小。
p{font-size: (16 / rootSize);span{color: #16C2A3;}}问诊类型布局
HTML 结构
!-- 问诊类型 --
div classtypeullia href#div classpic1/divdiv classtxt2/divspan classiconfont icon-right/span/a/lili2/li/ul
/divless 样式
// 问诊类型
.type {padding: 0 (15 / rootSize);li {margin-bottom: (15 / rootSize);padding: 0 (15 / rootSize);height: (78 / rootSize);border: 1px solid #EDEDED;border-radius: (4 / rootSize);a {display: flex;align-items: center;// 内容在78里面垂直居中height: (78 / rootSize);}}
}1、添加两个li标签用于装放问诊类型。
!-- 问诊类型 --div classtypeulli1/lili2/li/ul/div// 问诊类型
.type{padding: 0 (15 / rootSize);
}2、设置内边距边框圆角底部外边距。
// 问诊类型
.type{padding: 0 (15 / rootSize);li{height: (78 / rootSize);border: 1px solid #EDEDED;border-radius: (4 / rootSize);margin-bottom: (15 / rootSize);}
}3、在li标签里再加上内边距的要求。
padding: 0 (15 / rootSize);4、使类型中的三块内容在flex布局中放在一起。
li a hrefdiv classpic1/divdiv classtxt2/divspan classiconfont icon-right/span/a/lia{display: flex;}5、将名为a的元素设置为弹性布局容器将子元素的垂直对齐方式设置为居中对齐。
a{display: flex;align-items: center;height: (78 / rootSize);}问诊类型内容
HTML 结构
div classpicimg src./assets/type01.png alt
/div
div classtxth4三甲图文问诊/h4p三甲主治及以上级别医生/p
/div
span classiconfont icon-right/spanless 样式
img {margin-right: (14 / rootSize);width: (40 / rootSize);height: (40 / rootSize);
}
.txt {flex:1;h4 {font-size: (16 / rootSize);color: #3C3E42;line-height: (24 / rootSize);}p {font-size: (13 / rootSize);color: #848484;}
}
.iconfont {font-size: (16 / rootSize);
}1、插入小图片。
div classpicimg src./assets/type01.png alt/divimg{margin-right: (14 / rootSize);height: (40 / rootSize);width: (40 / rootSize);}2、将其在其父容器中的弹性大小设置为1即它们将平均分配父容器的空间。
.txt{flex: 1;}3、将两段文字及字节图标放在一起。
h4{font-size: (16 / rootSize);line-height: (24 / rootSize);color: #3C3E42;margin-bottom: (4 / rootSize);}p{font-size: (13 / rootSize);line-height: (20 / rootSize);color: #848484;}.iconfont{font-size: (16 / rootSize);}4、补充好内容。
li a hrefdiv classpicimg src./assets/type02.png alt/divdiv classtxth4普通图文问诊/h4p二甲主治及以上级别医生/p/divspan classiconfont icon-right/span/a/li需要完整源码可点击 点我查看 跳转进行下载。
