JavaScript 基础三
2021-04-03 01:28
标签：字符串 实例 大小 四舍五入 lang join() 星期几 转换 可变 JavaScript 基础三 标签：字符串 实例 大小 四舍五入 lang join() 星期几 转换 可变 原文地址：https://www.cnblogs.com/Bianco/p/13470069.html 1 DOCTYPE html>
2 html lang="en">
3 head>
4 meta charset="UTF-8">
5 title>CSS 网页布局title>
6 meta name="viewport" content="width=device-width,initial-scale=1">
7 style>
8 * {
9 box-sizing: border-box;/* 创建三个不相等的列，要添加这个盒子模型 */
10 }
11 body{margin: 0;}
12 .header{/* 头部样式 */
13 background-color: #f1f1f1;
14 padding: 20px;
15 text-align: center;
16 }
17 .topnav{/* 导航条 */
18 overflow: hidden;
19 background-color: #333;
20 }
21 .topnav a{/* 导航链接 */
22 float: left;
23 display: block;
24 color: #f2f2f2;
25 text-align: center;
26 padding: 14px 16px;
27 text-decoration: none;
28 }
29 .topnav a:hover{/* 链接 - 修改颜色 */
30 background-color: #ddd;
31 color: black;
32 }
33
34 /* 将创建一个 3 列布局 */
35 /*.column{!* 创建三个相等的列 *!*/
36 /* float: left;*/
37 /* width: 33.33%;*/
38 /*}*/
39 /*.row:after{!* 列后清除浮动 *!*/
40 /* content: "";*/
41 /* display: table;*/
42 /* clear: both;*/
43 /*}*/
44 /*@media screen and (max-width: 600px) {!* 将创建一个 3 列布局，在小的屏幕上将会变成 1 列布局（响应式） *!*/
45 /* .column{*/
46 /* width: 100%;*/
47 /* }*/
48 /*}*/
49
50 /* 将创建一个 3 列不相等的列布局 */
51 .column{/* 创建三个不相等的列 ，要添加这个盒子模型 box-sizing: border-box;*/
52 float: left;
53 padding: 10px;
54 }
55 .column.side{/* 左右两侧宽度 */
56 width: 25%;
57 }
58 .column.middle{/* 中间区域宽度 */
59 width: 50%;
60 }
61 .row:after{/* 列后面清除浮动 */
62 content: "";
63 display: table;
64 clear: both;
65 }
66 @media screen and (max-width: 600px){
67 .column.side, .column.middle{
68 width: 100%;
69 }
70 }
71 .footer{/* 底部样式 */
72 background-color: #f1f1f1;
73 padding: 10px;
74 text-align: center;
75 }
76 style>
77 head>
78 body>
79 div class="header">
80 h1>头部区域h1>
81 div>
82
83 div class="topnav">
84 a href="#">链接a>
85 a href="#">链接a>
86 a href="#">链接a>
87 div>
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104 div class="row">
105 div class="column side">
106 h2>左侧栏h2>
107 p>这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落p>
108 div>
109 div class="column middle">
110 h2>主区域内容h2>
111 p>这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落p>
112 p>这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落p>
113 div>
114 div class="column side">
115 h2>右侧栏h2>
116 p>这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落，这是一个测试段落p>
117 div>
118 div>
119
120 div class="footer">
121 p>底部区域p>
122 div>
123
124
125
126
127
128
129 body>
130 html>