网页通用板块通览导航

最新推荐文章于 2024-11-06 10:07:07 发布

十八-

最新推荐文章于 2024-11-06 10:07:07 发布

阅读量217

点赞数

分类专栏：笔记文章标签： html css

本文链接：https://blog.csdn.net/wantedop/article/details/108859552

版权

笔记专栏收录该内容

6 篇文章 1 订阅

订阅专栏

本文展示了如何使用HTML和CSS创建一个纸片式的导航栏，并结合简单的页面布局，实现了一个包括顶部、导航、广告区域、主要内容和底部的网页结构。通过设置样式，为导航链接添加了悬停效果，整体设计简洁而具有视觉吸引力。

摘要由CSDN通过智能技术生成

纸片式导航在这里插入图片描述

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

@纸片导航

前言

提示：
简洁导航

提示：以下是本篇文章正文内容，下面案例可供参考

一、html代码

示例：html
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <link rel="stylesheet" href="css/zt.css">
    <title>中天教育</title>
</head>
<body>
<!--顶部-->
<div class="top">
    这里是顶部
</div>
    <!--导航-->
    <header>
        <ul>
            <li><a href="#" class="item">中天教育</a></li>
            <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>
            <li> <a href="#"> 下载</a></li>
            <li> <a href="#"> 我们</a></li>
        </ul>

    </header>

<!--导航end-->
<!--banner-->
<div class="main">
这里是广告
</div>
<!--banner end-->
<!--内容-->
<div class="lower">
   这里有 内容
</div>
<!--内容结束-->
<!--底部-->
<div class="base">
    这儿是底部
</div>
</body>
</html>

二、css代码

1.引入库

代码如下（示例）：

*{
    margin: 0;
    padding: 0;
}
.top{
    background: darkseagreen;
    text-align: center;
    font-size: 20px;
}
a{
    text-decoration: none;
color: rgb(107,107,107);
    font-size: 23px;
    padding: 0 20px;
}
header{
    text-align: center;
    box-shadow: 10px 5px 5px rgb(131,132,131);
    padding: 3px 0;
}
li{
    list-style-type: none;
    display: inline;
}
.main{
    width: 950px;
    height: 450px;
    font-size: 14px;
    text-align: left;
    background: #409EFF;
    margin-left: auto;
    margin-right: auto;
}
.lower{
    width: 950px;
    height: 700px;
    font-size: 14px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    background: goldenrod;
}
.base{
    width: 950px;
    height: 100px;
    font-size: 12px;
    text-align: right;
    margin-left: auto;
    margin-right: auto;
    background: olive;
}
a:hover,
a.item{
    color: #09afff;
}

## 2.读入数据

<font color=#999AAA >代码如下（示例）：



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