javaweb基礎學習—— css

時間 2019-11-18

標籤 javaweb 基礎學習 css 欄目 Java 简体版

原文原文鏈接

1css

導入方式：(優先級：離的越近，優先級越高。導入樣式優先級最低)

內部樣式，
行內樣式，
外部樣式，
導入樣式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div,p,h1{
            /*寬度*/
            width:100px;
            /*高度*/
            height:100px;
            /*背景顏色*/
            background-color:yellow;
        }
    </style>
    <link href="css.css" rel="stylesheet" type="text/css">
    <style>
        @import "css.css";
    </style>
</head>
<body>
    <div style="width: 100px;height: 100px;background-color: aliceblue">呵呵</div>
    <p>換行</p>
    <h1>asd</h1>
</body>
</html>

View Code

2html

選擇器：
元素選擇符：通配符，類選擇器，id選擇器，類型選擇器 （*在IE中不表明通配符，而是表明根元素）
關係選擇符：子元素選擇器，兄弟元素選擇器，相鄰選擇器，包含選擇器。
屬性選擇符：當前元素[屬性=「屬性值」]{}
僞類選擇符：（給html標籤的某種狀態設置樣式）元素:link{}設置超連接被訪問前的樣式，元素：visited{}設置超連接地址被訪問以後的樣式，
                hover：設置元素在鼠標懸停時的樣式。active：設置元素被用戶激活時的樣式
            注意：a:hover要位於a:link以及a:visited以後，a:active必須位於a:hoverzhihou
            較爲可靠的順序是：link visited hover active  利用love hate，即喜歡與討厭來記憶
選擇器的優先級：！important>內聯>ID>類>標籤|僞類|屬性選擇器>僞對象>繼承>通配符
            注意：！important要寫在屬性值的後面，分號的前面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css-1.css" type="text/css">
    <style>
        a[href]{
            color:#66ccff;
        }
    </style>
    <style>
        ul li a:link {
            color: yellow;
        }
        ul li a:visited{
            color: blue;
        }
        ul li a:hover{
            color: #66ccff;
        }
        ul li a:active{
            color: red;
        }
    </style>

    <style>
        span{
            color: yellow !important;
        }
        p span{
            color: blue;
        }
        p  .ha{
            color: red;
        }
        p #ha{
            color: #66ccff;
        }

    </style>
</head>
<body>
    <a href="www.baidu.com">百度一下</a>
    <a>百度一下</a>
    <p>123</p>
    <p class="hp">456</p>
    <p id="hs">789</p>
    <ul>
        <li>
            這是列表
        </li>
        <li>
            這是列表
        </li>
        <li>
            這是列表
        </li>
    </ul>
    <ul>
        <li>
            <a href="#">僞類選擇符</a>
        </li>
    </ul>
    <p>
        <span class="ha" id="ha">
            14548946123

        </span>
    </p>
</body>

View Code

元素選擇符
*{
    background-color: #2cf7ff;
    padding: 0px;
    margin: 0px;
    font-family: '微軟雅黑';
}
.hp{
    width: 100px;
    height: 100px;

}
#hs{
    color: aquamarine;
    font-family: '楷體'
}
li{
    color: black;
}

div>p{
/*只選擇子元素*/
}
p~h3{
/*只選擇p標籤後的h3元素*/
}
p+h3{
/*只選擇與p相鄰的h3元素*/
}
ul li{
/*不只選擇ul裏的li元素，還選擇li中的子元素*/
}

View Code

3web

背景：
backgr-attachment:背景圖像是否固定或隨着頁面的其他部分滾動
background-color:設置背景顏色
background-image:把圖片設置爲背景
background-position:設置背景的起始位置
background-repeat:設置背景是否以及如何重複

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            /*background-color: #66ccff;*/
            /*background-image: url("");*/
            /*background-repeat: no-repeat;*/
            /*background-position:  ;*/
            /*background-attachment: fixed;*/
            background: url("") no-repeat fixed;
        }
        div{

        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

View Code

邊框：
border-width 邊框寬度
border-style 邊框樣式
border-radius 設置圓角邊框
box-shadow 設置對象陰影
border-image 邊框背景圖片

顏色：
Color Name，HEX，RGB，RGBA，透明色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            width: 200px;
            height: 100px;
            background-color: #66ccff;
            border-width: 5px;
            border-color: yellow;
            border-style: solid;
            border-radius:10px;
            box-shadow: 5px 5px 10px rgba(0,0,0,0.2);/*水平位移，垂直位移，模糊度，顏色*/
        }
    </style>
</head>
<body>
    <div class="container">

    </div>

</body>
</html>

View Code

4api

字體：
font 複合屬性
font-style 設置字體樣式
font-size 設置字體大小
font-weight 設置字體粗細
font-family 設置文本的字體名稱
注意：能夠使用本地不存在的字體，利用@font-face加入便可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            font-size: 30px;
            font-style: italic;
            font-weight: 700/*bold*/;
            font-family: Arial;

        }
        @font-face {
            font-family: myfont;
            src :url("");
        }
        p{
            font-family: myfont;
        }
        p{
            font: italic bold 100px fantasy;
        }
    </style>
</head>
<body>
    <p>hello world!!</p>
</body>
</html>

View Code

文本：
color 文本顏色
text-align 文本水平對齊方式
vertical-align 垂直對齊方式
line-height 行高（能夠使單行文本進行垂直居中）
text-transform 設置文本大小寫（通常用來規範英文文本的書寫狀況）
text-indent 文本縮進（單位 em是指當前文本大小）

文本裝飾：
text-decoration 複合屬性
text-decoration-line 文本裝飾線條的位置
text-decoration-color 文本裝飾線條的顏色
text-decoration-style 文本裝飾線條的形狀
text-shadow 文本陰影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="text.css" type="text/css">
</head>
<body>
    <p>文字顏色字顏色字顏色字顏色字顏色字顏色字顏色字顏色字顏色字顏色字顏色字顏色字顏色字顏色字顏色字顏色字顏色字顏色字顏色字顏色測試</p>
    <div>
        垂直居中
    </div>
    <p class="123">文本裝飾線條</p>
</body>
</html>

View Code

body{
    color:red;
}
p{
    width:300px;
    height: 200px;
    background-color: #66ccff;
    text-align: left;
    text-indent: 2em;

}
#a{
    text-transform: capitalize;
    text-transform: uppercase;
    text-transform: lowercase;

}
div{
    width: 300px;
    height: 200px;
    background-color: aquamarine;
    font-size: 20px;
    line-height: 200px;
}
p{
    text-decoration-line: underline;
    text-decoration-color: #66ccff ;
    text-decoration-style: wavy;

    text-shadow: 5px 5px 5px yellow;
}

View Code

5瀏覽器

列表：
list-style-type：列表類型（列表前爲圓點仍是方點仍是數字）
list-style-image:列表項圖像
list-style-position：列表標誌位置
list-style：複合屬性

表格：
border：表格的邊框（參數分別爲：寬度，類型，顏色）
border-collapse：合併或使邊框獨立
td中設置width以及height，padding
text-align：文本對齊
td中設置background-color：設置表格的背景顏色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="list.css" type="text/css" />

</head>
<body>
    <ul>
        <li>列表元素</li>
        <li>列表元素</li>
        <li>列表元素</li>
    </ul>
    <table border="1px solid blue">
        <tr>
            <td>姓名</td>
            <td>年齡</td>
            <td>性別</td>
        </tr><tr>
            <td>姓名</td>
            <td>年齡</td>
            <td>性別</td>
        </tr><tr>
            <td>姓名</td>
            <td>年齡</td>
            <td>性別</td>
        </tr>
    </table>
</body>
</html>

View Code

ul li{
    list-style-type: decimal;
    list-style-image: url("li.png");
    margin-left: 200px ;
    width: 200px;
    list-style-position: inside;
}
table{
    border-collapse: collapse;
    border-color: #66ccff;
}
td{
    width: 200px;
    height: 200px;
    /*padding-left: 10px;*/
    text-align: center;
    background-color: #66ccff;
}

View Code

6app

塊級元素：
特色： 每一個塊級元素都重新的一行開始，且其後面的元素也另起一行
        元素的高度，寬度，行高以及頂和底邊距均可以設置
        元素寬度在不設置的狀況下，與其父親容器相同
能夠設置display：block可將元素顯示爲塊級元素。

內聯元素：
特色：與其餘非塊級元素在一行
        元素的高度，寬度以及頂部和底部邊距不可設置
        元素的寬度就是它包含的文字或者圖片的寬度，不可改變
能夠設置display：inline將元素顯示爲內聯元素。

內聯塊級元素：
經常使用/*<img> <input>*/
特色：和其餘非塊級元素在一行
        元素的高度，寬度，行高以及頂部和底部的邊距能夠設置
能夠設置display：inline-block將元素設置爲內聯塊級元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="app.css" type="text/css"/>
</head>
<body>
    <div class="one">我是div</div>
    <div class="two">我是div
    <p>很好</p>
    </div>
    <span>我是內聯元素</span>
    <a href="#">我是a</a>
</body>
</html>

View Code

div{
    width: 100px;
    height: 100px;
    display: inline;
}
.one{
    background-color: #66ccff;
}

.two{
    background-color: antiquewhite;
}
span{
    background-color: #66ccff;
    display: block;
}

View Code

7ide

盒子模型

內容：content，padding,border,margin

分類：
    標準盒：正常盒模型。怪異盒模型
    伸縮盒：新，舊

內邊距：padding
在content以外，邊框內
邊框：border
border-width 邊框寬度
border-style 邊框樣式
border-radius 設置圓角邊框
box-shadow 設置對象陰影
border-image 邊框背景圖片
外邊距：margin
圍繞在內容邊框的區域就是外邊距，外邊距默認爲透明區域
外邊距接受任何長度單位以及百分數值
注意：外邊距合併（取相鄰元素外邊距較大的值）

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            padding: 5px;
            border: 5px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div>
        哈哈哈哈
    </div>

</body>
</html>

View Code

怪異盒子模型：將盒子模型的初始padding+margin+content固定爲width與height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: #66ccff;
            padding: 20px;
            border: 1px solid bisque;
            box-sizing: border-box;
        }
        .content{
            width: 100px;
            height:100px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content">

        </div>
    </div>

</body>
</html>

View Code

伸縮盒（舊）
box-orient：伸縮盒對象子元素的排列方式
box-pack：垂直居中
box-align：水平居中
box-flex：伸縮盒對象子元素如何分配其剩餘空間
box-direction：伸縮盒對象的子元素的排列順序是否進行反轉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" href="flexbox.css" type="text/css">-->
    <style>
        .container{
            width: 600px;
            height: 600px;
            background-color: #66ccff;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-box-pack: center;
            -webkit-box-align: center;
            -webkit-box-direction: reverse;
        }
        .one{
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
            -webkit-box-flex: 3;
        }
        .two{

            width: 100px;
            height: 100px;
            background-color: pink;
            -webkit-box-flex: 2;

        }
        .three{
            width: 100px;
            height: 100px;
            background-color: #6fc9fa;
            -webkit-box-flex: 1;
        }
        /*display: -webkit-box; 將元素變成（舊）盒子*/
    </style>
</head>
<body>
    <div class="container">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>

    </div>

</body>
</html>

View Code

伸縮盒（新）
display: -webkit-flex; 變成（新）盒子
flex：複合屬性
flex-grow 按比例分配
flex-flow複合屬性，設置伸縮盒對象的子元素排列方式
flex-direction 伸縮盒對象在父容器中的位置
flex-wrap： 設置伸縮盒對象的子元素超出父容器時是否換行
order：設置伸縮盒對象的子元素出現的順序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            width: 600px;
            height: 600px;
            background-color: #66ccff;
            display: -webkit-flex;
            /*變成盒子*/
            -webkit-flex-direction: row;
            -webkit-flex-flow: wrap;

        }
        .one{
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
            -webkit-flex-grow: 1;
            -webkit-order:3;
        }
        .two{

            width: 100px;
            height: 100px;
            background-color: pink;
            -webkit-flex-grow: 1;
            -webkit-order:2;


        }
        .three{
            width: 100px;
            height: 100px;
            background-color: #3ffa72;
            -webkit-flex-grow: 1;
            -webkit-order:1;

        }
    </style>
</head>
<body>
    <div class="container">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>

</body>
</html>

View Code

8測試

position 把元素放到靜態的，相對的，絕對的或者固定的位置中
top    元素向上的偏移量
left   元素向左的偏移量
right  元素向右的偏移量
bottom  元素向下的偏移量
z-index 設置元素的堆疊順序
CSS position屬性：
static:對象遵循常規流。此時四個定位偏移屬性不會被應用
relative：對象遵循常規流，而且參照常規流中的位置經過top，right，bottom，left這四個定位偏移屬性進行偏移，不影響常規流中的任何元素
absolute：對象脫離常規流，其實偏移屬性參照的是離自身最近的定位祖先元素，若是沒有定位祖先元素，則一直回溯到body元素，其margin不與其餘任何margin摺疊
fixed：與absolute一致，但偏移定位是以窗口爲參考。出現滾動條時對象不會碎着滾動。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        .one{
            width: 100px;
            height: 100px;
            background-color: #66ccff;
            position: relative;
            z-index: -1;
        }
    </style>
</head>
<body>
    <div class="one">哈哈哈哈</div>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>
    <p> 11111111111111111111111111111111111111111111111111111</p>

</body>
</html>

View Code

9字體

浮動：
float：  left
        right
        none
        inherit 從父級繼承浮動屬性
注意：float在絕對定位和display爲none時不生效（此時該元素被去除）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .one{
            float: left;
            background-color: #66ccff;
        }
        .two{
            background-color: #3ffa72;
        }
        .three{
            background-color: bisque;
        }
        .container{
            width: 600px;
            height: 600px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>

    </div>
</body>
</html>

View Code

clear屬性：
去掉浮動值，包括繼承來的屬性
屬性值與float相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .text1{
            float: right;
            background-color: #66ccff;

        }
        .text2{
            clear: right;
            background-color: #3ffa72;
        }
    </style>
</head>
<body>
    <div class="text1">1</div>
    <div class="text2">2</div>

</body>
</html>

View Code

9flex

visibility:
設置是否顯示對象，此屬性是爲隱藏的對象保留其所佔據的物理空間，與display：none不一樣
但願對象可視，則其父對象也必須可視
屬性值：visibel
        hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: #66ccff;
            visibility: visible;
        }

    </style>
</head>
<body>
    <div class="one">你們好</div>

</body>
</html>

View Code

overflow
複合屬性，設置對象處理溢出內容的方式，效果等同overflow-x+overflow-y
屬性值：visible：對溢出的內容不作處理，內容可能會超出容器（默認）
        hidden：隱藏溢出的內容
        scroll：隱藏溢出的內容，溢出的內容以滾動條的方式出現
        auto：按需以爲是否出現滾動條。（此爲body對象以及textarea的默認值）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            width: 200px;
            height: 200px;
            overflow: scroll;
        }
    </style>
</head>
<body>
    <div class="content">你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好你們好</div>

</body>
</html>

View Code

2D,3D轉換

2D：translate，rotate，scale，skew
3D：rotateX，rotateY

瀏覽器內核：
Chrome/Safari     Webkit
Firefox           moz
Presto            o
IE                ms

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: #66ccff;
        }
        .change{
            transform: translate(100px,200px);
            transform: rotate(30deg);
            transform: scale(2.3);
            transform: skew(50deg,50deg);
            transform: rotateX(120deg);
            transform: rotateY(120deg);
        }
    </style>
</head>
<body>
    <div > 初始</div>
    <div class="change"> 變換後</div>
</body>
</html>

View Code

過渡：


transition   複合屬性
transition-property  應用過渡的css屬性的名稱
transition-duration  定義過渡效果花費的時間，默認0
transition-timing-function  規定過渡效果的時間曲線。默認爲ease
            取值： linear      線性過渡
                    ease        平滑過渡
                    ease-in     由慢到快
                    ease-out    由快到慢
                    ease-in-out 由慢到快再到慢
transition-delay     規定過渡效果的延遲時間，默認0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: #66ccff;
            transition: background-color 2s linear;
        }
        .one:hover{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="one"> 效果</div>

</body>
</html>

View Code

動畫：
animation 複合屬性
animation-name 檢索或者設置對象所應用的動畫名稱
animation-duration 檢索或者設置對象動畫的持續時間
animation-timing-function 檢索或者設置對象動畫的過渡類型
animmation-delay 檢索或者設置對象動畫的延遲時間
animation-iteration-count 檢索或者設置對象動畫出的循環次數。infinite 無線循環
animation-direction  檢索或者設置對象動畫在循環中是否反向運動。normal 正常方向  alternate 正反交替

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: #66ccff;
            animation-name :cartoon;
            /*animation-duration:5s;*/
            /*animation-timing-function: linear;*/
            /*animation-delay:2s;*/
            /*border-radius: 5px;*/
            /*animation-iteration-count: infinite;*/
            /*animation-direction: alternate;*/
            animation: cartoon 2s linear 2s infinite alternate;
        }
        @keyframes cartoon {
            0%{
                transform: rotate(0deg);
                background-color: yellow;
            }
            25%{
                transform: rotate(90deg);
                background-color: brown;
            }
            50%{
                transform: rotate(180deg);
                background-color: #3ffa72;
            }
            75%{
                transform: rotate(270deg);
                background-color: bisque;
            }
            100%{
                transform: rotate(360deg);
                background-color: #66ccff;
            }
        }
    </style>
</head>
<body>
    <div class="one">
        效果
    </div>

</body>
</html>

View Code

多列：
columns 複合屬性
column-width 每列的寬度
column-count 列數
column-gap  列與列之間的間隙

column-rule 列與列之間的邊框   複合屬性
column-rule-width 列與列之間的邊框厚度
column-rule-style 列與列之間的邊框樣式
column-rule-color 列與列之間的邊框顏色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            /*-webkit-column-count: 2;*/
            /*-webkit-column-width:500px ;*/
            -webkit-columns: 2 500px;
            /*-webkit-column-rule-style: solid;*/
            /*-webkit-column-rule-color: #66ccff;*/
            -webkit-column-rule: 5px solid #66ccff ;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="one">
            <img src="1.png"width="300px">
            選項卡管理：
            經過執行js命令實現新開選項卡window.open()
            不一樣的選項卡是存在列表裏browser.window_handles
            經過browser.window_handles[0]就能夠操做第一個選項卡
        </div>
         <div class="two">
            <img src="1.png"width="300px">
            選項卡管理：
            經過執行js命令實現新開選項卡window.open()
            不一樣的選項卡是存在列表裏browser.window_handles
            經過browser.window_handles[0]就能夠操做第一個選項卡
        </div>

    </div>

</body>
</html>

View Code

CSS Hack :針對不一樣的瀏覽器或者不一樣版本的瀏覽器寫相應的css代碼的過程

實現形式：

css屬性前綴法：在css樣式屬性名前加上一些只有特定瀏覽器才能識別的hack前綴
- IE6
* IE7
\9  IE6`10
\0  IE8`10
\9\0 IE9和IE10

選擇器前綴法：在css選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進行hack
*html IE6
*+html IE7

IE條件註釋法：（IE10+再也不支持條件註釋）
<!-- [if IE]>
這段文字只在IE瀏覽器中顯示
<![endif]-->
<!-- [if IE 6]>
這段文字只在IE6瀏覽器中顯示
<![endif]-->
<!-- [if gte IE 6]>
這段文字只在IE6以上版本瀏覽器中顯示
<![endif]-->
<!-- [if ！ IE 8]>
這段文字不在IE8瀏覽器中顯示
<![endif]-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: #66ccff;
        }
        .two{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="one">111111</div>
    <div class="two">111111</div>
</body>
</html>

View Code

媒體查詢

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;

        }
        /*.d1{*/
            /*width: 100%;*/
            /*height: 800px;*/
            /*background-color: #66ccff;*/
        /*}*/
        @media screen and(max-width: 640px){
            .d1{
                width: 100%;
                height: 800px;
                background-color: #66ccff;
            }

        }

        @media screen and(min-width: 800px) {
            .d1 {
                width: 100%;
                height: 800px;
                background-color: green;
            }
        }
        @media  screen and (min-width: 640px)  and(max-width: 800px){
              .d1{
                  width: 100%;
                  height: 800px;
                  background-color: red;
              }
        }


    </style>
</head>
<body>
    <div class="d1">

    </div>

</body>
</html>

View Code

居中方式：
margin：0 auto（將一個塊級元素居中）

文字居中:line-height;text-align;center（將塊級元素之間的文字居中）

由table演變來的居中：
display:table(將外部聲明爲表格)

display: table-cell;（將文字所在p標籤設置爲單元格）
text-align: center;
vertical-align: middle;

利用伸縮盒：display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;

        }
        .container{
            width: 100%;
            min-width: 996px;
            height: 70px;
            background-color: #66ccff;

        }
        .header{
            width: 80%;
            min-width: 996px;
            height: 50px;
            background-color: #3ffa72;
            margin: 0px auto;
            text-align: center;
            line-height: 50px;

        }
        ul li{
            display: inline-block;

        }
        .two{
            display: table;
            width: 200px;
            height: 200px;
            background-color: green;
        }
        p{
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        .outer{
            display: -webkit-box;
            width: 200px;
            height: 200px;
            background-color: yellow;
            -webkit-box-align: center;
            -webkit-box-pack: center;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: #3ffa72;
            display: -webkit-box;
            -webkit-box-align: center;
            -webkit-box-pack: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <ul>
                <li>列表</li>
                <li>列表</li>
                <li>列表</li>
            </ul>
        </div>
    </div>
    <div class="one">
        <div class="two">
          <p>哈哈哈</p>
        </div>
    </div>
    <div class="outer">
        <div class="inner">
          哈哈哈
        </div>
    </div>

</body>
</html>