web框架之HTML5前端開發(python3入門)

本文轉載自查看原文 2019-07-11 15:36 1025 css/ 浮動布局/ 常用選擇器/ html/ 標簽/ 偽類/ Python開發學習

一、簡介

前端： html5+css+javaScript(js+jq+bs)
h5 不擅長 應用程序
小程序是基於h5的封裝產物

html(html有三個載體：pc端瀏覽器，移動端瀏覽器，移動端app)
*** 標簽
*** 層級關系


css
*** 樣式
*** 選擇器 (通過css來控制html，就是用選擇器來建立這個控制的橋梁)
*** 布局

二、了解h5

標簽：被<>包裹，以字母開頭，可以結合合法字符(-、數字)，能被瀏覽器解析的符號，被稱之為標簽
指令：<!> => <!doctype>規定文檔類型，<!-- 注釋 -->
轉義字符：&nbsp; 空格轉義,基本不用轉義字符(http://tool.oschina.net/commons?type=2)
數據：文本、圖片、視頻。。。

1 分析第一個h5頁面

<!--文檔類型的指令：html=》以h5語法來書寫的html文件-->
    <!DOCTYPE html>

    <!--html：頁面根標簽，他只有一個head 和 一個 body-->

    <!--head:頭，樣式、設置信息、功能(js腳本)-->
    <head>
        <meta charset="UTF-8">
        <title>第一個頁面</title>

    </head>

    <!--自定義創建的abc標簽 被強行塞到了body里面-->
    <abc>ABC</abc>

    <!--body：身體，這個頁面中所有要展現的內容，都要寫在body里面-->
    <body>


    </body>
    </html>

View Code

2 常用標簽

### h1~h6，p、span、i、b 標簽建議h1代表頁面標題，在同一個頁面中只出現一次
### a(herf|targer) img(src|alt|title) hr|br
### ul>li  table(了解) form(表單)

常用標簽

3 單雙標簽

有頭有尾的就是雙標簽
img，input等都是單標簽
所有的標簽 都是有結束標志,
    單標簽，默認省略了 "/"，建議省略
    雙標簽，如果省略了結束標志的話，系統會默認按系統自行判斷進行添加，開發過程中不建議省略
單標簽：主功能（一般不需要內容）
雙標簽：主內容（要顯示字標簽，及內容）

單雙標簽

4 層級關系

<!--案例一-->

<!--div標簽是最常用的標簽，用於頁面結構搭建-->
<!--在出現class和name 優先選擇class-->

<div class="wrapper">
    <!--標題與搜索-->
    <div class="header"></div>

    <!--導航欄-->
    <div class="navigation"></div>

    <!--內容-->
    <div class="body">
        <!--.left+center+.right-->
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>

    <!--尾部-->
    <div class="foot"></div>


    <!--案例二-->
    <div class="idea">
        <h3></h3>
        <p></p>
        <p></p>
        <p></p>
        <p>
            <b></b>
        </p>

    </div>

    <!--案例三-->
    <div class="left">
        <div class="list">
            <h3></h3>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

        <div class="list">
            <h3></h3>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

        <div class="list">
            <h3></h3>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>


    </div>


</div>

層級關系

5 css

# 選擇器: html頁面標簽的某種名字, 用來將html與css建立起鏈接, 就可以通過css來控制html樣式
# 作用域: {}, 寫在作用域中的樣式塊就是控制作用域前名字(選擇器)的
# 樣式塊: 樣式語句們

css

6 css引入

# 1.行間式: 將css樣式直接書寫在標簽style屬性中
# 優點: 直觀(對樣式操作簡單粗暴)  缺點: 可讀性極差, 復用性差

# 2.內聯式: 將css樣式書寫在style標簽中
# 優點: 可讀性強, 復用性強  缺點: 延展性(團隊開發)

# 3.外聯式: 將css樣式書寫在css文件中, 用html文件中link標簽將兩個文件建立起聯系
# 優點: 適合團隊開發

css引入

7 基礎選擇器

通配: *
標簽選擇器: 標簽名 div
class選擇器: .box
id選擇器: #box

# 基礎選擇器優先級: !important > 行間式 > id > class > 標簽 > 通配

基礎選擇器

8 高級選擇器

# 群組選擇器 ，隔開 控制多個
div, .div , #div{
    
}

# 后代選擇器
.sup .sub{
    # sup可以為.sub的父親 也可以為父輩
}

子代
.sup > ,.sub{
    #.sup 只能為.sub的父親
}


#兄弟選擇器
.div1 ~ .div2 {
    # .div2 在.div1的兄弟 ， .div1是修飾詞， 。div1 與.div2之間可以有其他兄弟
}

.div1 + .div2 {
    # .div2 在.div1的兄弟 ， .div1是修飾詞， 。div1 與.div2之間不可以有其他兄弟
}

#交叉選擇器
h2.h{
    # 是h2標簽且有一個class名為h
}

.h1.h2.h3{
    # 有一個標簽有三個類名
}
<div class="h1 h2 h3"></div>

高級選擇器

9 高級選擇器優先級

1 高級選擇器的優先級由個數決定
2 高級選擇器的優先級與類別無關(后代、子代、兄弟、相鄰等 同等對待)
3 id無限大於class，id無限大於標簽
4 上方結果之后優先級還是一致，則跟順序有關

10 偽類選擇器

    :nth-child()
    /* 先確定位置, 再匹配類型*/
    /*li:nth-child(3), 先將所有結構下的第3個標簽找出來, 再匹配選擇器的類型*/
    /*li:nth-child(2n), 匹配偶數位的li*/
    /*li:nth-child(2n - 1), 匹配奇數位的li*/
    /*li:nth-child(3n), 匹配3的倍數的li*/
    li:nth-child(3) {
        color: orange;
    }

偽類選擇器

.box {
    width: 200px;
    height: 200px;
    background-color: orange;
    /*過度(實現動畫): 過度時間 延遲時間(省略) 動畫屬性(可省略默認all) 過度曲線(可省略)*/
    transition: 1s all cubic-bezier(0.38, 1.65, 0, -0.97);
}
.box:hover {
    width: 400px;
    height: 400px;
    background-color: red;
}

鼠標懸浮偽類

11 字體操作

.box {
    /* 字重 大小/行高 字族 */
    font: 900 30px/200px "STSong";
    /*字體水平居中方式*/
    text-align: center;
    /*字體顏色*/
    color: red;
}

字體操作

12 背景圖片操作

background-color: orange;
/*加載背景圖片*/
background-image: url("img/001.png");
/*平鋪: repeat | repeat-x | repeat-y | no-repeat*/
background-repeat: no-repeat;
/*背景尺寸: 會縮放背景圖*/
background-size: 100px 200px;
/*背景定位: x軸左右偏移 y軸左右偏移*/
background-position: -10px 20px;

background: 顏色 url("圖片地址") no-repeat 10px -20px;
精靈圖在顯示區域向右移動10px向上移動20px

背景圖片操作

13 浮動布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動布局</title>
    <style>

        .box {
            width: 200px;
            height: 80px;
            background-color: brown;
            border: 1px solid black;

            /*浮動布局*/
            /*子級一但浮動，就不再撐開父級高度*/
            /*浮動的元素會不完全脫離文檔流*/
            /*脫離文檔流：高於原文檔流內盒子的顯示層次*/
            /*不完全：浮動有一個清浮動操作，可以讓子級重新撐開父級的高度*/
            /*清浮動：可以讓子級重新撐開父級高度*/
            float: left;

        }


        /*子浮動，父級清浮動，父的兄弟顯示區域正常*/
        .sup:after{
            content: '';
            display: block;
            clear: both;
        }

        .ele {
            width: 200px;
            height: 80px;
            background-color: red;
        }

        /*border: 1px solid black;*/


    </style>


</head>
<body>
<div class="sup">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>


<div class="ele"></div>


</body>
</html>

浮動布局介紹

  1 css:
  2 /*reset操作：清楚系統默認樣式的操作*/
  3 
  4 body{
  5     margin: 0;
  6 }
  7 
  8 
  9 a{
 10     /*統一a標簽的字體顏色*/
 11     color: black;
 12     /*清除下划線*/
 13     text-decoration: none;
 14 
 15 }
 16 
 17 
 18 
 19 ul{
 20     list-style: none;
 21     margin: 0;
 22     padding: 0;
 23 
 24 }
 25 
 26 
 27 
 28 #########################
 29 
 30 
 31 h5:
 32 <!DOCTYPE html>
 33 <html lang="en">
 34 <head>
 35     <meta charset="UTF-8">
 36     <title>浮動布局案例</title>
 37 
 38     <link rel="stylesheet" href="./css/reset.css">
 39     <style>
 40         .header {
 41             width: 1210px;
 42             height: 100px;
 43             background-color: orange;
 44             /*margin-left: auto;*/
 45             /*margin-right: auto;*/
 46             /*上下為0 右左為auto*/
 47             margin: 0 auto;
 48         }
 49 
 50         .nav {
 51             /*父級的寬度決定自己一排排列的個數*/
 52             width: 1210px;
 53             margin: 0 auto;
 54 
 55         }
 56 
 57         /*父標簽清浮動：高度需要子級撐開，自己可以設置高度，但不一定准確*/
 58         .nav:after {
 59             content: '';
 60             display: block;
 61             clear: both;
 62         }
 63 
 64         /*子標簽浮動：同行顯示*/
 65         .nav li {
 66             width: 200px;
 67             height: 48px;
 68             background-color: brown;
 69             float: left;
 70 
 71         }
 72 
 73         .body {
 74             width: 1210px;
 75             margin: 0 auto;
 76             background-color: cyan;
 77             height: 100px;
 78         }
 79 
 80         .nav li:nth-child(1) {
 81             width: 155px;
 82             background: url("./img/bg.png") no-repeat;
 83         }
 84 
 85         .nav li:nth-child(2) {
 86             width: 157px;
 87             background: url("./img/bg.png") no-repeat -155px 0;
 88 
 89         }
 90 
 91         .nav li:nth-child(3) {
 92             width: 167px;
 93             background: url("./img/bg.png") no-repeat calc(-155px - 157px) 0;
 94 
 95         }
 96 
 97         .nav li:nth-child(4) {
 98             width: 158px;
 99             background: url("./img/bg.png") no-repeat calc(-155px - 157px - 167px) 0;
100 
101         }
102 
103         .nav li:nth-child(5) {
104             width: 101px;
105             background: url("./img/bg.png") no-repeat calc(-155px - 157px - 167px - 158px) 0;
106 
107         }
108 
109         .nav li:nth-child(6) {
110             width: 185px;
111             background: url("./img/bg.png") no-repeat calc(-155px - 157px - 167px - 158px - 101px) 0;
112 
113         }
114 
115         .nav li:nth-child(7) {
116             width: 177px;
117             background: url("./img/bg.png") no-repeat calc(-155px - 157px - 167px - 158px - 101px - 185px) 0;
118 
119         }
120 
121         .nav li:hover {
122             background-position-y: -48px;
123         }
124 
125 
126     </style>
127 
128 
129 </head>
130 <body>
131 
132 
133 <div class="header"></div>
134 
135 
136 <ul class="nav">
137     <li></li>
138     <li></li>
139     <li></li>
140     <li></li>
141     <li></li>
142     <li></li>
143     <li></li>
144 </ul>
145 
146 <div class="body"></div>
147 
148 
149 </body>
150 </html>

浮動布局案例

14 盒模型

margin: 外邊距,控制居上 margin-top 居左 margin-left 的距離
border: 邊框 1px solid black
padding: 內邊距, 將內容"內擠", 本質在content與border區域之間添加了留白區域
content: width * height

盒模型邊框設定

15 浮動

'''
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

# 浮動: 讓原來一行一行排列顯示的標簽 同行顯示
li {
    float: left|right;
}
# 清浮動: 讓父級適應子級所需的高度
ul:after {
    content: "";
    display: block;
    clear: both;
}


<a></a>
# a默認為inline,inline不支持寬高,要設置a的寬高,必須改變a的顯示方式為block
a {
    display: block;
}
'''

浮動

16 reset重置css系統默認樣式

body, h1, h2, h3, ul {
    margin: 0;
    padding: 0;
}
ul {
    /*列表樣式*/
    list-style: none;
}
a {
    color: black;
    /*字體划線*/
    text-decoration: none;
}

reset

17 定位布局

'''
# 參照父級定位: 父相子絕
# 注意: 父子都必須設置自身寬高
.sup {
    position: relative;
}
.sub {
    position: absolute;
    /*通過 top|left|right|bottom 四個方位參照父級的四邊進行位置調整*/
    /*上下取上 左右取左*/
    
    /*通過z-index修改顯示層級(圖層發生重疊了)*/
}

# 參照窗口定位: 固定定位
.dc {
    position: fixed;
    /*通過 top|left|right|bottom 四個方位參照父級的窗口進行位置調整*/
    /*上下取上 左右取左*/
    
    /*通過z-index修改顯示層級(圖層發生重疊了)*/
}

'''

定位布局，父相子絕

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 web框架之Bootstrap基本使用(python3入門) 06. Web大前端時代之：HTML5+CSS3入門系列~HTML5 畫布 Python3 之 Web 框架：web框架的本質 HTML5和Web前端有什么區別？移動HTML5前端框架—MUI Web 前端開發精華文章推薦（HTML5、CSS3、jQuery）【系列二十二】 Python-WEB前端-入門到進階開發之路面向移動設備的HTML5開發框架基於Html5的移動端APP開發框架 HTML5移動Web開發（七）——通過界面圖標啟動Web應用