|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束。
破洛洛文章简介:HTML和CSS做网页实例教程:边框暗影和内容垂直居中.
本帖代码完成的是边框暗影(良多时分被勇于顶部banner框),及让框架内内容垂直居中。
html+CSS实例效果(2):边框为暗影及DIV内容垂直居中效果
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>边框为暗影效果</title>
<styletype="text/css">
div{border-width:1px;border-style:solid;padding:1px;}
.a{background-color:#F3F3F3;border-color:#FBFBFB;}
.b{background-color:#D8D8D8;border-color:#E8E8E8;}
.c{background-color:#FFF;border-color:#BBB;height:100px;color:#ff0000;}
.middle-demo-4{width:300px;border:#FF00001pxsolid;height:300px;position:absolute;}
.middle-demo-4div{border:#0099001pxsolid;height:20px;width:300px;position:absolute;margin-top:-10px;top:50%;left:0;}
.middle-demo-4divdiv{border:#3300661pxsolid;height:20px;width:300px;margin-top:-12px;margin-left:-2px;position:relative;top:50%;left:0;}
</style>
</head>
<body>
<divclass="a">
<divclass="b">
<divclass="c">
边框为暗影效果
</div>
</div></div>
<divclass="middle-demo-4">
<div>
<div>
让内容垂直居中
</div>
</div>
</div>
</body>
</html>
</p>
表现和结构分离,在团队开发中更容易分工合作而减少相互关联性 |
|