Python Day 48 前端 CSS標籤的隱藏、CSS 盒子陰影、CSS定位佈局、CSS定位案例、Javascript語言、Javascript書寫位置、JavaScript基礎語法

時間 2019-12-08

標籤 python day 前端 css 標籤隱藏盒子陰影定位佈局案例 javascript 語言書寫位置基礎語法欄目 Python 简体版

原文原文鏈接

　　## CSS標籤的隱藏javascript

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: orange;
            border-radius: 50%;
            /*border-style: solid;*/
            /*border-width: 1px;*/
            /*border-color: red;*/

            border: 1px solid red;

            background: url("img/001.png") no-repeat 0 0;

            font: normal 30px/100px 'Arial';
            color: green;
            text-align: center;
        }
        .d1:hover ~ .d2 {
            display: block;
        }

        .d2 {
            /*不以任何方式顯示，在頁面中不佔位，但從新顯示，任然佔位*/
            display: none;
        }
        .d3 {
            /*修改盒子的透明度，值爲0，徹底透明，但在頁面中佔位*/
            opacity: 0.5;
        }
        /*顯示和影藏都不佔位，用來作一些標籤的顯示影藏切換*/
    </style>
</head>
<body>
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
</body>
</html>

　　##CSS 盒子陰影html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: orange;
            margin: 100px auto;

            /*x軸偏移 y軸偏移 虛化程度 陰影寬度 顏色*/
            box-shadow: 150px 0 10px 0 red, 0 150px 10px 0 green;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

　　##CSS定位佈局java

#一、定位佈局引入
「」「
學習完盒模型樣式後，能夠完成盒模型位置的改變，學習了浮動樣式佈局後，又能讓默認上下排列顯示的盒模型快速左右排列，可是仍然很差或不能完成一下兩種樣式佈局需求：

需求1：在頁面能夠發生滾動的時候，盒模型能不能至關頁面窗口是靜止的，不會隨着頁面滾動而滾動（頁面小廣告）

需求2：父標籤已經規定死了寬和高，多個子標籤之間不相互影響位置佈局，每一個子標籤自身相對於父級寬高提供的顯示區域進行獨立的位置佈局

」「」

#二、固定定位：
1、一個標籤要相對於窗口靜止，採用固定定位
二、若是有多個固定定位標籤，都是參考窗口，因此之間不相互影響，但可能出現圖層重疊，經過 z-index 值絕對圖層上下關係


#三、絕對定位：
1、一個標籤要隨着父級移動而移動(子級佈局完畢後相對於父級位置是靜止的)，且兄弟標籤之間佈局不影響(兄弟動，自身相對父級仍是保持靜止)
二、z-index 值能改變重疊的兄弟圖層上下關係
3、子級相對的父級必定要 定位處理 （三種定位都可以）
    父級要先於子級佈局，因此子級在採用絕對定位時，父級通常已經完成了佈局，若是父級採用了 定位 來完成的佈局，子級天然就至關於父級完成 絕對定位
    若是父級沒有采用 定位 來完成的佈局，咱們要後期爲父級增長 定位 處理，來輔助子級 絕對定位，父級的 定位 是後期增長的，咱們要保證增長後不影響父級以前的佈局，相對定位能夠完成


#四、相對定位：
1、父相子絕

二、相對定位也存在獨立使用，可是能夠用盒模型徹底取代，因此通常不用

　　##CSS定位案例編程

#案例1、固定定位****************************************************************************************************
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            /* 當前頁面窗口的寬高(鎖屏幕尺寸變化而變化)：vw vh   vw：視窗寬度的百分比（1vw 表明視窗的寬度爲 1%）
vh：視窗高度的百分比*/
            height: 500vw;
            background-color: red;
        }
        .tag {
            width: 180px;
            height: 300px;
            background-color: orange;

            /*一旦打開定位屬性，left、right、top、bottom四個方位詞均能參與佈局*/
            /*固定定位參考瀏覽器窗口*/
            /*佈局依據：固定定位的盒子四邊距瀏覽器窗口四邊的距離：eg：left - 左距左，right - 右距右*/
            /*左右取左，上下取上*/
            position: fixed;
            left: 0;
            /*calc會計算，使用窗口一半的高度減去.tag標籤的一半高度*/
            top: calc(50% - 150px);
            right: 50px;
            bottom: 20px;
        }
        .flag {
            width: 220px;
            height: 330px;
            background-color: pink;

            position: fixed;
            left: 0;
            top: calc(50% - 165px);
        }
        .tag {
            /*z-index值就是大於等於1的正整數，多個重疊圖層經過z-index值決定上下圖層顯示前後*/
            z-index: 666;
        }
        .flag {
            z-index: 888;
        }

    </style>
</head>
<body>
<div class="tag"></div>
<div class="box"></div>
<div class="flag"></div>
</body>
</html>

#二、絕對定位和絕對定位結合案例****************************************************************************************************
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: orange;
            margin: 100px auto 0;
        }
        .s {
            width: 100px;
            height: 100px;
            font: normal 20px/100px 'Arial';
            text-align: center;
        }
        .s1 { background-color: red }
        .s2 { background-color: pink }
        .s3 { background-color: green }


        .s {
            /*絕對定位：子標籤獲取不到父級標籤的寬，也撐不開父級的高*/
            /*子標籤必須本身設置寬高，父級也必須本身設置寬高*/
            position: absolute;
            /*絕對定位的標籤都是相對於一個參考系進行定位，直接不會相互影響*/

            /*參考系：最近的定位父級*/
            /*打開了四個定位方位*/
            /*上距上...下距下*/
            /*上下去上、左右取左*/
        }
        .box {
            /*子級採用絕對定位，通常都是想參考父級進行定位，父級必須採用定位處理才能做爲子級的參考系*/
            /*父級能夠選取 fixed、 absolute，但這兩種定位都會影響盒模型，relative定位不會影響盒模型*/
            /*父相子絕*/
            position: relative;
        }
        .s1 {
            right: 0;
            left: 0;
            bottom: 0;
            z-index: 1;
        }
        .s2 {
            bottom: 50px;
            left: 0;
            z-index: 10;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="s s1">1</div>
        <div class="s s2">2</div>
        <div class="s s3">3</div>
    </div>
</body>
</html>

#三、絕對定位和相對定位案例2（父相子絕）****************************************************************************************************
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body, ul, a {
            /*清除系統默認樣式*/
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
    </style>
</head>
<body>

    <style>
        .header {
            width: 100vw;
            height: 50px;
            background-color: brown;
        }
        .header li {
            width: 150px;
            height: 50px;
            background-color: orange;
            /*左浮動*/
            float: left;
            /*控制兄弟向右移動10*/
            margin-right: 10px;
            text-align: center;
            font: normal 20px/50px 'Arial';
        }
        .nav {
            width: 100vw;
            height: 80px;
            background-color: tomato;
        }
        .info {
            width: 150px;
            height: 200px;
            background-color: pink;

        }

        .header {
            /*子級移動要相對於父級，因此要對父級進行定位處理，relative相對移動不影響盒子，規則：父相子絕*/
            position: relative;
        }
        .info {
             position: absolute;
            left: 160px;
            top: 50px;
            display: none;
        }
        .card:hover ~ .info {
            display: block;
        }
    </style>
    <ul class="header">
        <li>首頁</li>
        <li class="card">下載</li>
        <li>我的主頁</li>
        <div class="info"></div>
    </ul>
    <div class="nav"></div>

</body>
</html>

#三、定位案例3****************************************************************************************************

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .wrapper {
            width: calc(200px * 5 + 40px);
            margin: 0 auto;
            border: 1px solid black;
        }
        .wrapper:after {
            content: "";
            display: block;
            clear: both;
        }
        .box {
            width: 200px;
            height: 260px;
            background-color: orange;
            margin-right: 10px;
            margin-bottom: 10px;
            float: left;
            /*要不要輔助子級，父級均可以添加一個相對定位*/
            position: relative;
        }
        .box:nth-child(5n) {
            margin-right: 0;
        }
        .t, .b {
            height: 125px;
            background-color: pink;
        }
        .t {
            margin-bottom: 10px;
        }
        .b1 {
            /*設置背景圖片 不平鋪*/
            background: url("img/001.jpg") no-repeat;
            /*修改圖片大小 顯示寬度的效果*/
            background-size: 200px 260px;
        }
        .b2 div {
            position: absolute;
            width: 50px;
            height: 30px;
            background-color: cyan;
            left: calc(50% - 25px);
            /*display: none;*/
        }
        .b2 img {
            width: 150px;
            position: absolute;
            left: calc(50% - 75px);
            top: 50px;
        }
        .b2 p {
            position: absolute;
            background-color: brown;
            bottom: 10px;
            width: calc(100%);
            text-align: center;
        }
        .b2 .f {
            width: calc(100%);
            background-color: #ff6700;
            position: absolute;
            left: 0;
            bottom: 0;
            /*沒有高度，也會顯示文本，因此文本要隱藏*/
            overflow: hidden;
            /*display: none;*/
            height: 0;
            /*誰過渡誰有transition*/
            transition: 0.2s;
        }
        .box {
            transition: 0.2s;
            top: 0;
        }
        .b2:hover {
            /*margin-top: -5px;*/
            top: -5px;
            /*盒子陰影*/
            box-shadow: 0 0 5px 0 black;
        }
        .b2:hover .f {
            /*display: block;*/
            height: 60px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box b1"></div>
        <div class="box b2">
            <div>新品</div>
            <img src="img/002.jpg">
            <p>小米麼麼麼麼</p>
            <div class="f">1234567878</div>
        </div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box">
            <div class="t"></div>
            <div class="b"></div>
        </div>
    </div>
</body>
</html>

　　##Javascript數組

#一、javascript介紹
js:前臺腳本語言 - 編程語言 - 弱語言類型 - 完成頁面業務邏輯及頁面交互

1、能夠本身生成頁面數據
2、能夠請求後臺數據
三、能夠接受用戶數據 - 能夠渲染給頁面的其餘位置；提交給後臺
4、修改頁面標籤的 內容、樣式、屬性、事件(頁面經過js能夠完成與電腦的輸入輸出設備的交互)

#二、JavaScript如何學習
學習方向：從JS代碼書寫位置、JS基礎語法、JS選擇器和JS頁面操做四部分進行學習

學習目的：完成頁面標籤與用戶的人機交互及前臺數據處理的業務邏輯

　　##Javascript書寫位置瀏覽器

#一、書寫位置：能夠分爲行間式、內聯式和外聯式三種。

#二、行間式
<!-- 關鍵代碼 -->
<!-- 給div標籤添加點擊事件的交互邏輯：彈出文本提示框 -->
<div onclick="alert('點擊我完成頁面交互')">點我</div>

#三、內聯式
JS代碼書寫在script標籤中，script標籤能夠出如今頁面中的任意位置，建議放在body標籤的最後(html代碼是自上而下進行解析加載，放在body標籤的最下方，會保證頁面全部標籤都加載完畢，html再去加載js文件，那麼js腳步文件就會更好的控制頁面標籤的人機交互了)

<!-- 關鍵代碼 -->
<!-- 頁面被加載打開時，就會觸發事件的交互邏輯：彈出文本提示框 -->
<body>
    <!-- body標籤中的全部子標籤位置 -->
    
    <!-- script標籤出如今body標籤的最下方 -->
    <script>
        alert('該頁面被加載！')
    </script>
</body>

#四、外聯式
JS代碼書在外部js文件中，在html頁面中用script標籤引入js文件（建議在body標籤最下方引入，理由同上）

#4-一、js文件夾下的my.js
alert('外聯式js文件彈出框')
#4-二、根目錄下的second.html
<!-- 關鍵代碼 -->
<!-- 頁面被加載打開時，就會觸發事件的交互邏輯：彈出文本提示框 -->
<body>
    <!-- body標籤中的全部子標籤位置 -->
    
    <!-- script標籤出如今body標籤的最下方 -->
    <script src="js/my.js">
        /* 不要在此寫JS代碼，緣由是用來引入外部js文件的script標籤，標籤內部書寫的JS代碼不在起做用 */
    </script>
</body>

#五、總結
行間式控制交互最直接，可是交互邏輯多了直接致使頁面可讀性變差，且交互邏輯相同的標籤樣式也須要各自設置，複用性差，不建議使用；

內聯式能夠同時爲多個標籤提供交互邏輯（課程後面會詳細介紹），學習階段代碼量不大的狀況下，也不須要分文件處理的，這時候建議使用內聯式；

外聯式是分文件管理不一樣的頁面存在的相同與不一樣的數據處理的業務邏輯與人機交互，能夠極大提升開發效率，項目開發時必定要採用外聯式來處理JS代碼。

經過上面的介紹，你們很清楚JS是一門腳本編程語言，那麼咱們必定先要了解一下這門編程語言的基礎語法，才能夠慢慢的展開學。

　　##JavaScript基礎語法app

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1>js語法</h1>
</body>

<script>
    let aaa = 123;
    let bbb = '123';

    console.log(aaa == bbb);  // == 只作數據比較
    console.log(aaa === bbb);  // === 作數據與類型比較

    // 弱語言類型：會本身根據環境決定如何選擇類型存儲數據
    console.log(1 + 2);  // 3
    console.log('1' + '2');  // 12
    console.log(1 + '2');  // 12
    console.log(1 - '2');  // -1

</script>


<script>
    // 3、數據類型
    // 值類型
    // 1) 數字類型
    let a = 123;
    console.log(a, typeof(a));
    a = 3.14;
    console.log(a, typeof(a));

    // 2) 布爾類型
    let b = false;
    console.log(typeof(b), b);

    // 3) 字符串類型：''  ""  ``
    let c = `123
456
789`;
    console.log(c, typeof(c));

    // 4) 未定義類型：未初始化的變量
    let d;
    console.log(d, typeof(d));

    // 引用類型
    // 5) 數組（至關於list）：
    let arr = [1, 2, 3];
    console.log(arr, typeof(arr));

    // 6) 對象（至關於dict）：全部的key必須是字符串
    let sex = '男';
    let dic = {
        name: 'Owen',
        age: 17.5,
        sex,  // value若是是變量，變量名與key同名，能夠簡寫
    };
    console.log(dic, typeof(dic));

    // 7) 函數類型
    function fn() { }
    console.log(fn, typeof(fn));

    // 8) null類型
    let x = null;
    console.log(x, typeof(x));
</script>



<script>
    // 2、變量與常量
    let num = 123;
    num++;
    console.log(num);

    const str = '123';
    // str = '456';  // 常量聲明時必須賦初值，且一旦賦值，不可改變
    console.log(str);
</script>

<script>
    // 1、三種輸出信息的方式
    // 控制檯輸出語句
    console.log('你丫真帥')

    // 彈出框提示信息
    alert('你丫確實帥')

    // 將內容書寫到頁面
    document.write('<h2 style="color: red">你丫帥掉渣</h2>')
</script>

</html>