目录
前期准备
1.观察结构 划分区域布局方式
利用div划分标准流与浮动流，对图片字体进行划分
如下
如下
注意事项
1.早早判断哪些图当背景（css-background），哪些直接插入图片（img）
2. nav 头部导航使用div+ul+li的组合 导航的最前和最后使用<span>或者<h>进行设置边距或边角引用图片
3.图片加文字组合时 记得使用 dl dt dd结构
针对精灵图的切图点击查看
页面框架准备和命名
（以下.开头的均为布局结构核心div，有部分疏漏，很明显淘宝使用的的前端数据流处理框架，代码更优雅）
参考--新浪
<!-- 头部 bar begin--> /*未标明均为div的class*/
.top-nav-wrap .top-nav-wrap-fix
.top-nav
.tn-bg
.tn-header
.tn-nav
.tn-title
<a><i>
.tn-title
<a> <i>
.tn-topmenulist .tn-topmenulist-a .tn-topmenulist-a-menu
.tn-close
.tn-person-r
/*-- 有部分div.bgAdWrap 作为外墙的使用--*/
<!-- 头部 bar end -->
<!-- 头部搜索 begin -->
.top-search-wrap
.top-search-frame .clearfix
.top-search clearfix
<form>
.sim-select clearfix
.v-line
.sim-ul-flt
.sim-ul-bg
.inp-txt-wrap
.now-wea-wrap clearfix
.nwsu_Wrap
<!-- 头部搜索 end -->
<!-- main begin --> /*main为网页主题 太长了 挑选重点*/
.main-nav
.nav-mod-1
.top-ads
.LejuText1
.top-ads-fwrap
.top-ads-list
<!-- main end -->
<!-- footer begin -->
.footer
.ft-info
.ft-list
<!-- footer end -->参考--淘宝网
<!-- 头部开始 -->
.cover J_Cover
.site-nav site-nav-status-logout
.tbh-banner J_Module tb-pass
.J_Module tbh-decorations
.decorations-box
<!-- 头部结束 -->
<!-- 搜索/logo开始 --> /*这个部分内容非常少，div居多*/
.cup J_Cup
.top J_Top
.top-wrap clearfix
.tbh-logo J_Module tb-pass
.logo
.tbh-search J_Module
.search-wrap
.search-bd
.search-triggers search-tab-header J_SearchTabBox
.search-panel search-hp-panel ks-switchable-content .
.J_SearchPanel
.search-ft J_SearchFt clearfix
.tbh-qr-wrapper
.tbh-qr J_Module
<!-- 搜索/logo结束 -->
<!-- 头部导航开始 -->
.tbh-nav J_Module tb-pass tb-bg
.nav J_Nav clearfix
<h2><ul> .nav-hd
<!-- 头部导航结束 -->
<!-- 主体开始 -->
.screen-outer clearfix
.main
.main-inner clearfix
.tbh-service J_Module
.service J_Service
ul-.service-bd
service-float
.core J_Core
.tbh-promo J_Module
.promo J_Promo tb-loading
.promo-bd
.promo-ft a-all
.promo-opt J_PromoOpt a-all sld-ft-opt
.tbh-tmall J_Module
.tmall J_Tmall
.........
.layer
.layer-inner clearfix
.....
<!-- 主体结束 -->重点标签识记
| 名称 | 作用 |
|---|---|
| box-sizing: border-box; | 1.CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变 2.box-sizing属性是如何保证增加padding和border之后, 盒子元素的宽度和高度不变 |
| display: inline-block; |
|
|
|
| overflow: hidden; | 溢出隐藏 一般会遇到的情况是内容超出了父级盒子使用后一般会用在超出固定宽度就隐藏超出的内容， 清除浮动 布局的时候肯定会有一种情况，在一个父级盒子中，有左右浮动的两个子级盒子，也就是常见的左右布局，但是子级的内容不定，会多也会少，这个时候父级就不能给一定的高度，而是根据子级的内容的多少来改变，如果不给高度，那么页面就会有塌陷的问题，就是父级div没有高度的情况 两个子级因为浮动的关系，脱离了标准流，但是父级没有给高度，父级就认为它没有任何内容，所以高度就不会被内容撑开，相当于父级的高度是0px;那么跟他平级的盒子footer,就会按照标准流的排布，紧挨着平级的红色盒子排着下来，只是红色的盒子高为0而已。这个就造成了页面的塌陷！那么这个是时候就要靠overflow：hidden;发挥它的作用了！ 如果在ie比较低版本的浏览器中使用overflow：hidden；也不能达到这样的效果，那么就加上 zoom:1; 所以为了让兼容性更好的话，如果使用overflow:hidden;来清除浮动，解决父级塌陷这个问题的话，建议配合 zoom:1;来使用，即：overflow:hidden;zoom:1; 解决插入图片时的底部留白问题！ 插入图片时，如果存放图片的父级盒子没有给高度，那么父级盒子根据图片高度撑开，并且会多出几像素 1、给父级加一个高度height，和图片一样高，并且添加overflow:hidden;这两个一起添加，兼容性会更好一些！ 2、如果我们不需要给盒子添加高度，让其自适应图片高，那么我们可以给img添加display:block; |