day15--JavaScript

時間 2019-12-07

標籤 day15 day javascript 欄目 JavaScript 简体版

原文原文鏈接

上節做業回顧html

一、CSS重用url

<style>spa

.c1{code

}orm

.c2{htm

}blog

<div class="c1 c2"></div>圖片

二、自適應和改變大小變形

左右滾動條的出現

寬度，百分比（所有使用百分比就會變形）

頁面最外層：像素的寬度（改變頁面大小，自動出現滾動條）

<form> action="http://www.alex.com" method="GET" enctype="multi圖片提交必須">

</form>

GET:http://www.alex.com?q=用戶輸入

GET：http://www.alex.com?q=用戶輸入&b=用戶輸入

圖片提交必須有enctype屬性

CSS補充

position: 返回頂部，頂部菜單不動

position:

　　fixed固定在某處位置

relative 相對

absolute 絕對定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c{
            width:70px;
            height:50px;
            background-color:black;
            color:white;
            line-height:50px;
            position:fixed;      #固定在某處，下面是設置固定的地方
            bottom:20px;
            right:10px;
        }
    </style>
    <!-- position屬性的fixed表明固定在某處，定義position後，有四個屬性，top,left,right,bottom，距離屏幕的四個位置 -->
</head>
<body>
    <div class="c">返回頂部</div>
    <div style="height:5000px;background-color:aliceblue;"></div>
    <!-- 兩個塊級標籤，層疊的形式，要想實現放置底部的效果，要實現網頁分層的效果 -->
</body>
</html>

首行固定，漂浮在網頁頂端，兩層網頁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--position屬性的fixed是固定網頁，margin-top屬性是自動讓標籤距屏幕的距離，fixed固定屏幕，固定了標籤，不會動的 -->
    <title>Title</title>
    <style>
        .c1{
            background-color:black;
            height:30px;
            color:white;
            position:fixed;
            left:0;
            right:0;
            top:0;
        }
        .c2{
            background-color:pink;
            height:5000px;
            margin-top:31px;
        }
    </style>
</head>
<body>
    <div class="c1">頂部網頁</div>
    <div class="c2">下面網頁的信息</div>
    <div>草，怎麼看不見華倫</div>
    <div>我擦，真的看不見呀，你媽媽的</div>
</body>
</html>

上面HTML代碼中，position屬性中的fixed是固定網頁，而margin-top是讓<div>標籤距屏幕的距離，不會固定，是相對屏幕頂部位置。

relative相對,自己單獨positive:relative是沒有任何效果的

absolute絕對定位

relative + absolute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            position:relative;
            width:500px;
            height:200px;
            border:1px solid red;
            margin: 0 auto;
        }
        .c2{
            position:absolute;
            left:0;
            bottom:0;
            height:50px;
            width:50px;
            background-color:black;
            border: 1px solid pink;
        }
    </style>
</head>
<body>
    <div class="c1">
        <div class="c2"></div>
    </div>
    <div class="c1"></div>
    <div class="c1"></div>
</body>
</html>

在父級標籤中添加位置

網頁分層，不少網頁點開都有三層，如知乎的註冊，點開以後有三層顯示，最外層讓用戶註冊

CSS中標籤中,opacity用來設置透明度，範圍是0--1

z-index指定層級，網頁能夠設置多層，z-index值大的在最外層。

margin-left，相對左邊移動，margin-top相對頂端移動，相對框的最左邊進行移動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 邊框的居中是相對左上角，所以要向真正居中，要進行調整，分紅一半上下調整 -->
    <style>
        .c1{
            margin:0 auto;
            background-color:green;
            height:5000px;
            z-index:8;
        }
        .c2{
            z-index:10;
            position:fixed;
            background-color:white;
            height:400px;width:500px;
            left:50%;
            top:50%;
            border:1px solid deeppink;
            margin-left:-250px;
            margin-top:-200px;
        }
    </style>
</head>
<body>
    <div class="c2">咱們一家親</div>
    <div style="z-index:9;position:fixed;background-color:black;top:0;left:0;bottom:0;right:0;opacity:0.8"></div>
    <!-- 讓網頁外層變成透明的，須要一個屬性，opacity，範圍0-1,opacity用來設置透明度-->
    <div class="c1">最裏面的一層</div>
</body>
</html>

框架，各類框架的做用，頁面上顯示內容。

display:none取消顯示框，顯示框的顯示與取消。display:none彈框消失

<div></div>標籤裏面設置圖片的高度和寬度

</div>

上面<div>標籤中，<img>標籤，<div>設置了高度和寬度，可是圖片的高度和寬度比設置的要大，則會撐開，<div>設置的高度和寬度就沒有效果。

<div>標籤中的overflow設置圖片的形式，overflow:hidden超過部分隱藏；overflow:auto，超過部分出現滾動條。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c{

        }
    </style>
</head>
<body>
    <div style="height:300px;width:400px;overflow:auto;">
        <img src="xiaohua.jpg" style="height:200px;width:300px;"/>
    </div>
    <!-- overflow中，hidden是若是圖片大小超過設置的大小，則隱藏超過的部分，auto是滾動條，在設置的框架內設置拉向兩端的滾動條 -->
    <!-- 若是想徹底顯示，能夠給圖片自己定義高度和寬度，這時候跟<div>的高度和寬度無關了，可是儘量要一致 -->
</body>
</html>

移動變顏色，移動到圖片上面，顏色會變化，菜單上變化顏色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position:fixed;
            right:0;
            left:0;
            top:0;
            height:48px;
            background-color:#2459a2;
            line-height:48px;
        }
        .pg-body{
            margin-top:50px;
        }
        .w{
            width:980px;
            margin:0 auto;
        }
        .pg-header .menu{
            display:inline-block;
            padding:0 10px;
            color:white;
        }
 .pg-header .menu:hover{ background-color:blue; } </style>
    <!-- hover的做用是當標籤移動到上面的時候CSS執行hover的裏面定義的效果 -->
    <!-- padding表明上下左右邊距都要增長10px,padding設置寬度，高度，上下左右,上下左右都增長10個像素(px) 上右下左 -->
</head>
<body>
    <div class="pg-header">
        <div class="w">
            <a class="menu" href="http://www.baidu.com" target="_blank">LOGO</a>
            <a class="menu">所有</a>
            <a class="menu">42區</a>
            <a class="menu">段子</a>
            <a class="menu">1024</a>
        </div>
    </div>
    <!-- a標籤之間如何設置間距，能夠設置寬度和告訴，a標籤默認是沒有高度和寬度的，行內標籤，要進行轉換爲塊級標籤 -->
    <!-- a標籤默認行內標籤，自身定義了高度和寬度，不能設置寬度和高度，除非進行轉換，轉化爲塊級標籤 -->
    <div class="pg-body">asdfasdf</div>
</body>
</html>

.pg-header .menu:hover{}表明的含義是，只有當鼠標移動到.pg-header .menu指定的樣式上，CSS纔會執行hover裏面定義的CSS樣式，display:inline-black用來讓塊級標籤擁有行內標籤的屬性，行內標籤具備塊級標籤的屬性，這個很重要，在改造行內標籤（好比<a>標籤）的時候頗有效，能夠定義高度和寬度，拉開<a>標籤之間的間距。

背景圖片

background-image:url(圖片地址)，放置圖片

background-repeat:repeat-x,向x方向延伸；repead-y向y方向延伸

background-repeat:no-repeat

background-image與background-repeat結合使用

點贊，私藏，手的圖片，如何設置的，使用background-position來進行設置的

如何獲取上面圖片的一個，不少網站的點贊，評論圖標都是一張圖片，利用background-position來進行調節，以下：

background-position:

background-position-x

background-position-y #用來對圖片摳圖

設置圖片的移動，背景移動，x,y方向移動，處理圖片的移動，背景的移動，背景能夠是圖片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height:100px;width:20px;"></div>
    <div style="background-image:url(點贊.png);height:20px;background-repeat:no-repeat;border:1px solid red;width:20px;"></div>
</body>
</html>

背景圖片的移動，從一張圖片的位置來會移動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .c1{
            background-image:url(login.png);
            width:40px;
            height:40px;
            background-position-x:5px;
            background-position-y: 80px;
            display:inline-block;
            position:absolute;
            top:5px;
            right:5px;
        }
    </style>
</head>
<body>
    <div style="height:50px;width:400px;position:relative;">
        <input type="text" name="username" style="height:50px;width:390px;padding-right:10px;"/>
        <span class="c1"></span>
    </div>
</body>
</html>

上面HTML代碼實現的是輸入框分層的狀況，在input框裏面增長一個圖標。

更多相關文章...

相關標籤/搜索

JavaScript

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。