CSS/HTML制作W3School网页的导航条

最新推荐文章于 2022-04-12 11:12:51 发布
最新推荐文章于 2022-04-12 11:12:51 发布
阅读量1.7k 收藏 20
点赞数 2
分类专栏： CSS3 HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47015897/article/details/112991425
版权
CSS3 同时被 2 个专栏收录
38 篇文章 15 订阅
订阅专栏
HTML5
37 篇文章 8 订阅
订阅专栏

W3School原网页：
在这里插入图片描述
效果图：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>W3School导航条</title>
    <link rel="stylesheet" href=".//css/reset.css">
    <style>
        body{
            background-color: #FDFCF8;/* 设置网页的背景色 */
        }

        /* 导航条整体的设置 */
        .nav{   
            width: 1210px;
            height: 48px;
            margin: 100px auto;
            background-color: #E8E7E3;
        }

        /* 每个菜单项的设置 */
        .nav a{
            height: 48px;
            float: left;/* 设置各菜单项为浮动元素 */
            font-size: 18px;
            color: #7F7F7F;
            line-height: 48px;  /* 当line-height和父元素的高度相同时，元素会自动垂直居中 */
            text-decoration: none;/* 去除超链接的下划线 */

            /* 将每个菜单项的左右内边距设为相同的大小 */
            padding-right: 39px;    
            padding-left: 39.5px;
        }
        /*由于导航栏末尾多出3px，故对其单独处理*/
        .nav li:last-child a{
            padding-left: 40px;
            padding-right: 40.25px;
        }

        /* 鼠标移入菜单项时的操作 */
        .nav a:hover{
            color: #E7E6E2;
            background-color: #3F3F3F;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>
            <a href="">HTML/CSS</a>
        </li>
        <li>
            <a href="">Browser Side</a>
        </li>
        <li>
            <a href="">Server Side</a>
        </li>
        <li>
            <a href="">Programming</a>
        </li>
        <li>
            <a href="">XML</a>
        </li>
        <li>
            <a href="">Web Building</a>
        </li>
        <li>
            <a href="">Reference</a>
        </li>
    </ul>
</body>
</html>

积跬步，至千里！
加油！上学人！

Etui۹(･༥･´)و ̑̑
关注
  • 2
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML-W3school首页制作
weixin_30387339的博客
08-03 3172
链接：https://pan.baidu.com/s/1DFy4JmxakQ_jsnSeNqJ2dw 提取码：k76t 制作思路 1. 先分析网页，对网页进行划分，再对每个小区域填充内容 2. 建CSS、img文件夹分别存放所需要的css和图片 3. 清除系统标签默认样式 4. 建页面跳转文件 头部header <div class="header"> <h1...
用HTML加CSS模仿的W3school的主页
zwt_1的博客
12-10 3944
作为一个HTML和CSS的初学者，我模仿了一个比较简单的静态网页，就是W3school的主页，虽然有些内容以我目前的能力还没有做到一模一样，但这是我第一次自己动手做的网页，我还是很开心的。如果有人看了我这篇文章，希望给我一点建议让我完善这个网页。比如除了加空格外如何让头部导航栏的无序列表的列表项之间隔的更宽，另外这算是我第一次用心的写博客，希望大家给我一些建议，谢谢！！ 这是W3scho
css中文参考手册+w3school+网页制作完全手册
03-09
css中文参考手册+w3school+网页制作完全手册
w3school网页教程.chm
08-31
w3school网页教程，打包成chm 电子书，2018年7月的，编程语言学习
CSS 制作网页导航条(上)
01-19
课程开始：      前三节课，我们知道了什么是“内容块状元素和内联元素”，以及XHTML+CSS布局的核心概念“盒子模型”，同时又学习了一下页面布局中两种方法中的一种方法“浮动”，这次我们就利用这三个概念，来制作一款，经典的导航条，别看它其貌不扬，可是网上所有的导航条都可以再它的基础上修改而来哟~，厉害吧~！其实理论都是一样的，只要你能理解并学会这节课的内容，以后再困难的导航条你都可以很应对，EASY  ！！！      OK！我们要做的导航条的效果如下：      鼠标移动上去背景变黑，并且字体颜色变成白色      其实做这款导航条很容易的，你只需要动动鼠标敲敲键盘，跟着KwooJan做
w3school（网页完整版）
01-13
w3school（网页完整版）
HTML\CSS实现静态网页附完整代码【W3school主页】
华墨1024的博客
04-12 2923
使用HTML\CSS实现W3school主页
尚硅谷 模拟w3school首页导航条练习
知远同学的博客
12-10 425
模拟w3school网站首页导航条，使用到css中float属性，使得元素水平布局。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>w3school导航条</ti
w3c首页简单模仿html+css
m0_63091773的博客
12-29 845
w3school首页html+css
CSS小练习4——w3School导航栏
surymy
12-29 488
目录初始效果及代码 模仿W3School的导航栏（绿色方框内的内容） 初始效果及代码 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="../reset.css"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt
html-css-w3school
03-19
从W3School学习HTML 为什么选择HTMl？ 因此，我决定学习html，因为： HTML是Web页面的标准标记语言。 使用HTML，我们可以创建您自己的网站。 HTML很容易学习-我想我会喜欢的！ 一些移动技术使用HTML概念进行移动应用开发 什么是HTML？ HTML代表超文本标记语言 HTML是用于创建网页的标准标记语言 HTML描述了网页的结构 HTML由一系列元素组成 HTML元素告诉浏览器如何显示内容 HTML元素标记了诸如“这是标题”，“这是段落”，“这是链接”之类的内容。
w3school网页设计教程
02-12
w3school网页设计教程,你可以找到你所需要的所有的网站建设教程,从基础的HTML到XHTML，乃至进阶的XML、SQL、数据库、多媒体和WAP
w3school网页教程--离线完全版.zip
07-12
w3school发布的教程质量还是很不错的，特别是网页相关内容，毕竟人家是最重要的领导者之一。这份资源包是（网页）教程的离线版，内容基本上与http://www.w3school.com.cn/上的内容一致（HTML,HTML5,CSS,CSS3,JS,AJAX,JQuery,PHP,SQL,XML……），不联网也能看。
CSS 制作网页导航条(下)
09-25
上一篇文章的导航条还没有链接，还不能点击，这节课我们就要做一个完整的导航条
纯HTML5 CSS3制作导航条特效代码
03-20
纯html5和css3制作的导航条。
C语言(6)-数据类型
yuri99999的专栏
03-05 526
C语言规定，在程序中使用的每一个数据都必须指定其数据类型。声明变量的时候需要指明数据类型，声明函数的时候也需要指明函数的返回值数据类型。 C语言的数据类型分为：基本类型、构造类型，指针类型，空类型。 基本类型又分为：字符类型(char)，整型(int、short、long)，实型(float、double)，枚举类型(enum) 构造类型又为分：数组，结构体(struct)，共用体(union) 不同的数据类型点用的内存空间是不同的，可以用sizeof运算符来计算出各种数据类型占内存的大小，单位是字
6.c
qq_45116886的博客
09-01 283
1.实现一个函数，打印乘法口诀表，口诀表的行数和列数自己指定，输入9，输出9 * 9口诀表，输入12，输出12 * 12的乘法口诀表。 代码如下： int MUL(int n) { int i, j; for (i = 1; i <= n; i++){ for (j = 1; j <= i; j++){ printf("%d*%d=%-d ", i, j, i*j); ...
使用HTML实现W3C首页的 CSS 演示 - 一张 HTML 页面 - 多个样式！
m0_51935008的博客
08-24 477
无样式 整体布局 最外面是Body 里面三个分别是 Header Wrapper bottom 开始我也不知道为什么要这样弄好几个 后来才发现这样的好处 大家可以自己打代码先不这样布局 都弄成一块一块 然后你们就能理解了 <body> //最外层 <div id="header"> <h1> 欢迎访问我的首页 </h1> <p> 请使用菜单来选择不同的样式表 &lt
关于以w3school为首的那些网址，很迷
热门推荐
mieleizhi0522的博客
01-20 1万+
       最近由于要做一个网页项目，然后就查了一些教程发现网上有一个比较有名的网页设计网站：                                                                   w3school    然后就搜了一下关于这个网址内容的，一搜不要紧，发现真的太乱了，出来了（1）w3schools.com(英文网页)   （2）W3Cschol.cn...
用HTML和css写抖音网页的垂直导航条
最新发布
04-18
非常好，我可以为您提供一些指导。首先，您可以使用HTML创建一个基本的导航条框架，并使用CSS样式来调整其外观和感觉。以下是一些具体的步骤： 1. 在HTML中创建导航条框架。您可以使用无序列表（ul）和列表项（li）来创建导航项。例如： ``` <nav> <ul> <li><a href="#">主页</a></li> <li><a href="#">视频</a></li> <li><a href="#">音乐</a></li> <li><a href="#">个人</a></li> </ul> </nav> ``` 2. 使用CSS样式来调整导航条的外观和感觉。您可以使用属性，如display，font-size，background-color，padding等。例如： ``` nav { background-color: #f0f0f0; padding: 10px; } ul { list-style: none; margin: 0; padding: 0; } li { display: inline-block; margin-right: 20px; } a { color: #333; font-size: 16px; text-decoration: none; } a:hover { color: #fff; background-color: #333; padding: 5px 10px; } ``` 3. 成功创建了垂直导航条！ 请注意，这只是垂直导航条的一个简单示例，您可以自由调整和定制以满足您的具体需求。谢谢！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值