本文目录
- 如何系统的学习css配合div
- 谁有div+css实例教程
- css和div布局到底怎么布局啊，需要经常使用哪些元素呢
- div+css如何布局方块，如图，求一份简单明了的教程来总结display,float,position,clear的用法
- 如何学好div+css
- div css布局技巧
如何系统的学习css配合div
你会不会HTML？不会要先看懂HTML代码。如果你是写程序的HTML代码应该很容易懂的吧。如果你会HTML代码，那么你只要理解了DIV的盒子模型，可以从简单的布局开始做，CSS是在练习中才能学到东西。多写就是了。最难的是模块布局，浮动，浏览器兼容这些问题。当然，接触到大项目的时候，要考虑的是代码的精简，CSS的重用效率及易读性。归结到最后是思路的高低决定写的程序的好与不好。你的那张图中的效果，如果不用圆角的效果，是很简单的，首先分成两个部分大块就是一个DIV背景为绿底色：《div style=“background-color:#D6EFCE;“》《/div》然后在这个DIV里分成两个部分，一个是“回答”这一行，一个是白底的问题内容部分：《div style=“background-color:#D6EFCE;width:300px;“》《div style=“width:300px;height:20px;“》《/div》《!--回答--》《div style=“width:300px;height:100px;background-color:#fff;“》《/div》《!--白底区块--》《/div》然后定义其模块中的其它元素：《div style=“background-color:#D6EFCE;width:300px;border:1px solid #ccc;“》《div style=“width:300px;height:20px;“》《b》回答《/b》 共1条《/div》《!--回答--》《div style=“width:300px;height:100px;background-color:#fff;margin:2px;“》《p》问题内容《/p》《p》提问者 相关信息《/p》《p》采纳按钮《/p》《/div》《!--白底区块--》《/div》基本的形式就出来了接下来将CSS整理出来与DIV模块进行分离，如下代码:-------------此行不算------------------《style type=“text/css“》/* BODY区定义 */body{margin:20px; /* 定义外边距 */padding:0; /* 定义内边距 */}/* 大模块 */.all {background-color:#D6EFCE; /* 定义背景色 */width:300px; /* 宽度300px */border:1px solid #cccccc; /* 表示边框为1PX 实线 #cccccc色 */padding:2px; /* 定义DIV的内边距margin值 */}/* 问题 */.wengti {height:20px; /* 定义高度 */line-height:28px; /* 定义文字行高 */margin-left:10px; /* 定义左外边距 */}/* 白底内容区 */.neirong {height:100px; /* 定义高度 */background-color:#ffffff; /* 定义背景色白色 */margin:2px; /* 定义DIV外边距margin值 */}/* 白底内容区P标签属性 */.neirong p {margin-left:10px; /* 定义左外边距 */margin-right:10px; /* 定义左外边距 */}《/style》《div class=“all“》《div class=“wengti“》《b》回答《/b》 共1条《/div》《!--回答--》《div class=“neirong“》《p》问题内容《/p》《p》提问者 相关信息《/p》《p》采纳按钮《/p》《/div》《!--白底区块--》《/div》---------此行不算------------可以将以上代码保存为.htm格式的网页文件看效果或者在这个页
谁有div+css实例教程
背景属性（Background）background 在一个声明中设置所有的背景属性。 1 background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 1 background-color 设置元素的背景颜色。 1 background-image 设置元素的背景图像。 1 background-position 设置背景图像的开始位置。 1 background-repeat 设置是否及如何重复背景图像。 1 边框属性（Border和Outline）border 在一个声明中设置所有的边框属性。 1 border-bottom 在一个声明中设置所有的下边框属性。 1 border-bottom-color 设置下边框的颜色。 2 border-bottom-style 设置下边框的样式。 2 border-bottom-width 设置下边框的宽度。 1 border-color 设置四条边框的颜色。 1 border-left 在一个声明中设置所有的左边框属性。 1 border-left-color 设置左边框的颜色。 2 border-left-style 设置左边框的样式。 2 border-left-width 设置左边框的宽度。 1 border-right 在一个声明中设置所有的右边框属性。 1 border-right-color 设置右边框的颜色。 2 border-right-style 设置右边框的样式。 2 border-right-width 设置右边框的宽度。 1 border-style 设置四条边框的样式。 1 border-top 在一个声明中设置所有的上边框属性。 1 border-top-color 设置上边框的颜色。 2 border-top-style 设置上边框的样式。 2 border-top-width 设置上边框的宽度。 1 border-width 设置四条边框的宽度。 1 outline 在一个声明中设置所有的轮廓属性。 2 outline-color 设置轮廓的颜色。 2 outline-style 设置轮廓的样式。 2 outline-width 设置轮廓的宽度。 2 文本属性（Text） color 设置文本的颜色。 1 direction 规定文本的方向/书写方向。 2 letter-spacing 设置字符间距。 1 line-height 设置行高。 1 text-align 规定文本的水平对齐方式。 1 text-decoration 规定添加到文本的装饰效果。 1 text-indent 规定文本块首行的缩进。 1 text-shadow 规定添加到文本的阴影效果。 2 text-transform 控制文本的大小写。 1 unicode-bidi 设置文本方向。 2 white-space 规定如何处理元素中的空白。 1 word-spacing 设置单词间距。 1 字体属性（Font） font 在一个声明中设置所有字体属性。 1 font-family 规定文本的字体系列。 1 font-size 规定文本的字体尺寸。 1 font-size-adjust 为元素规定aspect值。 2 font-stretch 收缩或拉伸当前的字体系列。 2 font-style 规定文本的字体样式。 1 font-variant 规定文本的字体样式。 1 font-weight 规定字体的粗细。 1 外边距属性（Margin） margin 在一个声明中设置所有外边距属性。 1 margin-bottom 设置元素的下外边距。 1 margin-left 设置元素的左外边距。 1 margin-right 设置元素的右外边距。 1 margin-top 设置元素的上外边距。 1 内边距属性（Padding） padding 在一个声明中设置所有内边距属性。 1 padding-bottom 设置元素的下内边距。 1 padding-left 设置元素的左内边距。 1 padding-right 设置元素的右内边距。 1 padding-top 设置元素的上内边距。 1 列表属性（List） list-style 在一个声明中设置所有的列表属性。 1 list-style-image 将图象设置为列表项标记。 1 list-style-position 设置列表项标记的放置位置。 1 list-style-type 设置列表项标记的类型。 1 marker-offset 2 内容生成（Generated Content） content与:before以及:after 伪元素配合使用，来插入生成内容。 2 counter-increment 递增或递减一个或多个计数器。 2 counter-reset 创建或重置一个或多个计数器。 2 quotes 设置嵌套引用的引号类型。 2 尺寸属性（Dimension） height 设置元素高度。 1 max-height 设置元素的最大高度。 2 max-width 设置元素的最大宽度。 2 min-height 设置元素的最小高度。 2 min-width 设置元素的最小宽度。 2 width 设置元素的宽度。 1 定位属性（Positioning） bottom 设置定位元素下外边距边界与其包含块下边界之间的偏移。 2 clear 规定元素的哪一侧不允许其他浮动元素。 1 clip 剪裁绝对定位元素。 2 cursor 规定要显示的光标的类型（形状）。 2 display 规定元素应该生成的框的类型。 1 float 规定框是否应该浮动。 1 left 设置定位元素左外边距边界与其包含块左边界之间的偏移。 2 overflow 规定当内容溢出元素框时发生的事情。 2 position 规定元素的定位类型。 2 right 设置定位元素右外边距边界与其包含块右边界之间的偏移。 2 top 设置定位元素的上外边距边界与其包含块上边界之间的偏移。 2 vertical-align 设置元素的垂直对齐方式。 1 visibility 规定元素是否可见。 2 z-index 设置元素的堆叠顺序。 2 打印属性（Print） orphans 设置当元素内部发生分页时必须在页面底部保留的最少行数。 2 page-break-after 设置元素后的分页行为。 2 page-break-before 设置元素前的分页行为。 2 page-break-inside 设置元素内部的分页行为。 2 widows 设置当元素内部发生分页时必须在页面顶部保留的最少行数。 2 表格属性（Table） border-collapse 规定是否合并表格边框。 2 border-spacing 规定相邻单元格边框之间的距离。 2 caption-side 规定表格标题的位置。 2 empty-cells 规定是否显示表格中的空单元格上的边框和背景。 2 table-layout 设置用于表格的布局算法。 2 伪类（Pseudo-classes） :active 向被激活的元素添加样式。 1 :focus 向拥有键盘输入焦点的元素添加样式。 2 :hover 当鼠标悬浮在元素上方时，向元素添加样式。 1 :link 向未被访问的链接添加样式。 1 :visited 向已被访问的链接添加样式。 1 :first-child 向元素的第一个子元素添加样式。 2 :lang 向带有指定lang属性的元素添加样式。 2 伪元素（Pseudo elements） :first-letter 向文本的第一个字母添加特殊样式。 1 :first-line 向文本的首行添加特殊样式。 1 :before 在元素之前添加内容。 2 :after 在元素之后添加内容。 2 PS：每行后面的数字是CSS版本支持
css和div布局到底怎么布局啊，需要经常使用哪些元素呢
所谓的DIV+CSS，主要是使用CSS来控制HTML中的各种元素对页面进行布局排版。在这里写上DIV是为了强调：过去的网页布局主要是使用table标签进行的，而使用table布局不够灵活，所以现在的网站大多数都使用div标签对网页进行整体的布局。使用CSS和div布局，你可以先把整个网页划分成几块，然后在html里每一块用一个div框起来，然后对相应的div定义CSS，将其放置到网页中相应的位置，完成整体布局。比如你要要做一个现在你看到的百度知道的页面：页面基本分为了3部分，上面是百度知道的logo、百度的跳转链接、搜索框和按钮；下面的左边是百度知道的当前问题和其回答；右边是用户信息、广告等内容。（这里被我简化了，其实最上面有用户信息条，中间有当前页面在百度知道的路径，最下面还有footer网站信息）我们就可以在html里写4个div:《div id=“wrap“》《div id=“top“》《/div》《div id=“left“》《/div》《div id=“right“》《/div》《/div》然后给他们定义cssbody{text-align:center;}/*为了使网页的内容全部显示在中间*/#wrap{width:960px;margin:0 auto;}/*为了让1024*768的用户能看全，定义了网页的宽度*/#top{width:100%;height:100px;}/**/#left{width:660px;float:left}/*向左浮动*/#right{width:290px;float:right;}/*向右浮动*/这样网站的整体布局就完成了。（这部分代码我没有验证，嘻嘻）注：事实上我给这三个div的命名方式并不是很好，不应该使用它的样式类型或者位置进行定义，而要使用该网页元素的实际内容进行定义。一般来说要以这个div里面放的内容来定义。比如百度给最上方的用户信息条起名usrbar。这样在给网站改版或者做调整的时候可以明确每个div的意义。完成整体布局以后，就可以对网页中的每一个区域进行具体的排版。每一部分的排版，是使用一楼提到的标题、段落、列表、表格、超链接等网页标签，然后使用CSS对标签进行相应的定义，使其达到你预期的效果。注意：div这类标签也是可以使用的，但是具体用什么标签要看具体情况。（其实你全部使用div都是可以的，如果你不嫌麻烦的话。）使用正确的标签，可以让你的网页代码更容易阅读和修改。比如一般看到网页中出现ul li标签，就可以知道这里定义了列表。用到h1-h7标签一般就是定义不同等级的标题。具体如何使用CSS布局网页，建议你先学习HTML，然后看一看CSS。这些内容你不一定要背过，但是一定要了解，HTML和CSS都可以做到什么。以后在使用的过程中遇到不懂的就查。没事找几个简单的页面，自己模仿着做下来，多练练手就好了。推荐教程：你可以去我下面写的网站看看，这里是最基本的教程。CSS部分等你熟悉了最基本的用法后，可以把《精通CSS》看看，这本书的帮助很大，强烈推荐（我自己学这本的）。
div+css如何布局方块，如图，求一份简单明了的教程来总结display,float,position,clear的用法
可以教你一个不算最好，但是最简单的办法，首先你既然已经确认了布局，但是不知道怎么用css写出来，那么你可以想想一下这就是一些框，小框只能放进大框里面。那么整个布局最外面的是一个无颜色的大框《div style=“width: 200px; height: 300px;“》.....《/div》而在这个大框里面又有6个100x100的小框《div style=“width: 100px; height: 100px“》.....《/div》以此类推，先做好外层的大框，然后在里面放进小框，你只要计算好每个框的大小就能够很轻松的弄出你想要的布局。至于中间的间距我想应该很轻松吧。用的是div的话display一般是用不到的，div用到display一般是用来隐藏或者显示。而position对与你当前的布局也用不到，那是用来定位用的，可以理解为让div脱离其他布局的影响独立出来，所以可能会盖住你原来的布局。float是用在同一层级的排版，比如最外面大框框住的六个小框属于同一层级，但是不同框里面的div是不属于同一层级的，只有同一div里面的同层级div才会在float的影响下对齐排列。所以其实你按照我上面说的计算好宽高的话，float也是可以用不到的。clear也是可以不用。相信你多写一些css以后会理解这些东西的用法的。《div style=“width: 200px; height: 300px;“》 《div style=“width: 98px; height: 98px; margin-bottom: 2px; margin-right: 2px; background:red;“》《/div》 《div style=“width: 98px; height: 98px; margin-bottom: 2px; margin-right: 2px;“》 《div style=“width: 48px; height: 48px; margin-right: 1px; margin-bottom: 1px; background:yellow;“》《/div》 《div style=“width: 48px; height: 48px; margin-right: 1px; margin-bottom: 1px; background:yellow;“》《/div》 《div style=“width: 48px; height: 48px; margin-right: 1px; margin-bottom: 1px; background:yellow;“》《/div》 《div style=“width: 48px; height: 48px; margin-right: 1px; margin-bottom: 1px ; background:yellow;“》《/div》 《/div》 《div style=“width: 98px; height: 98px; margin-bottom: 2px; margin-right: 2px;background:orange;“》《/div》 《div style=“width: 98px; height: 98px; margin-bottom: 2px; margin-right: 2px; background:green;“》《/div》 《div style=“width: 98px; height: 98px; margin-bottom: 2px; margin-right: 2px;“》 .... 《/div》 《div style=“width: 98px; height: 98px; margin-bottom: 2px; margin-right: 2px;“》 .... 《/div》《/div》
如何学好div+css
学习CSS并不单单只是学习css，还有很多东西要学，1、学习CSS必须先学会Dreamweaver或者其他的编写代码的软件，不过推荐使用DW，一则比较容易上手，而来你编写CSS代码也比较方便。2、有了DW的基础你就可以开始学习CSS了，这个你就先要了解CSS的命名规则以及一些简单的语法，如果你需要更加熟练的掌握他并运用好他，成为一名优秀的设计师的话，最好学习一下C语言，然后再去学习一下js、ajax这些脚本语言，对你日后的工作或者学习有很大帮助。因为很多很炫的效果都是通过ajax以及CSS相互配合完成的。3、学什么都要有耐心和进取心，不能太浮，一定要沉下去，这样你才会完全掌握他精通他。先学html网页标记语言很简单的。只用会简单应用就可以。然后学CSS建议用Dreamweaver CS3学习。刚刚开始就会觉得很迷茫 我也理解的，看书也看不懂，可以上慕课网上找找一些教学视频来看。反正都是免 费 的。看看楼主你有没有这方面的兴趣和天分啦。希望对您有帮助啊
div css布局技巧
DIV CSS网站布局的八个小技巧： 1.若有疑问立即检测。 在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS都有检测工具可用。请注重，在文件开头的错误，可能因为不当的结构等因素造成更多错误；我们建议先修正一些最明显的错误之后重新检测，这样也许会让错误数量爆减。 2.使用浮动功能时记得适当清除指令。 浮动是个危险的功能，未必会产生所期望的结果。假如碰到浮动元素延伸到外围容器的边框或者其他不正常情况，先确定的做法是正确的。 3.边界重合时利用padding或border来避免。 可能会为了一点不应该出现的空间而焦头烂额，或者需要一点点空间时，怎样都挤不出来。假如有用到margin，那么很轻易产生边界的重合。 4.DIV CSS网站布局时尝试避免同时对元素指定padding/border以及高度或宽度。 Windows版IE经常导致width与height的计算问题。有些方法可以解决此问题，但假如母元素需要指定高度与宽度时，最好能够在母元素之内的子元素套用margin,或者当子元素需要指定高度与宽度时，在母元素套用padding以达效果。 5.DIV CSS网站布局时不要依靠min-width/min-height。 Windows版IE并不支援两种语法。但是在某种程度下，windows版IE可以达到相当于min-width/min-height的效果，所以只要对IE做点过滤功能，即可达到想要的结果。 6.若有疑问，先减少百分比。 有时候某些错误会使50%50%成为100.1%，使网页出现问题。这时请尝试将这些值改为49%，甚至49.9%。 7.记住“TRBL”写法。 DIV CSS网站布局中border，margin与padding的简写语法有特定顺序，从上方开始顺时针方向转动：top,right,bottom,left.所以margin:01px3px5px;的结果是上方无边界，右边1像素，以此类推。记住“TRBL”，就不会弄错次序了。 8.只要不是零的值，都要指定单位。 CSS需要对每个font，margin等各种值指定单位。
