博客页面设计1:圆角边框

最新推荐文章于 2023-05-25 23:19:00 发布

Doris_DongYan

最新推荐文章于 2023-05-25 23:19:00 发布

阅读量263

点赞数

文章标签： IE XHTML 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;
}
body{
	margin:8px;
}
#outer {
 width:1200px;//content和menu两个div是用“float：left”放置于一行的，
//如果不在最外层规定宽度的话，当将页面放大到一定程度时，menu就会被挤到下一行。
}
#content,#menu {
float:left;
}
#content{
	width:700px;
}
.contentD1,.contentD2,.contentD3,.contentD4,.contentD5,.contentD6,.contentD7,.contentD8,.contentD9,.contentD10 {
	background:rgb(215,137,65);
	overflow:hidden;
     font-size:0px;//用IE Tester测试了一下，发现如果不写这句用IE5.5打开的效果一塌糊涂
}
.contentD1,.contentD2,.contentD3,.contentD4,.contentD5,.contentD7 {
	height:1px;
}
.contentD6,.contentD8{
	height:2px;
}
.contentD9{
	height:3px;
}
.contentD1{
	margin:0 13px;
}
.contentD2{
	margin:0 10px;
}
.contentD3{
	margin:0 8px;
}
.contentD4{
	margin:0 7px;
}
.contentD5{
	margin:0 5px;
}
.contentD6{
	margin:0 4px;
}
.contentD7{
	margin:0 3px;
}
.contentD8{
	margin:0 2px;
}
.contentD9{
	margin:0 1px;
}
#c2{
	background:rgb(215,137,65);
}

.menuD1,.menuD2,.menuD3,.menuD4,.menuD5,.menuD6,.menuD7 {
	overflow:hidden;
	height:1px;
         font-size:0px;
}
.menuD1,.menuD2,.menuD3 {
	background-color:rgb(200,169,123);
}
.menuD1{
	margin:0 6px;
}
.menuD2{
	margin:0 4px;
}
.menuD3{
	margin:0 3px;
}
.menuD4,.menuD5,.menuD6,.menuD7 {
	border-left:rgb(200,169,123) 0px solid;
	border-right:rgb(200,169,123) 0px solid;
	background-color:rgb(78,79,39);
}
.menuD5,.menuD7 {
	border-width:4px;
}
.menuD4{
	margin:0 2px;
	border-width:5px;
}
.menuD5,.menuD6{
	margin:0 1px;
}
.menuD6{
	border-width:3px;
}
#c3 {
	border-left:rgb(200,169,123) 3px solid;
	border-right:rgb(200,169,123) 3px solid;
	background-color:rgb(78,79,39);
	height:300px;
}

#menu{
	width:400px;
	margin:50px 0 50px -40px;
}
#menu .leftBlock{
	position:absolute;
	margin-top:-4px;
	margin-left:3px;
	width:37px;
}
.leftBlockD1,.leftBlockD2,.leftBlockD3 {
	background-color:rgb(128,128,66);
	overflow:hidden;
         font-size:0px;
	}
.leftBlockD1 {
	margin-left:4px;
	height:1px;
}
.leftBlockD2 {
	margin-left:2px;
	height:1px;
}
.leftBlockD3 {
	margin-left:1px;
	height:2px;
}
#cc {
	background-color:rgb(128,128,66);
	width:100%;
	height:300px;
}
</style>
</head>

<body>
<div id="outer">
<div id="content">
	<div class="contentD1"></div><div class="contentD2"></div><div class="contentD3"></div><div class="contentD4"></div><div class="contentD5"></div>
    <div class="contentD6"></div><div class="contentD7"></div><div class="contentD8"></div><div class="contentD9"></div>
    <div id="c2">
    	<h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2>
        <h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2>
        <h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2>
        <h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2>
    </div>
    <div class="contentD9"></div><div class="contentD8"></div><div class="contentD7"></div><div class="contentD6"></div>
    <div class="contentD5"></div><div class="contentD4"></div><div class="contentD3"></div><div class="contentD2"></div><div class="contentD1"></div>
</div>
<div id="menu">
	<div class="menuD1"></div><div class="menuD2"></div><div class="menuD3"></div><div class="menuD4"></div>
    <div class="menuD5"></div><div class="menuD6"></div><div class="menuD7"></div>
    <div class="leftBlock">
    <div class="leftBlockD1"></div><div class="leftBlockD2"></div><div class="leftBlockD3"></div>
    <div id="cc"></div>
    <div class="leftBlockD3"></div><div class="leftBlockD2"></div><div class="leftBlockD1"></div>
    </div>
    <div id="c3">
		<h2>Title</h2><h2>Title</h2><h2>Title</h2>
	</div>
    <div class="menuD7"></div><div class="menuD6"></div><div class="menuD5"></div>
    <div class="menuD4"></div><div class="menuD3"></div><div class="menuD2"></div><div class="menuD1"></div>
</div>
</div>
</body>
</html>