用html和css写简单的静态网页
2015-11-01 20:23
666 查看
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style>
body{margin: 0px;padding: 0px}
header{margin: 0px}
#header{margin: 0px}
#hearedtop{background-color: #333333;width: 100%;height: 55px;margin: 0px}
#zi{margin: 0px auto;width:827px;position: relative }
#topleft h1{float: left;margin-top: 4px}
#logo1{color: #008be9}
#logo2{color: #e2e2e2}
#topleft ul{list-style: none;margin-top: -16px;margin-left: 120px}
#topleft ul li{float: left;margin-top: 17px}
#topleft ul li a{text-decoration: none; color: #dddddd;padding: 0px 6px;font-size: 12px;}
#topleft ul li a:hover{background-color:#ffffff;color: #333333; }
/*#xiaj{ width: 20px;*/
/*height: 20px;*/
/*background-image: url("images/hdbg.png");*/
/*background-position: 0px 0px;*/
/*background-repeat: no-repeat;*/
/*float: right;*/
/*margin-top: 10px}*/
/*#erji{display: none;color: #333333;}*/
/*#erjcd:hover{ width: 20px;*/
/*height: 20px;*/
/*background-image: url("images/hdbg.png");*/
/*background-position: 0px 10px;*/
/*background-repeat: no-repeat;*/
/*float: right;*/
/*margin-top: 10px}*/
/*#xiaj{border: 10px solid;}*/
#topright{float: right}
#topright img{width: 20px;height: 20px;position: absolute;left: 677px;top:19px;}
#topright ul{list-style: none;position: absolute;left: 667px;top: 2px;}
#topright ul li{float: left}
#topright ul li a{padding: 0px 5px}
#one
{
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
display: block;
width: 20px;
height: 20px;
background-image: url("images/hdbg.png");
background-position: 0px -211px;
background-repeat: no-repeat;
}
#two
{
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
display: block;
width: 20px;
height: 20px;
background-image: url("images/hdbg.png");
background-position: 0px -76px;
background-repeat: no-repeat;
}
#see
{
overflow: hidden;
text-indent: 100%;
white-space: nowrap;;
display: block;
width: 20px;
height: 20px;
background-image: url("images/hdbg.png");
background-position: 0px -121px;
background-repeat: no-repeat;
}
#for
{
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
display: block;
width: 20px;
height: 20px;
background-image: url("images/hdbg.png");
background-position: 0px -167px;
background-repeat: no-repeat;
}
.clear{overflow:hidden}
#headerbottom
{
height: 272px;
width: 100%;
background: url("images/background-img.jpg");
position: relative;
margin: 0px;
/*margin-top: -22px;*/
}
#ysj
{
margin: 0px;
position: absolute;
top: 0px;
right: 0px;
width: 32px;
height: 32px;
background: url("images/diy_bt.png");
background-position: -8px 0px;
background-repeat: no-repeat;
}
#tu{margin: 0px auto;width:827px;position: relative}
#tx
{
position: absolute;
left:26px;
top: -166px;
background-color: white;
height: 180px;
width: 180px;
text-align: center;
}
#tx img
{height: 165px;
width: 165px;
margin-top: 7px}
#nc
{
position: absolute;
left: 215px;
top: 100px;
}
#nc h1
{font-size: 22px}
#nc p
{
margin-top: -15px;
font-size: 11px;
}
#yt
{
position: absolute;
top: 110px;
right: 0px;
}
#jbj
{
width: 122px;
height: 42px;
background: url("images/space_hd_publish_btn.png");
margin-left: 55px;
}
#bj
{margin-top: 13px;
font-size: 13px}
#bj div
{float: left;
text-align: center;
background-color: #333333;
height: 46px;
width: 59px;
color: white;
}
#bj1
{opacity: 0.8}
.tm
{opacity: 0.6}
#cdh
{background-color: #333333;opacity: 0.8 ;
height: 25px;width: 100%;
position: absolute;
top: 247px;}
#cdh ul
{list-style: none;
margin-left:183px;
margin-top: -16px}
#cdh ul li
{float: left}
#cdh ul li a
{text-decoration: none;
color: white;
padding: 0px 10px;
font-size: 10px;
}
#cdh ul li a:hover
{background-color: white;
color:#333333 }
#dh1{
width: 827px;
margin: 0px auto;
position: relative}
footer
{background-color: #333333;
/*outline: 1px solid;*/
width:100%;
height: 225px;
}
footer>div
{ width: 827px;
margin: 0px auto;
/*margin-top: 455px;*/
position: relative;
/*outline: 1px solid*/
}
footer>div div
{float: left;
/*outline: 1px solid;*/
}
.yb
{text-align: right}
.z
{margin-top: -40px}
footer>div a
{text-decoration: none;
color: #999999}
footer>div p
{color: #999999}
footer>div h5
{color: white}
#w1{
position: absolute;
left: 12px;
top: 10px;
}
#w2{
position: absolute;
left: 92px;
top: 10px;
}
#w3{
position: absolute;
left: 176px;
top: 10px;
}
#w4{
position: absolute;
left: 261px;
top: 10px;
}
#w5{
position: absolute;
left: 365px;
top: 10px;
}</style> </head> <body> <header> <div id="header"> <div id="hearedtop"> <div id="zi"> <div id="topleft"> <h1 id="logo1">w3c</h1> <h1 id="logo2">funs</h1> <ul> <li><a href="">首页</a></li> <li><a href="">笔记</a></li> <li><a href="">问问</a></li> <li><a href="">前端</a></li> <li><a href="">技术</a></li> <li><a href="">教程</a></li> <li><a href="">资源</a></li> <li><a href="">招聘</a></li> <li><a href="">我的前端</a></li> <li><a href=""> 更多</a></li> <!--<div id="xiaj"></div>--> <!--<div id="erji">--> <!--<div id="shangj"></div>--> <!--<ul><li><a href="">帮派</a></li>--> <!--<li><a href="">试题</a></li>--> <!--<li><a href="">面试</a></li>--> <!--<li><a href="">神器</a></li>--> <!--</ul>--> <!--</div>--> </ul> </div> <div id="topright"><img src="images/noavatar_small.gif"/><ul> <li><a href="" id="one"></a></li> <li><a href="" id="two"></a></li> <li><a href="" id="see"></a></li> <li><a href="" id="for"></a></li></ul> </div> </div> <div class="clear"></div> </div> <div id="headerbottom"> <div id="ysj"></div> <div id="tu"> <div id="nc"> <h1>hellomephllw的博客</h1> <p>精彩生活从这里开始，爱前端，爱W3Cfuns!</p> </div> <div id="yt"> <a href=""><div id="jbj"><!--<a href=""><img src="images/space_hd_publish_btn.png"/></a>--></div></a> <div id="bj"> <div id="bj1">0 <br/>笔记</div> <div class="tm">0 <br/>好友</div> <div class="tm">5 <br/>金币</div> </div> </div> </div> <div id="cdh"> <div id="dh1"><div id="tx"><img src="images/noavatar_big.gif"/></div> <ul> <li><a href="">博客首页</a></li> <li><a href="">笔记</a></li> <li><a href="">图库</a></li> <li><a href="">话题</a></li> <li><a href="">留言板</a></li> <li><a href="">动态</a></li> <li><a href="个人资料.html">个人资料</a></li> </ul></div></div> <div class="clear"></div> </div> </div> </header> <section> <div id="zw1"> <div class="bt"><h5>帮派</h5></div> <div>现在还没有帮派， <a href="">加入帮派</a></div> <div class="bt"><h5>动态</h5></div> <div>现在还没有动态</div> <div class="bt"><h5>最近访客</h5></div> <div>现在还没有访客， <a href="">去串串门</a></div> </div> <div id="zw2"> <div class="bt"><h5>笔记</h5></div> <div>现在还没有笔记，<a href="">发布笔记</a></div> <div class="bt"><h5>话题</h5></div> <div>现在还没有话题，<a href="">发布话题</a></div> <div class="bt"><h5>个人资料</h5><a href="">编辑我的资料</a></div> <div id="xb">性别 男 <br/><br/> <a href="">查看全部个人资料</a></div> <div class="bt"><h5>留言板</h5><a href="">全部</a></div> <div><img src="images/facelist.gif"/><br/> <textarea rows="5" cols=60"></textarea><br/> <input type="button" value="留言"/><br/> 现在还没有留言</div> </div> <div id="zw3"> <div class="bt"><h5>好友</h5></div> <div>现在还没有好友，<a href="">查找好友</a>或 <br/><a href="">邀请好友</a></div> <div class="bt"><h5>分享</h5></div> <div>现在还没有分享</div> </div>
section
{font-size: 12px;
width: 827px;
height: 420px;
margin: 0px auto;
/*outline: 1px solid;*/
background-color: #ffffff;
margin-top: -10px;
color: #444444;
}
section a
{color: #336699}
.bt
{background-color: #f1f1f1;
text-align: left;
height: 20px;
position: relative;
}
.bt a
{position: absolute;
left:315px;
top: 1px}
section>div
{float: left;/*outline: 1px solid*/}
#zw1
{width: 210px;
margin-right: 10px;
margin-left: 15px}
#zw2
{width: 410px;
margin-right: 10px;
height: 410px}
#zw3{
width: 160px;
}
#xb a
{margin-left: 300px;
text-decoration: none;
color: #444444}</section> <footer> <div> <div id="w1"><h5>前端网</h5><p class="z"><br/><a href="">关于我们</a> <br/><a href="">注册协议 </a><br/>版权隐私 <br/><a href="">免责声明</a> <br/><a href="">投诉建议</a></p></div> <div id="w2"><h5>商务</h5><p class="z"><br/><a href="">广告推广</a> <br/><a href="">招聘服务</a></p></div> <div id="w3"><h5>微博</h5><p class="z"><br/><a href="">腾讯微博 </a><br/><a href="">新浪微博</a></p></div> <div id="w4"><h5>合作伙伴</h5><p class="z"><br/><img src="images/090741tswwuxssbwtugw9z.png"/><br/> <img src="images/233238foyqqjqagcq7yayx.png"/></p></div> <div id="w5"><p> 前端网（W3CFUNS）,中国第一Web前端开发综合性网 <br/>站，汇聚了广大中国Web前端开发工程师，并为工程师及企业 <br/>提供优质的前端资源和服务，是国内前端开发最贴心的综合服务 <br/>平台。业务涉及：前端招聘、人才推荐、前端神器、教程素材、 <br/>开发工具、学习服务等诸多前端产业。</p> <p class="yb">Copyright© W3Cfuns.com All Rights Reserved</p> <p class="yb">京ICP备10055601号-2</p> </div></div><div class="clear"></div> </footer> </body> </html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html和css设计开发框架
- CSS3之2D变形
- CSS reset的重新审视 – 避免样式重置
- 链接样式表和导入样式区别
- CSS在不同浏览器兼容问题,margin偏移/offset溢出等
- Html+Css_ 行内元素与块级元素比较全面的区别和转换
- Html+Css_div中的垂直居中布局
- CSS选择器笔记，element element和element > element 的区别
- 用css3实现鼠标移入在原来的层上面显示另一个层的动画效果
- 各大团队的初始化CSS代码
- CSS命名规范
- CSS 选择器的优先级
- CSS边框发光
- 去掉苹果默认样式
- CSS3写的一个按钮
- CSS文本
- CSS基础学习四：元素选择器
- css三列布局（一）
- html和css做网页时注意事项
- 详解CSS display:inline-block的应用