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

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

程序员文章站 2024-01-17 12:03:52
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容器盒的使用基础



					

																				

						

							上一篇：							
								Oracle查询sql错误信息的控制和定位							
						

						

							下一篇：							
								javaScript之继承的基础学习，实例讲解							
						

					

															

						

							推荐阅读