浮动（页面导航栏练习）

最新推荐文章于 2024-04-17 02:04:40 发布

郭雨婷01

最新推荐文章于 2024-04-17 02:04:40 发布

阅读量249

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_51272779/article/details/124180715

版权

思维导图

前言

哈喽同学们大家好！浮动在css样式中的应用非常广泛，重要可以解决水平布局问题，需要灵活掌握，大家一点多加练习，重点理解定义及特点。

理解重点看思维导图，下面进行具体案例讲解分析

本节案例主要进行两个板块讲解--------新闻模块和导航栏

新闻板块

案例一

代码如下：

<style>
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
        li{
            width: 260px;
            height: 36px;
        }
        li p{
            float: left;
            height: 36px;
            line-height: 36px;          
        }
        li .nth{
            width: 40px;
            text-align: center;
            color: #878c9c;
        }
        li .news{
            font-size: 15px;
            width: 220px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        li .hot {
            width: 18px;
            height: 18px;
            text-align: center;
            line-height: 18px;
            font-size: 16px;
            color: white;
            background-color: #ff5d00;
            margin-top: 8px;
            border-radius: 4px;
        }
    </style>

<ul>
        <li>
        <p style="color: #ff001a;" class="nth">1</p>
        <p style="width: 180px;" class="news">上海新增本土"2573+25146"</p>
        <p class="hot">沸</p>
        </li>
        <li>
            <p style="color: #ff5d00;" class="nth">2</p>
            <p class="news">上海遭遇大风暴雨 有方舱严重漏</p>
        </li>
</ul>

注意：省略号的用法：

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

案例二

代码如下：

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

导航栏

案例一

代码如下：

<style>
       *{
            margin:0;
            padding:0;
            list-style: none;
        }
        .warp{
            width: 570px;
            height: 50px;
            line-height: 50px;
        }
        img{
            width: 85px;
            margin-left: 30px;
            float: left;
        }
        p{
            font-size: 14px;
            float:left;
            color: #2a2a2c;
            margin-left: 22px;
        }

   </style>
</head>
<body>
    <div class="warp">
        <img src="img/csdn.png" alt="csdn">
        <p>博客</p>
        <p>课程</p>
        <p>文库·商城</p>
        <p>问答</p>
        <p>社区</p>
        <p>插件</p>
        <p>认证</p>
        <p>开源</p>
    </div>
</body>
</html>

案例二

代码如下

<style>
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
        .wrap{
            background-color: rgba(0, 0, 0, .5) ;
            height: 40px;
            line-height: 40px;
        }
        a:hover {
            background-color: red;
        }

        a{
            text-align: center;
            float: left;
            color: #fff;
            width: 12%;
            text-decoration: none;
        }
    
    </style>