m0_63178019的博客

视口宽度是 375， vw 是视口宽度的百分之一也就是 3.75 ，那么宽度高度分别是 50vw 和 30vw，那么也就是 50*3.75 和 30*3.75。（因为标题和内容部分很多地方用到，所以直接到时候直接写为公共样式。在写标题的时候不加上父级，直接标题样式）object-fit：cover；图片缩放，跟背景图缩放一样 background-size。同样 vh 就是视口高度的 百分之一。

最后点击下载是点击之后能跳转，所以设置为 a 标签，为了区别跟logo 的 a 标签，设置了一个类 download，将其转换为块级元素设置宽高以及边框。然后给版心 wrapper 作为left 和 right 的父级设置 flex布局，并且设置主轴对齐方式。其次 p 中内容 的换行是通过固定了整个left 盒子然后固定字号来控制的，设置行高让内容垂直居中。先将大的盒子 footer内外上边距和高度背景色设置。首先logo是能点击跳转，所以使用 a 标签。设置 left 宽度和背景色。

之所以图片下边出现空白键距，是因为浏览器将行内块，行内标签当作文字处理，一律按照基线对齐，转换显示模式之后就不能当作文字处理，也就不按照基线对齐了，所以也就不出现空白间距了。ul 中包含 li，所有的 li 是在一行显示，所以要设置 flex ，因为 li 中包含了图片和文字，两者也是要在一行显示，所以使用了 flex。当使用类选择器改变字体图标样式时，类选择器中的font-size样式会覆盖 iconfont.css中的样式，所以显示出来的是 类选择器中的样式。将字体文件放到 具体要使用的代码的文件中。

注意：在设置居中时使用了transform进行平移居中，设置文字缩放动画时使用了 transform中的 scale ，使用动画时 animation在平移 平移居中后面，后面样式会覆盖前面样式，所以在设置动画缩放时也一并将平移效果加进去。to 里的位置是要写整个精灵图宽度，因为图片是往前看，所以整个背景精灵图是往后的，那么也就是 负。使用动画时，设置速度曲线 steps(12) ,构建逐帧动画。animation : 动画1，动画2，动画；

父级盒子上定位着两个子级盒子，分别将两个盒子一前一后也就是沿着 Z 轴平移，那么就产生了立体空间，为了清除看见效果，可以设置悬停时该 父级旋转，那么就能清除看到该空间了。速度曲线：该动画是匀速，加速，还是减速（linear匀速，steps(3)分步动画，括号中是分的步数）过渡仅仅能实现两个状态，动画能实现多个状态的变化过程，动画过程可控（重复播放，最终画面，是否暂停）平面旋转是绕着中心点旋转，空间旋转是绕着 z 轴旋转，所以视觉效果上是一致的。类似于钢管舞（角度为正，右边向后）百分比表示动画时长的百分比。

打开 本地 web 服务器，则可以看到 网页宽度 和 移动端网页逻辑分辨率宽度一样。只有检测到屏幕分辨率（小括号里的条件满足）是 375，才会执行大括号中的 代码。在引入了 flexible.js的移动端网页，直接右键检查从元素中获取。rem布局中，HTML标签字号为视口宽度的 1/10。PC端是逻辑分辨率，移动端代码也是参考逻辑分辨率。右键电脑桌面 ，点击显示设置。双击修改块注释快捷键。

先确定 h5 中的宽高，然后引入背景图片，分别设置每个 h5 中的图片位置（css精灵）因为已经是底部了，不需要考虑引擎优化，所以直接用 p 标签包裹 a 即可。ul嵌套 li 标签，li 中嵌套 h5(图片）和 p 内容。三个 div 盒子，服务，帮助中心，版权。

li父级ul 设置 flex使得 li 在一行显示，因为 li 太多所以设置 flex-wrap使得 li自动换行，设置主轴对齐方式 justify-content为space-between使得 li之间自动计算间距。“精品推荐”字颜色与基础样式一样为#333,所以不用设置。设置右边“查看全部”的 > 为背景图，不平铺，右居中。标题部分后面出现类似的，所以将其设置为公共样式。

如果是对应要生效的 css 多，那么就在 link 引入 css文件时，加上 media=(视口宽度)，如果是要生效的 css 很少，那么就直接 在css 文件中 @meida (视口宽度) { css样式 }@media (媒体特性) {

例如改变背景色，右键检查 找出背景色所在选择器，将 样式写在 link 引入的 bootstrap.main.css之后，因为后边的会覆盖前边样式，并且注意 右键检查时有没有！引入 css 文件， bootstrap.css 和 bootstrap.main.css ，前者跟平常书写 css 的样式一样，都是选择器然后样式属性，后者则是给浏览器看的，但是轻量，所以一半就是选择 后者。生产文件是开发响应式网页应用，源码是底层逻辑代码，因为是要制作响应式网页，所以下载开发文件。

logo考虑搜索引擎优化，所以要使用 h1中包裹 a 标签，a 里边写内容（到时候直接将字号设置为0，就不影响logo图片的展示了）padding加给 a ，当鼠标悬停时，边框线出现以及文字内容变成绿色。设置鼠标悬停时，a 中出现底部绿色边框线，以及文字颜色是变成绿色。

准备工作在 less文件夹下新建 index.less文件，将该文件导出至另一文件夹 css文件夹下将清除样式base.less直接导入到 index.less中，那么就不必生成base.css，直接在 index.less中生成相应的 index.css在 index.html中引入 首页样式，字体样式以及 js文件为HTML加上字号打开 选择问诊类型的 html 设计稿文件注意设计稿是 375 还是 750,如果是 750的，要记得

因为只需要 logo图，所以将字号直接写为0就 ok，但是如果不在标签中写内容不就行了。水平方向: li标签设置右margin，a标签（文字内容）设置左右padding。a标签作为行内元素，对内外边距无效，只对行高有效。竖直方向：行高，a标签上下padding。

轮播图区域总共三张图片，分别设置了 z-index堆叠顺序，左右两张图片设置 z-index为0,中间图片设置 z-index为 1 ,相比较之下， 1大，数值越大，元素就会显示在层级更高的位置，覆盖在其他元素之上。将类为左右的两张图分别左右移动并缩小，因为是以 整个 div 盒子为中心进行缩小的，所以移动之后在缩小，实际上是没有移动实际的距离，所以改变 原心，将原心分别设置为左边中心 和 右边中心，那么就能移动相应的距离了。搜索和登录是线性渐变，下载是径向渐变。默认情况，转换原点是盒子中心。

其次是 a标签中的内容以及 > 背景图片：将 a标签转换为 块级元素，设置高度，宽度默认是父级的100%，将 > 背景图片不平铺但是居中放到 a标签右边，设置字号以及行高，那么内容就会垂直居中。通栏banner，接着版心wrapper，在版心中放背景图和 left 和 right ，然后用space-between主轴对齐方式将left和right分别放在wrapper一左一右。最后是鼠标悬停状态，文字内容颜色变化。首先是导航栏的宽高和半透明背景色。

左右标签的布局是在 title 盒子之外定位。

设置字体图标和右边文字之间间距，行内和行内块默认是基线对齐，所以字体图标和文字是一上一下的，给字体图标设置垂直对齐，使其和文字能居中。在 index.html 中引入 css样式，common 和 index 的样式引入顺序无所谓，但是 base 要放在最前面。因为右边框跟文字一样高，而 a 是行内，高度靠内容撑开 ，所以是给 a 设置有边框而不是给 li 设置。在css 文件夹中新建 common文件和 index 文件，以及新建index.htnl文件。将素材中的图标复制到本文件夹中。

头部区域：logo，导航（nav)，搜索框(search)，用户登录头像(user)该网页都是版心居中，所以设置了公共样式 .wrapper，margin:0 auto和width:1200px，则版心宽度为1200，上下外边距为0,左右自动，那么也就是居中。 同样公用样式还有body背景色 给头部区域设置高度和背景色 给头部版心区域设置上内边距（基于logo）和 flex布局，以便logo,nav,search,user在一行显示logo:logo作为标题用 h1 且点

设置banner 整体布局：总体高度和背景色，三张图片宽度，图片一行排列，图片溢出隐藏。

生鲜区域:生鲜区域标题部分：生鲜区域内容部分： 分左右两个部分 右边区域是8个 li 标签区域，li中嵌套 a ,上部分是图片，下部分是内容；与 a 并列的是cover，定位在 li 之外，设置是溢出隐藏，鼠标悬停之后出现 设置 cover 子绝父（li）相定位是 li 的下边，且下边距是 -86 ，因为是在 li 之外，设置溢出隐藏；鼠标悬停 cover 下外边距设置为 0 ,也就是距离 li 为0 为 cover 设置过渡效果

因为 css 是给浏览器看的，所以放到 head 标签中。

所有标签内外边距，内减防止因为内边距和边框将盒子撑大。单个属性，复合属性：背景图，平铺方式，放置位置。模糊半径：越大越模糊，也就是越柔和。

三个 div 盒子在一一行显示，但是 div 标签默认是独占一行的想要实现块级盒子在一行，两种方法，浮动和 Flex 布局。

复合选择器：子代，后代，并集，交集，伪类选择器CSS特性：继承，层叠，优先级emmet写法背景属性显示模式

不能跨结构标签合并，也就是 thead 中的不能和 tbody中的，tbody中的不能和 tfoot 中的。用 form 标签将整个表单区域包裹起来，才可实现 按钮重置 功能。写最后一行内容的时候，表格变大，是因为表格靠内容撑开了。