Day07

2018-07-17 本文已影响0人 yt1997

今天学到了什么

1. 样式的引入

1.1 内联样式

了解就行了不使用

div style="width;100px;height:100px;background:red;"></div>

1.2 外部样式

尽量用外部样式

<link rel="stylesheet" href="css/03index.css">

2. 路径

2.1 绝对路径

了解不会使用

<img src="D:\PS\mayunPro\Courseware\DAY03\课后作业\images\data_image.png" alt="">

2.2 相对路径

<img src="images/data_image.png" alt="">

2.3 读上级/兄弟目录

../ 读上级目录

<img src="../images/data_image.png" alt="">

<img src="data_image.png" alt="">

3. width，height继承

3.1 子元素绝对定位，不会继承父元素的width

.parent{
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
        }
        .child{
            width: 50px;
            background: green;
            position: absolute;
        }

3.2 当子元素绝对定位时，父元素不会获取子元素的高度

.parent{
            width: 200px;
            background: red;
        }
        .child{
            position: absolute;
            width: 100px;
            height: 100px;
            background: green;
        }

4. margin的一些问题

子元素作为父元素的第一个元素，给它margin-top，子元素不会移动而父元素向下移动
如何解决：使子元素让出大哥的位置，不成为第一个元素，即添加一个伪元素

        .row:before{
            content: "";
            display: table;
        }

5. 表单

5.1 简单登录表单

lable和input结合使用要点：lable的for的值要和input的id一样

    <h4>一个简单的登录表单</h4>
    <form action="">
        <div>
        <label for="user">用户名</label><input type="text" id="user">
        </div>
        <div>
            <label for="pwd">密码</label><input type="password" id="pwd">
        </div>
        <div>
            <input type="submit" value="提交">
        </div>
        <div>

5.2 单选框

技术要点： name值相同

<div>
<h4>单选框</h4>
<label for="male">男</label><input type="radio" id="male" name="sex">
<label for="female">女</label><input type="radio" id="female" name="sex">
 </div>

5.3 复合选框

type=checkbox 复合选框

<div>
<input type="checkbox">足球           <input type="checkbox">篮球            
<input type="checkbox">排球            
</div>

5.4 下拉选框

<div>
<select>
<option value="武昌区">武昌区</option>
<option value="洪山区" selected>洪山区</option>
<option value="青山区">青山区</option>
</select>
</div>

5.5 文本框

<textarea placeholder="请吐槽" cols="30" rows="10"></textarea>

6. text，btn的区别

input是按钮的形态下,给border,padding不会改变它的width,height

  <style>
        *{margin:0;padding:0}
        input{
            border:1px solid #333;
            width:100px;
            height:40px;
        }
        .btn{
            width:102px;
            height:42px;
        }
        /* input是按钮的形态下,给border,padding不会改变它的width,height */
    </style>
</head>
<body>
    <!-- 输入框和按钮的区别 -->
    <input type="text"> <br>
    <input type="submit" class="btn">
    <button type="submit">提交</button>
</body>
</html>

今天还有什么不会