范例1——Shopping_mall
效果图
HTML代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="css/Shopping mall.css" type="text/css"/>
</head>
<body onselectstart="return false">
<!--<div id=Tdiv style="HEIGHT: 45px; LEFT: 0px; POSITION: absolute; TOP: 0px; WIDTH: 45px; Z-INDEX: 25">
<input name="image1" type="image" id="image1" src="mrsoft.jpg" width="52" height="249" border="0">
</div>-->
<!--开始！！-->
<div id="Layer1" style="position:absolute; left:0; top:0; width:1500; height:1500; z-index:-1">
<div align="center">
<embed src="flash3080.swf" width="1500" height="1500" wmode="transparent">
</div>
</div>
<div id="Layer2" style="left:0; top:0;">
<div id="container">
<div class="header">
<div class="header_top">
<ul>
<li style="padding-left:55px;">您好，欢迎光临商城！<span><a href="register.html" onMouseOut="out()" onMouseOver="over('此处注册新用户')">注册</a> <a href="login.html">登录</a>]</span> 购物车共计商品 0 件 合计 0.00</li>
<li><img style="padding:4px 0px 0px 25px;" src="images/header_top_gif.gif"/></li>
<li><span><a href="login.html">信任登录</a></span></li>
<li id="showTime" style="padding-left:20px;"></li>
<li style="padding-left:20px;"><span><a href="#" onClick=" window.open('date.html','','width=557,height=280,top=10,left=20');">日历</a></span></li>
<li style="padding-left:110px;" class="header_top_small_navigation"><a href="shoppingCar.html" >查看购物车</a></li>
<li>|</li>
<li class="header_top_small_navigation"><a href="shopSearch.html">订单查询</a></li>
<li>|</li>
<li class="header_top_small_navigation"><a href="#">帮助中心</a></li>
<li>|</li>
<li class="header_top_small_navigation"><a href="#">优惠活动</a></li>
<li id="Tdiv" style=" margin-right:0px;"></li>
</ul>
</div>
<div style=" position:absolute; padding-left:130px; padding-top:10px;"><img width="50" height="50s" src="images/logo2.gif"></div>
<div class="header_mid">
<i><p style=" padding-left:130px;" class="header_mid_font">咨询热线：</p><p class="header_mid_font2">400–676–5919</p></i>
<div style="clear:both"></div>
<form action="#" method="post">
<input class="search_input"type="text" maxlength="30"/>
<input name="search_button" type="image" src="images/header_mid_search_button.jpg"/>
</form>
</div>
<div class="navigation">
<p><a href="#"><img style="margin-left:57px;" src="images/header_navigation_index_button.jpg"/></a></p>
<ul>
<li onMouseOver="Fsubmenu('精品女装')"><a class="navigation_first_item" href="content.html">精品女装</a></li>
<li class="navigation_bg_border"></li>
<li onMouseOver="Fsubmenu('时尚男装')"><a href="#">时尚男装</a></li>
<li class="navigation_bg_border"></li>
<li onMouseOver="Fsubmenu('童装')"><a href="#">童装</a></li>
<li class="navigation_bg_border"></li>
<li onMouseOver="Fsubmenu('睡衣')"><a href="#">睡衣</a></li>
<li class="navigation_bg_border"></li>
<li onMouseOver="Fsubmenu('女士内衣')"><a href="#">女士内衣</a></li>
<li class="navigation_bg_border"></li>
</ul>
</div>
</div>
<!--头部结束-->
<!--正文开始-->
<div class="content" >
<!--上边界开始-->
<div>
<div class="content_top_wide_boder">
<img style="padding-left:22px;" src="images/content_top_wide_boder_gif.gif"/>
<span id="submenu"></span>
</div>
</div>
<!--上边界结束-->
<span onMouseOver="Fsubmenu('隐藏二级导航')">
<!--左部分开始-->
<div class="content_left">
<!--登录开始-->
<div class="content_left_login">
<img width="213" src="images/content_left_login_title.jpg"/>
<div class="content_left_login_bg">
<form action="#" method="post">
用户名：<input class="content_left_login_bg_input" type="text"/><br/>
密<p class="content_left_login_bg_p1"></p>码：<input class="content_left_login_bg_input" type="password"/>
<p class="content_left_login_bg_p2">
<input type="image" maxlength="20" src="images/login_button.jpg"/>
<input type="image" maxlength="20" src="images/register.jpg" onClick="javascript:window.open('register.html','','');"/>
</p>
</form>
</div>
</div>
<!--登录结束-->
<!--商品分类开始-->
<div class="content_left_classification_of_goods">
<ul>
<a href="#">精品女装</a>
<a href="#">时尚男装</a>
<a href="#">童装</a>
<a href="#">睡衣</a>
<a href="#">女士内衣</a>
<a href="#">查看更多分类装</a>
</ul>
</div>
<!--商品分类结束-->
<!--选择价格开始-->
<div class="content_left_suitable_price">
<ul>
<li><a href="#">50元以下</a></li>
<li><a href="#">50-100元</a></li>
<li><a href="#">100-200元</a></li>
<li><a href="#">200-300元</a></li>
<li><a href="#">300-400元</a></li>
<li><a href="#">500元以上</a></li>
</ul>
</div>
<!--选择价格结束-->
<img style="margin-top:10px;"src="images/hot_sale.jpg"/>
<!--热销开始-->
<div class="content_left_hot_sale">
<div class="content_left_hot_sale_border2">
<div class="content_left_hot_sale_border3">
<ul>
<li class="content_left_hot_sale_redgif">1</li>
<li><a href="#">2012夏季新款时尚百搭</a></li>
<div style="clear:both;"></div>
<li class="content_left_hot_sale_redgif">2</li>
<li><a href="#">2012夏季新款时尚百搭</a></li>
<div style="clear:both;"></div>
<li class="content_left_hot_sale_redgif">3</li>
<li><a href="#">2012夏季新款时尚百搭</a></li>
<div style="clear:both;"></div>
<li class="content_left_hot_sale_orangegif">4</li>
<li><a href="#">2012夏季新款时尚百搭</a></li>
<div style="clear:both;"></div>
<li class="content_left_hot_sale_orangegif">5</li>
<li><a href="#">2012夏季新款时尚百搭</a></li>
<div style="clear:both;"></div>
<li class="content_left_hot_sale_orangegif">6</li>
<li><a href="#">2012夏季新款时尚百搭</a></li>
<div style="clear:both;"></div>
<li class="content_left_hot_sale_orangegif">7</li>
<li><a href="#">2012夏季新款时尚百搭</a></li>
<div style="clear:both;"></div>
<li class="content_left_hot_sale_orangegif">8</li>
<li><a href="#">2012夏季新款时尚百搭</a></li>
<div style="clear:both;"></div>
<li class="content_left_hot_sale_orangegif">9</li>
<li><a href="#">2012夏季新款时尚百搭</a></li>
<div style="clear:both;"></div>
<li class="content_left_hot_sale_orangegif">10</li>
<li><a href="#">2012夏季新款时尚百搭</a></li>
<div style="clear:both;"></div>
</ul>
</div>
</div>
</div>
<!--热销结束-->
</div>
<!--左部分结束-->
<!--中间部分和右边部分开始-->
<div class="conten_MidAndRight">
<!--中间部分开始-->
<div class="content_mid float">
<div style="height:300px;">
<a href="#"><img id="changeable_img" width="540" height="285" class="gray_border" src="images/content_mid_jpg.jpg"/></a>
<ul id="changeable_box">
<li id="changeable_box1" onClick="choose_box(this)">1</li>
<li id="changeable_box2" onClick="choose_box(this)">2</li>
<li id="changeable_box3" onClick="choose_box(this)">3</li>
</ul>
</div>
<div class="content_mid_mid gray_border">
<div class="content_mid_mid_top">
<img style="padding-left:5px;float:left;" src="images/content_mid_mid_logo.jpg"/>
<p style="float:left;text-align:right; width:430px;"><a href="#">全部品牌>></a></p>
</div>
<div class="content_mid_mid_bottom">
<a href="#"><img style="padding-right:5px;" src="images/changeable_imagges/content_mid_mid_gif1.gif"/></a>
<a href="#"><img src="images/changeable_imagges/conten_mid_mid_img1.jpg"/></a>
<a href="#"><img src="images/changeable_imagges/conten_mid_mid_img2.jpg"/></a>
<a href="#"><img src="images/changeable_imagges/content_mid_mid_img3.gif"/></a>
<a href="#"><img src="images/changeable_imagges/content_mid_mid_img4.gif"/></a>
<a href="#"><img src="images/changeable_imagges/content_mid_mid_img5.gif"/></a>
<a href="#"><img src="images/changeable_imagges/content_mid_mid_img6.gif"/></a>
<a href="#"><img style="padding-left:5px;" src="images/changeable_imagges/content_mid_mid_gif2.gif"/></a>
</div>
</div>
<div class="content_mid_bottom gray_border">
<ul class="orange_border">
<li id="classify1" onMouseOver="classificationCheck(this,'1')" class="content_mid_bottom_classification11"><a href="#"></a></li>
<li id="classify2" onMouseOver="classificationCheck(this,'2')" class="content_mid_bottom_classification2"><a href="#"></a></li>
<li id="classify3" onMouseOver="classificationCheck(this,'3')" class="content_mid_bottom_classification3"><a href="#"></a></li>
</ul>
<div id="content_mid_bottom_classification">
<div id="classification1">
<div class="content_mid_bottom_classification_div1 dotted_border float">
<a href="#"><img class="float" src="images/changeable_imagges/conten_mid_bottom_img1.jpg"/></a>
<ul class="float">
<li>冬款英国原单</li>
<li style="clear:both;"></li>
<li>fenchurch男</li>
<li style="clear:both;"></li>
<li>零售价：<span><b><font size="2">¥168.00</font></b></span></li>
<li style="clear:both;"></li>
<li>市场价：<font size="2">¥=</font></li>
<li style="clear:both;"></li>
<a href="#"><li><img src="images/changeable_imagges/conten_mid_bottom_purchase_button.jpg"/></li></a>
</ul>
</div>
<div class="content_mid_bottom_classification_div1 float">
<a href="#"><img class="float" src="images/changeable_imagges/conten_mid_bottom_img2.jpg"/></a>
<ul class="float">
<li>英国原单正品Fat Face</li>
<li style="clear:both;"></li>
<li>男</li>
<li style="clear:both;"></li>
<li>零售价：<span><b><font size="2">¥198.00</font></b></span></li>
<li style="clear:both;"></li>
<li>市场价：<font size="2">¥=</font></li>
<li style="clear:both;"></li>
<a href="#"><li><img src="images/changeable_imagges/conten_mid_bottom_purchase_button.jpg"/></li></a>
</ul>
</div>
</div>
<div id="classification2" style="display:none;">111111111111111111111111111111111</div>
<div id="classification3" style="display:none;">888888888888888888888888888888888</div>
</div>
</div>
</div>
<!--中间部分结束-->
<!--右部分开始-->
<div class="content_right float">
<div class="content_right_MallInformation">
</div>
<a href="#"><img style="margin-top:10px;" src="images/changeable_imagges/content_right_img1.jpg"/></a>
<a href="#"><img style="margin-top:2px;" src="images/changeable_imagges/content_right_img2.jpg"/></a>
</div>
<!--右部分结束-->
<!--偏右下部分开始-->
<div class="content_bottom float gray_border">
<img style="position:absolute;z-index:-1;" src="images/hot_goods.jpg"/>
<p class="content_bottom_p"><a href="#">更多>></a></p>
<div class="content_bottom_hot_goods float">
<a href="#"><img src="images/changeable_imagges/content_bottom_hot_goods_img1.jpg"/></a>
<p class="content_bottom_line_height"><b>2012夏季童装 男</b></p>
<p class="content_bottom_line_height2" style="margin-top:8px;">零售价：<span><b><font size="2">¥55.00</font></b></span></p>
<p class="content_bottom_line_height2">市场价：<font size="2">¥<s>79.00</s></font></p>
</div>
<div class="content_bottom_hot_goods float">
<a href="#"><img src="images/changeable_imagges/content_bottom_hot_goods_img2.jpg"/></a>
<p class="content_bottom_line_height"><b>2012夏款女大童牛</b></p>
<p class="content_bottom_line_height2" style="margin-top:8px;">零售价：<span><b><font size="2">¥49.00</font></b></span></p>
<p class="content_bottom_line_height2">市场价：<font size="2">¥=</font></p>
</div>
<div class="content_bottom_hot_goods float">
<a href="#"><img src="images/changeable_imagges/content_bottom_hot_goods_img3.jpg"/></a>
<p class="content_bottom_line_height"><b>2012夏装新款网纱</b></p>
<p class="content_bottom_line_height2" style="margin-top:8px;">零售价：<span><b><font size="2">¥49.00</font></b></span></p>
<p class="content_bottom_line_height2">市场价：<font size="2">¥<s>69.00</s></font></p>
</div>
<div class="content_bottom_hot_goods float">
<a href="#"><img src="images/changeable_imagges/content_bottom_hot_goods_img4.jpg"/></a>
<p class="content_bottom_line_height"><b>2012夏季新款 男</b></p>
<p class="content_bottom_line_height2" style="margin-top:8px;">零售价：<span><b><font size="2">¥39.00</font></b></span></p>
<p class="content_bottom_line_height2">市场价：<font size="2">¥<s>49.00</s></font></p>
</div>
<div class="content_bottom_hot_goods float">
<a href="#"><img src="images/changeable_imagges/content_bottom_hot_goods_img5.jpg"/></a>
<p class="content_bottom_line_height"><b>2012夏季 韩版</b></p>
<p class="content_bottom_line_height2" style="margin-top:8px;">零售价：<span><b><font size="2">¥38.00</font></b></span></p>
<p class="content_bottom_line_height2">市场价：<font size="2">¥=</font></p>
</div>
<div class="content_bottom_hot_goods float">
<a href="#"><img src="images/changeable_imagges/content_bottom_hot_goods_img6.jpg"/></a>
<p class="content_bottom_line_height"><b>童装女童夏装2012</b></p>
<p class="content_bottom_line_height2" style="margin-top:8px;">零售价：<span><b><font size="2">¥49.00</font></b></span></p>
<p class="content_bottom_line_height2">市场价：<font size="2">¥=</font></p>
</div>
<div class="content_bottom_hot_goods float">
<a href="#"><img src="images/changeable_imagges/content_bottom_hot_goods_img7.jpg"/></a>
<p class="content_bottom_line_height"><b>2012春秋 女婴儿</b></p>
<p class="content_bottom_line_height2" style="margin-top:8px;">零售价：<span><b><font size="2">¥39.00</font></b></span></p>
<p class="content_bottom_line_height2">市场价：<font size="2">¥=</font></p>
</div>
<div class="content_bottom_hot_goods float">
<a href="#"><img src="images/changeable_imagges/content_bottom_hot_goods_img8.jpg"/></a>
<p class="content_bottom_line_height"><b>1新款时尚韩版秋装男</b></p>
<p class="content_bottom_line_height2" style="margin-top:8px;">零售价：<span><b><font size="2">¥108.00</font></b></span></p>
<p class="content_bottom_line_height2">市场价：<font size="2">¥<s>138.00</s></font></p>
</div>
</div>
<!--偏右下部分结束-->
</div>
<!--中间部分和右边部分结束-->
</span>
<!--足部开始-->
<div class="footer gray_border float">
<div class="massege float">
<div class="massege_son float">
<h4>配送信息</h4>
<p><a href="#">送货上门</a></p>
<p><a href="#">送货范围</a></p>
</div>
<img class="float" src="images/footer_content_border.gif"/>
<div class="massege_son float">
<h4>配送信息</h4>
<p><a href="#">送货上门</a></p>
<p><a href="#">送货范围</a></p>
</div>
<img class="float" src="images/footer_content_border.gif"/>
<div class="massege_son float">
<h4>配送信息</h4>
<p><a href="#">送货上门</a></p>
<p><a href="#">送货范围</a></p>
</div>
<img class="float" src="images/footer_content_border.gif"/>
<div class="massege_son float">
<h4>配送信息</h4>
<p><a href="#">送货上门</a></p>
<p><a href="#">送货范围</a></p>
</div>
<img class="float" src="images/footer_content_border.gif"/>
<div class="massege_son float">
<h4>配送信息</h4>
<p><a href="#">送货上门</a></p>
<p><a href="#">送货范围</a></p>
</div>
<img class="float" src="images/footer_content_border.gif"/>
</div>
<div class="information float">
<p class="information_p_type1">全国统一服务热线(免长途费)</p>
<p class="information_p_type2">400-676-5919</p>
<p>会员服务：010-58433881</p>
<p>售后服务：010-61136099</p>
<p>服务服务7X24小时</p>
</div>
</div>
<script type="text/javascript" src="js/marq.js"/></script>
<div class="footer_img float">
<a href="#"><img src="images/footer_img1.jpg"/></a>
<a href="#"><img src="images/footer_img2.jpg"/></a>
<a href="#"><img src="images/footer_img3.jpg"/></a>
<a href="#"><img src="images/footer_img4.jpg"/></a>
</div>
<!--足部结束-->
<div>
<br/>
<br/>
<p style="text-align:center; padding-top:50px; padding-bottom:50px; font:noraml 12px/24px '宋体'; color:#FF0000;"><img style=" padding:3px; margin-left:400px; float:left;" src="images/copy.JPG"/><span style="float:left;">20## gujianbo 京ICP证052564**号</span></p>
<!--<br/>
<br/>-->
</div>
</div>
<!--正文结束-->
</div>
</div>
<!--结束！！-->
</body>
<script type="text/javascript" src="js/adv.js"></script>
<script type="text/javascript" src="js/title.js"></script>
<script type="text/javascript" src="js/Fsubmenu.js"></script>
<script type="text/javascript" src="js/changeable_img.js"></script>
<script type="text/javascript" src="js/showTime.js"></script>
<script type="text/javascript" src="js/toolTip.js"></script>
<script type="text/javascript" src="js/classification.js"/></script>
<script type="text/javascript" src="js/sign.js"/></script>
<script type="text/javascript" src="js/adv2.js"/></script>
</html>
CSS代码
@charset "utf-8";
/* CSS Document */
*{margin:0px; padding:0px;}
span{color:#CC0003;}
body{font:normal 12px/24px "宋体";color:#545454;}
.float{ float:left;}
a{color:inherit;text-decoration:none;border-style:none; border-style:none;}
img{ border:none;}
ul{list-style-type:none;}
.r{border:1px solid red;}
#container{margin:0px auto;width:1084px;height:1600px;}
.header{width:100%; height:170px;background:url(../images/header_mid_bg.gif) no-repeat;}
.header_top{background: #F5F5F5; width:100%; height:25px; border-bottom:1px solid #CCC;}
.header_top ul li{float:left; color:#656565;}
.header_top ul li a:hover{text-decoration:underline;}
.header_top_small_navigation{padding:0px 10px 0px 7px;}
.header_top_small_navigation a{display:block;}
.header_mid{width:inherit; height:89px; }
.header_mid p{float:left;padding-top:16px;}
.header_mid form{margin-left:606px; margin-top:5px;width:422px;height:30px; background: #C30203;}
.header_mid form input{float:left; margin-top:2px;}
.header_mid_font{ font-size:13px;font-family:"黑体";}
.header_mid_font2{ font-size:20px;font-weight:bold; font-family:"黑体";}
.search_input{height:23px; width:341px; margin-left:2px;padding-left:5px;}
.navigation{width:inherit; height:55px; background:url(../images/header_navigation_bg.gif) repeat-x bottom;}
.navigation p,.navigation p ul,.navigation ul li{ float:left;}
.navigation ul li{color:white; font:bold 15px "宋体";padding-top:16px;display:block;}
.navigation ul li a{padding:10px 20px;}
.navigation_bg_border{background:url(../images/header_navigation_bg_border.gif) no-repeat bottom; width:3px; height:28px;}
.navigation_first_item,.navigation ul li a:hover{background:url(../images/header_navigation_bg2.gif) repeat-x;}
.content{width:990px;height:1150px; margin:0 auto;}
.content_top_wide_boder{width:980px;height:20px; border:1px solid #E4E4E4; border-top-style:none; }
.content_top_wide_boder_bg{background:url(../images/content_top_wide_boder_bg.gif) repeat-x bottom; height:14px; width:978px;border:1px solid white; padding-top:4px;position:absolute;z-index:-1;}
.content_left{width:215px;height:90%; float:left;}
.content_left_login{width:213px; height:138px; margin-top:10px;}
.content_left_login img,.content_left_login div{float:left;}
.content_left_login_bg{background:url(../images/content_left_login_bg.gif) repeat-x; width:211px; height:98px; border:1px solid #DAD7AC; border-top-style:none;}
.content_left_login_bg form{ margin-left:20px; font-weight:bold;}
.content_left_login_bg_input{ width:115px; height:20px; margin-top:3px; border:1px solid #B79D7C; padding-left:5px;}
.content_left_login_bg_p1{display:inline;padding-left:13px;}
.content_left_login_bg_p2{margin-top:10px; margin-left:20px;}
.content_left_classification_of_goods{width:inherit; height:235px; background: url(../images/classification_of_goods.jpg) no-repeat; margin-top:10px;}
.content_left_classification_of_goods ul{padding-top:36px; padding-left:8px;}
.content_left_classification_of_goods ul a{background:url(../images/classification_select_bg.gif) no-repeat 0px 0px; width:197px; height:30px; display:block; padding-left:10px; margin-top:2px; font:bold 15px/30px "宋体";}
.content_left_classification_of_goods ul a:hover{background-position:0px -30px;}
.content_left_suitable_price{width:inherit; height:129px; background: url(../images/suitable_price.jpg) no-repeat; margin-top:10px;}
.content_left_suitable_price ul{ width:200px;padding-top:28px; padding-left:10px;}
.content_left_suitable_price ul li{float:left;width:89px; height:24px;margin-top:5px; margin-left:5px; color:#974607;}
.content_left_suitable_price ul a{background:url(../images/suitable_price_select.gif) no-repeat 0px 0px; width:89px; height:24px;padding-left:21px; margin-top:2px; display:block;font:bold 12px/24px "宋体";}
.content_left_suitable_price ul a:hover{background-position:0px -24px;}
.content_left_hot_sale{width:210px;height:230px; border:1px solid #DBDBDB;padding:1px;}
.content_left_hot_sale_border2{background:#F1F1F1;width:208px; height:228px;padding:1px;}
.content_left_hot_sale_border3{background:white;height:inherit;}
.content_left_hot_sale_border3 ul{padding-left:2px;}
.content_left_hot_sale_border3 ul a:hover{ font-weight:bold;}
.content_left_hot_sale_border3 ul li{ font-size:11px;float:left;line-height:13px; margin-top:9px; margin-left:5px;overflow:hidden;}
.content_left_hot_sale_redgif,.content_left_hot_sale_orangegif{background-repeat:no-repeat; width:13px; height:13px; text-align:center; font:bold 8px/13px "宋体";color:white;}
.content_left_hot_sale_redgif{ background-image:url(../images/hot_sale_redgif.gif);}
.content_left_hot_sale_orangegif{ background-image:url(../images/hot_sale_orangegif.gif);}
.conten_MidAndRight{width:760px;height:1115px;float:left; margin-left:10px; padding-top:10px;}
.gray_border{border:1px solid #CCC;}
.content_mid{width:540px;}
.content_mid_mid{height:88px;padding:1px;}
.content_mid_mid_top{width:537px; height:26px;background:url(../images/content_mid_mid_bg.gif) repeat-x;}
.content_mid_mid_bottom{text-align:center;}
.content_mid_mid_bottom img{margin-top:15px;}
.content_mid_bottom{width:538px; height:160px; margin-top:10px; border-top:none;}
.content_mid_bottom ul li{float:left;height:28px;}
.content_mid_bottom ul li a{ background-image:url(../images/changeable_imagges/conten_mid_classification.jpg);height:28px;display:block;}
.content_mid_bottom_classification1 a{background-position:0px 0px;width:178px;}
.content_mid_bottom_classification11 a{background-position:0px -28px;width:178px;}
.content_mid_bottom_classification2 a{background-position:-178px 0px;width:183px;}
.content_mid_bottom_classification22 a{background-position:-178px -28px;width:183px;}
.content_mid_bottom_classification2 a:hover{background-position:-178px -28px;}
.content_mid_bottom_classification3 a{background-position:-360px 0px;width:177px;}
.content_mid_bottom_classification33 a{background-position:-360px -28px;width:177px;}
.content_mid_bottom_classification3 a:hover{background-position:-360px -28px;}
.orange_border{border-bottom:2px solid #FBB601; height:28px;}
.dotted_border{border-right:2px dotted #999999;}
.content_mid_bottom_classification_div1{width:245px; height:105px; margin:10px 0px 0px 15px;}
.content_mid_bottom_classification_div1 ul{padding-left:8px;}
.content_mid_bottom_classification_div1 ul li{float:left;height:18px; line-height:12px;}
.content_right{width:204px; margin-left:13px;}
.content_right_MallInformation{background:url(../images/myPicture.jpg) no-repeat; width:204px; height:213px;}
.content_right_MallInformation p{text-align:right; width:185px; padding-top:10px;}
.content_right_MallInformation a:hover{ text-decoration:underline;}
.content_right_MallInformation ul{list-style: inside;padding-top:20px; padding-left:15px;}
.content_bottom{width:756px;min-height:530px; border-top:none; padding-bottom:10px;}
.content_bottom_p{color:white;text-align:right;padding:3px 15px 0px 0px;}
.content_bottom_p a:hover{text-decoration:underline;}
.content_bottom_line_height{line-height:8px;}
.content_bottom_line_height2{line-height:18px;}
.content_bottom_hot_goods{width:162px;height:216px; margin-left:20px; margin-top:23px;}
.footer{width:981px;height:175px;border-top:2px solid #B80405;}
.massege{width:670px;height:150px;padding-left:20px; padding-top:13px;}
.massege_son{height:70px;padding-left:49px;padding-right:60px;}
.massege_son h4{font-size:13px; padding-bottom:3px; color:#A72026;}
.massege_son p{line-height:21px; color:#747474;}
.massege_son p a:hover{text-decoration:underline;}
.information{background:url(../images/footer_information.gif) no-repeat;width:235px;height:139px;margin-left:7px;padding-top:13px;padding-left:34px;}
.information p{line-height:20px;}
.information_p_type1{font:bold 15px "宋体";color:#6A6A6A;}
.information_p_type2{font:bold 20px "宋体";color: #A72128;}
.footer_img{width:981px;height:60px; border:1px solid #EBEBEB; margin-top:10px;}
.footer_img img{float:left; margin-left:31px; margin-top:6px;}
#changeable_img{ position:absolute; z-index:1;}
#changeable_box{margin:255px 0px 0px 412px; position:absolute;list-style-type:none;z-index:2;}
#changeable_box li{ float:left; width:18px; height:18px; background-color:black; color:white; text-align:center; margin-left:5px; font:bold 12px/18px "宋体"; border:1px solid white;}
范例2——Student_assistant_principal
效果图
HTML代码
<html>
<head>
<title>学校校长助理留言板</title>
<link rel="stylesheet" href="css/Student_assistant_principal.css" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<!-主要内容-->
<div class="containner">
<!-标题图片-->
<img src="images/main_01.png"/>
<!-导航-->
<img class="z-index_" src="images/main_02.png"/>
<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>
</ul>
<!-公告上截图-->
<img src="images/main_03.png"/>
<!-公告下截图-->
<img class="z-index_"src="images/main_04.png"/>
<!-可修改——————————内容-->
<div class="div_content">
<ul>
<li><a href="#">这是一个公告的示范</a></li>
<li><a href="#">这是一个公告的示范</a></li>
<li><a href="#">这是一个公告的示范</a></li>
</ul>
</div>
<div class="footer">
<p>现代教育技术中心</p>
<p>20##-5-14</p>
</div>
</div>
<!-- 结束 -->
</body>
</html>
Css代码
@charset "utf-8";
/* CSS Document */
*{ margin:0px; padding:0px;}
.r{ border:1px solid red;}
ul{list-style-type:none;}
a{ text-decoration:none;}
.containner{width:789px; margin:0px auto;height:1050px;}
.containner ul{ height:30px;}
.containner ul li{ float:left;width:110px; font: bolder 17px "黑体"; padding-top:6px;}
.containner ul li a{color: #0C69A0;}
.containner ul li a:hover{ color: #09F;}
.z-index_{position:absolute; z-index:-1;}
.div_content{width:550px;height:640px; margin:0px auto; padding:15px;}
.div_content ul li{width:550px;}
.div_content ul li a{ font-weight:normal;color: #06C;}
.div_content ul li a:hover{font-weight:bold;color: #69F;}
.footer{ margin-top:0px; background-image:url(../images/main_06.png);width:100%;height:100%; background-repeat:repeat-x; height:85px; text-align:center; font:bold 26px/36px "楷体"; padding-top:20px; color: #10539C;}
范例3——Xiamen_University2
效果图
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="厦门大学 xiamendaxue XIAMENDAXUE 厦大">
<title>厦门大学—厦门大学</title>
<link rel="stylesheet" type="text/css" href="css_file/xiamen_university.css">
</head>
<body>
<div class="bgimage"></div>
<div class="bgimage3"></div>
<div id="container1">
<div class="bgimage2"></div>
<div class="navigation">
<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="#">English</a></li>
</ul>
</div>
<a href="#"><div class="image1"><img src="images/image2.jpg" width=980px height=360px ></div></a>
<div class="div1-1">
<dl>
<dt class="title_icon"><img src="images/ico1.jpg" ></dt>
<dt class="ico_font">厦大新闻</dt>
<dt class="title_icon2"><img src="images/ico2.jpg"></dt>
</dl>
<div class="div1-1_">
<div class="div1-1_icon"><img src="images/ico4.jpg"></div>
<div>
<dl>
<a href="#">
<dt class="div1-1_word">20##年度教师招聘计划发布</dt></a>
<a href="#">
<dt class="div1-1_word">【改革微聚集】慢慢来，才能走得更远</dt></a>
<a href="#">
<dt class="div1-1_word">杨振斌书记出席首届"大江论坛"暨两岸关...</dt></a>
<a href="#">
<dt class="div1-1_word">教育部社科司副司长徐艳国谈思政理论教育现代化</dt></a>
<a href="#">
<dt class="div1-1_word">校党委中心组学习 李未柠解读社会化媒体...</dt></a>
<a href="#">
<dt class="div1-1_word">交行直属机构主要负责人在我校研修</dt></a>
<a href="#">
<dt class="div1-1_word">流行病毒专家Nelson教授做客南强学术讲座</dt></a>
<a href="#">
<dt class="div1-1_word">美国郭氏家族基金会董事局主席郭忠信来访我校</dt></a>
<a href="#">
<dt class="div1-1_word">杨振斌书记与机关青年干部座谈</dt></a>
<a href="#">
<dt class="div1-1_word">徐雅芬教授入选教育部 "高校思政理论课教...</dt></a>
<a href="#">
<dt class="div1-1_word">上海富吉医疗器械有限公司捐赠100万元...</dt></a>
</dl>
</div>
</div>
</div>
<div class="div1-2">
<dl>
<dt class="title_icon"><img src="images/ico1.jpg" ></dt>
<dt class="ico_font">焦点要闻</dt>
<dt class="title_icon2"><img src="images/ico2.jpg"></dt>
</dl>
<div class="div1-2_">
<div class="div1-2_1-1">
郑南峰、傅钢等合作研究成果发表于《科学》
<p>贵金属催化剂广泛应用于能源、环保、食品加工等重要化工领域。如何提升贵金属利用率，同时维持高的催化剂活性、选择性和长的使用寿命一直是贵金属催化剂研制的...<a href="#">[详细]</a></p>
</div>
<div class="div1-2_1-2"><img src="images/chart1.jpg"></div>
<div class="div1-2_2-1"><img src="images/chart2.jpg"></div>
<div class="div1-2_1-1" id="float_">
“改”出一片新天地——厦门大学研究生培养质量大幅提升
<p>（资料图片） 《光明日报》（20##年04月30日 06 版） 近日，厦门大学5篇论文获全国优秀博士论文，2篇论文获全国优秀博士论文提名，入选数位居...<a href="#">[详细]</a></p>
</div>
</div>
</div>
<div class="div1-3">
<dl>
<dt class="title_icon"><img src="images/ico1.jpg" ></dt>
<dt class="ico_font">焦点要闻</dt>
</dl>
<div class="div1-3_">
<div class="bgchart"></div>
</div>
<div class="div1-3_word">
<dl>
<a href="#"><dt>官方微博</dt></a>
<a href="#"><dt>易班厦大</dt></a>
<a href="#"><dt>厦大网址导航</dt></a>
<a href="#"><dt>数字图书馆</dt></a>
<a href="#"><dt>校友服务</dt></a>
<a href="#"><dt>教育基金会</dt></a>
<a href="#"><dt>嘉庚学院</dt></a>
<a href="#"><dt>国际学院</dt></a>
<a href="#"><dt>汉推南方基地</dt></a>
<a href="#"><dt>网上展馆</dt></a>
<a href="#"><dt>信息公开</dt></a>
<a href="#"><dt>招聘信息</dt></a>
</dl>
</div>
</div>
<div class="div_table">
<table cellspacing="0" cellpadding="13" >
<tr>
<td>
<a href="#"><b>On Blame and Reciprocity: An Experimental Study</b></a>
<p>20##-05-08 16:30</p>
<p>思明校区经济楼 N303室</p>
<br>
<div class="a_change_color"><a href="#"><p>【讲座】</p></a></div>
</td>
<td>
<a href="#"><b>On Blame and Reciprocity: An Experimental Study</b></a>
<p>20##-05-08 16:30</p>
<p>思明校区经济楼 N303室</p>
<br>
<div class="a_change_color"><a href="#"><p>【讲座】</p></a></div>
</td>
<td>
<a href="#"><b>On Blame and Reciprocity: An Experimental Study</b></a>
<p>20##-05-08 16:30</p>
<p>思明校区经济楼 N303室</p>
<br>
<div class="a_change_color"><a href="#"><p>【讲座】</p></a></div>
</td>
<td>
<a href="#"><b>On Blame and Reciprocity: An Experimental Study</b></a>
<p>20##-05-08 16:30</p>
<p>思明校区经济楼 N303室</p>
<br>
<div class="a_change_color"><a href="#"><p>【讲座】</p></a></div>
</td>
<td>
<a href="#"><b>On Blame and Reciprocity: An Experimental Study</b></a>
<p>20##-05-08 16:30</p>
<p>思明校区经济楼 N303室</p>
<br>
<div class="a_change_color"><a href="#"><p>【讲座】</p></a></div>
</td>
</tr>
<tr>
<td>
<a href="#"><b>On Blame and Reciprocity: An Experimental Study</b></a>
<p>20##-05-08 16:30</p>
<p>思明校区经济楼 N303室</p>
<br>
<div class="a_change_color"><a href="#"><p>【讲座】</p></a></div>
</td>
<td>
<a href="#"><b>On Blame and Reciprocity: An Experimental Study</b></a>
<p>20##-05-08 16:30</p>
<p>思明校区经济楼 N303室</p>
<br>
<div class="a_change_color"><a href="#"><p>【讲座】</p></a></div>
</td>
<td>
<a href="#"><b>On Blame and Reciprocity: An Experimental Study</b></a>
<p>20##-05-08 16:30</p>
<p>思明校区经济楼 N303室</p>
<br>
<div class="a_change_color"><a href="#"><p>【讲座】</p></a></div>
</td>
<td>
<a href="#"><b>On Blame and Reciprocity: An Experimental Study</b></a>
<p>20##-05-08 16:30</p>
<p>思明校区经济楼 N303室</p>
<br>
<div class="a_change_color"><a href="#"><p>【讲座】</p></a></div>
</td>
<td>
<a href="#"><b>On Blame and Reciprocity: An Experimental Study</b></a>
<p>20##-05-08 16:30</p>
<p>思明校区经济楼 N303室</p>
<br>
<div class="a_change_color"><a href="#"><p>【讲座】</p></a></div>
</td>
</tr>
</table>
</div>
<div class="footer">
<div class="footer_image"><img src="images/title8.jpg"></div>
<div class="footer_word1"><b>厦门大学</b><br>厦大总机：0592-2180000 闽ICP备05005471号<br>地址：福建省厦门市思明区思明南路422号 邮政编码：361005 </div>
<div class="footer_word2"><a href="#">爱厦大</a>|<a href="#">反馈</a>|<a href="#">旧版主页</a></div>
<div class="footer_word3"><div class="footer_image2"><img src="images/title9.jpg"></div>2013 厦门大学 版权所有</div>
</div>
</div>
</div>
</body>
</html>
Css代码
body,ul,li,p,dl{margin:0px;padding:0px;}
a{text-decoration:none;color:black;}
.bgimage{background-image:url(../images/title5.png);width:100%;height:400px;background-position:0px 0px;background-repeat:repeat-x;position:absolute;z-index:-2;}
#container1{width:1400px;margin:0px auto;}
.bgimage2{background-image:url(../images/title6.png);width:1400px;;height:400px;background-position:0px 0px;background-repeat:no-repeat;position:absolute;z-index:-1;text-aligh:center;}
.navigation{margin-left:210px;}
.navigation ul{list-style-type:none;}
.navigation li{float:left;width:100px;margin-top:116px;}
.navigation li a{text-decoration:none;color:white;font:bold 15px "宋体";}
.navigation li a:hover{color:#FFC781;}
.image1{margin-left:222px;margin-top:120px;}
.div1-1{width:320px;margin-left:222px;float:left;margin-top:8px;}
.div_top_border{border-style:none;border-top:solid red 1px;}
.title_icon{float:left;margin-top:5px;}
.ico_font{float:left;font:bold 14px/30px "宋体";}
.title_icon2{float:right;margin-top:1px;}
.div1-1_{clear:both;border-top:2px solid #FFD306;}
.div1-1_icon{float:left;padding-top:20px;margin-right:2px;}
.float_{float:left;}
.div1-1_icon2{float:left;}
.div1-1_word{margin-top:10px;font:normal 13px/18px "黑体";}
.div1-2{width:486px;margin-left:20px;float:left;margin-top:8px;float:left;}
.div1-2_{clear:both;border-top:2px solid #FFD306;}
.div1-2_1-1{width:282px;margin-top:23px;font:bold 12px "宋体";float:left;margin-left:10px;}
.div1-2_1-1 p{font:normal 12px/30px "黑体";text-indent:2em;line-height:20px;margin-top:15px;}
.div1-2_1-1 a{color:#003D79;}
.div1-2_1-2{margin-top:12px;}
.div1-2_2-1{margin-top:32px;float:left;}
.div1-3{width:140px;height:340px;margin-left:15px;margin-top:8px;float:left;}
.div1-3_{border-top:2px solid #FFD306;;margin-top:32px;}
.bgchart{background-image:url(../images/chart3.jpg);width:140px;height:300px;position:absolute;z-index:-1;background-repeat:no-repeat;}
.div1-3_word{font:normal 13px/23px "黑体";margin-top:6px;margin-left:32px;}
.div_table{clear:both;margin-left:220px;margin-top:360px;}
.div_table table{width:980px;height:280px;border:1px solid #F0F0F0;border-top:2px solid #FFD306;;word-break:break-all;word-wrap:break-all;font:normal 13px/20px "黑体";}
.div_table td{border:1px solid #F0F0F0;height:140px;width:196px;}
.a_change_color a{color:gray;}
.a_change_color a:hover{color:black;}
.footer{height:130px;margin-top:20px;font:normal 13px/20px "宋体";color:white;}
.footer_image{margin-left:215px;margin-top:13px;width:60px;height:60px;float:left;}
.footer_word1{float:left;margin-left:0px;margin-top:13px;}
.footer_word2{width:150px;float:left;margin-left:430px;margin-top:20px;}
.footer_word3{;margin-left:1050px;margin-top:85px;}
.footer_image2{float:left;}
.footer a{color:white;}
.bgimage3{background-image:url(../images/title7.jpg);width:100%;height:137px;background-position:0px 0px;background-repeat:repeat-x;position:absolute;z-index:-3;margin-top:1220px;}
范例4——your_condos
效果图
HTML代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>201358234104_辜建波</title>
<link rel="stylesheet" href="css/your_condos.css" type="text/css"/>
</head>
<body>
<!--开始！！-->
<div id="container">
<!--导航开始-->
<div class="navigation">
<div class="navigation_left_title float_left">
<p class="navigation_left_title_p1">YOUR</p>
<p class="navigation_left_title_p2">CONDOS</p>
</div>
<ul class="float_left">
<li class="navigation_gif1"><a href="#"></a></li>
<li class="navigation_gif2"><a href="#"></a></li>
<li class="navigation_gif3"><a href="#"></a></li>
<li class="navigation_gif4"><a href="#"></a></li>
<li class="navigation_gif5"><a href="#"></a></li>
<li class="navigation_gif6"><a href="#"></a></li>
<li class="navigation_gif7"><a href="#"></a></li>
<li class="navigation_gif8"><a href="#"></a></li>
</ul>
</div>
<!--导航结束-->
<!--正文开始-->
<!--正文头部分-->
<div class="content_head">
<!--正文头部分——左部分开始-->
<div class="content_head_left">
<img class="content_head_left_img float_left" src="images/content_head_left_img.png"/>
<form class="float_left" action="#" method="post" name="login">
<h3>User Login</h3>
<p><input type="text" value="Enter Your Username Here"/></p>
<p><input type="password" value="12345678"/></p>
<input class="float_left content_head_left_buttom" type="image" src="images/buttoms/content_head_left_login.gif"/>
<input class="float_left content_head_left_buttom" type="image" src="images/buttoms/content_head_left_register.gif"/>
</form>
<div class="end_float"></div>
<h2>Tium eros donec lacinia corbista</h2>
<p class="content_head_left_bottom_p">Aenean metus quam,aliquam nec,scelerisque id,malesuada nec,mi,inconguedio non nunc.Aenean metus quam,aliquam nec,scelerisque id,malesuada nec,mi,inconguedio non nunc. </p>
</div>
<!--正文头部分——左部分结束-->
<!--正文头部分——右部分开始-->
<a href="#"><img class="content_head_right" src="images/content_head_right_img.jpg"/></a>
<!--正文头部分——右部分结束-->
</div>
<!--正文头部分结束-->
<!--正文中间部分-->
<div class=" content_mid">
<!--正文中间部分——左部分开始-->
<div class="content_mid_left float_left">
<div class="float_left content_mid_left_bottom_p">
<a href="#"><img class="content_mid_left_img" src="images/content_mid_left_img.png"/></a>
<p class="content_mid_left_type4">Nulla a orci sit amet massa convallis piacerat</p>
<p class="content_mid_left_type5">Mauris accumsan lorem eleifend urna</p>
</div>
<ul class="float_left">
<li class="content_mid_left_ul_li_type0"><a href="#">Curabitur quits est non torem bibendum </a></li>
<div class="end_float"></div>
<li class="content_mid_left_ul_li_type1">Location</li><li class="content_mid_left_ul_li_type2">:</li><li class="content_mid_left_ul_li_type3">Nam molestie dapibus,sapien</li>
<div class="end_float"></div>
<li class="content_mid_left_ul_li_type1">Codes</li><li class="content_mid_left_ul_li_type2">:</li><li class="content_mid_left_ul_li_type3">PTY00514</li>
<div class="end_float"></div>
<li class="content_mid_left_ul_li_type1">Rooms</li><li class="content_mid_left_ul_li_type2">:</li><li class="content_mid_left_ul_li_type3">6</li>
<div class="end_float"></div>
<li class="content_mid_left_ul_li_type1">Kitchen</li><li class="content_mid_left_ul_li_type2">:</li><li class="content_mid_left_ul_li_type3">2</li>
<div class="end_float"></div>
<li class="content_mid_left_ul_li_type1">Bathrooms</li><li class="content_mid_left_ul_li_type2">:</li><li class="content_mid_left_ul_li_type3">2</li>
<div class="end_float"></div>
<li class="content_mid_left_ul_li_type1">Square Feet</li><li class="content_mid_left_ul_li_type2">:</li><li class="content_mid_left_ul_li_type3">1642</li>
</ul>
</div>
<!--正文中间部分——左部分结束-->
<!--正文中间部分——右部分开始-->
<img class="float_left content_mid_mid_img" src="images/content_mid_right_right_bg.png"/>
<div class="content_mid_right float_left">
<form action="#" method="get" name="find_a_home">
<p>
Transation Type : <select name="Transation_Type"><option value="0">Buy<option value="1">Mortgage</select>
</p>
<p>
Property Type : <select name="Property_Type"><option value="0">Residential Property<option value="1">Commercial property<option value="2">Other property</select>
</p>
<p>
City : <select name="City"><option value="-1">--Select City--<option value="0">New York<option value="1">Los Angeles<option value="2">Chicago<option value="3">Houston<option value="4">Philadelphia<option value="5">Any Where!</select>
</p>
<p>
Budget : <select name="Budget"><option value="0">$50,000<option value="1"> $100,000<option value="2">$300,000<option value="3">$1000,000<option value="4">>$1000,000<option value="5">Not lack money!</select>
</p>
<p>
Bedroom : <select name="Bedroom"><option value="0">2<option value="1">3<option value="2">4<option value="3">>4</select>
</p>
<p class="content_mid_right_search_buttom"><input type="image" src="images/buttoms/content_mid_right_search.gif"/></p>
</form>
</div>
<!--正文中间部分——右部分结束-->
</div>
<!--正文中间部分结束-->
<!--正文足部分-->
<div class="content_foot">
<!--正文足部分——左部分开始-->
<div class="content_foot_left float_left">
<div class="content_foot_left_title">Featured Projects</div>
<div class="content_foot_sign">
<a href="#"><img src="images/content_foot_left_img1.jpg"/></a>
<h6>Vivamus molestie nulla</h6>
<p>nec bibendum tincidunt，dolor erat commodo totor，eget sodales magna tellus ac neque.Praesent ac lacus ac</p>
<a href="#"><img class="content_foot_sign_buttom"src="images/buttoms/content_foot_left_buttom.gif"/></a>
</div>
<div class="content_foot_sign content_foot_sign_addmargin">
<a href="#"><img src="images/content_foot_left_img2.jpg"/></a>
<h6>Vivamus molestie nulla</h6>
<p>nec bibendum tincidunt，dolor erat commodo totor，eget sodales magna tellus ac neque.Praesent ac lacus ac</p>
<a href="#"><img class="content_foot_sign_buttom"src="images/buttoms/content_foot_left_buttom.gif"/></a>
</div>
<div class="content_foot_sign content_foot_sign_addmargin2">
<a href="#"><img src="images/content_foot_left_img3.jpg"/></a>
<h6>Vivamus molestie nulla</h6>
<p>nec bibendum tincidunt，dolor erat commodo totor，eget sodales magna tellus ac neque.Praesent ac lacus ac</p>
<a href="#"><img class="content_foot_sign_buttom"src="images/buttoms/content_foot_left_buttom.gif"/></a>
</div>
</div>
<!--正文足部分——左部分结束-->
<!--正文足部分——右部分开始-->
<div class=" content_foot_right float_left">
<div class="content_foot_right_bg_top">
<div class="content_foot_right_bg_top_title">
<img class="float_left" src="images/content_foot_right_img1.png"/>
<h4>Recent Sales</h4>
<h2>information</h2>
</div>
<ul class="float_left">
<li><img src="images/content_foot_right_gif.png"/></li>
<li class="content_foot_right_bg_top_ul_li_type1"><a href="#">Cras a tortor ac augue posuere</a></li>
<li class="content_foot_right_bg_top_ul_li_type2">$369,000</li>
<li><img src="images/content_foot_right_gif.png"/></li>
<li class="content_foot_right_bg_top_ul_li_type1"><a href="#">Duis turpis phasellus ornare</a></li>
<li class="content_foot_right_bg_top_ul_li_type2">$125,000</li>
<li><img src="images/content_foot_right_gif.png"/></li>
<li class="content_foot_right_bg_top_ul_li_type1"><a href="#">Dignissim,urna sem tincidunt</a></li>
<li class="content_foot_right_bg_top_ul_li_type2">$245,000</li>
<li><img src="images/content_foot_right_gif.png"/></li>
<li class="content_foot_right_bg_top_ul_li_type1"><a href="#">Justo arcu nec tortor,Morbi ac</a></li>
<li class="content_foot_right_bg_top_ul_li_type2">$550,000</li>
<li><img src="images/content_foot_right_gif.png"/></li>
<li class="content_foot_right_bg_top_ul_li_type1"><a href="#">Morbi at Massa lacinia enim</a></li>
<li class="content_foot_right_bg_top_ul_li_type2">$330,000</li>
<li><img src="images/content_foot_right_gif.png"/></li>
<li class="content_foot_right_bg_top_ul_li_type1"><a href="#">Mauris nec libero</a></li>
<li class="content_foot_right_bg_top_ul_li_type2">$190,000</li>
</ul>
</div>
<div class="content_foot_right_bg_bottom">
<div class="content_foot_right_bg_bottom_title">
<img class="float_left" src="images/content_foot_right_img2.png"/>
<h4>Recent Sales</h4>
<h2>information</h2>
<div class="end_float"></div>
<form action="#" method="get" name="E-mail_Address">
<input class="content_foot_right_bg_bottom_text" type="text" value="Enter E-mail Address"/>
<input class="content_foot_right_bg_bottom_img" type="image" src="images/buttoms/content_foot_right_buttom.gif"/>
</form>
</div>
</div>
</div>
<!--正文足部分——右部分结束-->
</div>
<!--正文足部分结束-->
<!--正文结束-->
<!--版权部分开始-->
<div class="footer">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Statitics</a></li>
<li><a href="#">News And Events</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">User Login</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
<p>©Copyright infomation Goes Here.All Rights Reserved.</p>
</div>
<!--版权部分结束-->
</div>
<!--结束！！-->
</body>
</html>
Css代码
@charset "utf-8";
/* CSS Document */
*{margin:0px;padding:0px;}
ul{list-style:none;}
a{ text-decoration:none;}
body{ font-family:"微软雅黑"; background-image:url(../images/body_bg.gif);}
.r{border:1px solid red;}
.float_left{float:left;}
.end_float{clear:both;}
a:hover{ font-weight:bold;}
#container{margin:0px auto;width:934px;padding-left:10px;height:1010px;
background-color:white;}
.navigation{ background-image:url(../images/vagination_bg.gif);width:924px;
height:100%;position:absolute; background-repeat:repeat-x;}
.navigation_left_title{color: #FEF9B7;margin:20px 23px;}
.navigation_left_title_p1{font:normal 22px/20px "华文宋体";}
.navigation_left_title_p2{font:bold 28px/20px "微软雅黑";}
.navigation ul li{float:left;}
.navigation ul li a{background-image:url
(../images/navigation_gifs.gif);display:block;height:66px;}
.navigation_gif1 a,.navigation_gif2 a{width:75px;}
.navigation_gif1 a:link{background-position:0px -69px;}
.navigation_gif1 a:hover{background-position:0px -69px;}
.navigation_gif2 a:link{background-position:-77px 0px;}
.navigation_gif2 a:hover{background-position:-77px -69px;}
.navigation_gif3 a,.navigation_gif5 a,.navigation_gif6 a{width:95px;}
.navigation_gif3 a:link{background-position:-155px 0px;}
.navigation_gif3 a:hover{background-position:-155px -69px; word-break:}
.navigation_gif4 a{width:126px;}
.navigation_gif4 a:link{background-position:-250px 0px;}
.navigation_gif4 a:hover{background-position:-250px -69px;}
.navigation_gif5 a:link{background-position:-377px 0px;}
.navigation_gif5 a:hover{background-position:-377px -69px;}
.navigation_gif6 a:link{background-position:-473px 0px;}
.navigation_gif6 a:hover{background-position:-473px -69px;}
.navigation_gif7 a{width:63px;}
.navigation_gif7 a:link{background-position:-569px 0px;}
.navigation_gif7 a:hover{background-position:-569px -69px;}
.navigation_gif8 a{width:88px;}
.navigation_gif8 a:link{background-position:-634px 0px;}
.navigation_gif8 a:hover{background-position:-634px -69px;}
.content_head{height:255px;padding-top:90px;padding-bottom:10px;}
.content_head_left{ background-image:url
(../images/content_head_left_bg.gif);width:429px;height:100%;position:absolute;
background-repeat:repeat-x;height:255px;}
.content_head_left_img{padding:33px 22px;}
.content_head_left form{padding:15px 13px; line-height:30px;}
.content_head_left form h3{font:normal 18px "微软雅黑";}
.content_head_left form p input{font:lighter 10px "微软雅
黑";width:232px;height:18px;padding-left:8px;}
.content_head_left_buttom{margin-top:5px;margin-right:5px;}
.content_head_left h2{ text-align:center; color:#932605;}
.content_head_left_bottom_p{padding-left:20px;margin-
right:10px;color:#570F12;font:normal 13px/15px "Tihoma"; word-break:break-
all;width:390px;}
.content_head_right{margin-left:439px;position:absolute;}
.content_mid{width:924px;height:212px; background-image: url
(../images/content_mid_bg.gif); background-repeat:repeat-x;
position:absolute;font:bold 11px/18px "微软雅黑";padding-top:10px;}
.content_mid_left{width:576px;height:223px;}
.content_mid_left_img{padding-left:12px;}
.content_mid_left_bottom_p{width:285px;font-weight:normal; text-
align:right;line-height:13px; word-wrap:}
.content_mid_left_type4{color:#87A34E;font-size:10px;margin-top:5px;}
.content_mid_left_type5{color:#838385;font-size:9px;}
.content_mid_left ul{padding-left:28px;padding-top:35px; line-height:15px;}
.content_mid_left ul li a{text-decoration:underline;color:#B5BB4D; line-
height:20px;}
.content_mid_left ul li a:hover{color:#B77A48;}
.content_mid_left ul li{float:left;}
.content_mid_left_ul_li_type0{width:260px;}
.content_mid_left_ul_li_type1{color:#87A34E;width:68px;}
.content_mid_left_ul_li_type2{color:#87A34E;width:10px;}
.content_mid_left_ul_li_type3{color:#838385;font-weight:normal;width:190xp;}
.content_mid_mid_img{padding-left:10px;}
.content_mid_right{background-color: #736B23;width:278px;height:202px;margin-
left:1px;}
.content_mid_right form{padding-top:15px;padding-right:34px;}
.content_mid_right form p{color: #B1A865; font-weight:normal; line-height:30px;
text-align:right;}
.content_mid_right form p select{width:120px;height:18px;font:normal 10px/24px
"微软雅黑";}
.content_mid_right_search_buttom{padding-right:75px;padding-top:3px;}
.content_foot{background-image: url
(../images/content_foot_bg.gif);width:900px;height:348px;
position:absolute;margin-top:222px;padding:12px; background-repeat:repeat-x;}
.content_foot_left{width:560px;height:320px;}
.content_foot_left_title{background-image:url
(../images/content_foot_title_bg.gif);width:540px;height:41px;
position:absolute;font:bold 23px/36px "微软雅黑";padding-left:20px;
color:#FBFFB2;}
.content_foot_sign{width:155px;height:253px;background-image:url
(../images/conternt_sign.gif);background-repeat:no-repeat;
position:absolute;margin-left:18px;margin-top:60px;padding-left:15px;padding-
top:14px;color:#577901;}
.content_foot_sign h6{margin-top:6px;overflow:hidden;font-
size:10px;width:130px;height:20px;}
.content_foot_sign p{text-align:center;width:120px;height:70px; overflow:
hidden;text-overflow:ellipsis;font-size:10px; word-break:break-all;}
.content_foot_sign_buttom{margin-left:42px;margin-top:10px;}
.content_foot_sign_addmargin{margin-left:200px;}
.content_foot_sign_addmargin2{margin-left:382px;}
.content_foot_right{height:326px;width:320px;margin-left:10px;}
.content_foot_right_bg_top{height:210px;width:333px;background-color:#D9DF4B;
position:absolute;}
.content_foot_right_bg_top_title,.content_foot_right_bg_bottom_title{margin-
left:32px;height:47px;margin-top:20px; line-height:24px;}
.content_foot_right_bg_top_title img{padding-right:5px;padding-top:5px;}
.content_foot_right_bg_top_title h4,.content_foot_right_bg_bottom_title h4
{font:normal 18px "微软雅黑"; color:#3F461A;}
.content_foot_right_bg_top_title h2,.content_foot_right_bg_bottom_title h2
{color:#5D7C05;font-size:27px;}
.content_foot_right_bg_bottom{height:112px;width:333px;background-
color:#5A7901;margin-top:215px;position:absolute;}
.content_foot_right_bg_top ul{ font-size:12px;padding-left:30px;margin-
top:15px;}
.content_foot_right_bg_top ul li{float:left;}
.content_foot_right_bg_top ul li img{padding-right:10px;padding-bottom:1px;}
.content_foot_right_bg_top_ul_li_type1{width:202px;}
.content_foot_right_bg_top_ul_li_type1 a{color:#72970B;}
.content_foot_right_bg_top_ul_li_type2{width:80px;}
.content_foot_right_bg_bottom_title{margin-top:10px;margin-left:30px;}
.content_foot_right_bg_bottom_title img{padding-top:5px;padding-
right:6px;padding-left:3px;}
.content_foot_right_bg_bottom_title h4{color:#CDC941;}
.content_foot_right_bg_bottom_title h2{color:white;}
.content_foot_right_bg_bottom form{float:left;margin-top:10px;margin-left:5px;}
.content_foot_right_bg_bottom form input{font-size:10px; font-family:"微软雅
黑";}
.content_foot_right_bg_bottom_text{width:200px;height:20px;padding-left:5px;}
.content_foot_right_bg_bottom_img{ margin-top:5px;margin-
left:10px;display:inline;}
.footer{background-color:#282C2D;width:924px;height:85px;
position:absolute;margin-top:570px;}
.footer ul{text-align:center;font-size:11px; font-weight:bold;margin-
top:20px;margin-left:92px;height:14px;}
.footer ul li{float:left;margin-left:40px;}
.footer ul li a{color:white;}
.footer ul li a:hover{color: #999;}
.footer p{color:#515556; text-align:center; font-size:10px;width:924px;margin-
top:10px;}