正文
基础的CSS描绘测试
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>测试CSS页面</title>
6 <style>
7 body{
8 background-color: #d0e4fe;
9 background-image: url("timg.jpg");/*CSS 中给字段设置图片背景*/
10 /*background-repeat: repeat-x;!*图像只在水平方向平铺 (repeat-x)*!*/
11 background-repeat: no-repeat;/*设置背景图像是否及如何重复*/
12 background-attachment: fixed;/*图像不会随着页面的其他部分滚动*/
13 background-position: right top;/*利用 background-position 属性改变图像在背景中的位置*/
14 /*background: url("timg.jpg") no-repeat right top;!*属性合并在同一个属性中*!*/
15 }
16 /*h1 {*/
17 /* color: orange;*/
18 /* text-align: center;*/
19 /*}*/
20 p{/*CSS 中p标签来定义*/
21 font-family: "Times New Roman";
22 font-size: 20px;
23 }
24 p.para_inden{
25 text-indent: 50px;/*段落缩进*/
26 }
27 #para1{/*CSS 中 id 选择器以 "#" 来定义*/
28 text-align: center;
29 color: red;
30 }
31 .center{/*CSS 中 class 选择器以 "." 来定义*/
32 text-align: center;
33 }
34 p.center1{/*CSS 中 所有的 p 元素使用 class="center" 让该元素的文本居中*/
35 text-align: center;
36 }
37 p.just{text-align: justify;}/*文本两端对齐*/
38 a{text-decoration: none;}/*删除链接下划线*/
39 h1.underscore1{
40 text-decoration: overline;/*上划线*/
41 text-transform: uppercase;/*全部大写*/
42 }
43 h2.underscore2{
44 text-decoration: line-through;/*中划线*/
45 text-transform: lowercase;/*全部小写*/
46 }
47 h3.underscore3{
48 text-decoration: underline;/*下划线*/
49 text-transform: capitalize;/*全部首字母大写*/
50 }
51 h1.letter_space1{letter-spacing: 2px;}
52 h1.letter_space2{letter-spacing: -3px;}
53 h1.letter_space3{word-spacing: 30px;}
54 h1.letter_space4{word-spacing: -30px;}
55 p.small{line-height: 70%;}
56 p.big{line-height: 200%;}
57 p.white_space{white-space: nowrap;}
58 img.top{vertical-align: text-top;}
59 img.bottom{vertical-align: text-bottom;}
60 h1.text_shadow1{text-shadow: -5px -5px #FFFF00;}
61 h1.text_shadow2{text-shadow: 2px 2px #FF0000;}
62
63 p.serif{font-family: "Times New Roman",Times,serif;}
64 p.sansserif{font-family: Arial, Helvetica,sans-serif;}
65
66 p.normal{font-style: normal;}
67 p.italic{font-style: italic;}/* italic 是使用文字的斜体*/
68 p.oblique{font-style: oblique;}/* oblique 是让没有斜体属性的文字倾斜*/
69
70 p.normal1{font-weight: normal;}
71 p.light{font-weight: lighter;}
72 p.thick{font-weight: bold;}
73 p.thicker{font-weight: 900;}
74
75 p.normal2{font-variant: normal;}
76 p.small1{font-variant: small-caps;}
77
78 p.all{font: italic bold 12px/30px Georgia,serif;}
79
80 a.diff_style:link{/* 未访问连接*/
81 color: #000000;
82 background-color: #B2FF99;
83 text-decoration: none;
84 }
85 a.diff_style:visited{/* 已访问连接*/
86 color: #00FF00;
87 background-color: #FFFF85;
88 text-decoration: none;
89 }
90 a.diff_style:hover{/* 鼠标移动到链接上*/
91 color: #FF00FF;
92 background-color: #FF704D;
93 text-decoration: underline;
94 }
95 a.diff_style:active{/* 鼠标点击时*/
96 color: #0000FF;
97 background-color: #FF704D;
98 text-decoration: underline;
99 }/* 1、a:hover 必须跟在 a:link 和 a:visited后面；2、a:active 必须跟在 a:hover后面*/
100
101 ul.a{list-style-type: circle;}
102 ul.b{list-style-type: square;}
103 ul.b1{list-style-image: url("timg.jpg")}
104 /*ul.b{list-style: square url("timg.jpg")}*/
105 ol.c{list-style-type: upper-roman;}
106 ol.d{list-style-type: lower-alpha;}
107 li.link{display: inline;}/*inline把列表项显示为内联元素;block把span元素作为块元素;display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间;visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间*/
108
109 table,td,th{border: 1px solid black;border-collapse: collapse;}/*border-collapse: collapse表格单边框*/
110 /*border-style：属性1，属性2，属性3，属性4------上->右->下->左
111 border-style：属性1，属性2，属性3------上->左右->下
112 border-style：属性1，属性2------上下->左右
113 border-style：属性1-------------上下左右属性相同*/
114 table{width: 100%;}
115 caption{caption-side: bottom;}
116 th{
117 height: 50px;
118 background-color: green;
119 color: white;
120 }
121 td{
122 text-align: center;
123 height: 30px;
124 vertical-align: bottom;
125 padding: 55px;/*表中的内容与边框之间的距离*/
126 }
127
128 p.none{border-style: none;}
129 p.dotted{border-style: dotted;}
130 p.dashed{border-style: dashed;}
131 p.solid{
132 border-style: solid;
133 /*border-top-style: solid;!*单独设置各边top；right；bottom；left*!*/
134 border-top-color: #FF704D;/*单独设置各边top；right；bottom；left*/
135 outline-style: dotted;/*绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用，类似边框border*/
136 }
137 p.double{border-style: double;}
138 p.groove{border-style: groove;}
139 p.ridge{border-style: ridge;}
140 p.inset{border-style: inset;}
141 p.outset{border-style: outset;}
142 p.hidden{border-style: hidden;}
143
144 p.ex1{margin-top: 2cm;}
145 p.pos_fixed{top:30px;right:5px;position: fixed;}/*fixed即使窗口是滚动的它也不会移动;relative相对定位元素的定位是相对其正常位置;absolute相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>*/
146 div.sticky{
147 position: sticky;
148 top: 0;
149 padding: 5px;
150 background-color: #FF704D;
151 border: 2px solid #FFFF00;
152 }
153 img.z_index{
154 position: absolute;
155 /*left: 0px;*/
156 /*top: 0px;*/
157 z-index: -1;
158 clip: rect(0px,100px,200px,0px);/*被剪裁成这种形状，并显示出来*/
159 /*overflow属性创建一个滚动条;style="cursor:crosshair"改变光标*/
160 }
161 p img.float{float: right;}/*clear:both;属性指定元素两侧不能出现浮动元素*/
162
163 .dropbtn{/* 下拉按钮样式 */
164 background-color: #FF704D;
165 color: white;
166 padding: 16px;
167 font-size: 16px;
168 border: none;
169 cursor: pointer;/*鼠标样式*/
170 }
171 .dropdown{/* 容器 <div> - 需要定位下拉内容 */
172 position: relative;
173 display: inline-block;
174 }
175 .dropdown-content{/* 下拉内容 (默认隐藏) */
176 display: none;
177 position: absolute;
178 background-color: #FFFF00;
179 min-width: 160px;
180 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
181 padding: 12px 16px;
182 }
183 .dropdown-content a{/* 下拉菜单的链接样式 */
184 color: black;
185 padding: 12px 16px;
186 text-decoration: none;/* 下划线去除*/
187 display: block;
188 }
189 .dropdown-content a:hover{background-color: #00FF00}/* 鼠标移上去后修改下拉菜单链接颜色 */
190
191 .dropdown:hover .dropdown-content{display: block;}/*在鼠标移上去后显示下拉菜单；:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。*/
192
193 .dropdown:hover .dropbtn{background-color: #0000FF}/* 当下拉内容显示后修改下拉按钮的背景颜色 */
194
195 .tooltip{/* Tooltip 容器 */
196 position: relative;
197 display: inline-block;
198 border-bottom: 1px dotted black;/* 悬停元素上显示点线 */
199 }
200 .tooltip .tooltiptext{/* Tooltip 文本 */
201 visibility: hidden;
202 width: 120px;
203 background-color: black;
204 color: #0000FF;
205 text-align: center;
206 border-radius: 6px;/* 给元素设置圆角边框 */
207 padding: 5px 0;
208 /* 定位 */
209 position: absolute;
210 z-index: 1;
211 /*top: -5px;*/
212 /*left: 105%;*//*文本显示在左侧;*/
213 /*right: 105%;!*文本显示在右侧;*!*/
214 /*top: 100%;!*文本显示在上面;*!*/
215 bottom: 100%;/*文本显示在下面;*/
216 left: 50%;
217 margin-left: -60px;/* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
218 /* 淡入 - 1秒内从 0% 到 100% 显示: */
219 opacity: 0;
220 transition: opacity 1s;
221 }
222 .tooltip .tooltiptext::after{
223 content: "";
224 position: absolute;
225 top: 100%;/*在提示工具内定位箭头: top: 100% , 箭头将显示在提示工具的底部*/
226 left: 50%;/*left: 50% 用于居中对齐箭头*/
227 margin-left: -5px;
228 border-width: 5px;
229 border-style: solid;
230 border-color: black transparent transparent transparent;/* 设置顶部边框为黑色，其他是透明的 */
231 }
232 .tooltip:hover .tooltiptext{
233 visibility: visible;/* 鼠标移动上去后显示提示框 */
234 opacity: 1;
235 }
236
237 div ol{
238 counter-reset: section1;
239 list-style-type: none;
240 }
241 div li::before{
242 counter-increment: section1;
243 content: counters(section1,".") " ";
244 }
245
246
247 </style>
248 </head>
249 <body>
250 <h1>CSS实例！</h1>
251 <p class="para_inden">这是一个段落。</p>
252 <hr>
253 <p id="para1">Hello World!</p><!--ID属性不要以数字开头-->
254 <hr>
255 <h1 class="center">标题居中</h1><!--类名的第一个字符不能使用数字-->
256 <hr>
257 <h1 class="center1">这个标签不受影响</h1>
258 <p class="center1">这个段落居中对齐</p>
259 <hr>
260 <p class="just">两端对齐</p>
261 <hr>
262 <a href="http://www.baidu.com" target="_blank">百度一下</a>
263 <h1 class="underscore1">This is heading 1</h1>
264 <h2 class="underscore2">This is heading 2</h2>
265 <h3 class="underscore3">This is heading 3</h3>
266 <hr>
267 <p>增加或减少字符之间的空间</p>
268 <h1 class="letter_space1">This is heading 1</h1>
269 <h1 class="letter_space2">This is heading 2</h1>
270 <p>增加或减少单词之间的空间</p>
271 <h1 class="letter_space3">This is heading 3</h1>
272 <h1 class="letter_space4">This is heading 4</h1>
273 <hr>
274 <hr>
275 <p>指定在一个段落中行之间的空间</p>
276 <p>这是一个标准行高的段落。<br>
277 这是一个标准行高的段落。<br>
278 大多数浏览器的默认行高约为110%至120%。<br></p>
279 <p class="small">这是一个更小行高的段落。<br>
280 这是一个更小行高的段落。<br>
281 这是一个更小行高的段落。<br>
282 这是一个更小行高的段落。<br>
283 这是一个更小行高的段落。<br>
284 </p>
285 <p class="big">这是一个更大行高的段落。<br>
286 这是一个更大行高的段落。<br>
287 这是一个更大行高的段落。<br>
288 这是一个更大行高的段落。<br>
289 这是一个更大行高的段落。<br>
290 </p>
291 <hr><p>禁用一个元素内的文字环绕（即不换行）</p>
292 <p class="white_space">这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
293 这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
294 这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
295 这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
296 这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。</p>
297 <hr><p>设置文本的垂直对齐图像</p>
298 <p>一个<img src="test01.jpg" alt="测试图片" width="270" height="50"/>默认对齐的图像。</p>
299 <p>一个<img class="top" src="test01.jpg" alt="测试图片" width="270" height="50"/>text-top对齐的图像。</p>
300 <p>一个<img class="bottom" src="test01.jpg" alt="测试图片" width="270" height="50"/>text-bottom对齐的图像。</p>
301 <hr><p>设置文本阴影：Text-shadow 效果</p>
302 <h1 class="text_shadow1">Text-shadow 效果1</h1>
303 <h1 class="text_shadow2">Text-shadow 效果2</h1>
304 <hr><h1>CSS font-family</h1>
305 <p class="serif">这一段字体是 Times New Roman</p>
306 <p class="sansserif">这一段字体是 Arial.</p>
307 <hr><h1>斜体文字</h1>
308 <p class="normal">这是一个段落，正常。normal</p>
309 <p class="italic">这是一个段落，斜体。italic</p>
310 <p class="oblique">这是一个段落，斜体。oblique</p>
311 <hr><h1>设置字体的加粗</h1>
312 <p class="normal1">这是一个段落，正常。normal</p>
313 <p class="light">这是一个段落。light</p>
314 <p class="thick">这是一个段落。thick</p>
315 <p class="thicker">这是一个段落。thicker</p>
316 <hr><h1>设置字体的转变</h1>
317 <p class="normal2">My name is Hege Refsnes.</p>
318 <p class="small1">My name is Hege Refsnes.</p>
319 <hr><h1>字体属性设置在一个声明之内</h1>
320 <p class="all">My name is Hege Refsnes.</p>
321 <hr><h1>链接样式</h1>
322 <a class="diff_style" href="http://www.baidu.com" target="_blank">这是一个连接</a>
323 <hr><h1>列表属性</h1>
324 <p>无序列表实例：</p>
325 <ul class="a">
326 <li>咖啡</li>
327 <li>茶</li>
328 <li>饮料</li>
329 </ul>
330 <ul class="b">
331 <li>咖啡</li>
332 <li>茶</li>
333 <li>饮料</li>
334 </ul>
335 <ul class="b1">
336 <li>咖啡</li>
337 <li>茶</li>
338 <li>饮料</li>
339 </ul>
340 <p>有序列表实例：</p>
341 <ol class="c">
342 <li>咖啡</li>
343 <li>茶</li>
344 <li>饮料</li>
345 </ol>
346 <ol class="d">
347 <li>咖啡</li>
348 <li>茶</li>
349 <li>饮料</li>
350 </ol>
351 <hr><h1>链接列表的水平显示</h1>
352 <ul>
353 <li class="link"><a href="timg.jpg" target="_blank">HTML</a></li>
354 <li class="link"><a href="timg.jpg" target="_blank">CSS</a></li>
355 <li class="link"><a href="timg.jpg" target="_blank">JavaScript</a></li>
356 <li class="link"><a href="timg.jpg" target="_blank">XML</a></li>
357 </ul>
358 <hr><h1>表格</h1>
359 <table>
360 <caption>Table 1.1 Customers</caption>
361 <tr>
362 <th>Firstname</th>
363 <th>Lastname</th>
364 </tr>
365 <tr>
366 <td>Peter</td>
367 <td>Griffin</td>
368 </tr>
369 <tr>
370 <td>Lois</td>
371 <td>Griffin</td>
372 </tr>
373 </table>
374 <hr><h1>边框样式</h1>
375 <p class="none">无边框</p>
376 <p class="dotted">虚线边框</p>
377 <p class="dashed">虚线边框</p>
378 <p class="solid">实线边框</p>
379 <p class="double">双边框</p>
380 <p class="groove">凹槽边框</p>
381 <p class="ridge">垄状边框</p>
382 <p class="inset">嵌入边框</p>
383 <p class="outset">外凸边框</p>
384 <p class="hidden">外凸边框</p>
385 <hr><h1>margin外边距</h1>
386 <p>一个没有指定边距大小的段落</p>
387 <p class="ex1">一个2厘米上边距的段落</p>
388 <p>一个没有指定边距大小的段落</p>
389 <hr><h1>元素的位置相对于浏览器窗口是固定位置</h1>
390 <p class="pos_fixed">这段文字不会随着窗口的下滑滚动，而变动</p>
391 <p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
392 <hr><h1>sticky 定位,粘性定位,基于用户的滚动位置来定位</h1>
393 <p>尝试滚动页面</p>
394 <div class="sticky">这是一个粘性定位！</div>
395 <div>
396 <p>滚动</p>
397 <p>来回滚动</p>
398 <p>滚动</p>
399 <p>来回滚动</p>
400 <p>滚动</p>
401 <p>来回滚动</p>
402 </div>
403 <hr><h1>重叠的元素</h1>
404 <p>This is a heading</p>
405 <img src="timg.jpg" class="z_index" width="500" height="320">
406 <p>因为图像元素设置了z-index属性值为-1，所以它会显示在文字之后</p>
407 <hr><h1>图像是右浮动，下面的文本流将环绕在它左边</h1>
408 <p>在下面的段落中，我们添加了一个<b>float:right</b>的图片。导致图片将会浮动在段落的右边。</p>
409 <p>
410 <img src="timg.jpg" class="float" width="500" height="320">
411 因为图像元素设置了z-index属性值为-1，所以它会显示在文字之后
412 因为图像元素设置了z-index属性值为-1，所以它会显示在文字之后
413 因为图像元素设置了z-index属性值为-1，所以它会显示在文字之后
414 因为图像元素设置了z-index属性值为-1，所以它会显示在文字之后
415 因为图像元素设置了z-index属性值为-1，所以它会显示在文字之后
416 因为图像元素设置了z-index属性值为-1，所以它会显示在文字之后
417 因为图像元素设置了z-index属性值为-1，所以它会显示在文字之后
418 因为图像元素设置了z-index属性值为-1，所以它会显示在文字之后
419 </p>
420 <hr><h1>使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果</h1>
421 <div class="dropdown">
422 <button class="dropbtn">下拉菜单</button>
423 <div class="dropdown-content">
424 <a href="http://www.baidu.com" target="_blank">百度1</a>
425 <a href="http://www.baidu.com" target="_blank">百度2</a>
426 <a href="http://www.baidu.com" target="_blank">百度3</a>
427 </div>
428 </div>
429 <hr><h1>提示框(Tooltip)</h1>
430 <div style="text-align: center;">
431 <div class="tooltip">鼠标移动到这来
432 <span class="tooltiptext">提示文本</span>
433 </div>
434 </div>
435 <hr><h1>计数器也可用于列表</h1>
436 <div>
437 <ol>
438 <li>item</li>
439 <li>item
440 <ol>
441 <li>item</li>
442 <li>item</li>
443 <li>item
444 <ol>
445 <li>item</li>
446 <li>item</li>
447 <li>item</li>
448 </ol>
449 </li>
450 </ol>
451 </li>
452 <li>item</li>
453 <li>item</li>
454 </ol>
455 <ol>
456 <li>item</li>
457 <li>item</li>
458 </ol>
459 </div>
460
461
462 </body>
463 </html>
