W3school导航条实现的两种方法

最新推荐文章于 2023-05-05 09:56:42 发布
最新推荐文章于 2023-05-05 09:56:42 发布
阅读量408 收藏 2
点赞数
分类专栏： html/css 文章标签： html5 css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43689129/article/details/117028648
版权
本文介绍了两种方法实现W3school风格的导航条：1) 使用浮动布局，通过设置padding使各菜单项间距相等，但需为最后一个li单独设置padding；2) 利用弹性布局，通过flex-grow属性实现菜单项均匀分布，简化了间距调整。
摘要由CSDN通过智能技术生成

W3school导航条实现的两种方法（浮动，弹性布局）

1.用浮动实现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>导航条</title>

    <link rel="stylesheet" href="./css/reset.css">

    <style>

  /* 设置nav的大小 */

        .nav{

            /* 设置宽度和高度 */

            width: 1210px;

            height: 48px;

            /* 设置背景颜色 */

            background-color: #E8E7E3;

            margin:100px auto;

        }

 

        /* 设置nav中li */

        .nav li{

            /* 设置li向左浮动&#

最低0.47元/天 解锁文章
ぃ蓝田
关注
专栏目录
2023大厂高频面试题之CSS篇
zag666的博客
05-18 1725
css的position属性取值 css选择器优先级和权重 box-sizing属性 CSS 盒子模型 CSS实现三角形 CSS布局 弹性布局display:flex 实现一个垂直水平居中 隐藏页面元素的方法 style-components HTML脱离文档流的方法 block，inline和inlinke-block transition与animation区别...
超详细的JavaWeb用户的增删改查实现总结
阿福聊编程
07-21 4216
前言 本文是基于单体架构实现的角色的增删改查的功能。前台使用Bootstrap+Ajax+Jsp , 后端使用Spring+SpringMvc+MyBatis进行开发，相信使用过这些技术的小伙伴应该很好的理解以下的内容，也希望看了这篇文章小伙伴们有所收获。 准备工作 后端技术 技术 说明 官网 Spring Spring是一个轻量级控制反转(IoC)和面向切面(AOP)的容器框架。 https://spring.io/ SpringMvc MVC框架 https://spring.io/
CSS布局练习，W3school导航条
qq_43987112的博客
05-13 193
（W3school导航条）这篇文章是学了css浮动所做的练习，比较基础
HTML实现W3school导航栏（附带重置样式表reset.css）
qq_62113366的博客
07-16 511
W3school的导航栏。
前端的学习之路：初级CSS---w3cschool的导航条
weixin_44647555的博客
02-06 216
w3cschool的导航条
P39-前端基础-网页导航条
Bruce小鬼
01-19 701
P39-前端基础-网页导航条 1.网页导航条样式案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导航条</title> <link rel="stylesheet" href="./css/reset.css"> <style> /* 设置nav的大小 */ .nav {
CSS/HTML制作W3School网页的导航条
Etui۹(･༥･´)و的博客
01-22 1867
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="sty
bootstrapAPI文档和入门教程
12-11
例如，你会学习到如何使用栅格系统创建灵活的布局，如何利用预定义的类来快速设置文本、颜色、边距等样式，以及如何操作导航条、模态框、下拉菜单等交互元素。API文档还会详细介绍每个组件的选项、参数和方法，这...
132_会弹的导航条
述安的博客
08-28 111
刚刚学了弹性盒，可以做之前w3school的案例 以前做的导航条 现在做的导航条： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; text-decoration: none; list-style: none; } .b
CSS小练习4——w3School导航栏
surymy
12-29 526
目录初始效果及代码 模仿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
w3school导航条的练习（用弹性盒实现）
最新发布
coder_xiaobai的博客
05-05 140
学了弹性盒，跟着老师写了一下w3school首页的导航条，发现自己写还是有很多问题，记录一下
W3School导航栏练习
qq_44278908的博客
02-21 182
W3School导航栏练习 <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>导航条</title> <link rel="stylesheet" href=
模仿w3c school的示例导航栏
weixin_30470857的博客
05-06 516
近日学习HTML，恰巧学习过程中看见w3cschool的示例导航栏看上去很不错，适合新手练习，于是模仿着做了一个。 示例导航栏如下图所示 导航栏自然使用li标签来做，a标签控制背景颜色和鼠标放入的特效 做成后效果如下： 代码如下： 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <he...
css布局作业使用float布局：w3school导航
abc630727719的博客
03-23 228
目标： html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...
W3school导航栏设置时的问题
qq_45868495的博客
05-05 138
<style> .menu { width: 1219px; height: 60px; line-height: 60px; background-color: rgb(214, 214, 214); } .list { ...
尚硅谷 模拟w3school首页导航条练习
知远同学的博客
12-10 456
模拟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
自己动手实现一个 Flex 布局框架
weixin_34290390的博客
10-14 285
本文作为 Flex 布局进阶，不对基础做详细介绍，关于 Flex 基础知识请到阮一峰老师的Flex 布局教程：语法篇 看过基础，或者已经使用 Flex 布局的朋友可以根据本文试着动手写一写，先不急着开工，看看其它大型框架怎么实现的。 Bootstrap 框架 相信大家都用过 Bootstrap 框架，目前最受欢迎的响应式布局框架，在 G...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值