背景屬性縮寫
<!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>
