刚开始学HTML+CSS的同学可以看看
网页的设计稿是网上找来的资源，非原创
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=utf-8" />
<title>纯HTML+CSS静态页面</title>
<link href="css/yezi.css"rel="stylesheet"type="text/css">
</head>
<body>
<!------------------------------------- 头部部分 --------------------------------------------------------->
<div class="tuzi">
<div class="top">
<div class="top_1">
<ul>
<li><img src="images/din_1.jpg"/><a href="#">设为首页</a></li>
<li><img src="images/din_2.jpg"/><a href="#">加入收藏</a></li>
<li><img src="images/din_3.jpg"/><a href="#">联系我们</a></li>
</ul>
</div>
</div>
<!------------------------------------- logo部分 --------------------------------------------------------->
<div class="logo">
<div class="logo_1">
<span class="logo_left"><img src="images/logo.png"/></span>
<span class="logo_right"><img src="images/dianhua.png"/></span>
</div>
</div>
<!-------------------------------------- 导航部分 --------------------------------------------------------->
<div class="nav">
<div class="nav_1">
<ul class="nav_2">
<li>
<a href="#">网站首页</a>
<ul class="xiala">
<li>共3种下拉菜单</li>
<li>CSS下拉菜单</li>
<li>JQ下拉菜单</li>
<li>JS下拉菜单</li>
</ul>
</li>
<li>
<a href="#">关于我们</a>
<ul class="xiala">
<li>共3种下拉菜单</li>
<li>CSS下拉菜单</li>
<li>JQ下拉菜单</li>
<li>JS下拉菜单</li>
</ul>
</li>
<li>
<a href="#">协会动态</a>
<ul class="xiala">
<li>共3种下拉菜单</li>
<li>CSS下拉菜单</li>
<li>JQ下拉菜单</li>
<li>JS下拉菜单</li>
</ul>
</li>
<li>
<a href="#">新闻中心</a>
<ul class="xiala">
<li>共3种下拉菜单</li>
<li>CSS下拉菜单</li>
<li>JQ下拉菜单</li>
<li>JS下拉菜单</li>
</ul>
</li>
<li>
<a href="#">项目介绍</a>
<ul class="xiala">
<li>共3种下拉菜单</li>
<li>CSS下拉菜单</li>
<li>JQ下拉菜单</li>
<li>JS下拉菜单</li>
</ul>
</li>
<li>
<a href="#">互动中心</a>
<ul class="xiala">
<li>共3种下拉菜单</li>
<li>CSS下拉菜单</li>
<li>JQ下拉菜单</li>
<li>JS下拉菜单</li>
</ul>
</li>
<li>
<a href="#">加盟中心</a>
<ul class="xiala">
<li>共3种下拉菜单</li>
<li>CSS下拉菜单</li>
<li>JQ下拉菜单</li>
<li>JS下拉菜单</li>
</ul>
</li>
<li>
<a href="#">产品中心</a>
<ul class="xiala">
<li>共3种下拉菜单</li>
<li>CSS下拉菜单</li>
<li>JQ下拉菜单</li>
<li>JS下拉菜单</li>
</ul>
</li>
<li>
<a href="#">资源共享</a>
<ul class="xiala">
<li>共3种下拉菜单</li>
<li>CSS下拉菜单</li>
<li>JQ下拉菜单</li>
<li>JS下拉菜单</li>
</ul>
</li>
<li>
<a href="#">联系我们</a>
<ul class="xiala">
<li>共3种下拉菜单</li>
<li>CSS下拉菜单</li>
<li>JQ下拉菜单</li>
<li>JS下拉菜单</li>
</ul>
</li>
</ul>
</div>
</div>
<!--------------------------------------- 第一张大图 ----------------------------------------------------------->
<div class="tu"><img src="images/lunbo.png"/></div>
<!---------------------------------------- 中间主体内容 -------------------------------------------------------->
<div class="conter">
<ul>
<!---------------------- 硬坛新闻 --------------------------------->
<li class="conter_1">
<div class="yintang"><img src="images/yintang_tu.jpg"/></div>
<ul class="conter_con">
<li class="conter_li">
<img src="images/teshu.jpg"/>
<a href="#" class="conter_em_1">天津市启动汉字书写水平</a>
<a href="#" class="conter_em_2">2015-8-29</a>
</li>
<li>
<img src="images/teshu.jpg"/>
<a href="#" class="conter_em_1">天津市启动汉字书写水平</a>
<a href="#" class="conter_em_2">2015-8-29</a>
</li>
<li>
<img src="images/teshu.jpg"/>
<a href="#" class="conter_em_1">天津市启动汉字书写水平</a>
<a href="#" class="conter_em_2">2015-8-29</a>
</li>
<li>
<img src="images/teshu.jpg"/>
<a href="#" class="conter_em_1">天津市启动汉字书写水平</a>
<a href="#" class="conter_em_2">2015-8-29</a>
</li>
<li>
<img src="images/teshu.jpg"/>
<a href="#" class="conter_em_1">天津市启动汉字书写水平</a>
<a href="#" class="conter_em_2">2015-8-29</a>
</li>
</ul>
<!---------------------- 权威考级 --------------------------------->
<div class="quanwei"><img src="images/qunawei_tu.jpg"/></div>
<ul class="conter_con">
<li class="conter_li">
<img src="images/teshu.jpg"/>
<a href="#" class="conter_em_1">天津市启动汉字书写水平</a>
<a href="#" class="conter_em_2">2015-8-29</a>
</li>
<li>
<img src="images/teshu.jpg"/>
<a href="#" class="conter_em_1">天津市启动汉字书写水平</a>
<a href="#" class="conter_em_2">2015-8-29</a>
</li>
<li>
<img src="images/teshu.jpg"/>
<a href="#" class="conter_em_1">天津市启动汉字书写水平</a>
<a href="#" class="conter_em_2">2015-8-29</a>
</li>
<li>
<img src="images/teshu.jpg"/>
<a href="#" class="conter_em_1">天津市启动汉字书写水平</a>
<a href="#" class="conter_em_2">2015-8-29</a>
</li>
<li>
<img src="images/teshu.jpg"/>
<a href="#" class="conter_em_1">天津市启动汉字书写水平</a>
<a href="#" class="conter_em_2">2015-8-29</a>
</li>
<li>
<img src="images/teshu.jpg"/>
<a href="#" class="conter_em_1">天津市启动汉字书写水平</a>
<a href="#" class="conter_em_2">2015-8-29</a>
</li>
<li>
<img src="images/teshu.jpg"/>
<a href="#" class="conter_em_1">天津市启动汉字书写水平</a>
<a href="#" class="conter_em_2">2015-8-29</a>
</li>
<li>
<img src="images/teshu.jpg"/>
<a href="#" class="conter_em_1">天津市启动汉字书写水平</a>
<a href="#" class="conter_em_2">2015-8-29</a>
</li>
<li>
<img src="images/teshu.jpg"/>
<a href="#" class="conter_em_1">天津市启动汉字书写水平</a>
<a href="#" class="conter_em_2">2015-8-29</a>
</li>
</ul>
</li>
<li class="conter_2">
<!------------------- 关于我们 --------------------------->
<div class="guanyu"><img src="images/guanyu_tu.jpg"/></div>
<div class="guanyu_tu"><img src="images/guanyu.png"/></div>
<!------------------- 活动快递 --------------------------->
<div class="hopdong_tu"><img src="images/guanyu_tu-10.jpg"/></div>
<div class="hopdong">
<div class="hopdong_1"><img src="images/hopdong.png"/></div>
<div class="hopdong_2">
<p class="p_1">中国书画等级考试2010年11月报考简章</p>
<p class="p_2">在中国硬笔书法协会领导和支持下，短时间与国范围内迅速建立百所书法教育会员单位，引笔书法界的强烈反响...
<a style="color: red; " href="#">[详情]</a></p>
</div>
</div>
<div class="hopdong_bottom">
<ul>
<li>· <a href="#">中国书画等级考试2010年11....</a> </li>`
<li>· <a href="#">中国书画等级考试2010年11....</a> </li>
<li>· <a href="#">中国书画等级考试2010年11....</a> </li>
<li>· <a href="#">中国书画等级考试2010年11....</a> </li>
</ul>
<ul class="hopdong_bottom_r">
<li>· <a href="#">中国书画等级考试2010年11....</a> </li>
<li>· <a href="#">中国书画等级考试2010年11....</a> </li>
<li>· <a href="#">中国书画等级考试2010年11....</a> </li>
<li>· <a href="#">中国书画等级考试2010年11....</a> </li>
</ul>
</div>
</li>
<li class="conter_3">
<!------------------- 登陆 --------------------------->
<div class="denglu">
<p class="de_p">
<em class="denglu_1">会员登陆</em>
<a href="#" class="denglu_2">免费注册</a>
</p>
<p class="l_p_1 l_p_2">
<em>用户名：</em>
<input type="text"/>
</p>
<p class="l_p_1">
<em style="padding-left: 2px;">密 码：</em>
<input type="text"/>
</p>
<p class="l_p_3">
<span></span>
<a href="#">忘记密码</a>
</p>
</div>
<!------------------- 其他图片 --------------------------->
<div class="img_1"><a href="#"><img src="images/jiameng.jpg"/></a></div>
<div class="img_1"><a href="#"><img src="images/lianxi.jpg"/></a></div>
<div class="img_1"><a href="#"><img src="images/chanpin.jpg"/></a></div>
</li>
</li>
</div>
<!------------------- 专家寄予 --------------------------->
<div class="zhuanjia">
<div class="zhuanjia_1">
<div class="z_img"><img src="images/zhuangjia.jpg"/></div>
<ul>
<li>
<img src="images/tu.png"/>
<em>图片名字...</em>
</li>
<li>
<img src="images/tu.png"/>
<em>图片名字...</em>
</li>
<li>
<img src="images/tu.png"/>
<em>图片名字...</em>
</li>
<li>
<img src="images/tu.png"/>
<em>图片名字...</em>
</li>
<li>
<img src="images/tu.png"/>
<em>图片名字...</em>
</li>
<li>
<img src="images/tu.png"/>
<em>图片名字...</em>
</li>
</ul>
</div>
<!------------------- 视频欣赏 --------------------------->
<div class="tupian">
<div class="tupian_1"><img src="images/shiping_tu.png"/></div>
<div class="tupian_2"><img src="images/201210021238_29.png"/></div>
</div>
</div>
<!------------------- 广告图片 --------------------------->
<div class="guanggao"><img src="images/guanggao.png"/></div>
<!------------------- 互动中心 --------------------------->
<div class="hudong">
<div class="z_img"><img src="images/hudong.jpg"/></div>
<div class="z_img_1"><img src="images/mingxing.png"/></div>
<div style="float: left; padding-top: 97px; padding-left: 16px;"><img src="images/anniu_1.jpg"/></div>
<ul>
<li>
<img src="images/tu.png"/>
<em>图片名字...</em>
</li>
<li>
<img src="images/tu.png"/>
<em>图片名字...</em>
</li>
<li>
<img src="images/tu.png"/>
<em>图片名字...</em>
</li>
<li>
<img src="images/tu.png"/>
<em>图片名字...</em>
</li>
<li>
<img src="images/tu.png"/>
<em>图片名字...</em>
</li>
<li>
<img src="images/tu.png"/>
<em>图片名字...</em>
</li>
<li>
<img src="images/tu.png"/>
<em>图片名字...</em>
</li>
</ul>
<div style="float: right; padding-top: 35px; padding-right: 16px;"><img src="images/anniu.jpg"/></div>
</div>
<!------------------- 底部导航 --------------------------->
<div class="di_txt">
<a href="#">返回首页</a> |
<a href="#">关于我们</a> |
<a href="#">在线加盟</a> |
<a href="#">联系我们</a> |
<a href="#">在线报名</a> |
<a href="#">招生专题</a> |
<a href="#">公司动态</a>
</div>
<!------------------- 叶子。。。 --------------------------->
<p class="bottoom">2015年8月29日 叶子作</p>
</div>
</body>
</html>
css
/*公共样式*/
*{ margin: 0; padding: 0;}
body{ font-family: "Microsoft YaHei"; overflow-x: hidden;}/* CSS Document */
img{ display: block; border: 0;}
ul{ list-style: none;}
em,i{ font-style: normal;}
a{ text-decoration:none; color: #000; }
a:hover{ text-decoration:none; color: red; }
/*头部部分样式*/
.tuzi .top{ height: 35px; background: url(../images/top_bg1.png) repeat-x; overflow: hidden; }
.tuzi .top .top_1{ width: 1000px; margin: 0 auto; overflow: hidden; }
.tuzi .top .top_1 ul{ float: right; overflow: hidden; }
.tuzi .top .top_1 ul li{ float: left; line-height: 35px; overflow: hidden; }
.tuzi .top .top_1 ul li img{ float: left; position: relative; top: 13px; right: 6px; padding-left: 25px; }
.tuzi .top .top_1 ul li a{ font-size: 13px; }
/*logo部分样式*/
.tuzi .logo{ height: 85px; background: url(../images/top_bg2.png) repeat-x; }
.tuzi .logo .logo_1{ width: 1000px; margin: 0 auto; overflow: hidden; }
.tuzi .logo .logo_1 .logo_left{ display: block; float: left; padding-top: 10px; }
.tuzi .logo .logo_1 .logo_right{ display: block; float: right; padding-top: 32px; }
/*导航部分样式*/
.tuzi .nav{ height: 33px; background: url(../images/nav.png) repeat-x; }
.tuzi .nav .nav_1{ width: 1000px; margin: 0 auto; }
.tuzi .nav .nav_1 .nav_2 li{ position: relative; top: 3px; float: left; width: 10%; line-height: 30px; text-align: center; }
.tuzi .nav .nav_1 .nav_2 li a{ color: #FFF; }
.tuzi .nav .nav_1 .nav_2 li:hover{ background-color: #FFF; height: 30px; line-height: 30px; }
.tuzi .nav .nav_1 .nav_2 li:hover a{ color: #0069a5; }
.tuzi .nav .nav_1 .nav_2 li:hover .xiala{ display: block; }
.tuzi .nav .nav_1 .nav_2 li .xiala{ width: 100%; position: absolute; left: 0px; top: 30px; display: none; color: #000; }
.tuzi .nav .nav_1 .nav_2 li .xiala li{ height:35px; float: none; background-color: #DDD; opacity: 0.6; text-align: center; font-size: 14px; width: 100%; line-height: 35px; border-bottom: 1px dashed #FFF; }
.tuzi .nav .nav_1 .nav_2 li .xiala li:hover{ background-color: #20B7FF; }
.tuzi .tu img{ margin: 0 auto; }
/*硬坛新闻 and 权威考级*/
.tuzi .conter{ width: 1000px; margin: 7px auto; overflow: hidden; }
.tuzi .conter li{ float: left; line-height: 28px; font-size: 14px; }
.tuzi .conter_1{ width: 27%; height: 490px; padding-right: 20px; }
.tuzi .conter_1 .yintang{ border-bottom: 1px solid #B7B7B7; }
.tuzi .conter_1 .quanwei{ border-bottom: 1px solid #B7B7B7; }
.tuzi .conter_1 .quanwei img{ padding-top: 17px; }
.tuzi .conter_1 .conter_con{ border-top: 1px solid #e4e4e4; overflow: hidden; }
.tuzi .conter_1 .conter_con li{ padding-left: 10px; }
.tuzi .conter_1 .conter_con li .conter_em_1{ padding-left: 5px; }
.tuzi .conter_1 .conter_con li .conter_em_2{ padding-left: 13px; }
.tuzi .conter_1 .conter_con img{ display: inline; }
.tuzi .conter_1 .conter_con .conter_li{ padding-top: 10px; }
/*关于我们 and 活动快递*/
.tuzi .conter_2{ width: 48%; padding-right: 17px; }
.tuzi .conter_2 .guanyu{ border-bottom: 1px solid #B7B7B7; }
.tuzi .conter_2 .guanyu_tu{ border-top: 1px solid #e4e4e4; }
.tuzi .conter_2 .guanyu_tu img{ margin: 10px auto; }
.tuzi .conter_2 .hopdong_tu{ border-bottom: 1px solid #B7B7B7; }
.tuzi .conter_2 .hopdong{ padding-top: 10px; border-top: 1px solid #e4e4e4; border-bottom: 1px dashed #ccc; padding-bottom: 119px; }
.tuzi .conter_2 .hopdong .hopdong_1 img{ float: left; width: 39%; padding-top: 10px; }
.tuzi .conter_2 .hopdong .hopdong_2{ float: right; width: 61%; }
.tuzi .conter_2 .hopdong .hopdong_2 .p_1{ font-size: 16px; color: red; padding-left: 5px; position: relative; top: -3px; }
.tuzi .conter_2 .hopdong .hopdong_2 .p_2{ padding-left: 6px; font-size: 14px; line-height: 23px; }
.tuzi .conter_2 .hopdong_bottom ul{ padding-left: 2px; display: block; float: left; width: 49%; padding-top: 16px; }
.tuzi .conter_2 .hopdong_bottom{ overflow: hidden; }
.tuzi .conter_2 .hopdong_bottom .hopdong_bottom_r{ float: right; }
/*登陆部分*/
.tuzi .conter_3{ width: 21.3%; height: 490px; }
.tuzi .conter_3 .denglu{ border: 1px solid #ccc; border-radius: 5px 5px 0 0; height: 179px; color: #5397cb; background-color: #f2f2f2; }
.tuzi .conter_3 .denglu a{ color: #5397cb; }
.tuzi .conter_3 .denglu .de_p{ border-bottom: 1px solid #ccc; background-color: #b7e0ff; border-radius: 5px 5px 0 0; line-height: 30px; }
.tuzi .conter_3 .denglu input{ width: 125px; height: 20px; border: 1px solid #a6cbe7; }
.tuzi .conter_3 .denglu em{ text-align: right; }
.tuzi .conter_3 .denglu .denglu_1{ font-weight: bold; padding-left: 10px; color: #1875ad; }
.tuzi .conter_3 .denglu .denglu_2{ padding-left: 66px; }
.tuzi .conter_3 .denglu .l_p_1{ padding-left: 7px; }
.tuzi .conter_3 .denglu .l_p_2{ padding-top: 10px; line-height: 45px; }
.tuzi .conter_3 .denglu .l_p_3{ overflow: hidden; }
.tuzi .conter_3 .denglu .l_p_3 span{ width: 47px; height: 23px; background: url(../images/denglu.png); display: block; margin: 14px 0 0 68px; float: left;}
.tuzi .conter_3 .denglu .l_p_3 span:hover{ cursor: pointer; opacity: 0.8; }
.tuzi .conter_3 .denglu .l_p_3 a{ display: block; float: left; padding-left: 22px; padding-top: 12px;}
.tuzi .conter_3 .img_1{ margin-top: 10px; }
.tuzi .conter_3 .img_1:hover{ opacity: 0.8; }
/*专家寄语*/
.tuzi .zhuanjia{ width: 1000px; height: 206px;; margin: 0 auto; }
.tuzi .zhuanjia div{ float: left; }
.tuzi .zhuanjia .zhuanjia_1{ width: 765px; height: 206px; border: 1px solid #ccc; position: relative; background-color: #f9f9f9; }
.tuzi .zhuanjia .zhuanjia_1 ul{ padding-top: 58px; }
.tuzi .zhuanjia .zhuanjia_1 ul li{ float: left; padding-left: 25px; text-align: center; font-size: 13px; line-height: 25px; }
.tuzi .zhuanjia .zhuanjia_1 ul li img:hover{ opacity: 0.8; }
.tuzi .zhuanjia .zhuanjia_1 .z_img{ position: absolute; top: 10px; left: -10px; }
/*视频欣赏*/
.tuzi .tupian{ width: 21.3%; }
.tuzi .tupian .tupian_1{ width: 100%; margin-left: 20px; border-bottom: 1px solid #005ea6; }
.tuzi .tupian .tupian_2{ width: 197px; height: 150px; border: 1px solid #ccc; border-radius: 5px; position: relative; left: 26px; top: 12px; background-color: #f3f3f3;}
.tuzi .tupian .tupian_2 img{ margin: 11px auto; }
.tuzi .tupian .tupian_2 img:hover{ cursor: pointer; }
/*广告图片*/
.tuzi .guanggao img{ margin: 10px auto; }
/*互动中心*/
.tuzi .hudong { width: 1000px; height: 206px; margin: 0 auto; border: 1px solid #ccc; position: relative; background-color: #f9f9f9; }
.tuzi .hudong ul{ padding-top: 58px; }
.tuzi .hudong ul li{ float: left; padding-left: 29px; text-align: center; font-size: 13px; line-height: 25px; }
.tuzi .hudong ul li img:hover{ opacity: 0.8; }
.tuzi .hudong .z_img{ position: absolute; top: 10px; left: -10px; }
.tuzi .hudong .z_img_1{ position: absolute; top: 10px; left: 697px; }
/*底部导航*/
.tuzi .di_txt{ width: 1000px; border-top: 4px solid #005ea6; margin: 17px auto; text-align: center; font-size: 14px; line-height: 38px; border-bottom: 1px dashed #ccc; }
/*叶子*/
.tuzi .bottoom{ text-align: center; font-size: 14px; margin-bottom: 10px; }
3181
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
