<menu id="u2y6m"></menu>
<tt id="u2y6m"><rt id="u2y6m"></rt></tt>
  • <input id="u2y6m"></input><tt id="u2y6m"><blockquote id="u2y6m"></blockquote></tt>
    <bdo id="u2y6m"><small id="u2y6m"></small></bdo>
  • <blockquote id="u2y6m"><optgroup id="u2y6m"></optgroup></blockquote>
  • 溫馨提示×

    CSS基礎和實例(上)

    發布時間:2020-08-10 21:47:17 來源:網絡 閱讀:570 作者:beanxyz 欄目:開發技術

    上一篇簡單的過了一遍HTML的常用標簽,這一篇繼續CSS。


    例1 CSS的標簽選擇器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--<link rel="stylesheet" href="common.css" />-->
        <style>
            /*標簽選擇器,找到所有的標簽應用以下樣式*/
            div{
                color: green;
            }
            /*id選擇器,找到標簽id等于i1的標簽,應用以下樣式*/
            #i1{
                font-size: 56px;
                /* color: green; */
            }
            /*class選擇器,找到class=c1的所有標簽,應用一下樣式*/
            .c1{
                background-color: red;
            }
            /*層級選擇器,找到 class=c2 下的div下的p下的class=c3標簽,應用以下樣式*/
            /*.c2 div p a{*/
                /**/
            /*}*/
            .c2 div p .c3{
                background-color: red;
            }
            /*組合選擇器,找到class=c4,class=c5,class=c6,的標簽,應用以下樣式*/
            .c4,.c5,.c6{
                background-color: aqua;
            }
        </style>
    </head>
    <body>
        <div class="c4">1</div>
        <div class="c5">1</div>
        <div class="c6">1</div>
        <div class="c2">
            <div></div>
            <div>
                <p>
                    <span>oo</span>
                    <a class="c3">uu</a>
                </p>
            </div>
        </div>
        <div class="c3">sdfsdf</div>
        <span class="c1">1</span>
        <div class="c1">2</div>
        <a class="c1">3</a>
        <a id="i1">baidu</a>
        <div>99</div>
        <div>99</div>
        <div>99</div>
        <div>
            <div>asdf</div>
        </div>
    </body>
    </html>

    CSS基礎和實例(上)



    例2 加載CSS文件

    創建一個css文件,把style內容寫進去


    CSS基礎和實例(上)

    CSS基礎和實例(上)

    在html文件里面導入這個css文件,效果和直接寫是一樣的

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="common.css" />
    </head>
    <body>
        <div>asdfasdfsdf</div>
    </body>
    </html>



    CSS基礎和實例(上)


    例3 float的使用

    如果不用float,那么因為<div>是塊級標簽,他會自動變成兩行,使用float之后,漂浮起來變成一行,具體的理解是,css是分層級的,一個是標準層,一個是浮動層;他float之后就漂浮到標準標簽的外面的一層了(浮動層),那么這個float的標簽后面的標簽,如果沒有float的話,會自動往上跑(標準層),這樣的結果有可能導致浮動的標簽遮擋了后面沒有浮動的標簽。同時這個float的標簽如果他的上面是一個標準的標簽,他會自動緊貼上面;如果他的上面是一個浮動的,他會跟著浮動到同一行,如果塞不下才會跑到下面一行。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .c1{
                color: red;
                /*background-color: #FF69B4;*/
                /*background-color: rgb(25,180,10);*/
                /*background-color: red;*/
                font-size: 32px;
                height: 150px;
                width: 500px; /* 按照父親相對占比*/
            }
        </style>
    </head>
    <body>
        <div class="c1">test1</div>
        <div >
            <div >test2</div>
            <div >test3</div>
        </div>
    </body>
    </html>


    CSS基礎和實例(上)


    例4. 加載背景圖片

    使用背景圖片的時候需要指定高度,寬帶;一個使用技巧是通過Chrome的F12,可以滾輪編輯數字像素


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .img{
                background-p_w_picpath: url("4.gif");
                height: 200px;
                width: 400px;
                background-repeat: no-repeat;
            }
            .img2{
                background-p_w_picpath: url("2.jpg");
                height: 50px;
                width: 50px;
                background-position: 84px -58px;
            }
        </style>
    </head>
    <body>
        <div class="img"></div>
        <div class="img2"></div>
    </body>
    </html>

    CSS基礎和實例(上)

    CSS基礎和實例(上)



    列5 邊距

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div >
            <div ></div>
        </div>
        <div >
            <div >
                <input />
                <input />
                <input />
            </div>
        </div>
    </body>
    </html>


    注意那三個input距離上邊和左邊的距離

    CSS基礎和實例(上)


    列6 clear的使用

    clear可以禁止float, 默認一個float的標簽后面跟著的標簽會跟著float起來,可以指定clear來控制是否漂浮

    這里有一個很不錯的文章解釋了float和clear的使用

    前面已經說了

    假如某個div元素A是浮動的,如果A元素上一個元素也是浮動的,那么A元素會跟隨在上一個元素的(如果一行放不下這兩個元素,那么A元素會被擠到下一行);如果A元素上一個元素是標準流中的元素,那么A的相對垂直位置不會改變,也就是說A的頂部總是和上一個元素的底部對齊。如果使用了clear,那么在float那一層里面 他會把橫向排列的div再變成縱向的,但是不影響標準層的排列

    http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html


    例如;紅色

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    </body>
    </html>

    CSS基礎和實例(上)



    例7 position的使用 首先看fixed的使用,固定標簽在屏幕的某個位置,即使拖動滾輪 他也在那里不會動。fixed以后,效果和float類似,他就漂浮起來了(想象立體空間),這樣導致他后面的div會自動往上跑,造成一部分遮擋??梢酝ㄟ^調整margin來正常顯示

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div ></div>
        <div >返回頂部</div>
    </body>
    </html>

    CSS基礎和實例(上)


    例8 position的使用場景2,外面使用relative,里面用absolute,這樣的可以保證 111始終在父div的固定位置, 這個absolute的位置可以為正數,也可以為負數(跑出去邊框)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div >
            <div >
                <div >111</div>
            </div>
        </div>
    </body>
    </html>

    CSS基礎和實例(上)


    例9加載圖片,和背景圖使用類似,也需要指定高度和寬度

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <img src="2.jpg" >
    </body>
    </html>


    例10 一個模擬對話框的界面

    • display:none 隱藏標簽

    • 如果希望實現彈出框一個居中的效果,可以指定top: 50%,left:50%,這樣左上角就居中了,然后根據彈出框的尺寸,左移動一半,下移動一半

    • 如有多層,可以指定z-index來覺得誰在誰上面,z-index越大,這個div就越在上面


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .hide {
                display: none;
            }
            .modal{
                width: 400px;
                height: 300px;
                background-color: #dddddd;
                position: fixed;
                top: 50%;
                left: 50%;
                margin-left: -200px;
                margin-top: -150px;
                z-index: 10;
            }
            .shadow{
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                /*background-color: black;*/
                /*opacity: 0.4;*/
                background-color: rgba(0,0,0,.6);
                 z-index: 9;
            }
        </style>
    </head>
    <body>
        <input type="button" value="添加" />
        <div class="shadow"></div>
        <div class="modal">
            <input type="text"/>
            <input type="text"/>
            <input type="text"/>
            <input type="text"/>
        </div>
        <div >
        </div>
    </body>
    </html>

    CSS基礎和實例(上)

    例11. 菜單高亮效果

    布局一般分為三大塊:header,body和foot

    根據需求可以left float或者right float

    cursor是鼠標放上去的效果

    .w里面 margin:0 auto可以保證在拖曳瀏覽器大小的時候,整個頁面始終居中顯示

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                margin: 0;
            }
            ul{
                margin: 0;
                list-style-type: none;
            }
            ul li{
                float: left;
                padding: 0 8px 0 8px;
                color: white;
                cursor: pointer;
            }
            /*當鼠標移動到li標簽上時,自動應用以下樣式*/
            ul li:hover{
                background-color: blueviolet;
            }
            .pg-header{
                height: 44px;
                background-color: #2459a2;
                line-height: 44px;
            }
            .w{
                width: 980px;
                margin: 0 auto;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="pg-header">
            <div class="w">
                <ul>
                    <li>菜單一</li>
                    <li>菜單二</li>
                    <li>菜單三</li>
                    <li>菜單三</li>
                    <li>菜單三</li>
                    <li>菜單三</li>
                    <li>菜單三</li>
                    <li>菜單三</li>
                </ul>
            </div>
        </div>
        <div class="pg-body"></div>
        <div class="pg-footer"></div>
    </body>
    </html>

    CSS基礎和實例(上)

    免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

    css
    免費撥打  400 100 2938 免費撥打 400 100 2938
    24小時售后技術支持 24小時售后技術支持
    返回頂部 返回頂部
    <menu id="u2y6m"></menu>
    <tt id="u2y6m"><rt id="u2y6m"></rt></tt>
  • <input id="u2y6m"></input><tt id="u2y6m"><blockquote id="u2y6m"></blockquote></tt>
    <bdo id="u2y6m"><small id="u2y6m"></small></bdo>
  • <blockquote id="u2y6m"><optgroup id="u2y6m"></optgroup></blockquote>
  • 一本久道久久综合丁香五月_免费视频禁止18以下禁止观看_日本japanese熟睡人妻_成熟闷骚女邻居引诱2