整体介绍
项目起步准备 页面顶部的开发 1)页面顶部的开发 2)字体图标的使用 3)使用CSS制作菜单 页面中部的开发 1)大Banner的布局 2)垂直菜单开发 3)新鲜甩尾部分开发 4)机酒自由行部分开发 5)当地玩乐部分开发 6)公共类的使用 7)过渡和变形在实战中的应用 页面底部开发
项目起步准备
分析设计图
分析出大致所需技术、页面布局构成和页面效果动画等，比如菜单栏、导航条、栏目、、banner图和页脚等布局特点，交互时的效果以及可以用CSS公共类实现的标题等 从普通到特殊，分析每个大盒子的共性，作为公共类，防止复用，再分析其中的特殊点，作为自己根据实际书写
文件夹创建
项目文件夹名应要求为英文名，不能使用中文
image图片文件夹、index.html文件、css与js文件夹
html基本骨架搭建
注意写好meta标签中keywords、description关键描述信息，增加搜索权重，做好SEO优化 浏览器能自动智能识别中文标点符号
样式表相关准备
reset.css
清除浏览器默认复位，用来作为项目整体复位，body标签和p标签有margin属性和padding属性,需要清除，标题标签会自动加粗，需要清除以及ul和li标签是有小圆点的，也需要清除，自己写会考虑不周，使用别人写好的进行复位
yahoo工程师的yui reset 注意粘贴留下版权信息，商业许可使用
base.css
存放一些公共类，防止复用 比如清除浮动、原子类还有一些常见操作 原子类一般不使用，影响代码观感 常见操作有文本居中、盒子居中等操作也可以写进来，若个别需要要改变时，可以层叠掉属性
每个网页都有版心(大盒子)，也可以添加到公共类中
my.css
自己编写的css
页面顶部开发
嵌套两个盒子，一个做背景色，一个居中
有菜单栏、导航条、logo属于页面顶部，可以放入一个大盒子中，使用header标签对 从整体盒子site-head开始，从共性到个性出发，整体盒子设置了公共类.center-wrap属性，故只需设置里面每个小盒子的高即可，由表及里，先设置整体的高，然后设置菜单栏、导航条以及logo的高,同理，每个小盒子的背景色、浮动布局等等也是属于自己的个性
菜单栏
菜单栏文字
盒子标签为topbar,注意超级链接不会从盒子继承颜色，比如再topbar里设置颜色虽然能改变文字颜色，但加了a href超级链接标签后，颜色会改变，所以需要对a标签进行后代选择
分清局部与全局的作用范围，是对盒子里内容起作用，比如垂直居中，还是对某个标签起作用
浮动的结构部分需要拆分为两个盒子，左浮动与右浮动 注意这里需要严格区分子代，因为后续需要添加二级菜单，所以避免影响，需要严格选择子代
.site-head .topbar .shortcut-links ul li改为.site-head .topbar .shortcut-links > ul > li
分析是使用padding还是margin向右踹开？后续要添加倒三角展开菜单，所以需要绝对定位，要使用padding浮在菜单中，所以字与字之间用margin
根据现象一步步更改，从局部认识到全局，才能全局的统筹规划
展开菜单制作
使用三个盒子制作展开菜单符号 使用绝对定位设置盒子的位置，并在浏览器调试出数据填写
蓝色部分改为白色，其它两种颜色改为背景色即可
导航栏
调用公共类center-wrap,继续添加个性 使用列表语义，class定义展开菜单制作的标签相同值，作为祖先元素 展开菜单为倒三角，通过border-top-color制作
logo栏
继续添加盒子，使用公共类，添加自己的个性设置
搜索按钮和搜索框分开设置，注意靠近搜索按钮的方向特殊，比如没有圆角，就要分别设置，从一般到特殊区分开来， btn在a标签中不能设置宽高，所以要转成行内块 注意算好账，边框也有高度
字体图标的使用
阿里巴巴旗下iconfont-阿里巴巴矢量图标库
添加到购物车，一起下载代码，根据demo提示使用即可，注意路径可能更改 多在浏览器进行调试修改即可
记住使用要加入iconfont标签
CSS制作菜单
菜单栏制作二级菜单
分析菜单能够覆盖住页面，所以需要使用绝对定位 因为绝对定位脱离标准文档流，不会对其他元素产生影响，所以才能覆盖住页面 如果绝对定位的两个盒子，可以设置z-index属性z-index:9999进行压盖，数值大会压盖数值小的
小技巧：可以使盒子带上颜色在浏览器中调试，完成后删掉即可
先隐藏菜单，然后点击倒三角才出现
使用display:none属性，隐藏元素，然后使用hover标签，添加display:block即可出现
注意：二级菜单如果与导航条之间有缝隙，当鼠标下移，会无法使二级菜单悬停，解决方法一是上移使其缝隙为零，但如果给的图是有缝隙的情况，我们需要使用大盒子层叠小盒子的方法，原理是加一个隐藏的大盒子使其与导航条无缝连接，在加上我们的盒子，二级菜单就能一直悬停了。
自顶向下挤一个盒子下来即可（蓝色盒子）
导航条制作二级菜单
分析有全部两字，应该是定义列表，使用dd、dt标签
使用公共类即可，在定义个性标签
页面中部的开发
大Banner的布局
分析banner图片占满屏幕，设置width:100% 但我们发现，缩小网页时图片也跟着缩小，会导致无法容纳里面的内容
我们只要限制最小宽度为版心宽度即可 使用min-width
拖动滚动条，发现顶部没有了，说明没考虑到，需要给菜单栏、导航条、logo加上min-width属性
注意，接下来banner上的元素高度需要使用百分比形式，不能设为具体数值，因为上面的几个元素是等分banner图片的，如果设置为具体数值，一旦缩放，就会乱套，这是间接经验
继续添加nav盒子，这几个均分的盒子一看就是无序列表，里面的内容是定义列表，上文也有类似提到过 这些盒子元素因为也要居中，所以要添加center-wrap公共类，而且压盖在banner图上，所以绝对定位，子绝父相，还要设置好top值、left值等 只要有压盖，第一时间想到绝对定位
父盒子一定要设置100% 子盒子在设置百分比均分，否则height为0
接下来设置左右按钮，仔细观察可知，左右按钮在版心外(上面的橙色盒子)
可以使用上图方法调试观察盒子的出现
使用css精灵技术定位左右按钮即可
左右按钮属于子绝父绝，父盒子是版心，左右按钮在版心外，所以left、right值为负
垂直菜单开发
左边垂直菜单
分析：上面设置了弹性伸缩，高度为百分比即保持height:16.6%，所以也需要绝对定位，而且里面多行文本也需要垂直居中，绝对定位是最好方法
养成先分析在做的习惯，以免出现大问题，此处不像上面的二级菜单布局，要分析清楚，否则浪费时间精力，理论指导实践，实践也反过来丰富理论
里面的文本内容是定义列表
这时候要加上边框线 border-bottom
记得要取消最后一行的边框线,使用last-child 然后使用before添加首头的小图标 注意使用共性与个性方法
右边垂直菜单
分析:右侧菜单宽度不变，高度伸缩变化 在添加一个大盒子，一个显示，其它隐藏 display:none
热门广告
使用无序列表
装进一个大盒子清除浮动，以免产生影响，因为可以形成BFC，一个独立容器，既能不影响别人，自己也不受影响 浮动里面小盒子后如果最后一个盒子掉下去，一般是因为最后一个li没有设置margin-right:0
因为我们计算时将最后一个元素的间隔也算进去，所以父盒子没有足够宽度，浮动的盒子自然掉下去
新鲜甩尾部分
第四个和第八个会掉下去，所以我们要把这两个的margin-right去除，使用高级选择器nth-child(4n)
标题和右边小字左浮动，查看浏览器是被其它图片挤上来，是浮动上来的，所以要让标题与右边小字形成盒子，变成BFC独立容器 在公共类有clearfix，一开始已经写好
<div class="hd clearfix">
<h2>新鲜甩尾</h2>
<em>每日不可不看的好货</em>
</div>图片选中有阴影，使用hover
机酒自由行部分
标题左浮动和右浮动 下面部分就看成一个大盒子，上面左浮动和下面是列表 和上面一样，先版心居中 清除浮动
机酒自由行和上面新鲜甩尾等同样样式，为h2和em标签，所以添加共性标签cotent-part，共性管理
注意提出来的em标签记得不要再右边浮动标题使用了，因为已经提为公共类 去掉标题右边最后一个的margin-right，然后浏览器可以调节使其刚好在一行
可以从外到里，先搞好布局(带上颜色)，在做里面内容 先从大盒子出发，如版心，再实现里面的每一个小盒子 先分析再动手，分析应该使用什么
绝对定位使遮罩部分文字覆盖在图片中
不要用opacity设置透明度，而是用rgba
加上padding这些可能会使宽高超过，可以宽高减去padding,或者加上
box-sizing: border-box;
使用公共类后，可以根据要求用相同属性不同值层叠
如果相对定位的图片（非子图片）没设置宽高，那么top/left等定位值失效
更多图片是渐变色设置，右箭头继续使用字体图标
当地玩乐部分
先做大盒子，背景有个颜色，使用和机酒自由行一样的共性 使用共性的地方： 将jjzyx改为content-part，这是共性，共性的地方有nav部分以及more-grid部分 而且观察此部分的more-grid不在ul>li标签里。所以为了形成公共类，需要删掉此后代选择标签 记得也要清除浮动 计算设置三个盒子，左浮动并排显示
学会一步步从浏览器调试，浏览器样式里有写好的标签，可以自己调节
特色当地体验部分
继续使用content-part标签，初始化 从现象找出共性，每个卡片样式相同，只要设置好其中一个卡片样式就行 卡片样式由外到内，从大盒子到子盒子，层级推进 为了保持评分都在最下一行，把这个语句所在盒子设置高度即可
最世界·深度旅行和跟团/半自助游部分开发
仔细观察版式，和上面一部分机酒自由行的布局一样，所以机酒自由行作为公共类复用，新增标签common-style作为共性使用 在样式表中将.jjzyx换为common-style形成公共类复用 然后根据页面形成的差异再设置个性即可
过渡和变形在实战中的应用
实现公共特效，比如图片放大效果，防止图片溢出边框。加overflow:hidden;属性
会溢出边框的就添加此属性
发现放大的图片会盖住机酒自由行中的tag标签，所以添加z-index属性值，加9999，
为右箭头添加蹦跳动画，观察发现触碰边框就触发动画，但是发现有些位置无法点击，所以需要把a标签先转为块级元素，可以设置动画display:block
并集选择器：
<li class="big-grid havehover">
.big-grid.havehover xxx
页面底部开发
同理设置个大盒子 记得添加clearfix清除浮动 先设置好字体部分，为图标留出空位
然后使用:before插入,继续使用精灵技术
使用共性与个性，个性就是图片不同
返回顶部按钮固定定位即可