学渣一枚，可能有误
一.导航
<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> </ul> </nav>效果：
1.inline-block:
将对象呈现在一行里，但是对象的内容作为block对象出现
这里只有文本，所以用text-align调节ul实现右移
这个时候的nav是有高度的
CSS： ul{ width: 100%;height: 70px;text-align: right;background-color: #333333; } li{ display: inline-block;vertical-align:middle;width: 10%;cursor: pointer;line-height:70px;text-align: center; } a{ text-decoration: none;color: #fff; } a:hover{ color:#369; } li:hover{ background-color: black; } li:first-child{ background-color: black; }
效果：
2.float：
简单实现向右浮动，为了使次序在浮动后不变，倒着写；当然正着写以后调一下margin即可，但是想偷一下懒，o(∩_∩)o
<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> </ul> </nav> ul{ width:100%;height: 70px;background-color:#333333; } li{ width:10%;line-height:70px;float: right;list-style: none;text-align: center; } a{ color: #fff;text-decoration: none; } a:hover{ color:#369; } li:hover{ background-color: black; } li:last-child{ background-color: black; }
PS：
float以后无间距，需要自己设，li间的的距离用marginnav高度为0如果不设置高度，nav下面的东西就会跑到顶部
解决：1：设置高度；2：再加一个div style="clear:both;"（个人推荐）
清除浮动：参考https://www.cnblogs.com/changyangzhe/p/5716066.html
<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> </ul> </nav> <p>lllllll</p> 不设置ul高度(nav也为0)，不设置清除------浮动塌陷 ul{ width:100%; } li{ width:15%;height: 70px;float: right;list-style: none;text-align: center;background-color:#333333; }
二.
<div> <dl> <dd class="dd-tr"> <img src="img\tour1.jpg" alt=""> <p>国内长线</p> </dd> <dd style="width: 380px;"><b><曼谷-芭提雅6日游></b>包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费劵</dd> </dl> <dl> <dd class="dd-tr"> <img src="img\tour2.jpg" alt=""> <p>国内长线</p> </dd> <dd><b><马尔代夫双鱼岛Olhuveli4晚6日自助游></b>上海出发，机+酒包含：早晚餐+快艇</dd> </dl> <dl> <dd class="dd-tr"> <img src="img\tour3.jpg" alt=""> <p>国内长线</p> </dd> <dd><b><海南双飞5日游></b>含盐城接送，全程挂牌四星酒店，一价全含，零自费“自费项目”免费送</dd> </dl> </div>初始效果：
1..inline-block:
/*用margin使块居中，text-align只是使里面的内容居中*/ div{ width: 1255px;background:#333;margin: 0 auto; } dl{ width: 395px;display: inline-block;background:#c3c3c3;text-align: center;margin: 10px 10px; }
2.
div{ width: 1200px;height:330px;margin: 0 auto;background: lightblue;text-align: center; } dl{ width: 400px;height:330px;float:left; }PS:浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。（摘自：https://www.cnblogs.com/polk6/p/3142187.html）
转载于:https://www.cnblogs.com/bujianchangan/p/9768849.html
