第二週週報

定位（position）
預設值為static，靜態定位
1.相對元素（relative）
定位元素會脫離文件流，但相對定位不會
通常情況其為絕對定位服務，可以通過left、right、top、bottom對其進行設定。
元素仍保持為定位前的位置，並且佔有一定的空間。
2.絕對定位（absolute）
該定位的包含塊為祖先元素中的第一個定位元素，若祖先元素中沒有定位元素，則它的包含塊為整個網頁，通過top、left、bottom、right進行位置控制。
下面為一個絕對定位元素的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./所有css/二級選單.css">
</head>
<body>
    <header class="header clearfix">
        <ul class="topnav">
            <li><a href="">Lorem.</a></li>
            <li><a href="">Vel?</a></li>
            <li><a href="">Voluptates!</a></li>
            <li>
                <a href="">客戶服務</a>
                <div class="sumbmune">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio enim quod praesentium pariatur quidem distinctio laborum dignissimos totam hic id, mollitia voluptatem iusto magni quas qui molestiae, sed laudantium animi!
                </div>
            </li>
            <li><a href="">Ea.</a></li>
        </ul>
    </header>
    <p>Lorem,Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error ipsum sapiente enim iusto vero. Sunt atque obcaecati debitis neque commodi esse ipsa numquam dignissimos? Nemo beatae itaque, eaque repellendus voluptas possimus sit atque quasi dolores ab labore tempore reprehenderit repellat hic explicabo magnam laudantium voluptate omnis. Tempore soluta, excepturi quibusdam quod reiciendis, provident corporis non iste cum vitae, aliquid dolores deleniti omnis natus officia. Nisi deleniti perferendis ipsa ex optio reprehenderit tempore perspiciatis enim aliquam mollitia aspernatur nemo, fugiat nam saepe et quo doloremque ratione unde facilis sunt eligendi. Dicta eos architecto ducimus repellat quae! Qui impedit deleniti beatae inventore? ipsum dolor sit amet consectetur adipisicing elit. Expedita repudiandae assumenda eum provident nulla deserunt deleniti dolorem, dolorum voluptas velit illum repellendus quae aperiam, adipisci nihil vero, dolore necessitatibus. Laboriosam quas ipsam voluptate saepe iure voluptatibus optio, repudiandae dolorum dignissimos aspernatur quibusdam odit accusamus fugiat repellendus omnis eaque nostrum incidunt rem voluptates tenetur? Delectus, error blanditiis doloremque magnam atque ea, repellendus accusamus excepturi, dolores dolor iure maxime veritatis consequatur nemo eveniet alias magni totam pariatur? Ea sit earum, assumenda animi libero voluptatum error nam? Culpa sequi dicta dolore id nihil voluptates facere numquam voluptatem architecto itaque, eius fugiat quia commodi aut ab ad ea? Sapiente alias qui ipsum earum quae exercitationem aspernatur quas, expedita sint unde rerum enim obcaecati officia excepturi magnam ea. Quod, temporibus, quaerat dolor ut ex, dolorem neque architecto quidem dolorum similique mollitia fugiat. Suscipit explicabo quaerat fugiat repellat dolorem quidem asperiores repellendus laudantium debitis qui id sapiente aliquid temporibus cum natus animi, enim officia dolorum ea. Odit, voluptate aspernatur sint sapiente itaque officia pariatur ab corrupti earum vitae non doloribus molestias dignissimos unde sit ipsam eum error dolor aliquid soluta enim doloremque. Quam architecto nisi fuga perferendis, quae repellat. Minus fugiat sed saepe voluptas ea vitae?</p>
</body>
</html>

css程式碼如下：

.clearfix::after{
    content:"";
    display: block;
    clear: both;
}
.header{
    background-color: #e3e4e5;
    color:#999;
    height: 40px;
    line-height: 40px;
}
.header .topnav li{
    float: left;
    list-style:none;
    width: 100px;
    margin:0 50px;
    height: 40px;
    text-align: center;
    box-sizing: border-box;
    position: relative;
}
.header .topnav li:hover{
    border: 2px solid black;
    border-bottom: none;
    background-color:#fff;
    line-height: 35px;
}
.header .topnav>li a{
    text-decoration: none;
}
.header .topnav li .sumbmune{
    line-height: 2;
    width: 300px;
    text-align: left;
    display: none;
    border:2px solid black;
    position: absolute;
    right: -2px;
}
.header .topnav>li:hover .sumbmune{/*找到滑鼠移入的Li元素的sumbmune*/
    display: block;
    background: #fff;
}
.header .topnav>li:hover::after{
    content: "";
    width: 100%;
    height: 5px;
    position:absolute;
    background-color:#fff;
    left:0;
    bottom:0;
}
body p {
    background:#fff;
    color: black;
}

效果如下：
在這裡插入圖片描述
注：絕對定位通常會脫離文件流和其他元素重疊，不佔據空間
3.固定定位（fixed）
與絕對定位最大的不同點就是：固定定位的包含塊為可視視窗
當margin設為auto時，會自動吸收剩餘空間

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width", initial-scale=1.0">
    <title>Document</title>
    <style>
        div img {
            width:100%;
            position: relative;
        }
        .shikou{
            position: fixed;
            width:100%;
            height:100%;
            left: 0;
            top: 0;
            background:rgba(0,0,0,.7);
        }
        .chuangkou{
            position: absolute;
            background-color: #fff;
            width: 400px;
            height: 300px;
            border: 2px solid #fff;
            margin:auto;
            left:0;
            top:0;
            right:0;
            bottom: 0;
            padding: 35px;
            box-sizing: border-box;
            border-radius: 2%;
        }
        .guanbi{
            background:#fff;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            position: absolute;
            right: -25px;
            top: -25px;
            border: 2px solid #FFF;

        }
    </style>
</head>
<body>
    <div><img src="./Saved Pictures/1536961_20180206164228809050_0.jpg" alt=""></div>
    <div class="shikou">
        <div class="chuangkou">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem corporis provident nesciunt dolor iste ab officia tempore sequi distinctio natus nostrum temporibus voluptas vel assumenda ipsam laudantium cum repellendus non quidem eaque pariatur vitae possimus, nulla beatae. Possimus odit velit iste, quas ab dicta, dolorum ut, error doloremque impedit eligendi.
            <div class="guanbi">
                X
            </div>
        </div>
    </div>
</body>
</html>

在這裡插入圖片描述
表示透明度rgba
opacity：它設定的是整個盒子以內所有元素的透明，取值為0~1
4.多個元素重疊時
涉及z-index屬性，可正可負，為負時遇到常規流、浮動元素會被覆蓋掉
該值越大越靠近使用者，只有定位元素設定該值有效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            position: absolute;
        }
        .big{
            background: aqua;
            width: 300px;
            height: 200px;
        }
        .cir{
            width: 100px;
            height: 150px;
        }
        .rec{
            width: 100px;
            height: 150px;
        }
        .big .rec{
            background: #4a5a6a;
            z-index: -2;
        }
        .big .cir{
            right: 0;
            bottom: 0;
            background: #000;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="big">
        <div class="rec"></div>
        <div class="cir"></div>
    </div>
</body>
</html>

在這裡插入圖片描述
此時
更多偽類選擇器

偽類選擇器	含義
first-child	選中第一個子元素
last-child	最後一個子元素
nth-of-type	子元素中第一個指定型別元素
nth-child	指定第幾個元素（even為偶數個；odd為奇數個）
first-letter	元素中第一個字母
first-line	元素中第一行文字
selection	表示使用者框選的部分
focus	元素焦距時的樣式
checked	單選或多選框被選中時的樣式

盒子隱藏
display：none不生成盒子
visibility：hidden生成盒子，只是視覺上移除盒子，盒子仍佔據空間。
背景圖
涉及的CSS屬性
1.background-image：url（路徑）
預設情況下，背景圖會在橫座標和縱座標中重複
又涉及了background-repeat取值有：no-repeat、repeat-x、repeat-y
2.background-size背景的尺寸
3.background-position（center/50% 50%都表示居中）
4、background-attachment
控制被背景圖是否固定（fixed是相對於視口）
iframe元素（可替換元素）
通常用於在網頁中嵌入另一個頁面，為行盒，具有行塊盒特點。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe src="//player.bilibili.com/player.html?aid=43642905&bvid=BV1eb41127Qw&cid=76466932&page=1" scrolling="no" frameborder="no" framespacing="0" allowfullscreen="true"> 
    </iframe>
</body>
</html>

嵌入了別人網站的視屏：在這裡插入圖片描述

在頁面中使用flash

 <object data="檔案地址" type="檔案型別">
       <param name="" value="">
   </object>

<embed src="路徑" type="型別">

表單元素
input輸入框
password密碼框 data日期框 search搜尋 color顏色框
number數字輸入框 checked多選框 radio單選框`

<input type="輸入框型別" value="輸入框的值">

select元素
子元素為option，為下拉選單選擇框（預設選項為seleced）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    你所在的城市：
    <select name="city" id="">
        <option value="">上海</option>
        <option value="">湖南</option>
        <option value="">陝西</option>
        <option value="">北京</option>
        <option value="">臺灣</option>
    </select>
</body>
</html>

結果如下：
在這裡插入圖片描述
按鈕元素
type屬性有reset、submit、botton，預設為submit。
form元素
通常會將整個表單元素放置form元素內部，作用是單提交表單時，會將form元素內部的表單內容以合適的方式提交到伺服器
action屬性表示提交給誰

第二週週報

相關文章