dreamweaver 制作旅游网页成品源代码
网页大作业dreamweaver前端作业成品源代码分享，有需要的同学可以参考下。
(效果图）
HTML代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>XXX的旅游网站</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <div id="wrapper"> <div id="header_wrapper"> <div id="logo"> <img src="images/hn.jpg" width="914" height="178" alt=""/> </div> <div id="nav"> <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> <li><a href="#">临高</a></li> <li><a href="#">五指山</a></li> </ul> </div> </div> <div id="container"> <div id="side_bar1"> <h1>景点类型</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> </ul> </div> <div id="main_content1"> <h1>精品线路推荐</h1> <p><a href="#">三亚进出五天四晚“蜈支洲+南海观音+天堂公园”</a></p> <p><a href="#">海口往返五天四晚“南山.天堂公园.分界洲”</a></p> <p><a href="#">三亚“呀喏哒.大小洞天.分界洲.兰花世界”五天四晚</a></p> <p><a href="#">海口五天四晚“南山+天涯海角+大东海+分界洲”</a></p> <p><a href="#">三亚非诚勿扰路线三日游</a></p> <p><a href="#">海口文化一日游火山口公园+假日海滩+骑楼街</a></p> <p><a href="#">西线东方鱼鳞洲+文昌霸王岭+铜鼓岭+月亮湾+红树林</a></p> <div class="hor_separator"></div> <h1>美景预览</h1> <img src="images/0.jpg" width="460" height="240" alt=""/> <div class="hor_separator"></div> </div> </div> <div id="clearfloat"></div> <div id="footer"> 版权所有©XXX 2021 </div> </div> </body> </html>
css代码
*{padding:0;margin:0}
body{font-size:14px;color:#656565;background:#dedede}
#wrapper{width:914px;margin:0 auto}
#header_wrapper{width:914px;margin:0 auto}
#logo{width:914px;text-align:center;padding-top:20px;overflow:hidden}
#nav{width:100%;margin-top:8px}
#nav li{font-family:"黑体";font-size:15px;list-style:none;display:inline}
#nav li a{color:#FF0;font-weight:bold;text-decoration:none;background:#5294ea;padding:4px 10px;margin-left:3px;border-radius:5px 5px 0 0}
#nav li a:hover{background:#dedede}
#container{width:914px;margin:0 auto;padding:20px 0}
#main_content1{width:63%;float:right;padding:20px 0 20px 0;margin-left:17%}
#side_bar1{width:20%;float:left;padding:20px 0 20px 0;line-height:30px;position:relative}
#side_bar1 li{background:url("images/p.png") no-repeat left;list-style:None;border:1px dotted #656565;box-shadow:0 1px #fff}
#side_bar1 li a{color:#656565;padding-left:20px;text-decoration:none;display:block}
#side_bar1 li a:hover{color:#363636;background:#CCC url("images/p.png") no-repeat center left}
h1{font-size:16px;color:#363636;margin-bottom:10px}
#main_content1 p{line-height:130%;margin-bottom:5px}
#main_content1 img{margin-left:20px;border:3px ridge #FF0}
#main_content1 a{color:#656565;text-decoration:none}
#main_content1 a:hover{color:#363636;background:#ccc}
#clearfloat{clear:both}
#footer{text-align:center;border-top:1px dotted #333;line-height:30px}
.hor_separator{border:1px dotted #656565;margin:20px 0 20px 0;box-shadow:0 1px #fff}
①本站所有成品淘宝购买需确认收货并好评后发货；
②所有作品如需修改需另加费用；
③所有作品没有任何人的姓名学校之类信息；
④请务必确认网页是您需要的，源码具有可复制性，所以无法退换！
⑤每份网页都可以更换内容，费用50元起，如需更换内容请联系客服!
dw网页设计 » dreamweaver 制作旅游网页成品源代码
②所有作品如需修改需另加费用；
③所有作品没有任何人的姓名学校之类信息；
④请务必确认网页是您需要的，源码具有可复制性，所以无法退换！
⑤每份网页都可以更换内容，费用50元起，如需更换内容请联系客服!
dw网页设计 » dreamweaver 制作旅游网页成品源代码
