CSS-页面导航栏实现-每文一言(过有意义的生活,做最好的自己)

🎐每文一言

过有意义的生活,做最好的自己

目录

🎐每文一言

🛒盒子模型

👓外间距 (margin)

🥼边框

👜内边距

 切换盒子模型计算方案:

🎢 浮动布局

浮动特点

🏆导航栏案例

 层级关系

整体实例代码


🛒盒子模型

盒子模型必要三要素
content内容区域  元素本身大小
padding内间距  元素内容与边框之间的距离
border元素边距
margin外间距   元素与元素之间的距离

四个方向 left 左 right 右 top上 bottom下

👓外间距 (margin)

规律 按照 上右下左 顺时针 依次赋值 未赋值找对立面

margin方向四要素(top right bottom left)
单侧外边距margin-bottom(left,right,top)用于设置单侧外间距
margin:10px四个方向都是10px
margin:10px,20px上下10px,左右20px
margin:10px 20px 30px上10px ,左右20px, 下30px
margin:10px 20px 30px 40px上10px ,右20px, 下30px , 左40px 

🥼边框

border: 5px solider #fff  

border-radius :100px

边框常用属性
有无边框(无)border:none    border:0          有边框border:非0数
线型solider 单实线 dashed 虚线 dotted 点状线 double 双实线
圆角radius:100px 数值越大,角越圆   圆形 大于正方形高度一半

👜内边距

 规律 按照 上右下左 顺时针 依次赋值 未赋值找对立面

padding方向四要素(top right bottom left)
单侧外边距margin-bottom(left,right,top)用于设置单侧外间距
margin:10px四个方向都是10px
margin:10px,20px上下10px,左右20px
margin:10px 20px 30px上10px ,左右20px, 下30px
margin:10px 20px 30px 40px上10px ,右20px, 下30px , 左40px 
 切换盒子模型计算方案:
  • box-sizing: border-box;边框盒子

原图 

   亿图图示icon-default.png?t=N7T8https://www.edrawmax.cn/online/share.html?code=4173096c07ce11ef9109ebf0f0121b46

🎢 浮动布局

float 属性:

  • float:left; 左浮动,向父级元素的左侧边界靠拢

  • float:right; 右浮动,向父级元素右侧边界靠拢

  原图

亿图图示icon-default.png?t=N7T8https://www.edrawmax.cn/online/share.html?code=9519dcac049b11efb3bfc7ec0d041a21

浮动特点

元素可以脱离文档流,释放原有的布局空间
浮动后的字元素不在支撑父级元素的高度
如果一个父元素的所有元素都浮动了,父级会高度坍塌
浮动会破坏原有的文档布局,变为浮动布局,元素可以横向排列

解决方案给父元素设置 overflow:hidden 

 会根据子元素浮动后的实际高度给父元素自动填充高度,解决失高问题

🏆导航栏案例

展现横向排列的导航栏

这边先演示怎么制作相关的导航栏

需要实现此效果 :

笔记本-游戏机0台式机-一体机-服务器-联想的横向排列

需要子父级元素   父级设置 overflow:hidden 溢出隐藏  子元素 设置float

天然子父级关系: 无序列表 和有序列表

 层级关系

div.item 是一个大盒子 设置内边距 padding-left 以及盒子模型 box-sizing:border-box 

//css样式
.item{
      width: 366px;
      height: 233px;
      background-color: #e8e8e8;
      padding-left: 12px;
      box-sizing: border-box;

    }

 ul和li是天然的父子级元素

父级 设置 overflow:hidden  

子元素li 设置 float:left 设置外边距 margin-right:10px

ul{
      list-style: none;
      overflow: hidden;
      font-size: 12px;
      color: #0aa1ed;


      >li{
        float:left;
        margin-right:10px ;
      }
    }

html部分

<div class="item">
  <ul>
    <li>笔记本</li>
    <li>游戏机</li>
    <li>台式机</li>
    <li>一体机</li>
    <li>服务器</li>
    <li>联想</li>
  </ul>

</div>

部分页面展示 

整体实例代码

注意 清除浏览器自带格式 和ul自带的格式

//清除浏览器自带的内边距和外边距
*{
      padding: 0;
      margin: 0;
    }
//清除ul自带的格式实心圆
ul{
list-style:none
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    .item{
      width: 366px;
      height: 233px;
      background-color: #e8e8e8;
      padding-left: 12px;
      box-sizing: border-box;

    }
    ul{
      list-style: none;
      overflow: hidden;
      font-size: 12px;
      color: #0aa1ed;


      >li{
        float:left;
        margin-right:10px ;
      }
    }

  </style>
</head>
<body>
<div class="item">
  <ul>
    <li>笔记本</li>
    <li>游戏机</li>
    <li>台式机</li>
    <li>一体机</li>
    <li>服务器</li>
    <li>联想</li>
  </ul>

</div>

</body>
</html>

下一篇 讲解定位 -会配合网页布局和大家一起探讨交流

文章后记

最近在搭建公众号-浅羽陪你敲代码_主要分享一下相关有关java代码知识点

感兴趣的朋友可以关注一下😍😍,日常喜欢做一些知识总结,也是为日后寻找合适的工作做准备💪,

如果有志同道合的朋友,希望能留个言,一起进步-一起奋斗(~ ̄▽ ̄)~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/611426.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

并行执行的4种类别——《OceanBase 并行执行》系列 4

OceanBase 支持多种类型语句的并行执行。在本篇博客中&#xff0c;我们将根据并行执行的不同类别&#xff0c;分别详细阐述&#xff1a;并行查询、并行数据操作语言&#xff08;DML&#xff09;、并行数据定义语言&#xff08;DDL&#xff09;以及并行 LOAD DATA 。 《并行执行…

Docker部署Metabase

文章目录 Docker安装MetabaseCentOS7安装Docker获取最新的 Docker 镜像启动Metabase容器在Metabase初始化时查看日志访问Metabase Metabase 的 ClickHouse 驱动程序安装环境简介删除容器创建容器下载click house驱动放入驱动重启容器将元数据库连接到 ClickHouse报错解决 Docke…

轻松管理文件夹批量重命名:学会用关键词批量替换文件夹名称技巧

随着计算机中存储的文件和文件夹数量不断增加&#xff0c;如何有效地管理和组织它们变得尤为重要。批量重命名文件夹是提升文件管理效率的关键步骤之一。而利用云炫文件管理器中关键词批量替换文件夹名称的技巧&#xff0c;则可以帮助我们更快速地完成这一任务。 关键词批量替…

LeetCode例题讲解:876.链表的中间结点

给你单链表的头结点 head &#xff0c;请你找出并返回链表的中间结点。 如果有两个中间结点&#xff0c;则返回第二个中间结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[3,4,5] 解释&#xff1a;链表只有一个中间结点&#xff0c;值为 3 。…

KMeans,KNN,Mean-shift算法的学习

1.KMeans算法是什么&#xff1f; 在没有标准标签的情况下&#xff0c;以空间的k个节点为中心进行聚类&#xff0c;对最靠近他们的对象进行归类。 2.KMeans公式&#xff1a; 2. 1.关键分为三个部分&#xff1a; 1.一开始会定义n个中心点&#xff0c;然后计算各数据点与中心点…

浅谈云计算资源和服务

目录 前言 正文 专有名词及其首字母缩写 轻量级应用服务器 云服务器ECS 专有网络VPC 其他类服务 尾声 &#x1f52d; Hi,I’m Pleasure1234&#x1f331; I’m currently learning Vue.js,SpringBoot,Computer Security and so on.&#x1f46f; I’m studying in University o…

如何用Python创建目录以及自动创建缺失的父目录

在Python中&#xff0c;创建目录&#xff08;也称为文件夹&#xff09;是一个常见的任务&#xff0c;尤其是当你需要为文件系统上的某些文件创建存储位置时。幸运的是&#xff0c;Python的os模块提供了一个非常方便的函数os.makedirs()&#xff0c;它允许你创建一个目录&#x…

【AMBA Bus ACE 总线 8 -- ICache maintenance】

请阅读【AMBA Bus ACE 总线与Cache 专栏 】 欢迎学习:【嵌入式开发学习必备专栏】 文章目录 ACE ICache maintenanceACE ICache maintenance 图 1-1 当一个OS run 多个cpu的时候,根据调度算法的不同,OS 可以根据调度算法的不同分别 run 在某个具体的CPU上,因此,它们会有…

计算图与自动微分

计算图与自动微分 一、自动梯度计算1.1 数值微分&#xff08;Numerical Differentiation&#xff09;1.2 符号微分&#xff08;Symbolic Differentiation&#xff09;1.3 自动微分&#xff08;Automatic Differentiation&#xff0c;AD&#xff09;1.3.1 计算图1.3.2 正向传播1…

java技术总结

1.java基本数据类型? byte 1,short 2 ,int 4,long 8 ,float 4,double 8,boolean 1,char 2 2.java为什么要有包装类型? 前 6 个类派生于公共的超类 Number,而 Character 和 Boolean 是 Object 的直接子类。 被 final 修饰, Java 内置的包装类是无法被继承的。 包装…

FreeRTOS标准库例程代码

1.设备STM32F103C8T6 2.工程模板 单片机: 部分单片机的程序例程 - Gitee.comhttps://gitee.com/lovefoolnotme/singlechip/tree/master/STM32_FREERTOS/1.%E5%B7%A5%E7%A8%8B%E6%A8%A1%E6%9D%BF 3.代码 1-FreeRTOS移植模板 #include "system.h" #include "…

腾讯云coding代码托管平台配置问题公钥拉取失败提示 Permission denied(publickey)

前言 最近在学校有个课设多人开发一个游戏&#xff0c;要团队协作&#xff0c;选用了腾讯云的coding作为代码管理仓库&#xff0c;但在配置的时候遇到了一些问题&#xff0c;相比于github&#xff0c;发现腾讯的coding更难用&#xff0c;&#xff0c;&#xff0c;这里记录一下…

【进程替换】进程程序替换函数execl | 单进程程序替换原理

目录 直接看现象&#xff08;单进程&#xff09; 单进程程序替换原理 替换函数 直接看现象&#xff08;单进程&#xff09; 我们先使用execl来直接看现象man 3 execlexecute a file执行一个程序int execl(const char *path, const char *arg, ...);execl函数的返回值&#x…

使用GitLab自带的CI/CD功能在K8S集群里部署项目(四)

前置内容&#xff1a; 通过Docker Compose部署GitLab和GitLab Runner&#xff08;一&#xff09; 使用GitLab自带的CI/CD功能在本地部署项目&#xff08;二&#xff09; 使用GitLab自带的CI/CD功能在远程服务器部署项目&#xff08;三&#xff09; 一、K8S集群信息 节点名称…

Unity TileMap入门

概述 相信很多同学学习制作游戏都是从2D游戏开始制作的吧&#xff0c;瓦片地图相信大家都有接触&#xff0c;那接下来让我们学习一下这部分的内容吧&#xff01; Tilemap AnimationFrameRate:设置每帧动画的播放速率。Color:瓦片地图的颜色TileAnchor:锚点&#xff0c;&#x…

笔试强训week4

day1 Q1 难度⭐⭐ 小易的升级之路_牛客题霸_牛客网 (nowcoder.com) 题目&#xff1a; 小易经常沉迷于网络游戏.有一次,他在玩一个打怪升级的游戏,他的角色的初始能力值为 a.在接下来的一段时间内,他将会依次遇见n个怪物,每个怪物的防御力为b1,b2,b3...bn. 如果遇到的怪物防…

马斯克:脑机接口迎来首例植入者,芯片接线发生故障。

马斯克旗下的脑机接口公司Neuralink近日传出关于首例植入者诺兰阿博脑机接口芯片故障的消息。根据Neuralink发布的文章&#xff0c;诺兰阿博的脑机设备发生了故障&#xff0c;多根植入他大脑的接线已经脱落&#xff0c;导致获取数据量减少。目前该公司正在研究导致接线脱落的原…

Java进阶08 集合(续)Stream流

Java进阶08 集合&#xff08;续&#xff09;&Stream流 一、HashSet集合类&#xff08;续&#xff09; 1、JDK7(-)HashSet原理解析 1.1 底层结构 数组链表 1.2 执行过程 ①创建一个默认长度为16的数组&#xff0c;数组名为table ②根据元素的哈希值跟数组的长度求余计…

灰狼优化算法(Grey Wolf Optimizer)

注意&#xff1a;本文引用自专业人工智能社区Venus AI 更多AI知识请参考原站 &#xff08;[www.aideeplearning.cn]&#xff09; 算法引言 灰狼算法&#xff08;Grey Wolf Optimizer, GWO&#xff09;是一种受自然界灰狼行为启发的优化算法。它模拟了灰狼的社会层次和狩猎策…

JS实现初始化、动态点击切换激活样式

食用须知&#xff0c;不懂得把代码交给AI解释一下&#xff0c;明白流程就会用了&#xff0c;本文只有js与html&#xff0c;样式代码一概没有&#xff1a; 效果展示 1、点击显示的盒子代码 <div data-v-e1dd37c4"" class"news-container main-width-contain…