day6

作者: 君_5372 | 来源:发表于2018-07-18 09:13 被阅读0次

    1.样式的引用

    1.内部样式表
    <style>
            .two{
                width:100px;
                height:100px;
                background:green;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div  class="two"></div>
    
    2.内联样式
    <div style="width:100px;height:100px;background: red"></div>
        <div  class="two"></div>
    
    3.外部引用
      <link rel="stylesheet" href="css/index.css">
    </head>
    <body>
        <div class="test"></div>
    </body>
    外部创建一个css文件:
    .test{
        width:100px;
        height:100px;
        background:red;
    }
    

    2.路径

            相对路径 相对于同级目录下的
            绝对路径 图片的绝对地址 (最好不要使用)
       
         <!-- 同级目录 -->
         <img src="down.jpg" alt="">
         <!-- 下一级目录 -->
         <img src="images/location.png" alt="">
    

    3.width和heigth的继承

    1.子元素绝对定位,不会继承父元素的width
     <style>
            /*  */
            .parent{
                width:100px;
                height:100px;
                background: red;
                position: relative;
            }
            .child{
                height:50px;
                background: green;
                position:absolute;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child">
    
            </div>
        </div>
    </body>
    
    1.png
    2.子元素绝对定位,父元素没有heigth
      <style>
            .parent{
                width:200px;
                /* height:200px; */
                background: red;
            }
            .child{
                position:absolute;
                width:100px;
                height:100px;
                background: green;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child"></div>
        </div>
    </body>
    
    1.png

    4.bug

     <style>
            /* 子元素作为父元素的第一个元素,给它margin-top,没用
            它的元素向下移动
             */
            .parent{
                width:200px;
                height:200px;
                background:red;
            }
            .child{
                margin-top: 50px;
                width:100px;
                height:100px;
                background:green;
            }
            /*如何解决*/
            .row:before{
                content:"";
                display: table;
            }
        </style>
    </head>
    <body>
        <div class="parent row">
            <div class="child"></div>
        </div>
    </body>
    
     <style>
            /* 浪潮之巅 */
            /* 
            margin重合的问题
             */
            .one{
                width:100px;
                height:100px;
                background:red;
                margin-bottom: 150px;
            }
            .two{
                margin-top: 100px;
                width:100px;
                height:100px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="one"></div>
        <div class="two"></div>
    </body>
    
    1.png

    5.表单

    <body>
        <h4>一个简单的登录表单</h4>
        <form >
            <!-- label和input结合使用  要点:label的for的值要和input的id一样 -->
            <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>
                <!-- 技术要点:name值相同 -->
                <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>
            <div>
                <!-- type=checkbox  复合选框 -->
                <input type="checkbox">足球
                <input type="checkbox">篮球
                <input type="checkbox">羽毛球
            </div>
            <div>
                <!-- 下拉选框 -->
                <select >
                    <option value="武昌区">武昌区</option>
                    <option value="洪山区" selected>洪山区</option>
                    <option value="青山区">青山区</option>
                </select>
            </div>
        </form>
        <textarea placeholder="请吐槽" cols="30" rows="10"></textarea>
        <!-- 大于,空格,大于 的字符 -->
        <div>&lt;&nbsp;&gt;</div>
    </body>
    
    1.png

    text,btn的区别

        <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>
    
    1.png

    相关文章

      网友评论

          本文标题:day6

          本文链接:https://www.haomeiwen.com/subject/qninpftx.html