国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端css小米導航欄設置及盒子定位居中問題

番茄西紅柿 / 1867人閱讀

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;

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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條評論

最新活動
閱讀需要支付1元查看
<