欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

文字属性和div容器盒的使用基础

程序员文章站 2022-04-13 15:34:00
1 2 3 4 5 6 7 
 1 <!doctype html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="x-ua-compatible" content="ie=edge">
 8     <title>document</title>
 9     <style>
10         .center{
11             width: 200px;
12             margin: auto;
13         }
14         /* 这里是加粗文字 */
15         .p1 {
16             font-weight: bold;
17         }
18         /* 这里是倾斜文字 */
19         .p2 {
20             font-style: italic;
21         }
22         /* 这里是文字间距 */
23         .p3 {
24             letter-spacing: 10px;
25         }
26         /* 这里 是词 间距 */
27         .p4 {
28             word-spacing: 10px;
29         }
30         /* 这里是首行缩进 */
31         .p5 {
32             text-indent: 10px;
33         }
34         /* 这里是上划线 */
35         .p6 {
36             text-decoration: overline;
37         }
38         /* 这里是下划线 */
39         .p7 {
40             text-decoration: underline;
41         }
42         /* 这里是删除线 */
43         .p8 {
44             text-decoration: line-through;
45         }
46         /* 这里是衬托文字 */
47         .p9 {
48             font-family: serif;
49         }
50         /* 这里是非衬托文字 */
51         .p10 {
52             font-family: sans-serif;
53         }
54         /* 这里是容器盒的阴影 */
55         .box {
56             width: 200px;
57             height: 300px;
58             background: red;
59             box-shadow: 10px 10px 10px #ccc;
60         }
61         /* 这里是 文字的阴影 */
62         h1 {
63             text-shadow: 10px 10px 10px #ccc;
64         }
65         /* border边框属性 */
66         .border{
67             width: 200px;
68             height: 200px;
69             border-radius: 50% 50%;
70             background: yellow;
71             text-align: center;
72             line-height: 200px;
73         }
74     </style>
75 </head>
76 
77 <body>
78     <div class="center">
79         <p class="p2">这里是倾斜文字</p>
80         <p class="p3">这里是文字间距</p>
81         <p class="p4">这里 是词 间距</p>
82         <p class="p5">这里是首行缩进</p>
83         <p class="p6">这里是上划线</p>
84         <p class="p7">这里是下划线</p>
85         <p class="p8">这里是删除线</p>
86         <p class="p9"> 这里是衬托文字</p>
87         <p class="p10">这里是非衬托文字</p>
88         <div class="box">这里是容器盒的阴影</div>
89         <h1>这里是文字的阴影</h1>
90         <div class="border">我是一个圆</div>
91        
92     </div>
93 </body>
94 
95 </html>
文字属性和div容器盒的使用基础



					

																				

						

							上一篇：							
								五指毛桃，你听说过吗							
						

						

							下一篇：							
								Python3爬虫之urllib携带cookie爬取网页的方法							
						

					

															

						

							推荐阅读