首页 > 代码库 > 9.11上午 列表方块 格式和布局
9.11上午 列表方块 格式和布局
样式表
六、列表方块
1.有序列表变无序列表
<ol>
<li>张店</li>
<li>桓台</li>
<li>淄川</li>
</ol>
网页上显示为1. 张店 2. 桓台 3. 淄川 （竖向显示）
<ol style="list-style:none">
<li>张店</li>
<li>桓台</li>
<li>淄川</li>
</ol>
网页上显示 张店 桓台 淄川
list-style:none将列表前面的序号去掉，成为了无序列表。
<ol style="list-style:inside"> 列表前面的序号和列表内容在一起
<ol style="list-style:outside">列表前面的序号和列表内容分开
<ol style="list-style-image:url(001.png)">将列表前面的序号变成图片
七、格式和布局
1.位置 position
①fixed固定 相对于浏览器边框位置固定，上下拉滚动条不随着滚动条的上下拖拉而变化。
<div style="width:200px; height:200px; position:fixed; top:"></div>
调整位置：top：距离上边距的位置 right：距离右边距的位置 bottom：距离下边距的位置 left：距离左边距的位置
<div style="width:200px; height:200px; background-color:#03F; position:fixed; top:20px; left:20px"></div>
②absolute 相对于父级元素（浏览器、绝对定位的上级，此处的上级就是<body>）。
<body>
<div style="width:200px; height:200px; background-color:#03F; position:absolute; top:100px; left:50px"></div>
<div style="width:500px; height:500px; position:absolute; top:100px; left:100px; background-color:#FCC">
<div style="width:200px; height:200px; background-color:#03F; position:absolute; top:100px; left:50px"></div>
</div>
上面的代码里面的position的位置是相对于外面那一级的position的位置决定的。但是外面的那一级中也要有position并且值是absolute才可以，否则上一级对里面那一级就失去了约束作用。
③relative 相对位置 相对于原来自身的位置移动
网页上的元素都存在默认的边界（margin或者padding），在网页上布局开始时要把元素自身带的margin或者padding去掉，防止因为元素自身的边界不同而造成布局时各元素发生错乱，去掉方式为。
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px}
</style>
</head>
<body>
页面布局时一定要加上 *{ margin:0px; padding:0px} 如果 四周的 margin和padding如果一样的话写上一个值就可以。
实际上去掉边界时会写成 *{ margin:0px auto; padding:0px}，加上auto里面的元素会水平居中
2.流 float
right 向右流
left 向左流
<style type="text/css">
*{ margin:0px auto; padding:0px}
.text{ width:200px; height:200px; background-color:#63C; margin:0px 0px 0px 10px; float:left}
</style>
</head>
<body>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
使用 流 时，里面的元素会默认的浮上一层，流结束后，要把流清掉，清掉方式是在流结束的位置加上<div style="clear:both"></div>。使用margin时，一般要配合着流使用，自己使用没有效果。
以下代码是一个简单的导航栏
<style type="text/css">
*{ margin:0px auto; padding:0px; font-family:微软雅黑}
#menu{ width:800px; height:45px; background-color:#CCC; margin-top:20px}
.text{ width:100px; height:45px; float:left; text-align:center; line-height:45px; vertical-align:middle}
.text:hover{ background-color:#63C; color:#FFF; cursor:pointer}
</style>
</head>
<body>
<div id="menu">
<div class="text">首页</div>
<div class="text">产品中心</div>
<div class="text">产品介绍</div>
<div class="text">图集</div>
<div class="text">联系我们</div>
<div class="text">友情链接</div>
<div style="clear:both"></div>
：hover表示鼠标放上来，当鼠标放到这些元素上来以后
.text:hover{ background-color:#63C; color:#FFF; cursor:pointer} 表示把鼠标变成手。background-color:#63C表示鼠标放上后变成的背景色。 color:#FFF表示鼠标放上后文字变成什么颜色。
导航栏除了用<div>制作以外，还可以用序列制作。
<style type="text/css">
*{ margin:0px auto; padding:0px; font-family:微软雅黑}
#menu{ width:800px; height:45px; background-color:#CCC; margin-top:20px}
#menu1{width:800px; height:45px; background-color:#CCC; margin-top:20px; list-style:none}
.text{ width:100px; height:45px; float:left; text-align:center; line-height:45px; vertical-align:middle}
.text:hover{ background-color:#63C; color:#FFF; cursor:pointer}
</style>
<ul id="menu1">
<li class="text">首页</li>
<li class="text">产品中心</li>
<li class="text">产品介绍</li>
<li class="text">图集</li>
<li class="text">联系我们</li>
<li class="text">联系我们</li>
</ul>
用列表制作的导航栏和用<div>制作的是一样的效果。
<div style="width:300px; height:300px; background-color:#0F0; z-index:3; position:relative"></div>
<div style="width:300px; height:300px; background-color:#F00; position:relative; top:-100px; left:-50px; z-index:6"></div>
z-index表示分层，z-index的值越大表示图层越靠上。
9.11上午 列表方块 格式和布局