css-3秒（大概吧...）快速撸出YY游戏页面（一）-CSDN博客

有哪里不懂的，请在下面留言，我每天都看，有时间我会一一解答，看评论区也许有人提出了跟你同样想问的问题，可以看看我给出的回答，不用重复提问。

首先我们看看页面的样子

1秒钟看完进入第一次准备工作

开始项目的时候先建立好老三样，因为本篇不涉及js所以是老三样

style文件夹下先建立好两个css一个是你这个项目样式comment.css,另一个是重置浏览器的公共样式样式reset.css
images里面随便放图片

1秒钟完成了第一次准备工作，进入第二次准备工作

首先我们来写个reset.css

@charset "utf-8";

body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd {
    margin: 0;
    padding: 0;
}

ul,ol {list-style: none;}

img {border: none;vertical-align: top;}

a {text-decoration: none;}

/*选择性的*/

em,i {font-style: normal;}

/*公用*/

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.clearfix {zoom: 1;}

.fl {float: left;}

.fr {float: right;}

复制代码

每个浏览器对每个不同的标签都有一些大同小异的默认样式，为了统一所以需要让其重置，暴力reset*{margin:0;padding:0}给整个页面里的所有元素都重置的样式，虽然简单快速但是有时候一些默认的东西你还是需要去保留它，写个简单规范的reset其实不难，，所以我不推荐用暴力reset。
上面的reset里img去除了边框和增加了顶部对齐，部分浏览器里img在盒子里面的对齐方式如果是底部对齐，那么会有撑出多余的高度，给予vertical-align:top;是为了解决这个小bug，a标签也有类似的问题，稍后再讲。
我们这个reset.css里面有.clearfix:after，亲测其实这里面写三个就OK了，不需要给heigh:0;overflow:hidden;但如果你里面有元素设了负值的margin顶到了盒子外面则你可能需要单独加一个overflow:hidden;

1秒钟完成了第二次准备工作，进入正式工作部分

首先从最顶部的入手
把左边的图切出来放到images文件夹下备用
书写html结构和填充内容

结构详解

首先我们给一个大盒子给三个类名，header/gWidth/clearfix，请看本篇开头的那张整图，页面整体集中在中间且宽度一样，所以给了一个宽1000px叫做gWidth类名的版心，盒子里面的元素时左右浮动的如果不清楚浮动则header盒子会没有高度，于是加了一个我们在reset里面写好的clearfix类名
header盒子下分左右两个盒子，左边是有链接跳转的广告图片，右边是浮动成行的导航链接
左边广告图片是带有链接的用a标签包起来，右边是导航链接，对于导航链接一般做法是用ul li标签来做，间隔中的span用来做文字中间的竖线

样式详解

gWidt版心可能不像大家平时的margin:0 auto;这样的写法，这里多写了一点是为了怕覆盖，假如你这个盒子需要给margin-top/bottom值，被gWidt覆盖掉了就不起作用了。当然也可以把gWidt放到css最开始的地方也覆盖其他样式，但多留点心总是好的。
右边导航普遍的写法是用ul li标签把li标签浮动成一行排列
我们在li标签里面放置了a标签，先把a标签转行块（display: inline-block;），行内元素需要转了行块之后才可以设置宽高，设置高度与行高相同文字会在盒子里处于居中状态（height: 40px;line-height: 40px;），在这里设置了属性（vertical-align: top;）和我们在reset.css里面给img设置的（vertical-align: top;）是一个道理，在某些版本的浏览器里，像img，a等标签在父盒子里会有一个对齐的问题，这个对齐的问题主要导致了高度增加，打个比方，我不设置（vertical-align: top;），a的高度是40px这个没错，但是a在li里面，li由a撑开，因为某些浏览器默认版本a标签在父盒子里面的对齐方式问题会让li的高度会变成42px，所以设置（vertical-align: top;）之后，li的高度就能准确变成40px；当然也不用你每次写都要加个vertical-align: top;，因为这个是我们自己写的reset.css，当你去用别人写的reset.css时一般里面都已包含了这个问题的解决方案，在这里的reset.css只是为了帮助大家认识何为reset.css为什么要写reset.css
文字中间的那条竖线用span来代替，span里面不要写|（竖），因为测量值是小于12px，12px是chrome浏览器最小字体，设置1px再小也只会是12px，一般的做法是给span转换成行块获得可设宽高的属性，设置宽1px高8px背景色黑色来替代竖线，但这里的做法是没有给span设置（display: inline-block;）来转行块，这里用了（float: left;），《css3权威指南》里有讲到行内元素设置浮动后也能获得可设宽高的属性。

<div class="header gWidth clearfix">
    <div class="ad fl">
        <a href="#"><img src="images/ad.jpg" alt=""></a>
    </div>
    <ul class="header_nav fr">
        <li><a href="#">登陆</a></li>
        <li><span></span></li>
        <li><a href="#">注册</a></li>
        <li><span></span></li>
        <li><a href="#">今天卡夫</a></li>
        <li><span></span></li>
        <li><a href="#" class="red">登陆登陆</a></li>
    </ul>
</div>
复制代码

/*公用*/

.gWidth {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
/*头部*/
 
.header {
    position: relative;
}

.ad,.ad img {
    width: 492px;
    height: 41px;
}

.header_nav {
    line-height: 40px;
    height: 40px;
}

.header_nav li {
    float: left;
}

.header_nav a {
    font-size: 12px;
    color: #757575;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    vertical-align: top;
    position: relative;
    _top: 2px;
}

.header_nav span {
    color: #020202;
    width: 1px;
    height: 8px;
    overflow: hidden;
    background-color: #000;
    float: left;
    margin: 16px 10px;
    /*        pc 端 chrome 不允许小于12px的文字    */
}
复制代码