HTML css

時間  2019-12-15
標籤 html css 欄目 HTML 简体版
原文   原文鏈接

1、總體佈局javascript

一、建立一個html標籤css

二、建立三個div標籤（分別是網頁的頭部，中間，和底部三部分）html

三、通常都用class選擇器java

四、用css給body標籤加個 margin:0（用於消除body邊框和瀏覽器間的空白部分）瀏覽器

五、使div（塊狀）標籤居中---------->先定義寬度，高度----------->margin:0 auto(自動離倆邊距離相同)ide

六、list-style: none; 去除無序列表前面的符號（不能除去有序列表的）佈局

七、padding：(1)上   (2)右   (3)下    (4)左             padding：(1)上下     (2) 左右字體

八、去掉a標籤下面的下劃線------------------>text-decoration = nonespa

九、設置圖片的高度用margin-top = xxxpx；插件

十、line-height = 行高  ------------>文本上下居中

十一、text-again = center------------>文本左右居中

十二、設置透明度方法：一、opacity：0-1

　　　　　　　　　　 二、background：rgba（0,0,0,0-1）

1三、absolute 絕對定位，若是父標籤中有reverse ，則相對於父標籤進行定位，若是沒有，則相對於body標籤進行定位，脫離文檔流，其下面的部分會頂上去

1四、cursor: pointer;  變小手

2、標籤種類

 dispaly:inline 變內聯標籤   ----------沒法使用高度，寬度

display:block  變塊級標籤

display:inline-block 變內聯標籤 -----可使用高度，寬度

3、頁面中的小圖標（其實是經過一面牆上的洞看圖片中的圖標，咱們能夠經過調節洞的大小和圖片的位置來顯示不一樣的樣式）

一、先定義洞口的大小  width：18px   height：16px

二、經過backgroud-position：值1  值2   經過調整值1，值2的大小來移動位置來獲得不一樣的圖片

4、z-index 在同一位置定義倆標籤（都釘住，那麼後面的標籤會把前面的標籤覆蓋掉，這樣咱們就能夠用z-index=xx的大小來決定位置）

<div style="position: fixed; left:0; right:0;height: 50px; "></div>

<div style="position: fixed; left:0; right:0;height: 50px; "></div>

5、子類漂浮，父類背景消失問題（因爲子類漂浮，沒法支撐起父類）

    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .w{
            background-color: gold;
        }
        .w .item{
            float: left;
        }
    </style>
</head>
<body>
    <div class="w">
        <div class="item">111</div>
        <div class="item">222</div>
    </div>
</body>
</html>
子類漂浮，父類背景無

解決方法一：再新加一個標籤，樣式設置成clear = both

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .w{
            background-color: gold;
        }
        .w .item{
            float: left;
        }
    </style>
</head>
<body>
    <div class="w">
        <div class="item">111</div>
        <div class="item">222</div>
        <div style="clear: both"></div>
    </div>
</body>
</html>
加clear = both

解決方法二：利用僞類

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .w{
            background-color: gold;
        }
        .w .item{
            float: left;
        }
        .w:after{
            content: "777";  #在標籤後面加一個內聯標籤
            display: block;  #設置成塊級標籤，讓其換行
            clear: both;     
            visibility: hidden;  #隱藏掉添加的部分
        }
    </style>
</head>
<body>
    <div class="w">
        <div class="item">111</div>
        <div class="item">222</div>
    </div>
</body>
</html>
利用僞類

6、hover

一、hover後加選擇器點上去之後倆個不一樣的東西同時變化的狀況

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 300px;
            height: 50px;
            border: 2px solid transparent;
        }
        .c1:hover{   #表示點上去之後c1變化
            border: 2px solid rebeccapurple;      # rebeccapurple爲透明色
        }
        .c1:hover .c2{    #表示點上去之後c1的變化的同時c2變化
            color: #e20052;
        }
    </style>
</head>
<body>
    <div class="c1">
        <span class="c2">123</span>
        <div class="c3">456</div>
    </div>
</body>
</html>
同時變化

static(靜態) 沒有特別的設定，遵循基本的定位規定，不能經過z-index進行層次分級

relative(相對定位) 對象不可層疊、不脫離文檔流，參考自身靜態位置經過 top,bottom,left,right 定位，而且能夠經過z-index進行層次分級。

absolute(絕對定位) 脫離文檔流，經過 top,bottom,left,right 定位。選取其最近一個最有定位設置的父級對象進行絕對定位，若是對象的父級沒有設置定位屬性，absolute元素將以body座標原點進行定位，能夠經過z-index進行層次分級。

fixed（固定定位） 這裏所固定的參照對像是可視窗口而並不是是body或是父級元素。可經過z-index進行層次分級。

二、鼠標點上去換背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            position: relative;
            width: 200px;
            height: 200px;
            overflow: hidden;
        }
        .c2{
            position: absolute;   #設置之後脫離文檔流
            left: 0;
            right: 0;               #對c1進行絕對定位，上下左右邊距都爲0，就設置成了一個和c1面積同樣大小
            top: 0;
            bottom: 0;
            background: rgba(0,0,0, 0.7);   #設置背景色以及透明度
            visibility: hidden;             #隱藏這部分
        }
        .c1:hover .c2{                      # 點上c1後c2變化
            visibility: visible;            #鼠標點到c1上後c2顯示
        }
        .c2{
            padding-left: 30px;
            padding-top: 10px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="c1">
        <img src="1.png" alt="">
        <div class="c2">
            <div class="c3">ALEX</div>
            <div class="c4">1000</div>
        </div>
    </div>
</body>
</html>
覆蓋

7、小三角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            display: inline-block;
            border-left: 30px solid saddlebrown;
            border-right: 30px solid red;
            border-top: 30px solid yellow;
            border-bottom: 30px solid firebrick;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>
小尖角 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .up{
            display: inline-block;
            border: 30px solid transparent;
            border-bottom: 30px solid firebrick;
        }
        .up:hover{
            display: inline-block;
            border: 30px solid transparent;
            border-top: 30px solid firebrick;
        }
    </style>
</head>
<body>
    <div class="up"></div>
</body>
</html>
使用僞類出現上下尖角 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .up{
            display: inline-block;
            border: 30px solid transparent;
            border-bottom: 30px solid firebrick;
        }
        .up:hover{
            display: inline-block;
            border: 30px solid transparent;
            border-top: 30px solid firebrick;
            margin-top: 30px;  #保證變化先後在同一位置
        }
    </style>
</head>
<body>
    <div class="up"></div>
</body>
</html>
上下尖角變化實例

對於塊級標籤，margin-top 容許出現負值，一直往上走，能夠脫離屏幕
對於內聯標籤，margin-top不容許出現負值，負值無效，不會脫離屏幕

8、頁面中的小圖標

一、本身用css畫

二、用別人的    http://fontawesome.io/3.2.1/icons/   下載並導入<link rel="stylesheet" href="font-awesome/css/font-awesome.css">

9、目錄格式

HTML文件放到APP中

css樣式文件放到css文件夾中

js文件放到script文件夾中

下載的第三方插件放到plugin中 

10、img默認是有邊框的（若是加在a標籤中間，a標籤中的字體顏色會帶給img的邊框）

解決方法：在樣式中加一個img{border = 0 }  把邊框提早設置爲0

11、樣式的就近原則

若是給同一個標籤的同一類型，設置倆個不一樣的屬性，那麼就按照樣式的就近原則進行渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c2{
            color: #e20052;
        }
        .c1{
            color: gold;  #金色離標籤近，因此使用這裏的樣式
        }
    </style>
</head>
<body>
    <div class="c1 c2">qqqqqqqqqqq</div>
</body>
</html>
就近原則

若是想要是某同樣式不被改變的話，就在樣式中添加 ！important

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c2{
            color: #e20052 !important;
        }
        .c1{
            color: gold;
        }
    </style>
</head>
<body>
    <div class="c1 c2">qqqqqqqqqqq</div>
</body>
</html>
!important

12、佈局

一、對於上圖中的佈局的方法一：固定上面標題部分和左半部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .head{
            position: fixed;
            height: 40px;
            width: 100%;
            background-color: #9f9f9f;
            z-index: 10;    #不定的話不知道誰在上面
        }
        .body .l{
            position: fixed;
            width: 200px;
            background-color: bisque;
            top: 40px;
        }
        .body .r{
            position: absolute;
            left: 210px;
            right: 0;
            top: 40px;
            background-color: black;
            color: white;
        }
    </style>
</head>
<body>
    <div class="head"></div>
    <div class="body">
        <div class="l">
            <div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div>
            <div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div>
            <div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div>
        </div>
        <div class="r">
            <div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>
            <div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>
            <div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>
            <div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>
            <div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>
            <div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>
            <div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>
        </div>
    </div>
    <div class="foot"></div>
</body>
</html>
固定上 左

二、對右半部分進行操做(overflow = "auto")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .head{
            height: 40px;
            width: 100%;
            background-color: #9f9f9f;
        }
        .body .l{
            width: 200px;
            background-color: bisque;
            top: 40px;
        }
        .body .r{
            position: absolute;
            left: 210px;
            right: 0;
            bottom: 0   #爲了給顯示的部分定義一個大小;
            top: 40px;
            background-color: black;
            color: white;
            overflow: auto; #超出的部分進行隱藏，滾動滑輪可見
        }
    </style>
</head>
<body>
    <div class="head"></div>
    <div class="body">
        <div class="l">
            <div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div>
            <div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div>
            <div>1</div><div>1</div><div>1</div><div>1</div><div>1</div><div>1</div>
        </div>
        <div class="r">
            <div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>
            <div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>
            <div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>
            <div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>
            <div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>
            <div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>
            <div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div><div>2</div>
        </div>
    </div>
    <div class="foot"></div>
</body>
</html>
右半部分溢出操做

十3、提示框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .td{
            position: relative;
        }
        .div{
            position: absolute;
            margin-top: 10px;
            margin-left: 20px;
        }
        .inp{
            margin-top: -3px;
            margin-left: -4px;
        }
        .c1{
            position: absolute;
            border: 10px solid transparent;
            border-right: 10px solid darkgrey;
            margin-left: -26px;
            margin-top: 0px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>第一行</td>
            <td>第二行</td>
            <td>第三行</td>
            <td><a href="111">刪除</a></td>
            <td class="td">
                <div class="c1"></div>
                <input class="inp" type="submit" value="肯定">
                <input class="inp" type="submit" value="取消">
            </td>
        </tr>        <tr>
            <td>第一行</td>
            <td>第二行</td>
            <td>第三行</td>
            <td><a href="111">刪除</a></td>

        </tr>        <tr>
            <td>第一行</td>
            <td>第二行</td>
            <td>第三行</td>
            <td><a href="111">刪除</a></td>
        </tr>        <tr>
            <td>第一行</td>
            <td>第二行</td>
            <td>第三行</td>
            <td><a href="111">刪除</a></td>
        </tr>
    </table>
</body>
</html>
提示框

十4、輸入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c{
            position: relative;
        }
        .c .c1{
            width: 150px;
            height: 20px;
            padding-left: 20px;
        }
        .c .c2{
            position: absolute;
            margin-left: 8px;
            margin-top: -22px;
        }
    </style>
</head>
<body>
    <div class="c">
        <input class="c1" type="text">
        <div class="c2">R</div>
    </div>
</body>
</html>
輸入框

十5、模態對話框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c{
            position: fixed;
            left: 0;
            top:0;
            right: 0;
            bottom: 0;
            background:rgba(0,0,0,.7);
        }
        .d{
            position: fixed;
            width: 200px;
            height: 100px;
            background-color: white;
            top: 150px;
            left: 500px;
        }
    </style>
</head>
<body>
<input type="submit" value="模態對話框">
    <div class="c"></div>
    <div class="d">asasasa</div>
</body>
</html>
模態對話框

十6、輸入框加減操做

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{
            height: 30px;
            width: 160px;
            border: 1px solid #dddddd;
        }
        .min{
            height: 30px;
            width: 30px;
            text-align: center;
            line-height: 30px;
            float: left;
            cursor: pointer;
        }
        .max{
            height: 30px;
            width: 30px;
            text-align: center;
            line-height: 30px;
            float: left;
            cursor: pointer;
        }
        .inp1{
            width: 98px;
            height: 30px;
            float: left;
            padding: 0;
            border: 0;
            border-left: 1px solid #dddddd;
            border-right: 1px solid #dddddd;
        }

    </style>
</head>
<body>
    <div class="a">
        <div class="min" onclick="min();">-</div>
        <div class="inp">
            <input id="count" value="0" class="inp1" type="text">
        </div>
        <div class="max" onclick="max();">+</div>
    </div>

    <script type="text/javascript">
        function min() {
            var old_str= document.getElementById("count").value;
            var old_int = parseInt(old_str);
            var new_int = old_int - 1;
            document.getElementById("count").value = new_int
        }
    function max() {
            var old_str= document.getElementById("count").value;
            var old_int = parseInt(old_str);
            var new_int = old_int + 1;
            document.getElementById("count").value = new_int
        }
    </script>
</body>
</html>
輸入框加減
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程