【HTML】07布局 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=++, initial-scale=1.0">
 6     <title>Document</title>
 7 </head>
 8 <body style="background-color: cadetblue;">
 9     <!--
10         css 设置样式的
11             通过元素的style属性进行设置
12             style = "样式名：样式值；样式名：样式值；... ..."
13         
14         块元素：自己独占一行  块元素的CSS样式的宽、高等等，往往都是生效的
15             div  h1-h6
16         
17         行内元素：不会自己独占一行的元素  行内元素的CSS样式的宽、高等等，往往都是不生效的
18             span  img  a
19 
20     -->
21     <div style="border: 1px solid red;width: 600px;height: 1000px;margin: 10px auto;">
22         
23         <div style="border: 1px solid red;width: 500px;height: 300px;margin: 10px auto;background-color: bisque;">123</div>
24         <div style="border: 1px solid red;width: 500px;height: 300px;margin: 10px auto;background-color: burlywood;">456</div>
25         <div style="border: 1px solid red;width: 500px;height: 300px;margin: 10px auto;background-color: darksalmon;">
26             <span style="font-size: 30px;color: cornflowerblue;font-weight: 100px;">中国矿业大学</span>是一所非常优秀的大学！
27         </div>
28         
29         <span style="border: 1px solid greenyellow;width: 100px;height: 100px;">555</span>
30 
31     </div>
32 
33 </body>
34 </html>

 

posted @ 2024-03-08 00:50  白茶花约  阅读(18)  评论(0)    收藏  举报