zoukankan      html  css  js  c++  java
  • 前端css小米导航栏设置及盒子定位居中问题

    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>Document</title>
        <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>Document</title>
        <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>Document</title>
        <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>Document</title>
        <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>Document</title>
        <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 {
              800px;
              height:500px;
              border:2px solid #000;
              position:relative;
            }
            .child {
                200px;
                height:200px;
                /*(500-200)/2*/
                margin-top:150px;
                margin-left: 300px;
                position: absolute;  
                background-color: red;
            }

    第一种:

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

    第二种:

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

    第三种:

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

    第四种:

    .parent {
                800px;
                height:500px;
                border:2px solid #000;
                position:relative;
            }
            .child {
                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>Document</title>
        <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;
                left: 0;
                z-index: 99999;  
                /*数值最大,谁也无法压盖住固定栏*/
            }
            .wrap{
                width: 960px;
                overflow: hidden;
                margin: 0px auto;
                background-color: purple;
                border-radius: 5px;
    
            }
            .wrap ul li{
                float: left;
                width: 160px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                
            }
            .wrap ul li a{
                width: 160px;
                height: 40px;
                display: block;
                color: white;
                font-size: 14px;
                text-decoration: none;
    
            }
            .wrap ul li a:hover{
                background: yellow;
                color: green;
                text-decoration: underline;
            }
            
            p{
                position: relative;
            }
    
        </style>
    </head>
    <body style="height: 3000px">
        <div class="nav">
            <div class="wrap">
                <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>
        </div>
    
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <p>哈哈哈哈哈哈哈哈</p>
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
        <img src="./timg.jpg" alt="">
    
    </body>
    </html>
  • 相关阅读:
    Chap-6 6.1~6.3 程序装载
    X Window基础二(转)
    X Window基础一(转)
    Linux基础命令 su与sudo的区别
    Chap-4 Section 4.6 链接控制过程
    Chap-4 Section 4.5 静态库链接
    ceph的CRUSH数据分布算法介绍
    使用ffmpeg捕获USB外部摄像头视频流
    使用ffserver实现转发实时流媒体(摄像头捕获)
    内存映射文件(专门读写大文件)
  • 原文地址:https://www.cnblogs.com/LearningOnline/p/9090761.html
Copyright © 2011-2022 走看看