HTML入门--《列表和浮动》

最新推荐文章于 2022-10-18 14:49:42 发布

weixin_30588907

最新推荐文章于 2022-10-18 14:49:42 发布

阅读量235

点赞数

原文链接：http://www.cnblogs.com/bujianchangan/p/9768849.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;
        }

 div{
      width: 1200px;height:330px;margin: 0 auto;background: lightblue;text-align: center;
      }
  dl{
      width: 400px;height:330px;float:left;
     }