Html/CSS07（佈局，引入，表單元素）

weixin_34308389發表於2018-07-17
HTMLCSS

今天是2018年7月17日

1.網頁佈局的3種方式

  • 預設佈局
  • float佈局
  • 層級佈局

2.css樣式的引入

使用Css樣式有三種方式
  • 內部樣式
  • 內聯樣式
  • 外部樣式
<link rel="stylesheet" href="css/style.css">
    <!--  
    <style>
        /* 內部樣式 */
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    -->
</head>
<body>
    <div></div>
    <!-- 
        內聯樣式
    <div style="width: 100px;height: 100px;background-color: red;"></div>
     -->
    <div>

    </div>

3.相對路徑和絕對路徑

在頁面中插入圖片時有兩種路徑方式：絕對路徑和相對路徑。

4.定位下widht和height的繼承

<style>
        /*  */
        *{padding: 0;margin: 0;}
        .parent{
            width:100px;
            background-color: red;
            position: relative;
        }
        .child{
            width: 50px;
            height: 100px;
            position: absolute;
            background-color: blue;
        }
</style>
<div class="parent">
        <div class="child">

        </div>
</div>

5.margin的一些小問題

5.1當給第一個子元素設定margin-top時，margin-top並不會作用於子元素上而是在父元素上

<style>
        .parent{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .child{
            width: 100px;
            height: 100px;
            margin-top: 50px;
            background-color: green;
        }

解決方案：設定偽元素使第一個子元素變成第二個子元素

5.2當兩個兩個元素設定對應的margin值時，會重合

.one{
            margin-top: 10px;
            width: 100px;
            height: 100px;
            background: red;
            margin-bottom: 100px;
        }
        .two{
            margin-top: 100px;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

6.表單

在使用表單時，可以配合使用label標籤

<form action="">
        <!-- label的for與input標籤id相同時，可以實現單擊標籤即單擊input效果 -->
        <div>
            <label for="user">使用者名稱</label><input type="text" id="user">
        </div>
        <div>
            <label for="pwd">密碼</label><input type="password">
        </div>
        <div>
            <input type="submit" value="提交">
        </div>
    </form>

7.表單中的常用控制元件

7.1單選按鈕

設定input標籤的type屬性為radio即可使用單選按鈕

<input type="radio" name="sex" id="man"><label for="man">男</label>
    <input type="radio" name="sex" id="woman"><label for="woman">女</label>

7.2核取方塊

設定input標籤的type屬性為checkbox即可使用單選按鈕

<input type="checkbox" name="hobby">手機
    <input type="checkbox" name="hobby">電腦
    <input type="checkbox" name="hobby">收音機
    <input type="checkbox" name="hobby">耳機

7.3下拉選單

使用select-option標籤設定下拉選單

<select name="" id="">
        <option value="">一年級</option>
        <option selected value="">二年級</option>
        <option value="">三年級</option>
        <option value="">四年級</option>
    </select>

7.4文字域

使用textarea標籤設定文字域

<textarea style="border-radius: 18px;" placeholder="請規範文明發言！" name="" id="" cols="30" rows="10"></textarea>

8.input控制元件和button控制元件的區別

<style>
        *{margin: 0;padding: 0}
        input{
            border: 1px solid slategray;
            width: 140px;
            height: 30px;
        }
        .btn{
            width: 142px;
            height: 32px;
            border: 1px solid slategray;
        }
    </style>

相關文章