61,112
社区成员
发帖
与我相关
我的任务
分享..新手想弄圆角矩形边框。。但是后面有两个position:absolute失效了。。不知道为什么。求帮助
代码如下。。有好多是注释掉的。。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "html://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="tent/html;
charset=gb2312"/>
<title>手写注册页</title>
<style>
li{
float:left;
/*margin-left:100px;*/
/*text-align:left;*/
/*position: absolute;*/
}
div{
height:300px;
width:400px;
background-color:#ccc;
/*text-align:left;*/
/*background-image:url(ssss.JPG);*/
background-repeat:no-repeat;
/*margin:10px;*/
/*padding-right:200px;*/
position:relative;
}
.zshang{
background-image:url(ssss.JPG);
background-position:right top;
right:-1px;
top:-1px;
/*padding-top:80px;*/
position:absolute;
}
.yshang{
background-image:url(ssss.JPG);
background-position:left top;
top:1px;
left:1px;
/*padding-top:80px;*/
position:absolute;
}
.zxia{
background-image:url(ssss.JPG);
background-position:right bottom;
right:-1px;
bottom:-1px;
position:absolute;
}
.yxia{
background-image:url(ssss.JPG);
background-position:left bottom;
left:1px;
bottom:1px;
position:absolute;
{
#jzhong{
background-image:url(ssss.JPG);
background-position:right top;
right:30px;
top:30px;
/*background-repeat:repeat-y;*/
position:absolute;
}
#xzhong{
background-image:url(ssss.JPG);
background-position:left bottom;
left:30px;
top:30px;
/*background-repeat:repeat-x;*/
position:absolute;
}
</style>
</head>
<body>
<div>
<ul>
<li class="zshang">11</li>
<li class="yshang">22</li>
<li>3</li>
</ul><br/>
<ul>
<li id="jzhong">4</li>
<li id="xzhong">5</li>
<li>6</li>
</ul><br/>
<ul>
<li class="zxia">77</li>
<li class="yxia">88</li>
<li>9</li>
</ul><br/>
</div>
</body>
</html>
我的想法是。将3和9分别放到右上。和左下。然后平铺。行程一条直线。。但是不知道为什么。。3和9.无法调整位置了。。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "html://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="tent/html;
charset=gb2312"/>
<title>手写注册页</title>
<style>
li{
float:left;
/*margin-left:100px;*/
/*text-align:left;*/
/*position: absolute;*/
}
div{
height:300px;
width:400px;
background-color:#ccc;
/*text-align:left;*/
/*background-image:url(ssss.JPG);*/
background-repeat:no-repeat;
/*margin:10px;*/
/*padding-right:200px;*/
position:relative;
}
.zshang{
background-image:url(ssss.JPG);
background-position:right top;
right:-1px;
top:-1px;
/*padding-top:80px;*/
position:absolute;
}
.yshang{
background-image:url(ssss.JPG);
background-position:left top;
top:1px;
left:1px;
/*padding-top:80px;*/
position:absolute;
}
.zxia{
background-image:url(ssss.JPG);
background-position:right bottom;
right:-1px;
bottom:-1px;
position:absolute;
}
.yxia{
background-image:url(ssss.JPG);
background-position:left bottom;
left:1px;
bottom:1px;
position:absolute;
{
#jzhong{
background-image:url(ssss.JPG);
background-position:right top;
right:30px;
top:30px;
/*background-repeat:repeat-y;*/
position:absolute;
}
#xzhong{
background-image:url(ssss.JPG);
background-position:left bottom;
left:30px;
top:30px;
/*background-repeat:repeat-x;*/
position:absolute;
}
</style>
</head>
<body>
<div>
<ul>
<li class="zshang">11</li>
<li class="yshang">22</li>
<li>3</li>
</ul><br/>
<ul>
<li id="jzhong">4</li>
<li id="xzhong">5</li>
<li>6</li>
</ul><br/>
<ul>
<li class="zxia">77</li>
<li class="yxia">88</li>
<li>9</li>
</ul><br/>
</div>
</body>
</html>
我的想法是。将3和9分别放到右上。和左下。然后平铺。行程一条直线。。但是不知道为什么。。3和9.无法调整位置了。。
...全文
请发表友善的回复…
发表回复
BLUE_LG 2011-08-10
- 打赏
- 举报
建议楼主考虑用下css3里面的圆角效果。
jimmy_小静 2011-08-09
- 打赏
- 举报
看看这个代码是否可以：
<html>
<head>
<title>用css做带圆角的边框</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
body{padding: 20px;background-color: #FFF;
font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}
h1,h2,p{margin: 0 10px}
h1{font-size: 250%;color: #FFF}
h2{font-size: 200%;color: #f0f0f0}
p{padding-bottom:1em}
h2{padding-top: 0.3em}
div#nifty{ margin: 0 10%;background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>
<div id="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b
class="r4"></b></b>
<h1>看看是圆角了吧</h1>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b
class="r1"></b></b>
</div>
</body>
</html>
<html>
<head>
<title>用css做带圆角的边框</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
body{padding: 20px;background-color: #FFF;
font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}
h1,h2,p{margin: 0 10px}
h1{font-size: 250%;color: #FFF}
h2{font-size: 200%;color: #f0f0f0}
p{padding-bottom:1em}
h2{padding-top: 0.3em}
div#nifty{ margin: 0 10%;background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>
<div id="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b
class="r4"></b></b>
<h1>看看是圆角了吧</h1>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b
class="r1"></b></b>
</div>
</body>
</html>
