html部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>一个简单的DIV+CSS模板</title><link href="/blog/css.css" rel="stylesheet" type="text/css" media="all" /></head><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"><!----> 111111111111111 </div> </div> <div class="channel"><!--频道链接样式--> <UL> <LI><A title=文化频道 href="#">文化频道</A></LI> <LI><A title=文化频道 href="#">文化频道</A></LI> <LI><A title=文化频道 href="#">文化频道</A></LI> <LI><A title=文化频道 href="#">文化频道</A></LI> <LI><A title=文化频道 href="#">文化频道</A></LI> </UL> </div> <div id="pagebody"><!--页面主体--> <div id="mainbody"><!--主体内容--> <div id="title"><h2>sideleftdfgdfgdfg</h2></div> <div id="content"> <p> http://www.100shang.com</p> </div> </div> <div id="sidebar"><!--侧边栏--> <div id="title_s1"><h2>sideleftdfgdfgdfg</h2></div> <div id="content_s1"> <UL> <LI><A title=文化频道 href="#">文化频道</A></LI> <LI><A title=文化频道 href="#">文化频道</A></LI> <LI><A title=文化频道 href="#">文化频道</A></LI> <LI><A title=文化频道 href="#">文化频道</A></LI> <LI><A title=文化频道 href="#">文化频道</A></LI> </UL> </div> </div></div> <div id="footer"><!--页面底部--> 页面底部 </div> </div></body></html>css部分
/**/
/*基本信息*/
body
{...}
{font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
a:link,a:visited
{...}
{font-size:12px;text-decoration: none;}
a:hover
{...}
{}
h1,h2
{...}
{font-size: 20px;text-align: center; margin:0 auto}
/**/
/*页面层容器*/
#container
{...}
{width:760px;height:600px;margin:10px auto; word-break:break-all}
/**/
/*页面头部*/
#header
{...}
{background:url(/blog/logo.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(/blog/banner.jpg) 0 30px no-repeat;width:730px;margin:auto;height:100px;border-bottom:5px solid #EFEFEF;clear:both}
/**/
/*频道链接样式*/
.channel
{...}
{ width:350px; margin:12px 0px 0px 175px; height:30px; line-height:30px; text-align:center; }
.channel ul
{...}
{ list-style:none; margin:0px;}
.channel li
{...}
{ float:left; padding-left:8px; }
.channel a
{...}
{ background:url(/blog/arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; font-size:14px; font-weight:bold; }
.channel a:link
{...}
{ background:url(/blog/arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; }
.channel a:visited
{...}
{ background:url(/blog/arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; }
.channel a:hover
{...}
{ background:url(/blog/arrow1.gif) no-repeat left; padding-left:10px; color:#78b4c7; }
.channel a:active
{...}
{ background:url(/blog/arrow1.gif) no-repeat left; padding-left:10px; color:#78b4c7; }
/**/
/*页面主体*/
#pagebody
{...}
{width:760px;margin:3px auto;height:400px;background:#eeeeee;}
/**/
/*margin:8px auto;*/
/**/
/*居中*/
#sidebar
{...}
{ /**//*558+10+2=570*/
width:176px; /**//*设定宽度*/ text-align:left; /**//*文字左对齐*/ float:right; /**//*浮动居右*/ clear:right; /**//*不允许右侧存在浮动*/ overflow:hidden; /**//*超出宽度部分隐藏*/
background:#ffffff; padding:1px; border: #FF8040 1px solid;
}
#title_s1
{...}
{ text-align:center; background: #FFCA95; padding:3px; }
#title_s1 h2
{...}
{font-size: 14px;text-align: center; margin:0 auto}
#content_s1
{...}
{ text-align:left; font-size:14px; float:left; /**//*浮动居左*/ clear:left; /**//*不允许左侧存在浮动*/ overflow:hidden; background:#ffffff; }
#mainbody
{...}
{ /**//*558+10+2=570*/ width:558px; text-align:left; font-size:14px; float:left; /**//*浮动居左*/ clear:left; /**//*不允许左侧存在浮动*/ overflow:hidden; background:#fafaf5; padding:5px; border:#0099CC 1px solid;}
#title
{...}
{ text-align:center; background:#ffffff; padding:10px; }
#content
{...}
{ text-align:left; font-size:14px; float:left; /**//*浮动居左*/ clear:left; /**//*不允许左侧存在浮动*/ overflow:hidden; background:#ffffff; }
/**/
/*页面底部*/
#footer
{...}
{width:760px;margin:0 auto;height:50px;background:#00FFFF}
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
