day06

2018-07-18 本文已影响0人 fengwenchao

几种样式

-  内联样式 
<div style="width:100px;height:100px;background: red"></div>
-   外部样式
   <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="test"></div>{创一个index.css  在这个文件里改样式}

路径

  <!-- 
        路径:
        相对路径
        绝对路径 不要使用
     -->
     <!-- 同级目录 -->
     <img src="down.jpg" alt="">
     <!-- 下一级目录 -->
     <img src="images/location.png" alt="">
          <!-- 上一级目录 -->
     <../img src="images/location.png" alt="">

margin的一些bug

- /* 子元素作为父元素的第一个元素,给它margin-top,没用
        它的元素向下移动
         */解决的方法{父辈给.row(或者overflow: hidden;)
.row:before{
            content:"";
            display: table;
        }
-   margin重合的问题
     两个div分别top或者bottom数值相同取一致 数据不同选最大

输入框和按钮的区别

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

无标题1.png

表单

<h4>一个简单的登录表单</h4>
<form >

<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>

<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>

<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>< ></div>

1.png

小技巧1

-一个大图片好几个小图片该怎么分别对应

————————其他方式————————
 .AllIcon{overflow: hidden;margin-bottom: 30px;}
        .AllIcon a{
            display:block;
            float:left;
            width:18px;
            height:18px;
            background: #747474 url(images/icons_type.png) no-repeat ;
            margin-left:50px;

        }（border-radius: 50%;框框变圆形 30%部分变椭圆）
        .AllIcon .one{background-position: -20px 0}
        .AllIcon .two{background-position: -38px 0}
        .AllIcon .three{background-position: -57px 0}
        .AllIcon .four{background-position: -85px 0}
   <div class="AllIcon">
            <a href="#" class="one"></a>
            <a href="#" class="two"></a>
            <a href="#" class="three"></a>
            <a href="#" class="four"></a>
        </div>
{原理是a标签设置成块标签可以设置宽高 而通过背景图片位置直接移动 可以造成那结果}

小技巧2

    .footer{
            width:352px;margin-left:auto;margin-right:auto;
        }
        .footer .qita{position:relative;margin-bottom:15px;}
        .qita .left,.right{position:absolute;display: block;width:125px;height:1px;background:#999;top:50%}
        .right{right:0}
  <div class="footer">
        <p class="qita">
            <span class="left"></span>
            其他方式登录
            <span class="right"></span>
        </p></div>
第二种做法比较方便
 fieldset{border:none;}
  <fieldset class="border">
                    <legend>其他登陆方式</legend>
                </fieldset>