和cool一起学前端----第八天

div+css 布局–清除浮动

今天和大家分享下，页面的布局，首先我们来分析以下网页的基本机构，我们来分析下李宁官网，企业官网，结构都很相似。

看第一部分导航，分为俩个部分，第1部分和第2部分，面对这样的结构，我们通常会用到float,俩个div,一个向左浮动，一个向右浮动


通常我们都会先会把页面结构写出来，然后再写对应的样式，要重点提一下，子元素使用float的时候，父元素要加上clearfix清除浮动，或者在父元素里面再加一个div,加上clear:both样式，但是通常我们都会使用clearfix来清除浮动，这样比较方便。

奖状制作

cool的女朋友马上要过生日了，作为前端开发的“大师级”，自然要有我们的逼格，给女朋友准备一份特别的礼物–最佳女朋友奖，自己动手，丰衣足食。
首先贴上最后的效果，有喜欢的也可以给自己的女朋友做一个练练手，替换以下背景，和相应的图片就可以了。
首先我们先写好结构

打开浏览器瞅一瞅，页面时啥样子

这个是啥鬼东西，把这个交给女朋友会被打死吧，那我们优化下
首先标题“奖状”字眼，我们需要要让他居中显示，字号再大点，文字之间要有点距离，距离顶部再有点距离，然后我们标题加上这样的样式

.prize h2{ text-align: center; font-size: 40px; letter-spacing: 1em; padding-top: 70px}

标题处理好了，再处理接下来的表彰语句，我么需要缩进2个字符，然后文字也再大点，文字从左边开始，但是要有点边距，距离右边也有边距，所以考虑到，我们需要在大的外部容器需要设置上padding值，加上padding之后，div的宽度会发生变化，要想宽度保证不变，需要给容器加上box-sizing:border-box,这个之前也说过

.prize .dis{ margin-top: 25px; font-size: 25px; letter-spacing: .2em; line-height: 50px; text-indent: 2em}

接下来就是称号设置，我们要让他字号变大，且居中显示，文字之间有间距

.prize h3{ padding: 20px 0; font-size: 40px; letter-spacing: .3em; text-align: center}

最后就是颁奖日期、颁奖单位，以及盖章了，我们需要印章需要盖住日期和单位，这就要用到之前学过的定位的样式，我们来看下怎么写

.prize .time{ position: relative; line-height: 40px; margin-top: 60px;} .prize .time .pm{font-size: 20px;} .prize .time img{ position: absolute; width: 200px; height: 200px; left: 60px; top: -60px; }

首先父级容器设置position:relative;子元素设置position:absolute;通过left,top找到放置的位置。

最后再稍微调整下页面，感觉看起来内容还是偏上，再改下外层容器的padding-top的值，最后结果如下

附上完整的样式和代码

怎么样，你女朋友是不是该高兴了，当然内容还可以自己改，自己想怎么造就怎么造，就是这么任性，是不是很酷，通过小例子，也能帮助我们更好的巩固代码，好了今天就到这儿了，欢迎大家来撩

总结

以上是生活随笔为你收集整理的和cool一起学前端----第八天的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。