html+css布局小技巧

 

 

?
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .leftfix{
            float: left;
        }
        .rightfix{
            float: right;
        }
         
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }
 
        .container{
            width: 420px;
            margin: 0 auto;
            text-align: center;
        }
         
        .logo{
            width: 100px;
        }
        .banner1{
            width: 200px;
            margin: 0 10px;
        }
        .banner2{
            width: 100px;
        }
        .logo,.banner1,.banner2{
            height: 80px;
            line-height: 80px;
            background-color: #ccc;
        }
 
        .menu{
            width: 420px;
            background-color: #ccc;
            margin-top: 10px;
            height: 40px;
            line-height: 40px;
 
        }
        .content{
            margin-top: 10px;
        }
        .item1,.item2{
            width: 148px;
            height: 100px;
            background-color: #ccc;
            border: 1px solid black;
            margin-right: 10px;
            line-height: 100px;
             
        }
        .item3,.item4,.item5,.item6{
            border: 1px solid black;
            background-color: #ccc;
            width: 68px;
            margin-right: 10px;
            margin-top: 10px;
            height: 100px;
            line-height: 100px;
 
 
        }
        .item7,.item8,.item9{
            height: 62.7px;
            background-color: #ccc;
            width: 98px;
            /* margin-top: 10px; */
            border: 1px solid black;
        }
        .item8{
            margin: 10px 0;
        }
         
    </style>
</head>
<body>
 
    <div class="container">
        <div class="clearfix">
            <div class="leftfix logo">logo</div>
            <div class="leftfix banner1">banner1</div>
            <div class="leftfix banner2">banner2</div>
        </div>
        <div class="menu">菜单</div>
        <div class="content clearfix">
            <div class="leftfix ">
                <div class="clearfix">
                    <div class="item1 leftfix">栏目一</div>
                    <div class="item2 leftfix">栏目二</div>
                </div>
                <div class="clearfix">
                    <div class="leftfix item3">栏目三</div>
                    <div class="leftfix item4">栏目四</div>
                    <div class="leftfix item5">栏目五</div>
                    <div class="leftfix item6">栏目六</div>
                </div>
            </div>
            <div class="leftfix ">
                <div class="item7">栏目七</div>
                <div class="item8">栏目八</div>
                <div class="item9">栏目九</div>
            </div>
        </div>
    </div>
     
    <script>
        let persion = {
            name: "张三",
            age: 18,
            sex: "女"
        }
        persion.stu = "kkk"
        console.log(persion.sex)
        console.log(persion["sex"])
        console.log(persion.stu);
    </script>
</body>
</html>

　　

posted @   小小仓鼠  阅读(17)  评论(0)  编辑  收藏  举报
相关博文：
· 布局小技巧
· 前端学习day12
· 【HTML】07布局
· html+css实战180-header-布局
· CSS常用布局
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
历史上的今天：
2023-04-26 微信多开bat脚本
点击右上角即可分享
微信分享提示