练习——给网页配色

最新推荐文章于 2022-03-27 13:07:56 发布

dingling5406

最新推荐文章于 2022-03-27 13:07:56 发布

阅读量173

点赞数

原文链接：http://www.cnblogs.com/ailinzhijia/p/7891079.html

版权

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>colorful</title>
 6     <style type="text/css">
 7         body{
 8             text-align:center;                   /*网页居中*/
 9             color:#F00;                           /*网页字体基本色*/
10             background:#9FF;                     /*网页背景色*/
11         }
12         #wrap{
13             width:400px;                          /*固定包含框的宽度*/
14             margin:0 auto;                       /*网页居中*/
15             text-align:left;                    /*文本左对齐*/
16         }
17         #header{
18             height:40px;                         /*标题栏宽度*/
19             line-height:40px;                   /*标题栏行高*/
20             margin:0 0 2px 0;                    /*头部区域外边距*/
21             text-align:center;                  /*文本居中对齐*/
22             color:#F00;                          /*标题栏字体色*/
23             background:#9FF;                    /*标题栏背景色*/
24         }
25         ul#nav{
26             list-style:none;                    /*清除列表项目符号*/
27             margin:2px 0 0 0;                    /*导航栏外边距*/
28             padding:10px 0 0 10px;               /*导航栏内边距*/
29             float:left;                          /*向左浮动*/
30             width:84px;                          /*导航栏宽度*/
31             height:190px;                        /*导航栏高度*/
32             color:#000;                          /*导航栏字体色*/
33             background:#CF3;                    /*导航栏背景色*/
34         }
35         #wrap #main{
36             float:right;                         /*向右浮动*/
37             height:200px;                        /*主体区域高度*/
38             width:300px;                          /*主体区域宽度*/
39             margin:2px 0 0 2px;                  /*增加外边距*/
40             color:#000;                          /*主体区域字体色*/
41             background:#F9C;                     /*主体区域背景色*/
42         }
43         ul#nav li{
44             line-height:1.5em;                   /*列表行高*/
45         }
46         #main div{
47             padding:12px 2em;                     /*主体区域内边距*/
48         }
49     </style>
50 </head>
51 <body>
52 <div id="wrap">
53     <h3 id="header">网页标题</h3>
54     <ul id="nav">
55         <li>链接1</li>
56         <li>链接2</li>
57         <li>链接3</li>
58         <li>......</li>
59     </ul>
60     <div id="main">
61         <div>正文内容......</div>
62     </div>
63 </div>
64 </body>
65 </html>

转载于:https://www.cnblogs.com/ailinzhijia/p/7891079.html

dingling5406

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
练习——给网页配色

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>colorful</title> 6 <style type="text/css"> 7 ...
复制链接

扫一扫