趣味网址导航(时光旅行)更多界面源码分享

  

趣味网址导航“更多”界面分享(自适应的哟):


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title>分类导航_趣味导航_时光旅行</title>
<meta name="keywords" content="趣味导航,分类导航" />
<meta name="description" content="趣味导航分类界面" />
<style type="text/css">
body{
margin:0 auto;
width:960px;
background:#f8f8f8;
}
/*布局*/
#header{background:#0aa770; width:100%;height:45px;margin-bottom:10px;border:1px solid #F4FDEE;}
#header h2 {width:99%;color:#ffffff;font-size:18px;vertical-align:middle;}
#header .body {padding:0px 3px;}	
#header .titleHw{display:inline;}
#header .titleHm{display:none;}
	
#MORE {border:1px solid #eee;background:#FFFFFF;height:100%;margin-bottom:10px;padding:1px;}
#MORE  ul {list-style-type:none;padding:5px;margin:0;height:32px;border:0;}
#MORE  ul li {float:left;width:25%;height:32px;line-height:32px;text-align:center;overflow:hidden;}
#MORE ul li a{text-decoration:none;color:#000000;display:inline-block;width:100%;height:100%;}
#MORE ul li a:hover {background:#0aa770;color: #fff;  -moz-border-radius: 15px; -webkit-border-radius: 15px;border-radius:15px;}
	
@media only screen and (max-width: 600px){
body{
width:100%;;
}

#header .titleHm , #XWZX .more-navi,#XXYL .more-navi,#SHFW .more-navi,#SYCX .more-navi{display:inline;}
#header .titleHw{display:none;}
}	
</style>
</head>
<body topmargin="0" leftmargin="0" rightmargin="0">

<div class="head" ID="header">
<a style="float:left;width:44px;height:44px;background-image:url(../img/back.png);vertical-align:middle;" href="../index.htm"></a>
<a style="float:right;width:44px;height:44px;"></a><h2 align="center">分类-趣味导航</h2>	
</div>

<div ID="MORE">
<ul>
<li class="border-lefttop"><a href="xinwen.htm">新闻</a></li>
<li class="border-top"><a href="tiyu.htm">体育</a></li>
<li class="border-top"><a href="caijing.htm">财经</a></li>
<li class="border-top"><a href="shuma.htm">数码</a></li>
</ul>
<ul>
<li class="border-left"><a href="junshi.htm">军事</a></li>
<li><a href="xiaoshuo.htm">小说</a></li>
<li><a href="shejiao.htm">社交</a></li>
<li><a href="yinyue.htm">音乐</a></li>
</ul>
<ul>
<li class="border-left"><a href="shipin.htm">视频</a></li>
<li><a href="youxi.htm">游戏</a></li>
<li><a href="lvyou.htm">旅游</a></li>
<li><a href="gaoxiao.htm">搞笑</a></li>
</ul>
<ul>
<li class="border-left"><a href="meitu.htm">美图</a></li>
<li><a href="jiaoyou.htm">交友</a></li>
<li><a href="gouwu.htm">购物</a></li>
<li><a href="tuan.htm">团购</a></li>
</ul>
<ul>
<li class="border-left"><a href="life.htm">生活</a></li>
<li><a href="qiche.htm">汽车</a></li>
<li><a href="yingyong.htm">应用</a></li>
<li><a href="caipiao.htm">彩票</a></li>
</ul>
<ul>
<li class="border-left"><a href="bank.htm">银行</a></li>
<li><a href="youxiang.htm">邮箱</a></li>
<li><a href="zhaopin.htm">招聘</a></li>
<li><a href="meishi.htm">美食</a></li>
</ul>
<ul>
<li class="border-left"><a href="fangchan.html">房产</a></li>
<li><a href="jiankang.htm">健康</a></li>
<li><a href="xingzuo.htm">星座</a></li>
<li><a href="tool.htm">工具</a></li>
</ul>

</div>

<p align="center"> <script type="text/javascript" src="https://kuaixunqdn101.cn/navigation/m/webtoo/ZZTJ.JS"></script></p>
</body>
</html>


就是这样简单,从趣味网址导航开始

发布了32 篇原创文章 · 获赞 40 · 访问量 5988

猜你喜欢

转载自blog.csdn.net/qq_43102934/article/details/89392776