大二制作-去哪网首页
<!HTML部分
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>去哪网</title> <link rel="stylesheet" href="quna.css"> </head> <style> } </style> <body> <div> <!-- 头部部分 --> <div class="header"> <div class="header1"> <ol> <a href="" id="name3"><li><img src="images/tt.png" alt="" style="width:130px;height: 36px;"></li></a> <a href=""><li>去哪网首页 |</li></a> <a href=""><li>网站导航 |</li></a> <a href=""><li style="color:#ff7145;">登录</li></a> <a href=""><li style="color:#0084bb;">或 免费注册 |</li></a> <!-- 第一行 --> <ul id="lian"> <li><a href="" class="ssa" >消 息 <font size="2px">▼</font>|</a> <ul class="phone"> <li>商家消息</li> <li>商家留言</li> </ul> </li> </ul> <!-- 第二行 --> <ul id="lian"> <li> <a href="" class="ssa" >查看订单<font size="2px">▼</font>|</a> <ul class="phone"> <li>我的订单</li> <li>已付订单</li> </ul> </li> </ul> <!-- 第三行 --> <ul id="lian"> <li><a href="" class="ssa" >积分商城<font size="2px">▼</font>|</a> <ul class="phone"> <li>我的积分</li> <li>积分来源</li> </ul> </li> </ul> <!-- 第四行 --> <ul id="lian"> <li><a href="" class="ssa" >联系客服<font size="2px">▼</font></a> <ul class="phone"> <li>联系电话</li> <li>请亲留言</li> </ul> </li> </ul> </ol> </div> </div> <!-- 第二层 --> <div class="nav"> <div class="nannav"> <div class="nannav1"> <li><input type="text" class="input1"></li> <li><input type="text" class="input2" value=" 搜索"></li> </div> <div class="diva"> <ol> <li>热门搜索:</li> <li>葡萄牙公园</li> <li>长江第一湾</li> <li>碧塔海</li> </ol> </div> </div> </div> <!-- 第三层 --> <div class="section"> <div class="sectionnav"> <ul> <li class="bage1"><h1>日本 </h1></li> <li style="font-size: 20px;">RIBEN</li> <li class="bage">|</li> <li><a href="#">7877<br />想去</a></li> <li class="bage">|</li> <li><a href="#">7547<br/>去过</a></li> <li class="bage">|</li> </ul><br/><br/><br/><br/><br/> <p> 日本(日文：日本狗，前660年2月11日——)是亚洲大陆东海岸的太平洋岛国，西、北隔东海、黄海......</p> </div> </div> <!-- 中间部分 --> <!-- 中间图片部分 --> <div id="content"> <hr style="color: red;" /> <div class="centertupian"></div> <!-- 中间右边部分 --> <div class="right"> <div class="tieshi"> <ul> <li> <img src="https://imgs.qunarzz.com/p/p10/201310/18/c7604af17c66f0c893835fbb.jpg_300x200_f36fdce7.jpg" alt=""> </li> <li class="ppli"><p>建议游玩天数, 10天</p> <p>旅游季节：春季(3月－5月) 3月底到4月上旬，樱花盛开的时候正是仲春的季节。 夏季(6月－8月) 6月份中有3－4个星期的时间是梅雨季节，7月份是暑气逼人的盛夏季节，这时候日本人喜欢到海滨去沐海水浴，或者到山区去避暑。 秋季(9月－11月) 天高气爽的秋天有很多展览会...</p></li> <li class="ppli1"> <a href="">目的地状况</a> <a href="">交通信息</a> <a href="">货币与消费</a> <a href="">签证与出入境</a> </li> </ul> </div> <div class="door"> <ul> <li style="line-height:50px;">热销门票 更多>></li> <hr style="border :1px dotted gray;width: 200px;margin: 0 auto;"/> <li><dd>日本WIFI</dd> <br/><span>￥9.9</span><a href="">订票</a></li> <hr style="border :1px dotted gray;width: 200px;margin: 0 auto;"/> <li><dd>日本环绕影城</dd><br /><span>￥169</span><a href="">订票</a></li> <hr style="border :1px dotted gray;width: 200px;margin: 0 auto;"/> <li><dd>东京迪士尼乐园</dd><br /><span>￥282</span><a href="">订票</a></li> </ul> </div> </div> <!-- 中间下面内容部分 --> <div class="content"> <div class="con"> <div class="contentp1"> <div><img src="https://imgs.qunarzz.com/travel/d7/1509/56/a8171a5efeff60.jpg_r_1024x683x95_2e6d8995.jpg" alt=""></div> </div> <div class="contentp2"> <ul> <a href="" id="name2"><li style="color: #ff7145;">【日本】日语小白关西经典7日游</li></a> <li><dd style="color:#8bd2d2;">枫行MAPLE</dd>| 2015-05-03 出发| 共6天</li> <li>之前本没有明确以日本为目的地的出行计划，无奈身边多了几位忠实日本粉，嚷嚷着要去日本自由行，在帮大家寻找自由行途径的过程中...</li> </ul> </div> </div> <div class="con"> <div class="contentp1"> <div><img src="https://img1.qunarzz.com/travel/d1/1509/6a/dbf1d2ed8eb7fd.jpg_160x120x95_d749e41b.jpg" alt=""></div> </div> <div class="contentp2"> <ul> <a href=""><li style="color: #ff7145;">冬天的日本很精彩（东京及周边游记）</li></a> <li><dd style="color:#8bd2d2;">格尔的海</dd>| 2013-11-20 出发| 共8天</li> <li>音乐盒之森美术馆>明治神宫>新宿>鹤冈八幡宫>末广亭>银座>石桥>建长寺>河口湖...</li> </ul> </div> </div> <div class="con"> <div class="contentp1"> <div><img src="https://img1.qunarzz.com/travel/d4/1509/7f/2cb6a156716373.jpg_160x120x95_1438d9fa.jpg" alt=""></div> </div> <div class="contentp2"> <ul> <a href="" id="name1"><li style="color: #ff7145;">探秋日物语，寻美食与寺庙</li></a> <li><dd style="color:#8bd2d2;">colour6715</dd>| 2014-10-03 出发| 共9天</li> <li>58>祇园>岚山>天桥立>延历寺>奈良>京都站>幾松>比叡山>JR京都站>京都市役所前...</li> </ul> </div> </div> <div class="con"> <div class="contentp1"> <div><img src="https://img1.qunarzz.com/travel/d5/1611/df/430b204b5da5c7b5.jpg_160x120x95_679e8276.jpg" alt=""></div> </div> <div class="contentp2"> <ul> <a href=""><li style="color: #ff7145;">故地重游也有新惊喜</li></a> <li><dd style="color:#8bd2d2;">蔷薇维克</dd>| 2014-02-01 出发| 共15天</li> <li>终于又开题了，这次回来又拖了好久才开始写，拖延症真是越来越严重了有木有？ 2014年的春节，本人在时隔一年之后又再一次访....</li> </ul> </div> </div> <div class="con"> <div class="contentp1"> <div><img src="https://img1.qunarzz.com/travel/d6/1611/95/75496ebdefb284b5.jpg_160x120x95_40a12fc7.jpg" alt=""></div> </div> <div class="contentp2"> <ul> <a href=""><li style="color: #ff7145;">冬季的日本不一般</li></a> <li><dd style="color:#8bd2d2;">藏马蔷薇</dd>| 2012-11-22 出发| 共13天</li> <li>终于开始写日本游记了。。。2012年圣诞，顶着中日关系的压力，我们4个执着女克服万难，冲到了日本，享受圣诞和新年的假期。...</li> </ul> </div> </div> <div class="con"> <div class="contentp1"> <div style="color:#8bd2d2;"><img src="https://img1.qunarzz.com/travel/d6/1611/78/66b83ded7be8dbb5.jpg_160x120x95_3f4d5bad.jpg" alt=""></div> </div> <div class="contentp2"> <ul> <a href=""><li style="color: #ff7145;">古老与繁华的味道，日本五城记</li></a> <li><dd>多多熊</dd>12014-09-30 出发共9</li> <li>行程：成田国际机场>新宿站>台场>明治神宫>秋叶原>日本桥>代代木公园>有乐町>表....</li> </ul> </div> </div> <div class="con"> <div class="contentp1"> <div><img src="http://imgs.qunarzz.com/vc/75/64/d2/c7234cdf338a0e460b0aee9251.jpg_210x140x92.jpg" alt=""></div> </div> <div class="contentp2"> <ul> <a href="" id="name"><li style="color: #ff7145;">霓虹国里的每一寸阳光</li></a> <li><dd style="color:#8bd2d2;">人文景观</dd>人均25000元情侣美食 摄影 人文</li> <li>行程：日本环球影城>东京迪士尼乐园>大阪展望酒店(Hotel Vista Grande Osaka)>宗右卫门町...</li> </ul> </div> </div> </div> </div> <!-- 左边部分 --> <div class="left"> <ul> <li style="background:#76cdf8;"><a href="">日本 美图</a></li> <li><a href="#name">日本 特色文化</a></li> <li><a href="#name1">日本 攻略</a></li> <li><a href="#name2">日本 签证</a></li> <li><a href="#name3">日本 注意事项</a></li> </ul> </div> <!-- 底部部分 --> <hr style="color:#ff6600;"/> <div class="footer"> <div class="footerup"> <span><a href=""> 关于Qunar.com</a></span> <span><a href=""> |投资者关系</a></span> <span><a href=""> |酒店加盟</a></span> <span><a href=""> |业务合作</a></span> <span><a href=""> |加入我们</a></span> <span><a href=""> |"严重违规失信"</a></span> <span><a href=""> 专项整治举报</a></span> <span><a href=""> |安全中心</a></span> <span><a href=""> |星骆驼公益</a></span> <span><a href=""> |About Us</a></span> </div> <div class="footerdown"> <ul> <li class="s1"></li> </ul> </div> </div> </div> </body> </html>
css部分
*{
margin:0px;
padding: 0px;
font-family:黑体;
}
body{
background-color:rgba(144,144,144,0.2);
}
.header{
height:36px;
background:#f5f5f5;
/*border:1px solid #c44;*/
font-size: 14px;
}
.header1{
width: 1000px;
height: 36px;
margin:0 auto;
/*border:1px solid green;*/
}
/*触屏下拉列表？*/
.ssa{
display:block;
text-decoration:none;
}
.phone{display: none;}
#lina li{list-style: none;}
#lian li:hover ul{
display:block;
width:70px;
height:60px;
background:white;
position:absolute;
top:30px;
height:60px;
text-decoration:none;
font-size:13px;
text-align:center;
}
.header1 li{
list-style: none;
float:left;
padding: 2px;
margin-top:10px;
}
.header1 img{
margin-top:-15px;
margin-left:0px;
}
/*第二层*/
.nav{
height:60px;
/*background: green;*/
text-align:center;
font-size: 14px;
}
.nananv1{
/*background-color:red;*/
width:400px;
height:30px;
}
.input1 {
width:500px;
height: 30px;
display: block;
margin-top:10px;
margin-left:100px;
border:2px solid #ff7145;
}
.input2 {
width: 50px;
height: 30px;
display: block;
margin-left: 0px;
margin-top:10px;
margin-left:0px;
background-color:#ff7145;
border:2px solid #ff7145;;
}
.diva{
margin-top: 40px;
margin-left:700px;
}
.diva li{
width: 70px;
height:30px;
float:left;
}
.nannav{
width: 1000px;
height: 60px;
margin:0 auto;
/*border:1px solid red;*/
}
.nannav li{
float: left;
}
.nav li{
list-style: none;
}
/*第三层*/
.section{
height:120px;
background:#1babf3;
opacity:0.7;
color:white;
}
.sectionnav{
width: 1000px;
height: 120px;
margin:0 auto;
/*background: red;*/
/*border:1px solid red;*/
}
.sectionnav li{
list-style: none;
float:left;
margin-left: 10px;
margin-top: 10px;
}
.sectionnav a{
color: white;
}
.bage{
font-size: 30px;
margin-top: 20px;
}
.bage1{
font-size:30px;
}
/*左边部分*/
.left{
width: 141px;
height: 209px;
/*background: red;*/
border:0 solid #fff;
position:fixed;
top:300px;
left:300px;
background-color: #eee;
}
.left li {
width:141px;
height:40px;
line-height:45px;
font-size: 16px;
list-style:none;
text-align: center;
}
div.left li:hover{
background:#76cdf8;
}
.left a{
color: black;
}
.left a:hover{
color:white;
}
.left a{
display:block;
text-decoration:none;
width:141px;
height:40px;
}
/*中间部分*/
#content{
/*border:1px solid #c44;*/
/*border-top-color:#c44;*/
text-align: center;
margin-top: 20px;
height:1600px;
position: relative;
}
.centertupian{
width:780px;
height:330px;
background-image:url(https://imgs.qunarzz.com/travel/d7/1604/31/6d4a43a9f5170bf7.jpg_r_1024x683x95_f549b0d5.jpg);
background-repeat:no-repeat;
background-size:cover;
position:relative;
top:20px;
left:450px;
}
/*中间下面内容部分*/
.content{
width: 780px;
height:1200px;
/*border:1px solid #cff;*/
position:relative;
top:40px;
left:450px;
}
.con{
width: 780px;
border:1px solid pink;
height: 182;
height: 153px;
margin-top:8px;
/*background-color: red;*/
}
.contentp1{
width:200px;
height:120px;
margin-top:15px;
margin-left:15px;
border:1px solid #fcf;
}
.contentp1 img{
width:200px;height:120px;
}
.contentp2{
width:400px;
height: 100px;
position: relative;
left:250px;
top:-115px;
/*border:1px solid #ccf;*/
text-align: left;
font-size: 16px;
font-family:微软雅黑;
margin-top:3px;
}
.contentp2 li{
list-style: none;
}
/*右边部分*/
.right{
position:absolute;
top:0px;
right:420px;
width:241px;
height:703px;
/*border:1px solid #6877dc;*/
margin-top: 10px;
}
.right li{
list-style: none;
font-family: 微软雅黑;
font-size: 14px;
}
.tieshi img{
width: 240px;
height: 156px;
}
.tieshi{
width:240px;
height:430px;
border:1px solid #ccc;
background:white;
}
.tieshi .ppli p{
font-size:15px;
position: relative;
left: 2px;
float:left;
}
.tieshi .ppli1 a{
font-size: 16px;
float:left;
width:110px;
height:40px;
background-color: #5eabbd;
color: white;
margin:5px 5px;
line-height:35px;
}
.door{
width: 240px;
height: 228px;
/*border:1px solid #f88;*/
margin-top:30px;
background:white;
}
.door a{
display:block;
width:50px;
height:20px;
color: white;
background-color:#ff9955;
padding:0px;
position: relative;
float: right;
right:20px;
top:-15px;
}
.door li{
font-family: 黑体;
font-size: 16px;
margin-top: 10px;
/*border:1px solid orange;*/
height:50px;
line-height:20px;
}
.door dd{
color:blue;
font-size: 16px;
position: relative;
display: block;
float:left;
left:20px;
}
.door span{
color:red;
font-size: 14px;
position: relative;
display: block;
float:left;
left:20px;
}
/*下面部分*/
.footer{
width: 2000px;
height: 142px;
border:1px solid #ffc;
/*background-color: red;*/
}
.footerup{
width: 1000px;
height: 71px;
margin: 0px auto;
/*border:1px solid #c44;*/
text-align: center;
line-height: 45px;
}
.footerup a{
text-decoration:none;
margin-top: 40px;
margin-left: 5px;
font-size: 14px;
}
.footerdown{
width: 1000px;
height:71;
margin:0px auto;
/*border:1px solid #cff;*/
background-color: #cff;
}
.footerdown li{
list-style: none;
float:left;
width:550px;
height:30px;
background:url(https://source.qunarzz.com/common/hf/footer_v10.png) no-repeat;
}
.s1{
position: relative;
top:0px;
left:196px;
}
