div+css博客网站设计

2018-01-04 10:42:00
admin
原创
365
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

</head>
<style>
/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
a:link,a:visited {font-size:12px;text-decoration: none;}
a:hover{}

/*页面层容器*/
#container {width:800px;height:600px;margin:10px auto}

/*页面头部*/
#header {background:url(http://www.ybao.org/data/upload/201801/f_1572fb6fbdeee1e3dbbdf2fc37e68367.gif) no-repeat}
#menu {padding:20px 20px 0 0}
#menu ul {float:right;list-style:none;margin:0px;}
#menu ul li {float:left;display:block;line-height:30px;margin:0 10px}
#menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666}
#menu ul li a:hover{}
.menuDiv {width:1px;height:28px;background:#999}
#banner {background:url(http://www.ybao.org/data/upload/201801/f_ae12613e7db3fde3323057aa8a0affc3.jpg) 0 30px no-repeat;width:730px;margin:auto;height:240px;border-bottom:5px solid #EFEFEF;clear:both}

/*页面主体*/
#pagebody {
 width:730px; /*设定宽度*/
 margin:8px auto; /*居中*/
}
#sidebar {
 width:160px; /*设定宽度*/
 text-align:left; /*文字左对齐*/
 float:left; /*浮动居左*/
 overflow:hidden; /*超出宽度部分隐藏*/
	border:1px solid #E00;
height:200px
}
#mainbody {
 width:560px;
 text-align:left;
 float:right; /*浮动居右*/
 overflow:hidden;
	border:1px solid #E00;
height:200px;
}
.clear{clear:both;}	
/*页面底部*/
#footer {width:730px;margin:20px auto;padding-top:20px;height:50px;background:#aaaaaa;}

	
</style>
<body>
<div id="container">
	<div id="header">
		<div id="menu">
		  <ul>
		    <li><a href="#">首页</a></li>
			<li class="menuDiv"></li>
			<li><a href="#">博客</a></li>
			<li class="menuDiv"></li>
			<li><a href="#">设计</a></li>
			<li class="menuDiv"></li>
			<li><a href="#">相册</a></li>
			<li class="menuDiv"></li>
			<li><a href="#">论坛</a></li>
			<li class="menuDiv"></li>
			<li><a href="#">关于</a></li>
		  </ul>
		</div>
		<div id="banner">
		</div>
	</div>
	<div id="pagebody"><!--页面主体-->
      <div id="sidebar"><!--侧边栏-->
      </div>
      <div id="mainbody"><!--主体内容-->
     </div>
    </div>
	<div class="clear">
	</div>
	<div id="footer"><!--页脚-->
      版权所有
    </div>
</div>
</body>
</html>
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227