1 *{
2 margin:0px;
3 padding:0px;
4 }
5
6 body{
7 background:#e5e6d0;
8 }
9
10 #header,#menu,#banner,#main,#footer{
11 margin:0px auto;
12 width:1200px;
13 }
14 #header{
15 height:100px;
16 background:#F0FFFF;
17 }
18 #header h1{
19 float:left;
20 margin-top:20px;
21 }
22 #header h1 a{
23 /*margin:0px auto;可以使元素居中显示*/
24 width:600px;
25 height:100px;
26 display:block;
27 color:#996600;
28 text-align:center;
29 text-decoration:none;
30 }
31 #header ul{
32 float:left;
33 padding:50px 0px 0px 300px;
34 list-style:none;
35 }
36 #header ul li{
37 float:left;
38 padding:0px 20px;
39 }
40 #header ul li a{
41 color:#ff6600;
42 text-decoration:none;
43 font-size:20px;
44 }
45 #header ul li a:hover{
46 color:#000;
47 text-decoration:underline;
48 }
49 /* 万能的清除*/
50 .clear{
51 clear:both;
52 }
53 #menu{
54 padding-top:3px;
55 }
56 #menu ul{
57 list-style:none;
58 }
59 #menu ul li{
60 float:left;
61 }
62 #menu ul li a{
63 color:#660066;
64 text-decoration:none;
65 text-align:center;
66 display:block;/*这句使center起作用*/
67 width:135px;
68 height:56px;
69 line-height:56px;
70 font-size:25px;
71 }
72 #menu ul li a:hover{
73 background:#177cb7;
74 }
75 #menu ul li ul{
76 display:none;
77 width:135px;
78 position:absolute;
79 background:#C0c0c0;
80 }
81 #menu ul li:hover ul{
82 display:block;
83 }
84 #menu ul li ul li{
85 width:135px;
86 }
87 #menu ul li ul li a{
88 width:135px;
89 }
90 #menu ul li ul li a:hover{
91 background:#BBFFFF;
92 }
93
94 #main{
95 padding:10px 10px;
96 }
97 #main .container{
98 width:900px;
99 float:left;
100 }
101 #main .container dl{
102 width:430px;
103 float:left;
104 }
105 #main .container dl h5,#main .product h5{
106 border-bottom:1px solid #000;
107 margin-bottom:15px;
108 font-size:25px;
109 }
110 #main .container dl h5 a{
111 margin:0 auto;
112 text-decoration:none;
113 }
114 #main .container dl dt{
115 float:left;
116 width:150px;
117 }
118 #main .container dl dt img{
119 border:1px solid #ccc;
120 width:150px;
121 height:250px;
122 }
123 #main .container dl.xuexiao{
124 margin-right:40px;
125 }
126 #main .container dl.xuexiao dd{
127 font-size:16px;
128 margin-left:25px;
129 float:left;
130 width:240px;
131 text-indent:2em;/*首行缩进*/
132 }
133 #main .container dl.xinwen dd{
134 height:22px;
135 line-height:22px;
136 background:none;
137 }
138 #main .container dl.xinwen dd a{
139 color:#000000;
140 text-decoration:none;
141 padding-left:10px;
142 }
143 #main .container dl.xinwen dd span{
144 padding-left:10px;
145 }
146 #main .product{
147 padding-top:20px;
148 }
149 #main .product h5 a{
150 margin:0px auto;
151 text-decoration:none;
152 }
153 #main .product ul li{
154 float:left;
155 padding-left:10px;
156 list-style:none;
157 }
158 #main .product ul li a{
159 text-decoration:none;
160 }
161 #main .subMenu{
162 width:300px;
163 float:left;
164 margin:10px 0px;
165 }
166 #main .subMenu h5{
167 background:#19577c;
168 height:39px;
169 text-align:center;
170 color:#fff;
171 line-height:39px;
172 }
173 #main .subMenu ul li{
174 border-bottom:1px solid #d4d4d4;
175 background:#f1f1f1;
176 list-style:none;
177 }
178 #main .subMenu ul li a{
179 display:block;
180 text-align:center;
181 color:#000;
182 text-decoration:none;
183 background:none;
184 height:50px;
185 line-height:50px;
186 font-size:28px;
187 }
188 #main .subMenu ul li a:hover{
189 color:#177cb7;
190 background:none;
191 }
192 #footer{
193 background:#d1dce3;
194 height:50px;
195 line-height:50px;
196 font-size:25px;
197 text-align:center;
198 }
以上是CSS文件，主要分为header+menu+main+footer，其中main部分，分为container部分和右侧的一个SubMenu。Container部分包含两列一行，使用的是DLDD。
以下是HTML文件。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=GBK"> 5 <title>博客首页</title> 6 <link rel="stylesheet" type="text/css" href="mycss.css"> 7 </head> 8 <body> 9 <div id="header"> 10 <h1><a href="#">Xingzhui-###的博客</a></h1> 11 <ul> 12 <li><a href="#">设为首页</a></li> 13 <li><a href="#">加入收藏</a></li> 14 </ul> 15 </div> 16 <div id="menu" class="clear"> 17 <ul> 18 <li><a href="#">一级菜单</a></li> 19 <li><a href="#">一级菜单</a> 20 <ul> 21 <li><a href="#">二级菜单1</a></li> 22 <li><a href="#">二级菜单2</a></li> 23 <li><a href="#">二级菜单3</a></li> 24 <li><a href="#">二级菜单4</a></li> 25 </ul> 26 </li> 27 <li><a href="#">一级菜单</a> 28 <ul> 29 <li><a href="#">二级菜单1</a></li> 30 <li><a href="#">二级菜单2</a></li> 31 <li><a href="#">二级菜单3</a></li> 32 <li><a href="#">二级菜单4</a></li> 33 </ul> 34 </li> 35 <li><a href="#">一级菜单</a></li> 36 </ul> 37 </div> 38 <div id="main" class="clear"> 39 <div class="container"> 40 <div class="news"> 41 <dl class="xuexiao"> 42 <h5><a href="#">个人简介</a></h5> 43 <dt><img src="mypic.jpg" alt="图片"></dt> 44 <dd>各位领导同事好，我是来自###的###， 45 十分荣幸来参加这次见面会。我毕业于###， 46 获得硕士学位。我的家乡在###，一个具有悠久历史的城市 47 我平时喜欢看看小说，浏览新闻，也喜欢四处去旅游， 48 开阔自己的视野。运动方面，我喜欢打篮球，以前也擅长乒乓球， 49 但是有段时间没有练习了。非常高兴能够和各位同事一起工作， 50 请大家多多指教，更好的完成工作。</dd> 51 </dl> 52 <dl class="xinwen"> 53 <h5><a href="#">最新动态</a></h5> 54 <dd> 55 <a href="#">我也不知道在说什么你妹的！</a><span>2015-10-12</span> 56 </dd> 57 <dd> 58 <a href="#">我也不知道在说什么你妹的！</a><span>2015-10-12</span> 59 </dd> 60 <dd> 61 <a href="#">我也不知道在说什么你妹的！</a><span>2015-10-12</span> 62 </dd> 63 <dd> 64 <a href="#">我也不知道在说什么你妹的！</a><span>2015-10-12</span> 65 </dd> 66 </dl> 67 </div> 68 <div class="product clear"> 69 <h5><a href="#">精彩教程</a></h5> 70 <ul> 71 <li><a href="#">这里要设置连接！</a></li> 72 <li><a href="#">这里要设置连接！</a></li> 73 <li><a href="#">这里要设置连接！</a></li> 74 <li><a href="#">这里要设置连接！</a></li> 75 </ul> 76 </div> 77 </div> 78 <div class="subMenu"> 79 <h5>友情链接</h5> 80 <ul> 81 <li><a href="http://www.baidu.com" target="_blank">百度首页</a></li> 82 <li><a href="http://www.jd.com">京东首页</a></li> 83 <li><a href="http://www.runoob.com/">菜鸟教程</a></li> 84 <li><a href="http://mail.163.com">163邮箱</a></li> 85 <li><a href="http://www.cnblogs.com/xingzhui/">我的cnblog</a></li> 86 <li><a href="#">子菜单子菜单</a></li> 87 <li><a href="#">子菜单子菜单</a></li> 88 <li><a href="#">子菜单子菜单</a></li> 89 </ul> 90 </div> 91 </div> 92 <div id="footer" class="clear"> 93 <p>联系我：<a href="#">[email protected]</a></p> 94 </div> 95 </body> 96 </html>
以下是效果图：
时间： 2024-10-06 04:40:23