在对css基础知识有了一定的掌握后就可以开始学习div+css的布局方法了。DIV+CSS的布局方法简单来说就是使用div标签作为容器,使用css技术排布标签的布局方法。常用的css布局方式有浮动、定位等。
常用边框样式
属性值 | 样式 |
none | 无边框 |
hidden | 隐藏边框 |
dotted | 点线 |
dashed | 虚线 |
solid | 实线边框 |
double | 双线边框,两条单线与其间隔的和等于指定的border-width值 |
groove | 根据border-color的值画3D凹槽 |
ridge | 根据border-color的值画菱形边框 |
inset | 根据border-color的值画3D凸边 |
outset | 根据border-color的值画3D凹边 |
常用块级元素和行内元素
块级元素 | 行内元素 |
blockquote | a |
dir | b |
div | span |
fieldset | cite |
form | em |
H1-h6 | i |
hr | img |
dl | input |
ol | label |
ul | select |
p | br |
pre | strong |
| textarea |
块级元素和行内元素的区别
| 排列方式 | 可控属性 | 宽度 |
块级元素 | 垂直排列 | 高度、行高以及上下边距都可控制。 | 其宽度默认情况下与其父级元素宽度一致。可以设置width属性改变其宽度。 |
行内元素 | 水平排列 | 高度及上下边距都不可控制。 | 宽度就是其包含的文字或者图片的宽度,设置width属性不生效。 |
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >
< title >两个元素的浮动应用< / title >
< style > *{ margin:0; padding:0; font-size:14px; }
div.father{ width:300px; height:300px; /*设置父元素的高度和宽度都为300像素*/ border:1px solid black; margin:10px;}/*设置父元素的边框为1像素黑色实线,边距为四周10像素*/
div.one{ width:100px; height:100px;/*设置第一个div标签的高度和宽度都为100像素*/ background-color:#999;/*设置第一个div标签的背景色为灰色*/ float:left; margin:10px;}/*设置第一个div标签为左浮动,四周边距为10像素*/
div.two{ width:100px; height:100px;/*设置第二个div标签的高度和宽度为100像素*/ background-color:#999; /*设置第二个div标签的背景色为浅灰色*/ float:left; margin:10px;}/*设置第二个div标签为左浮动,四周边距为10像素*/
< / style >
< / head >
< body >
< div class="father" >
< div class="one" >第一个div标签< / div >
< div class="two" >第二个div标签< / div >
< / div >
< / body >
< / html >
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >
< title >三个元素的浮动应用< / title >
< style >
*{ margin:0; padding:0; font-size:14px;}
div.father{ width:300px; height:300px;/*设置父元素的高度和宽度都为300像素*/ border:1px solid #000; margin:10px;}/*设置父元素的边框为1像素黑色实线,四周边距10像素*/
div.one,div.two,div.three{ background-color:#ccc;/*设置三个div标签的背景色为浅灰色*/ float:left;/*设置三个div标签为左浮动*/ width:100px; height:100px;/*设置三个div标签高度和宽度都为100像素*/ margin:10px;/*设置三个div标签四周边距10像素*/ display:inline;}/*设置三个div标签的显示属性为inline*/
< / style >
< / head >
< body >
< div class="father" >
< div class="one" >第一个div标签< /div >
< div class="two" >第二个div标签< /div >
< div class="three" >第三个div标签< /div >
< /div >
< /body >
< /html >
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns="http://www.w3.org/1999/xhtml" >
< head>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >
< title>单个元素的相对定位< /title >
< style >
*{ margin:0; padding:0; font-size:14px;}
div.father{ width:300px; height:300px;/*设置父元素的高度和宽度都是300像素*/ border:1px solid #000;/*设置父元素的边框1像素黑色实线*/ margin:10px;}/*设置父元素四周边距为10像素*/
div.one{ background-color:#666;/*设置第一个div标签的背景色为浅灰色*/ width:100px; height:100px;/*设置第一个div标签的高度和宽度都为100像素*/ position:relative;/*设置第一个div标签为相对定位*/ top:10px;}/*设置第一个div标签从上往下偏移10像素*/
< /style >
< /head >
< body >
< div class="father" >
< div class="one" >< /div >
< /div >
< /body >
< /html >
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >
< title >两个元素的相对定位< /title >
< style >
*{ margin:0; padding:0; font-size:14px;}
div.father{ width:300px; height:300px;/*设置父元素的高度和宽度为300像素*/ border:1px solid #000;/*设置父元素的边框为1像素黑色实线*/ margin:10px;}/*社会组父元素四周边距为10像素*/
div.one{ width:100px; height:100px;/*设置第一个div标签的高度和宽度为100像素*/ position:relative;/*设置第一个div标签为相对定位*/ top:10px;}/*设置第一个div标签从上往下偏移10像素*/
div.two{ background-color:#999;/*设置第二个标签背景色为浅灰色*/ width:100px; height:100px}/*设置第二个div标签高度和宽度都是100像素*/
< /style >
< / head >
< body >
< div class="father" >
< div class="one" >第一个div标签< /div >
< div class="two" >第二个div标签< /div >
< /div >
< /body >
< / html >
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >
< title >单个元素的绝对定位< / title >
< style >
*{ margin:0; padding:0; font-size:14px;}
div.father{ width:300px; height:300px;/*设置父元素的高度和宽度都是300像素*/ border:1px solid #000;/*设置父元素的边框为1像素黑色实线*/ margin:10px;}/*设置父元素四周边距为10像素*/
div.one{ background-color:#333; /*设置第一个div标签的背景色为灰色*/ width:100px; height:300px;/*设置第一个div标签的高度和宽度都是100像素*/ position:absolute;/*设置第一个div标签为绝对定位*/ top:10px;}/*设置第一个div标签从上往下偏移5像素*/
< / style >
< /head >
< body >
< div class="father" >
< div class="one" >< /div >
< /div >
< /body >
< /html >
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >
< title >两个元素的绝对定位< / title >
< style >
*{ margin:0; padding:0; font-size:14px;}
div .father { width:300px; height:340px; /*设置父级元素的高度和宽度都为300像素*/ border:1px solid #000;/*设置父级元素的边框为1像素黑色实线*/ margin:10px;/*设置父元素四周边距为10像素*/ position:relative/*设置父元素为相对定位*/ }
div.one{ background-color:#ccc;/*设置第一个div标签的背景色为浅灰色*/ width:100px; height:100px;/*设置第一个div标签的高度和宽度为100像素*/ position:absolute;/*设置第一个div标签为绝对定位*/ }
div.two{ background-color:#999999; /*设置第二个div标签的背景色为浅灰色*/ width:100px; height:100px;/*设置第二个div标签的高度和宽度都是100像素*/ position:absolute;}/*设置第二个div标签为绝对定位*/
< / style >
< body >
< div class="father" >< /div >
< div class="one" >< /div >
< div class="two" >< /div >
< /body >
< /html >
CSS有助于实现负责任的Web设计,CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
CSS提供了控制背景颜色和背景图片的多个属性,用于产生表现丰富的网页背景。这样能使单调的页面变得丰富多彩。
图片在网页设计中占据相当重要的位置。使用css样式可以设置图片的大小和边框等属性。恰当的使用css其他属性和配合页面排布也能创造出很精美的图片效果。
新闻中心
2018-07-13
2018-07-06
2018-07-06
2018-07-04