简单用table标签实现携程导航页的布局

于 2019-05-27 19:45:39 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： web前端开发 前端兼容性 文章标签： web前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42943107/article/details/90610418
版权

简单用table标签实现携程导航页的布局

携程原图
携程的原图
效果图
粗糙的效果图
实现的几个要点：
1.有两个对齐。第一行和第五，第六行对齐。第二，三，四行对齐。
2.第二，三，四行有特定的颜色填充，而且外框是白色隔开 。

方法：
为了实现这个效果。我们主要使用了table标签加样式来完成！、

代码部分

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
 

<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="js/unslider.min.js"></script>
<!--
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	-->
	<link rel="stylesheet" href="css/edslider.css">
	<link rel="stylesheet" href="css/styles.css">
	<link rel="stylesheet" href="css/animate-custom.css">

<style type="text/css">
	a:link{ 
		text-decoration: none;
		outline:none;
	}
	.topbar-container1{
	background-color:#2577e3;/* #2577e3 #efeeea*/
}
.topbar-container2{
    background-color:#000000;
}
.topbar-container{
    background-color:#FFFFFF;
}


.topbar-wrap{
    width:1200px;
    height:62px;
    margin:0 auto;
    overflow: hidden;
	
}



.nav{
    float: left;
    height: 60px;
	margin:22px 22px 0px 0px;
	
}
.nav1{
    float: left;
    height: 60px;
	margin:-15px 2px 0px 10px;
	font-weight:bold
}
.nav2{
    
	margin:2px 2px 2px 2px;
	
}
.nav3{
    height:100px;
    width:1000px;
    float: left;
    margin:20px 0px 20px 20px;
    color: #FFFFFF;
	text-decoration:none; 
	
}
.nav4{
    float: left;
    height: 60px;
	margin:-1px 2px 0px 10px;
	font-weight:bold
}

.nav li{
    float: left;
    width: 100px;
    margin:0 10px;
    list-style: none;
}
.nav a{
    text-decoration: none;
    height: 100%;
    width: 100%;
    display: block;
    font-size: 18px;
    color: #FCF8F8;
    text-align: center;
    line-height: 60px;
	
 
}
.nav a:hover{
    background: #CBE3F1;
}
.table{
	background-color: #040a2c;
}
.img
{
  outline-width:0px;
  vertical-align:top;
}
/*#7ab2ed*/
.div1:hover{
	color: #FFFFFF;
}

.div2:{
	color: #FFFFFF;
}
.div3:{
	height:50px;
    width: 50px;
    float: left;
    margin:20px 0px 20px 20px;
    color: #000000;
	text-decoration:none;  /*超链接无下划线*/
}
	
</style>

</head>


<body >

<div data-role="page" id="page">
 
  <div data-role="header" data-position="fixed" >
   
 
  
  
  
  
 <!-- 五个按钮内,默认平分.如果有图标默认在文字正上方 -->
       
  </div>
  <div data-role="content" class="topbar-container">
  

  	<table border="0"  width="100%" >
    	<tr align="center" >	
    		<td  width="120" height="50" class="div1"><a href="scenic spot.html" style="color: #1A1919; 
    		" ><img src="images/攻略-景点.png" width="35" height="35"><br>攻略-景点</a></td>
    		<td  width="120" height="50" class="div1"><a href="Hotel.html" style="color: #1A1919; 
    		"><img src="images/门票-玩乐.png" width="35" height="35"><br>酒店</a></td>
    		<td  width="120" height="50" class="div1"><a href="Fine food.html" style="color: #1A1919; 
    		"><img src="images/美食林.png" width="35" height="35"><br>美食林</a></td>	
    		<td  width="120" height="50" class="div1"><a href="Route.html" style="color: #1A1919; 
    		"><img src="images/周边游.png" width="35" height="35"><br>周边游-路线</a></td>
    		<td  width="120" height="50" class="div1"><a href="Common sense of Tourism.html" style="color: #1A1919; 
    		"><img src="images/主题公园.png" width="35" height="35"><br>旅游常识</a></td>
    		
    	</tr>
    </table>
    <table border="0" width="100%">
    	<tr align="center" bgcolor="#F96652" >	
    		<td  width="220" height="70" class="div1"><a href="Hotel.html" style="color: #FFFFFF
    		">酒店<img src="images/酒店.png" width="100" height="85" class="nav2"></a></td>
    	
    		<td  width="140" height="70" class="div1"><a href="Hotel introduce A.html" style="color: #FFFFFF
    		">海外酒店</a></td>
    		<td  width="140" height="70" class="div1"><a href="Hotel introduce B.html" style="color: #FFFFFF
    		">特价酒店</a></td>	
    		<td  width="140" height="70" class="div1"><a href="Hotel introduce C.html" style="color: #FFFFFF
    		">名宿客栈</a></td>
    		
    	</tr>
    	<tr align="center" bgcolor="#4c96ed" >	
    		<td  width="220" height="70" class="div1"><a href="Route.html" style="color: #FFFFFF 
    		" >机票<img src="images/飞机.png" width="100" height="85" class="nav2"></a></td>
    	
    		<td  width="140" height="70" class="div1"><a href="Route-A.html" style="color: #FFFFFF
    		">火车票</a></td>
    		<td  width="140" height="70" class="div1"><a href="Route-B.html" style="color: #FFFFFF
    		">汽车-船票</a></td>	
    		<td  width="140" height="70" class="div1"><a href="Route-C.html" style="color: #FFFFFF
    		">专车-租车</a></td>
   
    		
    	</tr>
    
    	<tr align="center" bgcolor="#5ad070" >	
    		<td  width="220" height="70" class="div1"><a href="scenic spot.html" style="color: #FFFFFF
    		">旅游<img src="images/旅游.png" width="100" height="85" class="nav2"></a></td>
  
    		<td  width="140" height="70" class="div1"><a href="Route-A.html" style="color: #FFFFFF
    		">高铁游</a></td>
    		<td  width="140" height="70" class="div1"><a href="Route-B.html" style="color: #FFFFFF
    		">自由行</a></td>	
    		<td  width="140" height="70" class="div1"><a href="Route-C.html" style="color: #FFFFFF
    		">定制游</a></td>

    		
    	</tr>
    </table>
    <table border="0"    width="100%">	
    	<tr align="center">	
    		<td  width="120" height="30" class="div1"><a href="Liner.html" style="color: #1A1919; 
    		"><img src="images/邮轮游.png" width="35" height="35"><br>邮轮游</a></td>
    		<td  width="120" height="30" class="div1"><a href="WiFi phone card.html" style="color: #1A1919; 
    		"><img src="images/WiFi电话卡.png" width="35" height="35"><br>WiFi电话卡</a></td>
    		<td  width="120" height="30" class="div1"><a href="baoxian.html" style="color: #1A1919; 
    		"><img src="images/保险-签证.png" width="35" height="35"><br>保险-签证</a></td>	
    		<td  width="120" height="30" class="div1"><a href="huanwaibi-gou.html" style="color: #1A1919; 
    		"><img src="images/换外币-购.png" width="35" height="35"><br>换外币-购</a></td>
    		<td  width="120" height="30" class="div1"><a href="dangdixiangdao.html" style="color: #1A1919; 
    		"><img src="images/当地向导.png" width="35" height="35"><br>当地向导</a></td>
    		
    	</tr>
    	<tr align="center">	
    		<td  width="120" height="30" class="div1"><a href="tejiajipiao.html" style="color: #1A1919; 
    		"><img src="images/特价飞机.png" width="35" height="35"><br>特价机票</a></td>
    		<td  width="120" height="30" class="div1"><a href="lipingka.html" style="color: #1A1919; 
    		"><img src="images/礼品卡.png" width="35" height="35"><br>礼品卡</a></td>
    		<td  width="120" height="30" class="div1"><a href="jieqian.html" style="color: #1A1919; 
    		"><img src="images/申卡-借钱.png" width="35" height="35"><br>申卡-借钱</a></td>	
    		<td  width="120" height="30" class="div1"><a href="jiameng.html" style="color: #1A1919; 
    		"><img src="images/加盟合作.png" width="35" height="35"><br>加盟合作</a></td>
    		<td  width="120" height="30" class="div1"><a href="#" style="color: #1A1919; 
    		"><img src="images/更多.png" width="35" height="35"><br>更多</a></td>
    		
    	</tr>
      </table>
  </div>

</body>
</html>

css样式

 <!doctype html>
<style type="text/css">
	a:link{ 
		text-decoration: none;
		outline:none;
	}
	.topbar-container1{
	background-color:#2577e3;/* #2577e3 #efeeea*/
}
.topbar-container2{
    background-color:#000000;
}
.topbar-container{
    background-color:#FFFFFF;
}


.topbar-wrap{
    width:1200px;
    height:62px;
    margin:0 auto;
    overflow: hidden;
	
}



.nav{
    float: left;
    height: 60px;
	margin:22px 22px 0px 0px;
	
}
.nav1{
    float: left;
    height: 60px;
	margin:-15px 2px 0px 10px;
	font-weight:bold
}
.nav2{
    
	margin:2px 2px 2px 2px;
	
}
.nav3{
    height:100px;
    width:1000px;
    float: left;
    margin:20px 0px 20px 20px;
    color: #FFFFFF;
	text-decoration:none; 
	
}
.nav4{
    float: left;
    height: 60px;
	margin:-1px 2px 0px 10px;
	font-weight:bold
}

.nav li{
    float: left;
    width: 100px;
    margin:0 10px;
    list-style: none;
}
.nav a{
    text-decoration: none;
    height: 100%;
    width: 100%;
    display: block;
    font-size: 18px;
    color: #FCF8F8;
    text-align: center;
    line-height: 60px;
	
 
}
.nav a:hover{
    background: #CBE3F1;
}
.table{
	background-color: #040a2c;
}
.img
{
  outline-width:0px;
  vertical-align:top;
}
/*#7ab2ed*/
.div1:hover{
	color: #FFFFFF;
}

.div2:{
	color: #FFFFFF;
}
.div3:{
	height:50px;
    width: 50px;
    float: left;
    margin:20px 0px 20px 20px;
    color: #000000;
	text-decoration:none;  /*超链接无下划线*/
}
	
</style>

完整版的访问地址
完成版的代码：
https://gitee.com/myshitian/GuangZhouTravel
效果访问：
http://myshitian.gitee.io/guangzhoutravel/

参考文档：
http://www.w3school.com.cn/tags/tag_table.asp

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值