几种样式
- 内联样式
<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>
网友评论