div+css布局的基本流程
做页面效果图，切图，写css样式，再写页面
用过DIV+CSS的人都知道，虽然这种布局没有用传统的table直观，但用习惯了就会感觉出DIV+CSS的优越。对于seo优化，div+css也有了明显的优势，实际应用中我搜索了DIV+CSS的常用定义项，并对其参数作了归纳和说明，与喜欢DIV+CSS的朋友共享。通用类
overflow:hidden;自动隐藏超出的内容，防止撑开层和表格的范围
!important
指定样式规则的应用优先权：
文字类
color: #FF0000;文字颜色
font-family: "Arial", "Helvetica", "sans-serif";字体
font-size: 9px;字号
text-align：center; 居中(left为居左,right为居右)
line-height：28px；行高(可用150%值)
font-style: italic;斜体(oblique偏斜体)
font-weight: bold;服务粗体(bolder特粗，400粗值)
font-variant: small-caps;小型大写字母
text-transform: capitalize;首字母大写
text-decoration: underline overline line-through blink;下划线，上划线，删除线，闪烁
text-indent: 2em;文字缩进2个字体高(或15px,即15象素)
背景类
background-attachment: fixed;固定位置(scroll滚动)
background: #0066CC;背景色(transparent透明)
background: url(/image/more2.gif);背景图片
background-repeat: repeat;重复(repeat-x横向重复，repeat-y纵向重复)
background-position: center top;水平居中 垂直顶部(left center水平居左 垂直居中)
background：url(/image/dtbg.gif) #FEFEFE no-repeat right bottom(2px 5px); 背景图片、背景颜色、图片不重复、背景图片从右下角开始(图片距左2px距上5px)
框架位置类
clear: both;两边拒排浮动对象(left左边拒排浮动对象,right右边拒排浮动对象)
float: left;浮动对象位置居左(right, 最新列车时刻表位置居右)
position：relative; 相对位置，一般在上级框架中设定 极品时刻表
position：absolute; 绝对位置，配合上级框架的设定对本级框架设定，设置top、left值
top：5px; 页面绝对或相对于框架顶端绝对位置
left：10px; 页面绝对或相对于框架左边绝对位置
width: 100px;宽100px
height: 200px;高200px(可用auto和100%值)
margin 上海火车时刻表：10px 20px 10px 20px；
上右下左页边距(值相同可省写margin:10px)
单独指定用margin-top：10px; (margin-right、margin-bottom、margin-left)
padding：20px 10px 10px 20p；
上右下左内容离边框的距离(值相同可省写padding:10px)
单独指定用padding-top：10px;(padding-right、padding-bottompadding-left)
border：#ccc 1px solid 成都列车时刻表；
四边框颜色、线宽、实线(dotted虚线,dashed点画线,double双线,ridge脊线)
单独指定用border-top：#ccc 1px solid；border-right：#ccc 1px solid
等等
项目列表类 list-style-position: outside;位置为外(inside内) list-style-image: url(/yh/image/more04.gif);项目符号图像 临客时刻表 list-style-type: disc;项目符号为圆点(circle圆圈,square方块)
扩展类 cursor: e-resize;鼠标样式 filter: Blur(Add=4, Direction=8, Strength=4);滤镜 filter: FlipH;横向翻转(FlipV gprs流量费纵向翻转)
单独设置链接
#bottool a:link{color:#fff};未访问的颜色
#bottool a:visited{color:#fff};已访问的颜色 流量软件
#bottool a:hover{color:#ff0};鼠标在链接上
这么多定义项, 其实常用也就下面几类:指定宽高值width,height;指定背景:background;指定位置:float,特殊的用position结合 top、left来定位；设定框架边距：margin；设定容器内框距：padding几项。其中在我的样式定义中取消了overflow、 clear、!important程序的定义项。
1、取消overflow:hidden是因为经反复实验，该定义项只能隐藏超出容器高度的内容而不能隐藏超出宽度的内容。而我需要的就是要能自动隐藏超出容器宽度的内容，有时反而需要容器高度能随内容的多少而撑开容器高度。
2、取消clear定义项是因为在实际应用中很真正达到理解的容器与容器的排列关系，框架或容器的位置还是用float、position、top、left等精确定位。
3、!important
指定样式规则的应用优先权。这个主要用于在IE和其它的浏览器要区别显示出的效果，我的网站就是想固定显示效果，所以不存在什么优先权。
我对DIV+CSS也还在研究之中，有不当之处请大家跟贴指正，有完善的地方也请跟贴完善。我认为用DIV+CSS来布局网站，最重要的是布局思路问题，不同的设计方案，设计的繁简大不一样。我着重框架或容器的通用性，设计出几种容器的样式，就象FS4中的标签样式，然后在需要的地方调用这个样式就行了，以达到通用性而不是专用性。、 希望 可以帮到你
解决这个问题的方法如下：
1、新建一个html文件，命名为test.html，用于讲解div+css布局的基本流程。
2、在test.html文件内，对body进行样式初始化，设置外边距margin为0，内边距padding为0，同时使用text-align设置文字居中。
3、在test.html文件内，为了讲解方便，设置所有的div高度为200px，内容的颜色为红色。
4、在test.html文件内，使用div创建网页的头部，使用margin:0 auto设置div居中，同时设置其宽度为800px，背景颜色为灰色。
5、在test.html文件内，使用div创建网页的中部，使用margin:0 auto设置div居中，同时设置其宽度为800px。
6、在test.html文件内，在网页的中部，创建两个div，用于将中部为两部分，每一个部分宽度为50%，左部分使用float:left设置左浮动，右部分使用float:right设置右浮动。
7、在test.html文件内，使用div创建网页的底部，使用clear:both清除上面div的浮动，避免影响底部的布局。同时，使用margin:0 auto设置div居中，同时设置其宽度为800px，背景颜色为#000fff。
8、在浏览器打开test.html文件，查看实现的效果，这样问题就解决了。
1、新建一个html页面。
2、在html页面上新建三个div标签，分别为这三个div添加class为:header、main、footer。
3、创建style标签用于设置css样式。在title标签下创建一个style标签，然后为header类设置div的高、背景颜色样式。
4、为显示主要内容的main类设置样式。在style标签里设置main类样式的边框、宽、高、背景颜色。
5、设置底部footer的样式。在style标签里添加footer类样式的背景颜色和高度。
6、保存好html文件后使用浏览器查看效果。
7、在浏览器上看到div标签和浏览器存在一些空白的像素，为了去掉这些空白的像素我们需要把body标签设置外边框。
8、使用浏览器重新打开后就没有看到div与浏览器存在空白的边框了。
DIV+CSS布局中主要CSS属性介绍：
Float:
Float属性是DIV+CSS布局中最基本也是最常用的属性，用于实现多列功能，<div>标签默认一行只能显示一个，而使用Float属性可以实现一行显示多个div的功能，最直接解释方法就是能实现表格布局的多列功能。
Margin:
Margin属性用于设置两个元素之间的距离。
Padding:
Padding属性用于设置一个元素的边框与其内容的距离。
Clear:
使用Float属性设置一行有多个DIV后（多列），最好在下一行开始之前使用Clear属性清楚一下浮动，否则上面的布局会影响到下面。
实例讲解：下面使用实例如果做一个简单又基本的布局，效果如下图：
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
<html xmlns=
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV+CSS布局教程</title>
<style type="text/css">
#Container{
width:1000px;
margin:0 auto;/*设置整个容器在浏览器中水平居中*/
background:#CF3;
}
#Header{
height:80px;
background:#093;
}
#logo{
padding-left:50px;
padding-top:20px;
padding-bottom:50px;
}
#Content{
height:600px;
/*此处对容器设置了高度，一般不建议对容器设置高度，一般使用overflow:auto;属性设置容器根据内容自适应高度，如果不指定高度或不设置自适应高度，容器将默认为1个字符高度，容器下方的布局元素（footer）设置margin-top:属性将无效*/
margin-top:20px;/*此处讲解margin的用法，设置content与上面header元素之间的距离*/
background:#0FF;
}
#Content-Left{
height:400px;
width:200px;
margin:20px;/*设置元素跟其他元素的距离为20像素*/
float:left;/*设置浮动，实现多列效果，div+Css布局中很重要的*/
background:#90C;
}
#Content-Main{
height:400px;
width:720px;
margin:20px;/*设置元素跟其他元素的距离为20像素*/
float:left;/*设置浮动，实现多列效果，div+Css布局中很重要的*/
background:#90C;
}
/*注：Content-Left和Content-Main元素是Content元素的子元素，两个元素使用了float:left;设置成两列，这个两个元素的宽度和这个两个元素设置的padding、margin的和一定不能大于父层Content元素的宽度，否则设置列将失败*/
#Footer{
height:40px;
background:#90C;
margin-top:20px;
}
.Clear{
clear:both;
}
</style>
</head>
<body>
<div id="Container">
<div id="Header">
<div id="logo">这里设置了padding属性介绍一下padding的用法,padding将设置文本与边框的距离。</div>
</div>
<div id="Content">
<div id="Content-Left">Content-Left</div>
<div id="Content-Main">Content-Main</div>
</div>
<div class="Clear"><!--如何你上面用到float,下面布局开始前最好清除一下。--></div>
<div id="Footer">Footer</div>
</div>
</body>
</html>
div+css布局的基本流程：
用css也需要切片，但组合的时候要比表格灵活很多，另外在css中切片的目的一般是为了美观而不是布局，比如为图片添加边框,制作导航栏。
css布局一般是把html先做好再用css布局，不过在做html时就要考虑到布局，添加足够的id，class属性，足够的层，有时也要添加必要的空标签.(css的html与表格时期的html有很大不同)
css布局的优势是更灵活,更精确，但也存在很多的问题，最突出的就是兼容性的问题--不同浏览器对同一段css代码会有不同的显示，这个问题困扰了无数网页制作者，如果楼主致力于css布局一定要注意这方面的问题(解决这个问题的方法通常是用 css hack)，同时还要鼓励楼主不要因为这一原因放弃css。
都是一些经典的css作品(所有作品都是完全相同的html)
先要理解一下网页的基本构成，就像人一样，他有
头
身体
脚
一般头和脚都是不变的，然后把各个部位用div做一个大的框架，然后再雕刻细节。
说白了，跟画画一个样，画草图，框架，然后描绘细节。
CSS布局 元素位置偏移
你在#divtest ul中加上margin:0;padding:0;divtest ul{ margin:0;padding:0;position:absolute;height:200px;width:1500px;overflow:hidden;border:#C03 dotted 1px;top:0;left:0;}
网页用什么字体和大小网页用什么字体和大小有关
2.DIVCSS，这是一种前台网页布局的技术。使用这项技术，搜索引擎可以更好地抓取网页，加快用户打开页面的‘速度’；3.PHOTOSHOP，是平面设计师常用的工具。网页设计其实是平面设计的一种，但它不同于平面设计，因为它必须符合网页制作的一些规范。4.DREAMWEAVER这种专业的网页制作工具，用PHOTOSHOP设计一个...
菜单项前面的图标叫什么?用css怎么写?
(01, 02, 03, 等。) lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。) upper-roman 大写罗马数字(I, II, III, IV, V, 等。) lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) upper-alpha 大写英文字母The marker is u...
哪位大佬有 精通HTML+CSS网页开发与制作,有这个的百度网盘资源吗...
https:\/\/pan.baidu.com\/s\/1eD52unGP4xvMktgiVPCH_A 提取码：1234 2018年清华大学出版社出版的图书 《精通HTML+CSS网页开发与制作》是2018年清华大学出版社出版的图书，作者是车云月。本书全面、详实地介绍使用HTML 进行网页制作的要点，同时讲解了目前流行的Web 标准与CSS 网页布局实例，以及网站设计、...
如何通过html和css完成下拉菜单的制作?
您要的效果应该是下面这样的：示例代码如下：<!DOCTYPE HTML> 纯 CSS 多级菜单 .menu{} .menu ul,.menu li{margin:0; padding:0;list-style:none outside;} .menu>ul{overflow:auto; display:inline-block;} .menu a,.menu span{ cursor:default; height:30px; line-he...
(设置监视器的刷新频率为85赫兹,以图片形式保存。图片保存之后。)恢 ...
http:\/\/www.4shared.com\/photo\/pxlEZ2iV\/20131127.htmlhttp:\/\/www.4shared.com\/photo\/6wykc6ZI\/20131127.htmlhttp:\/\/www.4shared.com\/photo\/qrz5qQFM\/20131127.htmlhttp:\/\/www.4shared.com\/photo\/q-gEQ14C\/20131127.htmlhttp:\/\/www.4shared.com\/photo\/k1oPONB8\/20131127.htmlhttp:\/\/www.4shared.com\/photo...
如何css控制div始终在整个页面最底部
function scall(){ document.write (''+ClosebuttonHtml+''+AdContentHtml+'');var Toppx = window.screen.height-AdDivH;document.getElementById("Javascript.LeftDiv").style.top=document.body.scrollTop+Toppx;} window.onscroll=scall;window.onresize=scall;window.onload=scall;...
div+css如何编写有序列表??有序列表如何让它01..02..03..排列
前提是你懂得点动态脚本的基础理念才可以。你要明白，CSS不过是个定义好的样式，等着你调用的样式。即是是XML，它现在也不能扩展到自动定义你喜欢的样式列表。你在下面运用的是ol样式，上面却定义ul的样式，是肯定没用的。他们是两种列表。建议楼主把书静下心来，哪怕简单的看上两天，把基础看好，...
CSS中超链接前的圆点如何去掉
1、是由于li标签默认的标签 例如：链接 默认情况下,li标签会有一个默认的小圆点，此时要去掉这个圆点，可以加上 li{list-style:none} 就可以了 2、另一种就是你在链接中加入了相应的背景，找到相应的这个背景样式，去掉背景即可 3、还有一种可以有，这个加点是链接的一部分，即这个圆点是链接里的文...
css的ol 代码怎么反向排序,比如321这样排序,不是123.
Coffee Tea Milk其他普通排序：类型值 生成样式 序列举例 A 大写字母 A、B、C、D、E a 小写字母 a、b、c、c、e I 大写罗马数字 I、II、III、IV、V i 小写罗马数字 i、ii、iii、iv、v 1 阿拉伯数字 1、2、3、4、5 ...
陟哈大蒜： <style type=＂text/css＂> div {} div span {}<!--标题栏--> div p {}<!--内容栏--></style><div><span>标题栏</span><p>内容栏</p></div> 希望能举一反三
盱眙县18448533623： 请简述div+css布局网站流程 - ？
陟哈大蒜： 1. 整理网站需求2. UE设计网站框架3. UI完成网站效果图4. web前端开发者切图5. 用div+css实现网页效果
盱眙县18448533623： div+css布局过程？
陟哈大蒜： div +css 你说的差不多是对的.现在的网页框架基本是用div来搭了.table作为里面的一部分,现在的网页不会单用table来搭框架,因为后期改样式很麻烦需要一个一个改.而div+css不一样了,框架和样式是分离的.div负责框架,css负责样式,后期该样式只要改css就行.建议你以后学校div+css .不会很困难,我也是差不多自学,看了一本div+css的书,仔细看下来,结合电脑用dw软件配合.学了2、3个月把,差不多懂了.——(时尚三国)
盱眙县18448533623： css和div布局到底怎么布局啊,需要经常使用哪些元素呢 - ？
陟哈大蒜：所谓的DIV+CSS,主要是使用CSS来控制HTML中的各种元素对页面进行布局排版. 在这里写上DIV是为了强调:过去的网页布局主要是使用table标签进行的,而使用table布局不够灵活,所以现在的网站大多数都使用div标签对网页...
盱眙县18448533623： 请问div+css网页布局具体要怎样做呢??？
陟哈大蒜： 我来带你切一遍: 首先,竖着切一刀,分成左右两块:左边div id=leftwrap,右边div id=rightwrat 然后,把leftwrap横切一刀,分成logo(花藤和木牌)和category(产品分类);右边切成5块,分别是:navigator(导航条),banner(广告图片),new_product(最新产品),hot_product(热点产品),footer(剩余的部分) OK了!
盱眙县18448533623： 怎么用css+div布局一个网页!具体的思路是怎么样的?先后顺序是怎么的? - ？
陟哈大蒜： div+css怎么布局div+css布局现在是主流,能提高网页加载速度,提高后期代码维护效率.步骤阅读 方法/步骤 >01 div 所谓<div>标签我们可以理解为一个盒子. 例如:<div class=＂top＂ style='border:1px solid #000;background-color:#EEE'>...
盱眙县18448533623： 怎么用div+css怎么制作网页,求过程 - ？
陟哈大蒜： 您好,div+css.首先,您要先确定版面.也就是设计版面.然后用css和div编写.(也要有图片素材) 比如:规定一个宽度为1000像素,高度为500像素,背景颜色为黑色,而且居中的区域.先确定css.#tese{ background:#000;width:1000px;height:500px;margin:auto;} 接着就是div.希望能够帮到您,谢谢.
盱眙县18448533623： 用CSS就+div设计网页的步骤是什么?？
陟哈大蒜： div说白了就是框架,css就是样式,用div代码先写出网页的整体框架,再用CSS施加你想要的样式. 建议你先学习一下xhtm+css的基础知识再开始制作网页,凡事都要有个循序渐进的过程对不对
盱眙县18448533623： DIV+CSS是怎么布局的?？
陟哈大蒜： 通过CSS样式表控制DIV的位置进行布局的,CSS样式表不光可以控制DIV的位置,也可以控制网页里图像,文字等各种元素的样式
盱眙县18448533623： web试题 简答题 简述div css布局和基本步骤 - ？
陟哈大蒜： 1. 看UI设计稿. 2. 根据设计稿分块 3. 写出div的布局 4. 根据设计稿写css样式
