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

吃咸菜码代码

已于 2024-05-10 22:51:23 修改

阅读量1k

点赞数 8

分类专栏：前端那些事文章标签： css 前端 html

于 2024-05-10 22:41:37 首次发布

本文链接：https://blog.csdn.net/qq_61549190/article/details/138680498

版权

前端那些事专栏收录该内容

2 篇文章 0 订阅

订阅专栏

🎐每文一言

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

🛒盒子模型

盒子模型必要三要素
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;边框盒子

原图

亿图图示https://www.edrawmax.cn/online/share.html?code=4173096c07ce11ef9109ebf0f0121b46

🎢 浮动布局

float 属性：

float:left; 左浮动，向父级元素的左侧边界靠拢
float:right; 右浮动，向父级元素右侧边界靠拢

原图

亿图图示https://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代码知识点

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

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

吃咸菜码代码

关注

8
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
CSS-页面导航栏实现-每文一言(过有意义的生活,做最好的自己)

最近在搭建公众号-浅语陪你敲代码_主要分享一下相关有关java代码知识点-感兴趣的朋友可以关注一下,日常喜欢做一些知识总结,也是为日后寻找合适的工作做准备,如果有志同道合的朋友,希望能留个言,一起进步-一起奋斗。div.item 是一个大盒子设置内边距 padding-left 以及盒子模型 box-sizing:border-box。子元素li 设置 float:left 设置外边距 margin-right:10px。会根据子元素浮动后的实际高度给父元素自动填充高度，解决失高问题。
复制链接

扫一扫

专栏目录