资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/前端css小米导航栏设置及盒子定位居中问题

前端css小米导航栏设置及盒子定位居中问题

番茄西红柿 / 1744人阅读

1.小米最上部导航栏设置

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        /*取消前面的点*/
        ul{
            list-style: none;
        }
        .nav{
            width: 960px;
            overflow: hidden;
            margin: 50px auto;
            background-color: purple;
            /*设置圆角*/
            border-radius: 5px;
        }
        .nav ul li{
            float: left;
            width: 160px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            
        }
        .nav ul li a{
            width: 160px;
            height: 40px;
            display: block;
            color: white;
            font-size: 14px;
            text-decoration: none;

        }
        .nav ul li a:hover{
            background: yellow;
            color: green;
            text-decoration: underline;
        }

    style>
head>
<body>
    <div class="nav">
        <ul>
            <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>
    div>

    
body>
html>

 2.导航栏定位问题（position）

有3种方式：

相对定位

固定定位

绝对定位

2.1相对定位（relative）

　　相对自己原来的位置进行定位，自己原来的位置作为参考点

　　使用relative下的top,left进行定位

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        body{
            border: 1px solid green;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
            top: 30px;
            left: 30px;
        }
    style>
head>
<body>
    <div>div>
body>
html>

使用相对定位可以来进行后续表单位置设计

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        .t{
            font-size: 30px;
        }
        .xiaoming{
            position: relative;
            top: 4px;
        }
    style>
head>
<body>

    <div>
        <input type="text" class="t">
        <input type="text" class="xiaoming">

    div>
    
body>
html>

2.2绝对定位（absolute）

一般情况下：

1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。

以父辈盒子作为参考点：

1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点（父相子绝）

2.如果父亲设置了定位，那么以父亲为参考点。

例：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>

        .wrap{
            width: 400px;
            height: 400px;
            padding: 100px;
            background-color: yellow;
            position: relative;

        }
        
        .container{
            width: 500px;
            height: 500px;
            background-color: green;
            position: relative;
            padding: 20px;
            
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            top: 100px;
            left: 50px;
            
        }
    style>
head>
<body style=height: 2000px;>
     <div class="wrap">
        <div class="container">
             <div class="box1">
            
              div>
        div>
    div>
body>
html>

绝对定位下盒子居中问题：

　　设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中

　　父元素相对定位，子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中（父相子绝）

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .nav{
            width: 960px;
            height: 49px;
            background-color: purple;
            position: absolute;
            left: 50%;
            margin-left: -480px;

        }
    style>
head>
<body>
    
    <div class="nav">
        
    div>
body>
html>

2.3固定定位（fixed）

　　设置固定定位，用top描述，那么是以浏览器的左上角为参考点

　　　　　　　如果用bottom描述，那么是以浏览器的左下角为参考点(做小广告用的)

固定定位，点击后返回顶部：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        p{
            width: 100px;
            height: 100px;
            background-color: red;
            position: fixed;
            bottom: 0;
            right: 50px;
            line-height: 100px;
            text-align: center;
            color: white;
        }
    style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js">script>
head>
<body>
    
    <div class="wrap">
        <p>
            <a href="#">回到顶部a>

        p>
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">

    div>

    <script>
        
        $(function(){
            $(p).click(function(){
                $(html).animate({
                    "scrollTop":0
                },1000)
            })
        })
    script>
body>
html>

2.4关于盒子之间的垂直居中解决思路：

基础版：

.parent {
          width:800px;
          height:500px;
          border:2px solid #000;
          position:relative;
        }
        .child {
            width:200px;
            height:200px;
            /*(500-200)/2*/
            margin-top:150px;
            margin-left: 300px;
            position: absolute;  
            background-color: red;
        }

第一种：

.parent {
          width:800px;
          height:500px;
          border:2px solid #000;
          position:relative;
        }
        .child {
            width:200px;
            height:200px;
            margin: auto;  
            /*必须是auto*/
            position: absolute;  
            top: 0; bottom: 0; left: 0; right: 0;
            background-color: red;
        }

第二种：

.parent {
            width:800px;
            height:500px;
            border:2px solid #000;
            display:table-cell;
            vertical-align:middle;
            text-align: center;
        }
        .child {
            width:200px;
            height:200px;
            display:inline-block;
            background-color: red;
        }

第三种：

.parent {
            width:800px;
            height:500px;
            border:2px solid #000;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        .child {
            width:200px;
            height:200px;
            background-color: red;
        }

第四种：

.parent {
            width:800px;
            height:500px;
            border:2px solid #000;
            position:relative;
        }
        .child {
            width:300px;
            height:200px;
            margin:auto;
            position:absolute;/*设定水平和垂直偏移父元素的50%，
再根据实际长度将子元素上左挪回一半大小*/
            left:50%;
            top:50%;
            margin-left: -150px;
            margin-top:-100px;
            background-color: red;
        }

3.z-index（用于涂层之间的遮盖）     注意这里是用于涂层之间啊，没有涂层何谈遮盖

　　z-index 值表示谁压着谁，数值大的压盖住数值小的

　　只有定位了的元素，才能有z-index（浮动元素无法使用）

　　index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素

　　也具有从父现象

　　z-index只决定同一父级下的子元素之间的堆叠顺序。用这个必须得留心一下，否则盖不住

例1

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;
            top: 50px;
            z-index: 10;
    
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: relative;
            z-index: 8;
            
        }

    style>
head>
<body>
    <div class="box1">
        
    div>
    <div class="box2">
        
    div>
    <div class="box3">
        
    div>
    
body>
html>

z-index的应用：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        /*设置图片与固定栏间的距离*/
        body{
            padding-top: 40px;
        }
        .nav{
            width: 100%;
            height: 40px;
            background-color: black;
            position: fixed;
            top: 0;
                 

                                                                                                                    
                         混合云
                                             
                         私有云
                                                                                                                                                 
                                      
                     
                    
                                                                                               导航栏css代码
                                                                                                           html导航栏设置
                                                                                                           html 设置导航栏
                                                                                                           小米盒子cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2221.html

相关文章

  • 你们要的HTML布局技巧：如何规范搭建网页架构？

    摘要：主体内容区域小米首页下小米商城的主题内容区域，也是整体网页面积最广的区块实在不知道定主体内容区块时也可以根据面积比重来划分，最大的那块一定是主题中心，布局的重复性很高。 单就深入了解布局规范都足够说上一个月的，今天我就不论大范围，挑选小米网站首页的部分区块布局来讲解吧！ 下面是小米官网的首页，很多人一看到这样的网页就傻眼，不知道咋弄，要么就随性布局，要么就干看着，其实遇到问题首先一点就...

    yvonne 评论0 收藏0

  • 你们要的HTML布局技巧：如何规范搭建网页架构？

    摘要：主体内容区域小米首页下小米商城的主题内容区域，也是整体网页面积最广的区块实在不知道定主体内容区块时也可以根据面积比重来划分，最大的那块一定是主题中心，布局的重复性很高。 单就深入了解布局规范都足够说上一个月的，今天我就不论大范围，挑选小米网站首页的部分区块布局来讲解吧！ 下面是小米官网的首页，很多人一看到这样的网页就傻眼，不知道咋弄，要么就随性布局，要么就干看着，其实遇到问题首先一点就...

    KaltZK 评论0 收藏0

  • CSS 布局经典问题初步整理

    摘要：布局经典问题初步整理标签前端本文主要对布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负，清除浮动，居中布局，响应式设计，布局，等等。 CSS 布局经典问题初步整理 标签 ： 前端 [TOC] 本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Fl...

    Amos 评论0 收藏0

  • web前端（12）—— 页面布局2

    摘要：是以首屏页面左下角为参考点来调整位置。因为绝对定位脱离标准流，影响页面的布局。相反父相子绝在我们页面布局中，是常用的布局方案。本篇博文，主要就讲定位的问题，也就是页面布局里最重要的，本篇博文不出意外的话，也是css的最后一篇博文了 定位，position属性 定位有三种： 相对定位 绝对定位 固定定位 相对定位，position：relative 相对定位的意思就是相对于自身元素原来...

    番茄西红柿 评论0 收藏0

  • 前端笔记之CSS（下）浮动&BFC&定位&Hack

    摘要：并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。宋体清除浮动这是专业术语，其实就是需要我们解决浮动带来的影响宋体父元素的高度塌陷宋体。相对定位的参考点是自身。 一、浮动 1.1 各个语言的主要知识点 HTML：标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS： 　　样式： 　　布局： 　　　　标准流(标准文档流、普通文档流)：盒子模型(width/height...

    番茄西红柿 评论0 收藏0

发表评论

登陆后可评论

0条评论

番茄西红柿

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<