网页模仿

时间：2019-03-27 19:40:23 阅读：143 评论：0 收藏：0 [点我收藏+]

码云链接：https://gitee.com/qinglongwu/codes/9nt18sk7256gmeojuwzyb78

原网页链接：http://www.doyouhike.net/

原网页截图：

技术分享图片

模仿网页截图：

技术分享图片

部分源码：

!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>磨房 - 自助旅行和户外运动的出发地 - 磨房</title>
<script src="img.js"type="text/javascript"></script>
<style type="text/css">
#header{
background-color:#CCC;
/*width:100%;*/
overflow:hidden;
background-size:100%;
margin-left:-8px;
margin-top:-8px;
margin-right:-8px;
}
#maincontent{
background-color:#399;
background-size:100%;
margin-left:-8px;
margin-top:-15px;
margin-right:-8px;
height:50px;
}
#ul1 li {
float:left; /* 往左浮动 */
list-style:none; /* 将默认的列表符号去掉 */
padding:0; /* 将默认的内边距去掉 */
margin:0 auto; /* 将默认的外边距去掉 */
}
#ul1 {
font:12px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */
}
#ul1 li a {
display:block; /* 将链接设为块级元素 */
padding:8px 30px; /* 设置内边距 */
/*background:#3A4953; 设置背景色 */
color:#0e6596; /* 设置文字颜色 */
text-decoration:none; /* 去掉下划线 */
line-height:15px;
vertical-align:middle;
margin:0;
}

#ul2 li {
float:right; /* 往右浮动 */
list-style:none; /* 将默认的列表符号去掉 */
padding:0; /* 将默认的内边距去掉 */
margin:0 auto; /* 将默认的外边距去掉 */
}
#ul2 {
font:12px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */
}
#ul2 li a {
display:block; /* 将链接设为块级元素 */
padding:8px 30px; /* 设置内边距 */
/*background:#3A4953; 设置背景色 */
color:#0e6596; /* 设置文字颜色 */
text-decoration:none; /* 去掉下划线 */
line-height:15px;
vertical-align:middle;
margin:0;
}
#img1{
margin-left:-8px;
margin-top:-15px;
margin-right:-8px;
}
.dropbtn{
background-color:#399;
color:#CCC;
margin-top:-1px;
height:50px;
border:none;
padding:0px 70px;
border-right-style:solid;
border-right-color:#CCC;
border-right-width:0.5px;
font-size:18px;
}
.dropbtn:hover{
background-color:#FFF;
color:#399;
border:none;
}
.dropdown {
position: relative;
display: inline-block;
}
/*隐藏下拉内容*/
.dropdown-content {
    display: none;
    position: absolute;
    background-color:#FFF;
    min-width: 350px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a{
text-decoration:none; /* 去掉下划线 */
color:#CCC;
font-size:15px;
}
/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {background-color:#FFF}
/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
    display: block;
}
.container {
    height: 70px;
    width: 800px;
    margin: -40px -500px -10px auto;
}
.search {
    width: 200px;
    height: 30px;
outline: none;
border: 1px solid #ccc;
padding-left: 20px;
position: absolute;}
.content{
padding:0 70px;
width:1050px;
overflow:hidden;
}
.img{
width:800px;
}
.recommend{
width:800px;
}
.recommend-title{
width:800px
}
.title{
padding:0px 500px;
}
.title2{
float:right;
position: relative;
top:-320px;
width:270px
}
.dropbtn2{
background-color:#F60;
border:none;
font-size:25px;
width:350px;
height:45px;

}
.dropbtn2:hover{
background-color:#F90;
}
.dropbtn2 a{
color:#FFF;
}
.show{
width:1000px;
height: 300px;
position: relative;
border: 1px FFFFFF solid;
margin:20px auto;
border-radius: 15px;
}
   .show img{
    width:1000px;
    height:300px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    border-radius: 15px;
    text-align:center;
   }
</style>
</head>

<body>
<div id="header" >
<ul id="ul1">
                    <li><a href="http://www.doyouhike.net/appdownload/mofangapp">磨房APP</a></li>
                    <li><a href="http://bx.doyouhike.net/?clear=true&from=top">磨房保险</a></li>
                    <li ><a href="http://www.doyouhike.net/forum/backpacking/2323638,0,0,0.html " class="mb_app_link">磨房旅行服务</a></li>
                </ul>
<ul id="ul2">
       <li><a href="#" >回旧版</a> </li>
       <li><a href="#" >免费注册</a></li>                                                                   <li><a href="#" >登录</a></li>
                 </ul>
               </div>
<div id="img1">
<p><img src="01.png"width="1280px"></p>
</div>
<div id="maincontent">
<div class="dropdown">
<button class="dropbtn"><a href="/" style="text-decoration:none; color:#FFF;">首页</a></button>
</div>
<div class="dropdown">
<button class="dropbtn">目的地</button>
<div class="dropdown-content">
<a href="/s/route/?fr=nav&keyword=&from=result" style="position: relative;color:#369">户外线路</a>
<p><a href="http://www.doyouhike.net/dest/njingxuanwuhuPark-camping">南京玄武湖公园露营|</a>
                                                                        <a href="http://www.doyouhike.net/dest/wuhan-guqintaixiaohuan-hiking">武汉古琴台小环线徒步|</a>
                                                                       <p> <a href="http://www.doyouhike.net/dest/hangzhouputuoshan-driving">杭州普陀山自驾|</a>
                                                                        <a href="http://www.doyouhike.net/dest/shenzhenxiyong-baguang-cycling">深圳溪涌-坝光村骑行|</a>
                                                                        <a href="/s/route/?fr=nav&keyword=&from=result">更多...</a></p></p>
   <p><hr/></p>
<p><a href="/guide"style="color:#369">户外指南</a></p>
<p><a href="/guide#f1">徒步|</a><a href="/guide#f2">潜水|</a><a href="/guide#f3">骑行|</a><a href="/guide#f4">安全</a></p>
   <p><hr/></p>
<p><a href="/dest"style="color:#369">热门目的地</a></p>
<p><a href="http://www.doyouhike.net/dest/Baykalskoye-ozerol">贝加尔湖|</a><a href="http://www.doyouhike.net/dest/nanjiang">南疆|</a><a href="http://www.doyouhike.net/dest/nepal">尼泊尔|</a><a href="http://www.doyouhike.net/dest/New-Zealand">新西兰|</a><a href=‘http://www.doyouhike.net/dest‘>更多...</a></p>

</div>
</div>
<div class="dropdown">
<button class="dropbtn">活动</button>
<div class="dropdown-content">
<a href="/event/yueban"style="color:#369">活动约伴</a>
   <p><hr /></p>
<p><a href="http://race.zaitu.cn/"style="color:#369">大型活动</a></p>
<p><a href="/forum/sz100km/">百公里|</a>
<a href="/forum/200km/">200公里骑行</a>
<p><a href="/album/">活动相册</a></p></p>
<p><hr /></p>
<p><a href="http://www.doyouhike.net/zhuanti/mfhd/"style="color:#369">磨房活动</a></p>
                                <p><a href="/forum/jingcai/">远方的精彩</a></p>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">社区</button>
<div class="dropdown-content">
<a href="/forum"style="color:#369">论坛</a>
<p><a href="/forum/backpacking/">长假远行|</a><a href="/forum/globe/">异域之旅|</a><a href="/forum/onwheel/">自驾之路|</a><a href="/forum/photo/">驴光掠影|</a><a href="/forum/gear/">装备论坛|</a><a href="/forum/nature/">自然</a>
                                    </p>
<p><a href="/forum/mountain/">山野|</a><a href="/forum/cycling/">自行车|</a><a href="/forum/running/">越跑越野|</a><a href="/forum/canyoning/">溪涧运动|</a><a href="/forum/leisure/">休闲|</a><a href="/forum/swimming/">游泳|</a><a href="/forum/junior/">小驴在野</a></p>
<p><a href="/forum/thinair/">高寒地带|</a><a href="/forum/deepblue/">潜水|</a><a href="/forum/aqua/">水上运动|</a><a href="/forum/snow_ice/">冰雪运动|</a><a href="/forum/glider/">天外飞仙|</a><a href="/forum/comm_nav/">通讯与导航</a> </p>
<p><a href="/forum/birdseye/">航拍视界</a></p>
<p style="height:12px;"><p><a href="/forum/safety/">安全回家|</a><a href="/forum/helpdesk/">站务处理|</a><a href="/forum/commonweal/">磨房公益|</a><a href="/forum/teahouse/">磨房茶舍|</a><a href="/forum/gourmet/">与食巨近|</a><a href="/forum/english/">Do You Hike ?|</a><a href="/forum/anniversary/">磨房15周年|</a><a href="/forum/airline/">廉价航空|</a><a href="/forum/visa/">签证与护照|</a><a href="/forum/insurance/">出行保险|</a><a href="/forum/sz100km/">百公里|</a><a href="/forum/200km/">200公里骑行|</a><a href="/forum/discover_guangzhou/">发现广州|</a><a href="/forum/info/">户外资讯|</a><a href="/forum">更多副版...</a>
<p><hr/></p>
<p><a href="/city"style="color:#369">城市</a></p>
<p><a href="/city/shenzhen/">深圳|</a><a href="/city/guangzhou/">广州|</a><a href="/city/dongguan/">东莞|</a><a href="/city/shanghai/">上海|</a><a href="/city/beijing/">北京|</a><a href="/city/huizhou/">惠州|</a><a href="/city/chengdu/">成都|</a><a href="/city/foshan/">佛山|</a><a href="/city/zhongshan/">中山|</a></p>
<p><a href="/city/hangzhou/">杭州|</a><a href="/city/">更多城市...</a></p>
<p><hr/></p>
<p><a href="/group"style="color:#369">圈子</a></p>
<p><hr/></p>
<p><a href="/zhuanti"style="color:#369">专题</a></p>
<p><a href="/ispo">ISPO|</a>
<a href="/special/singapore/">发现新加坡|</a>
<a href="/AOTF">亚洲户外展|</a>
<a href="/special/sony/">索尼酷拍|</a></p>
<p><a href="/dapeng">大鹏国际户外嘉年华|</a>
<a href="/banff">班夫电影</a>
</p>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">服务</button>
<div class="dropdown-content">
<p><a href="#"style="color:#369">旅行预订</a></p>
<p><a href="http://bx.doyouhike.net/?clear=true&from=top">保险|</a><a href="/hotel/">住宿</a></p>
<p><hr /></p>
<p><a style="color:#369">杂货</a></p>
<p><a href="/bazaar/">老街|</a><a href="http://mofangwang.taobao.com/" target="_blank">磨房淘宝店</a></p>
</div>
</div>
<div class="container">    <form action="" class="parent">        <input type="text" class="search" placeholder="搜索目的地/攻略/活动/论坛">        <input type="button" name="" id="" class="btn">    </form></div>
</div>
<div class="show">
    <img src="深圳百公里.jpg"/>
       <img src="川藏骑行.jpg"/>
    <img src="黄山.jpg"/>
</div>

   <script>
    var img=$(‘.show img‘);
    var i=0;
    img.eq(0).animate({opacity:‘1‘});
    setInterval(function(){
     img.eq(i).animate({opacity:‘0‘})
     i=(i+1)%3;
     img.eq(i).animate({opacity:‘1‘})
     console.log(4);},5000);
   </script>

<div class="content">
<h1 style="font-size:18px;font-weight:normal;">推荐目的地</h1>
<div class="img">
   <img src="推荐目的地珠海.jpg "width="350px"height="200px">
       <img src="推荐目的地川西.jpg "width="350px"height="200px" hspace="30px">
</div>
<div class="recommend-title">
<a href="http://www.doyouhike.net/dest/zhuhai" title=""style="text-decoration:none;
color:#333;
    font-size:16px;
font-weight:normal;">珠海</a></h2>
<a href="http://www.doyouhike.net/dest/chuanxi" title=""style="padding:0px 0px 0px 350px ;text-decoration:none;color:#333;font-size:16px;font-weight:normal;">川西</a></h2>
   <div class="recommend">
   <table>
   <tr >
   <td width="350px"><a href="http://www.doyouhike.net/dest/zhuhai" title=""style="text-decoration:none;
color:#333;
    font-size:16px;
font-weight:normal;">珠海是珠三角中海洋面积最大、岛屿最多、海岸线最长的城市，素有"百岛之市"之称。</a></td>
   <td width="30px"> <td>
   <td width="350px"><a href="http://www.doyouhike.net/dest/chuanxi" title=""style="text-decoration:none;
color:#333;
    font-size:16px;
font-weight:normal;">川西现指成都平原以西的地区，即四川省阿坝州和甘孜州等高原藏区。</a></td>
   </tr>
   </table>
</div>
</div>
<div class="title2">
<pre style="font-size:18px;font-weight:normal;">   相关活动         <a class="more" href="/event/yueban" target="_blank"style="text-decoration:none;color:#333;font-size:10px">      更多》</a></pre>
<table style="margin-top:-28px;">
<tr>
<td width="20px"></td>
<td> <img src="江西武功山.jpg "width="50px"height="50px"></td>
<td width="3px"></td>
<td><h3><a href="/event/yueban/detail/6403368" title=""style="text-decoration:none;color:#333;font-size:12px;font-weight:normal">江西武功山周末自驾游游</a></h3>
<p><pre style="text-decoration:none;color:#333;font-size:12px;font-weight:normal"><a href="#" class="info_user pr16" rel="info_user_1296458"style="text-decoration:none;color:#333;font-size:12px;font-weight:normal">mamk    </a>日期:2018-12-21</pre></p>
    </td>
</tr>
<tr>
<td width="50px"></td>
<td> <img src="珠海航展.jpg "width="50px"height="50px"></td>
<td width="3px"></td>
<td><h3><a href="/event/yueban/detail/6399325" title=""style="text-decoration:none;color:#333;font-size:12px;font-weight:normal">一起看珠海航展</a></h3>
<p><pre style="text-decoration:none;color:#333;font-size:12px;font-weight:normal"><a href="#" class="info_user pr16" rel="info_user_3855064"style="text-decoration:none;color:#333;font-size:12px;font-weight:normal">mfATIv00850409    </a>日期:2018-11-09</pre></p>
     </td>
</tr>
<tr>
<td width="20px"></td>
<td> <img src="川西秋摄.jpg "width="50px"height="50px"></td>
<td width="3px"></td>
<td> <h3><a href="/event/yueban/detail/6403427" title=""style="text-decoration:none;color:#333;font-size:12px;font-weight:normal">11月川西秋摄</a></h3>
<p><pre style="text-decoration:none;color:#333;font-size:12px;font-weight:normal"><a href="#" class="info_user pr16" rel="info_user_476886"style="text-decoration:none;color:#333;font-size:12px;font-weight:normal">qtysky    </a>日期:2018-11-10</pre></p>
     </td>
</tr>
</table>
<button class="dropbtn2"><a href="/event/yueban/publish"style="text-decoration:none;margin:0px 50px 0px 0px;">我也要发布活动</a></button>
</div>
</div>
</body>
</html>

网页模仿

原文：https://www.cnblogs.com/wuyushu/p/10609750.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)