网页通用板块 通览导航

本文展示了如何使用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())

总结

提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单使用了div分块和一些简单的css样式。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值