一个简单完整的网页

　

简单网页

获得源码链接，点击这里

网页头部+banner和信息部分+新闻部分+底部

一 头部

效果：

先对css进行初始化

分析：头部有一张图片和一个input输入框还有一个按钮+下面的通栏

因为用到左浮，右浮的地方不同我们可以写一个通类

这里的logo图片如果不定义宽高会影响下面的通栏的设置，影响其中的第一个为首的顺序无法对齐

二、通栏（宽度为适应屏幕所以是100%，不用设定了）

效果

分析：有一个ul里面有6个li，鼠标滑过的时候文字颜色改变（hover），ul在整个通栏nav中用一个nav-con这个命名的p包住，使其居中显示。

margin: 0 auto使nav-con居中。。。。。。。。

a链接是行内元素，设置宽高的时候要转成行内块 display: inline-block;  font：字体加粗，字体大小 /行高和字体高度相同的时候字体会居中显示

三、banner

效果：

四、信息公告

分析：整个部分有一部分文字（居中用一个盒子装），一部分图片（右边用一个盒子），这两个盒子分别左右浮动，调用fl，fr

五、新闻部分

效果：

分析：有三部分，我们大体用三个盒子，里面的内容

①图片+文字（上），还有正中间的图片+左右箭头的图片用（子绝父相）position

②图片+文字（上），列表项ul，li，border-bottom用dashed虚线，“致歉公告”单独设置样式

③图片+文字（上），也是列表项这个我用p包住，还有下面的p标签的段落

六、底部

效果

注意：这里在news的部分用到一个类来清除浮动，这样保证news部分和底部不发生重叠clearfix

首先dt和dd是放于dl标签内，标签dt与dd处于dl下相同级。也就是dt不能放入dd内，dd不能放入dt内。在dl下，dt与dd处于同级标签。DD标签可以若干。同时不能不加dl地单独使用dt标签或dd标签。

分析：有上下两部分，一个是dl dt dd设置列表的标题和虚线下的居中文字

相关阅读

探索外包开发的极限：一个精品App诞生的全过程（下）

这篇文章希望向你分享的是：如果你想开发一款App，而你请不起一个完整的开发团队，那么你如何借助外包公司来做好这件事；你如何去揽下立

一个大三菜鸟的产品入门手记

Hi，大家好，我是一名大学生，现居北京，在这里分享一下这2个月来的产品入门历程。请大家耐心点，听我讲完这个故事：一、迷茫期7月中旬放暑假

Android添加手机黑名单，手机来电拦截实现详解与Demo，一

简介 这是一个小应用的详解，这个应用可以添加手机黑名单，拦截手机黑名单的来电。通过这个小demo，我们可以对Android四大组件的应用

一个超简单技巧，快速提高标题打开率！(引爆标题)

图片来源图虫：已授站长之家使用说一千道一万。文章内容再好，标题也直接决定用户是否会继续看你的文章。从几十年前的纸媒时代到现在

在网页中如何践行游戏化设计？研习下这7个案例

游戏化设计的概念由来已久，设计师从游戏当中汲取经验，将游戏策略运用在非游戏类的应用和网站当中。在一个很长的时间里，设计师对于游