divcss制作一个网页布局(css页面布局实例)

divcss制作一个网页布局

DIV全称division意为“区块、切割”,DIV标签是一个无意义的容器标签，用于将页面划分出不同的区域。经过DIV将杂乱的页面进行细分块，能够将问题细分一个一个处理，所以经过DIV将页面分块是一个要害的工作，也是决议最终效果与质量的条件。
css
CSS(CascadingStyleSheet)，中文翻译为层叠款式表，是用于操控网页款式并答应将款式信息与网页内容别离的一种标记性语言。
div承载的是内容，而css承载的是款式
干货：我把前端高级工程师DIV+CSS课件给借来了
div+css缺点
1.运用相对杂乱
相对html中的table布局来说，divcss布局相对要杂乱些，需要把握的知识更多些
2.CSS设计的网站浏览器兼容性问题比较突出
各个浏览器对CSS的支撑略有不同，但这些细小的不同也会使网站在各个浏览器中有较大的显示差异，甚至是改头换面
为什么要运用div+css
1.div+css是web规范，顺应潮流
2.补偿html标签的功用缺点。
3.加快页面加载的速度，降低流量费用。
4.对搜索引擎更加友爱，更有利于收录和抓取您的页面。
5.使页面的内容和体现别离，便于维护和管理，节约许多的人力和本钱。
运用css操控页面款式的方式
行内款式
嵌入款式
外部款式
导入款式
@importurl(外部款式表方位)；
优先等级:
行内款式表>其他的款式表
其他的款式表，优先级相同，依照导入的次序来确认他们是否起作用。
css选择器
当咱们定义一条款式规矩时候，这条款式规矩会作用于网页当中的某些元素，而咱们的规定的这些元素的规矩就叫做选择器
.id选择器
.类选择器
.标签选择器
.穿插选择器
.群组选择器
.后代选择器(包括选择器)-父级和子级用空格离隔
.通用选择器：*｛｝
css选择器
伪类选择器
同一个html元素在不同状态下的不同款式
a:visited{color:#00FF00}/*已访问的链接*/
a:hover{color:#FF00FF}/*鼠标移动到链接上*/
css的继承性和叠加性
继承性
后代元素会继承长辈元素的一些文字特点和款式
叠加性
同一个元素，被多个款式规矩指定。
因为css的继承性和叠加性，就有了css优先级的概念
选择器的优先级
干货：我把前端高级工程师DIV+CSS课件给借来了
css注释
注释
任何语言都有注释，当然CSS也不例外
CSS的注释为/*注释内容*/
块元素和行内元素
咱们已经学习了许多的HTML标签，不同的标签有不同的特性，比如从文档流的视点区分，那么标签元素分为块标签与行标签
块标签即标签元素是一个块，即有宽、高特点，同时块标签会独占一行，比如说H1～H6、P、li等标签都是块标签，当然也包括咱们行将学习的DIV标签
行标签正好与块标签意义相反，行标签不具有宽、高特性，mrgin特点的值，只要左右没有上下。也不会占一行，所以咱们能够使用行标签对文字进行区块指定不同的CSS款式达到不同的效果，行标签也许多，如em、span标签等。

css页面布局实例

都说用DIV+CSS布局来设计网站便于优化，容易被收录，那么你对DIV+CSS布局的用法是否了解？CSS布局是网页html通过DIV标签+CSS样式表代码开发制作的（html）网页的统称。DIV+CSS布局是现在非常流行的布局方法，替代了原来的表格布局。下面我们先来看下学习DIV+CSS布局的基本步骤：
DIV+CSS
一、认清学习的要求
1、弄清目的，首先要认识为什么要学习CSS？
2、心态不能急，如果你很急躁，否则会很快丧失兴趣。
3、坚持，这个不是一到两天的事情，是一个漫长的过程（至少两个月）。
二、基础学习
1、了解CSS作用是什么？（即CSS、html和JS的关系是什么，HTML结构重要性）
2、CSS基础知识、CSS属性样式
3、HTML
上面几点，一般都是很快的掌握了，也不需要做到精通，了解大概就可以。
差不多时候，开始在网上找一些psd设计稿，自己做做看，做完之后发现问题，并把他们进行总结。
三、学会分析别人网页布局
当你做psd设计的代码，发现问题，可能找不到答案或没有人帮你回答，也不要急，这时最好看看别人网页的布局结构，主要看html布局框架，进行借鉴（当然网上还有很多结构代码很槽糕）。然后了解美工图如何分析、如何使用PS工具切出需要的素材、如何使用这些切出的图片素材进行布局、布局技巧、兼容性解决与避免等。
总之：就是让自己布局时候能知道大的布局结构如何布局，建立布局思想与技巧。
四、代码的规范
当你看完很多别人的网页代码之后，你会发现，他们都有规范，这些规范网上有很多，你需要总结和背诵，当然不是死记硬背，主要在切图上多做多实践，熟了就能记住。
五、大量练习
练习是从始到终的，不要断，即使找一些简单的网页进行布局实践，开始可能开发很慢，会遇到很多小问题，也不急。
制作DIVCSS网页前思考布局：
首先我们拿到一张网页美工图片我们将从上下、上中下、左右、上中（中包括左右）下布局框架来思考。
下面通过一个实例讲解下CSS布局分析，我们以DIVCSS5列表页面分析CSS布局：
制作DIVCSS网页前思考布局
首先我们可以分析出我们DIVCSS布局重构此页面结构框架，我们可以看出是上、中、下结构，其中又包括了左右结构。
由此我们就要写此页面CSS和html时候就先从上到下从外到内原则写CSS与html。
我们首先建一个web的文件夹并在此文件夹里新建html页面命名为index.html，CSS文件命名为index.css。这里有个诀窍就是可以导入模板方式来建CSS与html初始页面，然后将CSS文件引用到html，再在CSS模板的基础上再写再添加CSS。
以下是index.html的html代码：
以下为引用的内容：
实例
<divid=”header”>我是头部（上）</div>
<divid=”centers”>
<divclass=”c_left”>我是中的左</div>
<divclass=”c_right”>我是中的右</div>
<divclass=”clear”></div>
</div>
<divid=”footer”>我是底部（下）</div>