CSS+DIV 设计一个简单的个人网页界面
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="#">mhzhang1989@163.com</a></p> 94 </div> 95 </body> 96 </html>
以下是效果图：
版权声明：本文为xingzhui原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。