背景属性缩写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 500px;
height: 500px;
border: 1px solid #000;
/*background-image: url(../../img/h.jpg);
background-repeat: no-repeat;
background-position: 50px 50px;*/
/*背景属性的简写形式*/
background: url(../../img/h.jpg) no-repeat 50px 50px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
利用边框做三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*div做线*/
.box{
/*宽高，都可以用百分比去表示*/
width: 100%;
height: 2px;
background-color: #f00;
}
/*通过边框做三角形 把边框放大，宽高缩小，三个边调成透明色*/
.box1{
width: 0px;
height: 0px;
border-top: 50px solid transparent;
border-left: 50px solid #00f;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box">
</div>
<div class="box1">
</div>
</body>
</html>
外边距合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*第一种上下边距相邻，并且中间没有任何元素时会合并上下边距，
解决方法:避免就好了*/
.box1{
width: 200px;
height: 200px;
background-color: #f00;
/*下外边距*/
margin-bottom: 90px;
}
.box2{
width: 200px;
height: 200px;
background-color: #00f;
/*margin-top: 40px;*/
}
/*第二种，父子上边距合并,给子元素加上边距，父元素跟着往下*/
/*解决方法：可以给父元素添加一个像素的边框或者上内边距，加完要给高减一个像素*/
.box3{
width: 400px;
height: 399px;
background-color: #f00;
padding-top: 1px;
}
.box4{
width: 200px;
height: 200px;
background-color: #00f;
margin-top: 20px;
}
</style>
</head>
<body>
<!-- <div class="box1"></div>
<div class="box2"></div> -->
<div class="box3">
<div class="box4"></div>
</div>
</body>
</html>
文本输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 单标签，行内元素，输入框 -->
<input type="text">
</body>
</html>
登录案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 400px;
height: 600px;
border: 1px solid green;
margin: 100px auto;
}
.login{
width: 200px;
height: 60px;
display: inline-block;
line-height: 60px;
text-align: center;
}
.register{
background-color: #ccc;
margin-left: -5px;
}
p{
margin: 40px 0px;
text-align: center;
}
.btn{
width: 120px;
height: 50px;
background-color: skyblue;
text-align: center;
line-height: 50px;
margin: 100px auto 0px;
}
ol{
margin-top: 100px;
}
ol li{
margin-left: 50px;
}
</style>
</head>
<body>
<div class="box">
<div class="login">免费登录</div>
<div class="login register">免费注册</div>
<p>
姓名<input type="text">
</p>
<p>
密码<input type="text">
</p>
<div class="btn">
登录
</div>
<ol>
<li><a href="#">**************</a></li>
<li><a href="#">**************</a></li>
<li><a href="#">**************</a></li>
</ol>
</div>
</body>
</html>
