《
CSS突破局限 制作框列表效果》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/03023343R013.htm
--> [
网站建设之]CSS突破局限 制造框列表效果
今天要说的是，突破局限！
先给大家看看一个效果
效果图
估量很多同窗看到了，会想边框是用图片做出来的吧！
实在那是用了一个H3跟一个DIV就可以层叠出以上效果
首先：
1.把背景设置为玄色
body{
background:#000;
color:#fff,
CSS相对定于与绝对定位的区别;
}
2. 写一个DIV框
div {
width:400px;
height:200px;
margin:50px auto;
border:1px solid #fff;
}
3.在DIV框中，嵌套一个H3标签
<div>
<h3></h3>
</div>
h3 我们给它一个宽度 100像素 高度 30像素
让他的边框是白色
4.突破局限 应用position属性
此时 H3标签已经被DIV包含了，并且靠顶部左边地位
下来，我们对它进行定位显示
估计许多学生会问，DIV包括了<H3>标签，那么会h3能显示的范畴也就只能在DIV区域内。
果然是这样吗？我们给H3标签赋予position属性，值设置relative 让它绝对定位
那么我们就可以用Left right top bottom 等属性来对它定位了
由于、H3默认已经靠顶部了，我们盼望他越出DIV边界再往上一点
那么我们可以给他设置一个
top:-15px;
这个属性即可，
这样，这样好H3标签有正好居中压线
当然，TOP的值你可以给-30甚至更高自定义
假如发明透过H3标签显示DIV的边框，
可以给H3标签设置一个与背景一样的色彩，
这样就会盖过被压住局部DIV上边框了
效果就这样做完了
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浅谈CSS突破局限</title>
<style type="text/css">
ul {
list-style:none;
margin-top:0px;
width:300px;
position:relative,
css的语法;
top:-20px;
}
li {
border-bottom:1px dashed #ccc;
margin-top:10px;
}
body{
background:#000;
color:#fff;
}
div {
width:400px;
height:200px;
,
CSS的背景图像属性background; margin:50px auto;
border:1px solid #fff;
}
h3 {
width:100px;
height:30px;
line-height:30px;
text-align:center;
border:1px solid #fff;
position:relative;
top:-15px;
background:#000;
left:20px,
CSS的未来：一些试验性CSS属性;
}
</style>
</head>
<body>
<div>
<h3>热门消息</h3>
<ul>
<li>,
CSS的常用技巧介绍;突破局限CSS突破局限CSS</li>
,
CSS的小技巧;<li>突破局限CSS突破局限CSS</li>
<li>冲破局限CS打破局限CSSS</li>
<li>突破局限CSS突破局限CSS</li>
,
css的好习惯; <li>突破局限CSS突破局限CSS</li>
,
CSS的”弹出式“图像浏览器; <li>,
CSS特殊性概念知识普及;突破局限CS突破局限CSS</li>
</ul>
</div>
<div>
<h3></h3>,
CSS特殊性概念 样式规则的次序;
</div>
</body>
</html>
提醒：CSS供给了使用负数作为属性值
通过给负数值咱们能够做出意想不到的后果
Tag：CSS 框列表 CSS 框列表
(责任编辑：网站建设)
CSS突破局限 制作框列表效果相关文章