day2_HTML&CSS

時間 2019-11-18

標籤 day2 day html&css html css 欄目 CSS 简体版

原文原文鏈接

案例1：網站註冊頁面html

表單標籤字體

1.表單標籤網站

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表單標籤</title>
    </head>
    <body>
        <form action="#" >
            用戶名：<input type="text" /><br />
            密碼：<input type="password" /><br />
            確認密碼：<input type="password" /><br />
            性別：<input type="radio" name="sex"/>男
            <input type="radio" name="sex"/>女<br />
            愛好：<input type="checkbox" name="hobby"/>釣魚
            <input type="checkbox" name="hobby"/>打電動
            <input type="checkbox" name="hobby"/>寫代碼<br />
            頭像：<input type="file" /><br />
            籍貫：<select name="province">
                <option>--請選擇--</option>
                <option>北京</option>
                <option>上海</option>
                <option>廣州</option>
            </select><br />
            自我介紹：
                <textarea>
                    
                </textarea><br />
            提交按鈕：<input type="submit" value="註冊"/><br />
            普通按鈕：<input type="button" value="zhuce"/><br />
            重置按鈕：<input type="reset" />
        </form>
    </body>
</html>

submit是表單的提交屬性，能夠實現將所在表單的數據進行的提交。ui

2表單標籤屬性spa

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表單標籤屬性介紹</title>
    </head>
    <body>
        <form action="#" method="get">
            隱藏字段:<input type="hidden" name="id" value="" /><br />
            用戶名：<input type="text" name="username" readonly="readonly" value="zhangsan" size="40px" maxlength="5"  placeholder="請輸入用戶名"/><br />
            密碼：<input type="password" name="password" required="required"/><br />
            確認密碼：<input type="password" name="repassword"/><br />
            性別：<input type="radio" name="sex" value="男"/>男
            <input type="radio" name="sex" value="女" checked="checked"/>女<br />
            愛好：<input type="checkbox" name="hobby" value="釣魚"/>釣魚
            <input type="checkbox" name="hobby" value="打電動"/>打電動
            <input type="checkbox" name="hobby" value="寫代碼" checked="checked"/>寫代碼<br />
            頭像：<input type="file" name="file"/><br />
            籍貫：<select name="province">
                <option>--請選擇--</option>
                <option value="北京">北京</option>
                <option value="上海" selected="selected">上海</option>
                <option value="廣州">廣州</option>
            </select><br />
            自我介紹：
                <textarea name="zwjs">
                    
                </textarea><br />
            提交按鈕：<input type="submit" value="註冊"/><br />
            普通按鈕：<input type="button" value="zhuce"/><br />
            重置按鈕：<input type="reset" />
        </form>
    </body>
</html>

將表單標籤加了不少屬性，可能有些屬性咱們不須要。code

案例2：使用DIV+CSS完成首頁重構orm

01DIV和span效果演示htm

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>div效果演示</title>
        <style>
            div{
                border: 1px solid red;
                /*width: 400px;
                height: 200px;*/
            }    
        </style>
    </head>
    <body>
        <div id="1">
            鋤禾日當午
        </div>
        汗滴禾下土
    </body>
</html>

div最基本的操做只是實現了，兩部分的一個分區blog

爲加上更復雜的參數get

02span效果演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>span演示</title>
        <style>
            span{
                font-size: 10px;
            }
        </style>
    </head>
    <body>
        <span>
            逗比是給小夥伴看的，成熟是給陌生人看的，幼稚是給喜歡的人看的！
        </span>        
    </body>
</html>

上面是span的一個小例子。在style中設置apan的屬性達到控制顯示字符的不一樣形式。font-size: 10px;//控制顯示字體的大小。

02CSS基本選擇器

1元素選擇器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素選擇器</title>
        <style>
            div{
                font-size: 30px;
                color: pink;
            }
        </style>
    </head>
    <body>
        <div>
            逗比是給小夥伴看的，成熟是給陌生人看的，幼稚是給喜歡的人看的！11
        </div>
        <div>
            逗比是給小夥伴看的，成熟是給陌生人看的，幼稚是給喜歡的人看的！22
        </div>
    </body>
</html>

元素選擇器，將整個元素都選中，上面操做的就是整個div元素。使得只要元素是div的就會顯示爲style中設置的樣子

2類選擇器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>類選擇器</title>
        <style>
            .div2{
                font-size: 30px;
                color: gold;
            }
        </style>
    </head>
    <body>
        <div>
            逗比是給小夥伴看的，成熟是給陌生人看的，幼稚是給喜歡的人看的！11
        </div>
        <div class="div2">
            逗比是給小夥伴看的，成熟是給陌生人看的，幼稚是給喜歡的人看的！22
        </div>
        <div>
            逗比是給小夥伴看的，成熟是給陌生人看的，幼稚是給喜歡的人看的！11
        </div>
        <div class="div2">
            逗比是給小夥伴看的，成熟是給陌生人看的，幼稚是給喜歡的人看的！44
        </div>
    </body>
</html>

上面的語句不以元素分類（div等），而是加入一個關鍵詞class 來進行區分，注意調用方式.div 進行設置。

3id選擇器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>id選擇器</title>
        <style>
            #div5{
                font-size: 30px;
                color: yellow;
            }
            .div2{
                font-size: 10px;
                color: green;
            }
        </style>
    </head>
    <body>
        <div>
            逗比是給小夥伴看的，成熟是給陌生人看的，幼稚是給喜歡的人看的！11
        </div>
        <div class="div2">
            逗比是給小夥伴看的，成熟是給陌生人看的，幼稚是給喜歡的人看的！22
        </div>
        <div>
            逗比是給小夥伴看的，成熟是給陌生人看的，幼稚是給喜歡的人看的！33
        </div>
        <div class="div2">
            逗比是給小夥伴看的，成熟是給陌生人看的，幼稚是給喜歡的人看的！44
        </div>
        <div id="div5">
            逗比是給小夥伴看的，成熟是給陌生人看的，幼稚是給喜歡的人看的！55
        </div>
    </body>
</html>

選擇器的使用都在style中設置。元素選擇器直接用元素名設置

類選擇器使用.+class名設置

id選擇器使用#+id名設置

03CSS其餘選擇器

1層級選擇器

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>層級選擇器</title>
        <style>
            div p{
                font-size: 30px;
                color: green;
            }
        </style>
    </head>

    <body>
        <div>
            <p>
                逗比是給小夥伴看的，成熟是給陌生人看的，幼稚是給喜歡的人看的！44
            </p>
        </div>
        <div>
            逗比是給小夥伴看的，成熟是給陌生人看的，幼稚是給喜歡的人看的！55
        </div>
        <p>
            逗比是給小夥伴看的，成熟是給陌生人看的，幼稚是給喜歡的人看的！66
        </p>
    </body>

</html>

層級選擇器以<p></p>爲標誌

2屬性選擇器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>屬性選擇器</title>
        <style>
            input[type='text']{
                background-color: red;
            }
            input[type='password']{
                background-color: blue;
            }
        </style>
    </head>
    <body>
        用戶名；<input type="text" name="username"/><br />
        密碼：<input type="password" name="password"/>
    </body>
</html>

更多相關文章...

相關標籤/搜索

CSS

HTML

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。