HTML的“组合框”

效果图

有时候做网页需要弄一个“组合框”,像下图这样的。

HTML的“组合框”
image-2041
HTML

不多说,小提示:在chrome浏览器上设置0.5px是无效的[没明白为啥].可以调整各项参数来观察页面变化。

源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!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 type="text/css">
    * {
        padding:0;
        margin:0;  
    }
   
    body{
        padding:200px; 
       
    }
   
    #test{
        width:1000px;
        height:auto;   
        padding:0;
        margin:auto;
    }
   
    #test .title{
        display:inline;
        width:120px;
        height:40px;
        margin-top:20px;   
        text-align:center;
        border:#00ff00 1px solid;
        border-bottom:#FFF 1px solid;
    }
   
    #test .test1 {
       
        width:990px;
        height:auto;
        border:#ff0000 1px solid;
        border-top:none;
        text-align:center; 
    }
   
    #test .test1 .sidehr {
       
        width:927px;
        height:0.5px;
        float:right;
        border-top:#cccccc 1px solid;  
        margin:0 -1px 0 70px;
        padding:0;
    }
   
   
    #clear_float {
    /*清除浮动*/
    clear: both;
}
   
</style>

</head>
<body>
<div id="test">
    <div class="title">标题测试</div>
    <div class="test1">
        <div class="sidehr"></div>
        <div id="clear_float"></div>
        测试数据一下.
    </div>
</div>
</body>
</html>

By Cd.

发表评论

您的电子邮箱地址不会被公开。

*

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据