恶人鱼 DIV+CSS

 <!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>长沙鳄鱼旅行社有限公司 -首页</title>
<link rel="stylesheet" type="text/css" href="mycss.css">
</head>

<body>
<div class="centers">
<div class="top">
<div class="top_logo"></div>
<div class="top_info"></div>
</div>

<div class="menu">
<div class="menu_info"></div>
<div class="menu_info_02"><ul><li><a href="index.html" title="海外首页">海外首页</a></li><li><a href="index.html">国内旅游</a></li><li><a href="index.html">商务会展</a></li><li><a href="index.html">出境旅游</a></li><li><a href="index.html">门店服务</a></li><li><a href="index.html">机票预定</a></li><li><a href="index.html">公司概述</a></li><li><a href="index.html">访客留言</li></ul></div>
<div class="menu_info_foot"></div>
</div>

<div class="flash"></div>
<div class="info">
<div class="info_bg">
<div class="info_chujing"></div>
<div class="info_chujings">
<div class="inf0_bg_title">出境旅游</div>
<div class="inf0_bg_row">
<ul><li><span>¥5980.00</span><a href="#" title="[日韩]超值日本品质6日游 (自组)">[日韩]超值日本品质6日游 (自组)</a></li></ul>
<ul><li><span>¥5980.00</span><a href="#" title="[日韩]超值日本品质6日游 (自组)">[日韩]超值日本品质6日游 (自组)</a></li></ul>
<ul><li><span>¥1980.00</span><a href="#">[港澳]香港、澳门直飞品质五日</a></li></ul>
<ul><li><span>¥4880.00</span><a href="#">[海岛]长滩岛5日游超豪华团</a></li></ul>
<ul><li><span>¥5980.00</span><a href="#">[海岛]巴厘岛超值5日游</a></li></ul>
<ul><li><span>¥5980.00</span><a href="#">[海岛]巴厘岛 6天4晚(特价)</a></li></ul>
<ul><li><span>¥5980.00</span><a href="#">[海岛]巴厘岛GA直飞5天 </a></li></ul>
<ul><li><span>¥5980.00</span><a href="#">[海岛]经典优惠巴厘岛四晚六天</a></li></ul>
<ul><li><span>¥5980.00</span><a href="#">[美加]美国加拿大十六日旅游行程</a></li></ul>
</div>
</div>
<div class="info_chujingss"></div>
</div>
<div class="info_bg">
<div class="info_chujing"></div>
<div class="info_chujings">
<div class="inf0_bg_title">国内旅游</div>
<div class="inf0_bg_row">
<ul><li><span>¥5980.00</span><a href="#" title="[日韩]超值日本品质6日游 (自组)">[日韩]超值日本品质6日游 (自组)</a></li></ul>
<ul><li><span>¥1080.00</span><a href="#">[港澳]香港海洋公园+迪士尼乐园纯玩三日</a></li></ul>
<ul><li><span>¥1980.00</span><a href="#">[港澳]香港、澳门直飞品质五日</a></li></ul>
<ul><li><span>¥4880.00</span><a href="#">[海岛]长滩岛5日游超豪华团</a></li></ul>
<ul><li><span>¥5980.00</span><a href="#">[海岛]巴厘岛超值5日游</a></li></ul>
<ul><li><span>¥5980.00</span><a href="#">[海岛]巴厘岛 6天4晚(特价)</a></li></ul>
<ul><li><span>¥5980.00</span><a href="#">[海岛]巴厘岛GA直飞5天 </a></li></ul>
<ul><li><span>¥5980.00</span><a href="#">[海岛]经典优惠巴厘岛四晚六天</a></li></ul>
<ul><li><span>¥5980.00</span><a href="#">[美加]美国加拿大十六日旅游行程</a></li></ul>
</div>
</div>
<div class="info_chujingss"></div>
</div>

<div class="info_bg">
<div class="info_chujing"></div>
<div class="info_chujings">
<div class="inf0_bg_title">热点推荐</div>
<div class="inf0_bg_row">
<ul><li><span>¥5980.00</span><a href="#" title="[日韩]超值日本品质6日游 (自组)">[日韩]超值日本品质6日游 (自组)</a></li></ul>
<ul><li><span>¥1080.00</span><a href="#">[港澳]香港海洋公园+迪士尼乐园纯玩三日</a></li></ul>
<ul><li><span>¥1980.00</span><a href="#">[港澳]香港、澳门直飞品质五日</a></li></ul>
<ul><li><span>¥4880.00</span><a href="#">[海岛]长滩岛5日游超豪华团</a></li></ul>
<ul><li><span>¥5980.00</span><a href="#">[海岛]巴厘岛超值5日游</a></li></ul>
<ul><li><span>¥5980.00</span><a href="#">[海岛]巴厘岛 6天4晚(特价)</a></li></ul>
<ul><li><span>¥5980.00</span><a href="#">[海岛]巴厘岛GA直飞5天 </a></li></ul>
<ul><li><span>¥5980.00</span><a href="#">[海岛]经典优惠巴厘岛四晚六天</a></li></ul>
<ul><li><span>¥5980.00</span><a href="#">[美加]美国加拿大十六日旅游行程</a></li></ul>
</div>
</div>
<div class="info_chujingss"></div>
</div>


</div><div class="info_02"></div>

<div class="info_03">
<div class="info_03_bg"><div class="info_03_bg_title"></div>
<div class="info_03_bg_hr">
<ul><li><span>09-04</span><a href="#" title="·湖南海外旅游有限公司成功接 总办">·湖南海外旅游有限公司成功接 总办</a></li></ul>
<ul><li><span>09-04</span><a href="#">·湖南海外旅游有限公司成功接 总办</a></li></ul>
<ul><li><span>09-04</span><a href="#">·湖南海外旅游有限公司成功接 总办</a></li></ul>
<ul><li><span>09-04</span><a href="#">·湖南海外旅游有限公司成功接 总办</a></li></ul>
<ul><li><span>09-04</span><a href="#">·湖南海外旅游有限公司成功接 总办</a></li></ul>
<ul><li><span>09-04</span><a href="#">·湖南海外旅游有限公司成功接 总办</a></li></ul>
<ul><li><span>09-04</span><a href="#">·湖南海外旅游有限公司成功接 总办</a></li></ul>
<ul><li><span>09-04</span><a href="#">·湖南海外旅游有限公司成功接 总办</a></li></ul>
<ul><li><span>09-04</span><a href="#">·湖南海外旅游有限公司成功接 总办</a></li></ul>

</div>
<div class="info_03_bg_foot"></div>
</div>


<div class="info_03_bg"><div class="info_03_bg_titles"></div><div class="info_03_bg_hr">
<ul><li><span>09-04</span><a href="#" title="·湖南海外旅游有限公司成功接 总办">·湖南海外旅游有限公司成功接 总办</a></li></ul>
<ul><li><span>09-04</span><a href="#">·湖南海外旅游有限公司成功接 总办</a></li></ul>
<ul><li><span>09-04</span><a href="#">·湖南海外旅游有限公司成功接 总办</a></li></ul>
<ul><li><span>09-04</span><a href="#">·湖南海外旅游有限公司成功接 总办</a></li></ul>
<ul><li><span>09-04</span><a href="#">·湖南海外旅游有限公司成功接 总办</a></li></ul>
<ul><li><span>09-04</span><a href="#">·湖南海外旅游有限公司成功接 总办</a></li></ul>
<ul><li><span>09-04</span><a href="#">·湖南海外旅游有限公司成功接 总办</a></li></ul>
<ul><li><span>09-04</span><a href="#">·湖南海外旅游有限公司成功接 总办</a></li></ul>
<ul><li><span>09-04</span><a href="#">·湖南海外旅游有限公司成功接 总办</a></li></ul>
</div><div class="info_03_bg_foot"></div></div>
<div class="info_03_bg"><div class="info_03_bg_titless"></div><div class="info_03_bg_hr">
<ul><li><span>09-04</span><a href="#" title="·湖南海外旅游有限公司成功接 总办">·湖南海外旅游有限公司成功接 总办</a></li></ul>
<ul><li><span>09-04</span><a href="#">·湖南海外旅游有限公司成功接 总办</a></li></ul>
<ul><li><span>09-04</span><a href="#">·湖南海外旅游有限公司成功接 总办</a></li></ul>
<ul><li><span>09-04</span><a href="#">·湖南海外旅游有限公司成功接 总办</a></li></ul>
<ul><li><span>09-04</span><a href="#">·湖南海外旅游有限公司成功接 总办</a></li></ul>
<ul><li><span>09-04</span><a href="#">·湖南海外旅游有限公司成功接 总办</a></li></ul>
<ul><li><span>09-04</span><a href="#">·湖南海外旅游有限公司成功接 总办</a></li></ul>
<ul><li><span>09-04</span><a href="#">·湖南海外旅游有限公司成功接 总办</a></li></ul>
<ul><li><span>09-04</span><a href="#">·湖南海外旅游有限公司成功接 总办</a></li></ul>
</div><div class="info_03_bg_foot"></div></div>
</div>


<div class="menu_02">
<div class="menu_02_top"></div>
<div class="menu_02_repter"><ul><li><a href="#" title="旅游小贴士">旅游小贴士</a>
</li><li style="20px; color:#000000">|</li>
<li><a href="#">证照签证</a></li>
<li style="20px; color:#000000">|</li>
<li><a href="#">访问留言</a></li>
<li style="20px; color:#000000">|</li>
<li><a href="#">员工风彩</a></li>
<li style="20px; color:#000000">|</li>
<li><a href="#">人才招聘</a></li>
<li style="20px; color:#000000">|</li>
<li><a href="#">海外风彩</a></li>
<li style="20px; color:#000000">|</li>
<li><a href="#">会员入口</a></li>
<li style="20px; color:#000000">|</li>
<li><a href="#">旅游常识</a></li>
<li style="20px; color:#000000">|</li>
<li><a href="#">旅游路线</a></li>
<li style="20px; color:#000000">|</li>
<li><a href="#">帮助</a></li>
</ul></div>
<div class="menu_02_foot"></div>
</div>


<div class="foot">
<ul><li>Copyright?1990-2008湖南省长沙海外旅游有限公司 All rights reserved</li></ul>
<ul><li>本站网址www.cshw.com</li></ul>
<ul><li>国际旅行社许可编号:L-HUN-GJ00001</li></ul>
<ul><li>湘ICP备08102932号  <img src="images/icp.png" width="56" height="15" /></li></ul>
</div>
</div>
</body>
</html>
 

================================================================

/* CSS Document公共,每个网站都是一样的 */
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,em,button{margin:0;padding:0;}
body{font-size:12px;line-height:1.6;font-family:Simsun,sans-serif;color:#000;background:#FFF; 960px; margin:0 auto; padding:0;}
img,fieldset{border:0;margin:0;padding:0;}
input, textarea{font-size:12px;}
table{border-collapse:collapse;}
a{color:#0055AA; text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4,h5{ font-family:"Times New Roman",serif;}
ul{list-style: none;}
dfn{font-style:normal;}
.layoutfix{display:inline-block;}
.layoutfix{display:block;overflow:hidden;}
.left{float:left;}
.right{float:right;}
f
/* 首先定义一个整体大小,一个容器一样,里面可以放很多div */
.centers{float:left;960px;height:1352px;}

/* 头部div */
.top{960px;height:101px;float:left;}
.top_logo{346px;height:101px;float:left; background:url(images/bg_index.png) no-repeat -65px -143px; }
.top_info{289px;height:101px;float:right; background:url(images/bg_index.png) no-repeat -65px -268px;}
/* menu菜单div */
.menu{ 960px; height:41px; float:left;}
.menu_info{280px; height:41px; float:left; background:url(images/bg_index.png) no-repeat -0px 1px;}
.menu_info_02{660px; height:41px; float:left; background:url(images/meun_repter.png) repeat-x}
.menu_info_02 ul{ margin-top:5px; 660px;}
.menu_info_02 ul li{ float:left; 80px; font-size:18px; font-weight:bold; font-family:"方正舒体"; color:#FFE9F0}
.menu_info_02 ul li a{ color:#FFFFFF;}
.menu_info_foot{ 20px; height:41px; float:left; background:url(images/bg_index.png) no-repeat -301px 1px;}
/* flash广告信息div */
.flash{ 960px; height:260px; float:left; background-image:url(images/info.png); background-repeat:no-repeat;}
/* 框框内容div */
.info{ margin-top:10px; height:307px; 960px; float:left;}
.info_bg{ height:307px; 318px; float:left;}

.info_chujing{ margin-top:1px; height:307px; 10px; float:left; background:url(images/bg_index.png) no-repeat -466px -310px;}
.info_chujings{ height:307px; 290px; float:left; background-image:url(images/info_repter_01.png); background-repeat:repeat-x; }
.info_chujingss{margin-top:1px; height:307px; 10px; float:left; background:url(images/bg_index.png) no-repeat -487px -310px;}

.inf0_bg_title{ margin-top:12px; 290px; height:23px; float:left; font-size:18px; color:#FFFFFF; font-weight:bolder}
.inf0_bg_row{ margin-top:15px; 290px; height:234px; float:left;}
.inf0_bg_row ul{ }
.inf0_bg_row ul li{ font:12px/22px Arial, Helvetica, sans-serif; }
.inf0_bg_row ul li span{ float:right;}
.inf0_bg_row ul li a{color:#504F50; }

.info_02{ margin-top:6px; height:105px; 960px; float:left; background-image:url(images/info_02.png); background-repeat:no-repeat}

.info_03{ margin-top:10px; height:343px; 960px; float:left;}

.info_03_bg{ height:343px; 320px; float:left;}

.info_03_bg_title{ 320px; float:left; height:39px; background:url(images/bg_index.png) no-repeat 0px -47px;}

.info_03_bg_titles{ 320px; float:left; height:39px; background:url(images/bg_index.png) no-repeat 0px -98px;}

.info_03_bg_titless{ 320px; float:left; height:39px; background:url(images/bg_index.png) no-repeat 0px -502px;}

.info_03_bg_hr{ margin-top:-2px; 320px; float:left; height:293px; background-image:url(images/info_hr.png); background-repeat:repeat-y; }

.info_03_bg_hr ul{ margin-left:5px;300px; }

.info_03_bg_hr ul li{ float:left; line-height:260%;}

.info_03_bg_hr ul li a{color:#504F50; }

.info_03_bg_hr ul li span{ float:right;}

.info_03_bg_foot {  318px; float:left; height:16px; background:url(images/bg_index.png) no-repeat 0px -554px;}
/* 下面的菜单div */
.menu_02{ margin-top:35px; 960px; height:44px; float:left;}

.menu_02_top{ 12px; float:left; height:46px; background:url(images/bg_index.png) no-repeat 0px -141px; }
.menu_02_repter{ 935px; height:46px; float:left; background-image:url(images/meun02_repter.png); background-repeat:repeat-x; }
.menu_02_repter ul{}
.menu_02_repter ul li{text-align:center; margin-top:12px; float:left; color:#E62668;  font-size:12px; 75px; }

.menu_02_repter ul li a{ color:#E62668;}

.menu_02_foot{ 12px; float:left; height:46px; background:url(images/bg_index.png) no-repeat -22px -141px; }

/* 版权div */
.foot{ margin-top:10px; height:99px; 960px; float:left; text-align:center;}
.foot ul{}
.foot ul li{ }

原文地址:https://www.cnblogs.com/p_db/p/2194825.html