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>
效果:
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间的的距离用margin
nav高度为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)