邊界圓角 盒模型佈局 圖片背景 精靈圖
阿新 • • 發佈：2018-12-16
常用標籤的使用:
直接舉例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用標籤的使用</title>
<style type="text/css">
.img{
/*根據需求,是指定高還是指定寬,設定一個,另一個會等比縮放*/
/*widows: 200px;*/
height: 100px;
}
a{
color: #333;
text-decoration: none;
}
/*ul的reset操作*/
ul{
margin: 0;
padding: 0;
list-style: none;
/*margin-left: 40px;*/
}
</style>
</head>
<body>
<!-- 1.設定錨點:錨點名page_top -->
<a href="" name="page_top"></a>
<img class="img" src="./img/tmg.png" alt="">
<a href="00_複習預習.html">複習預習</a>
<!-- 前往本頁面中的某一個位置:Top => 錨點 -->
<br>
<div id="t_123"></div>
<a href="#t_123">123</a>
<a href="#page_top">Top</a>
<ul>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ul>
</body>
</html>
邊界圓角:
舉例應用:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>邊界圓角</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: red;
}
.box{
/*邊界圓角*/
/*百分比控制*/
border-radius: 50%;
/*實際畫素控制*/
border-radius: 20px;
/*橫縱分離控制 橫 | 縱*/
border-radius: 20px / 50%;
/*左上為第一個角,順時針賦值,無值的找對角*/
/*左上橫30px 右上橫100px 右下=左上 左下=右上,四角縱向全是50%*/
border-radius: 30px 50px/50%;
/*單獨設定時,橫向 縱向*/
border-top-left-radius: 70% 100%;
border-top-right-radius: 50% 90%;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
背景樣式:
舉例應用:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景樣式</title>
<style type="text/css">
.box, .wrap{
width: 200px;
height: 200px;
background-color: orange;
/*圖片過小會平鋪*/
background-image: url(img/tmg.png);
/*repeat-x; repeat-y; repeat; no-repeat*/
background-repeat: no-repeat;
/*位置 (定位):可以具體數值,而可以寫位置單詞*/
background-position: 10px center;
background-position: right bottom;
background-position: center center;
/*設定一個值的時候,控制的是x軸,y軸取center*/
/*設定兩個值時,第一個值控制x,第二個控制y*/
background-position: 10px 40px;
/*整體設定*/
background: url(img/tmg.png) red no-repeat 50px 50px;
}
.wrap{
/*圖片過大會顯示不全*/
background-image: url(img/tmg.png);
/*規定背景圖片顯示尺寸*/
background-size: 200px 200px;
}
/*注: 實際開發中,資源圖片的大小一定要與顯示區域等大*/
</style>
</head>
<body>
<img src="img/tmg.png" alt="">
<div class="box"></div>
<div class="wrap"></div>
</body>
</html>
精靈圖(重點):
直接舉例應用:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>精靈圖</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.box{
width: 1210px;
height: 100px;
border: 5px solid black;
}
.box{
background-image: url(img/bg.png);
background-position: 0 -150px;
}
.box:hover{
cursor: pointer;
background-position: 0 -250px;
}
/*1.顯示區域一定要與精靈圖目標小圖大小一致*/
/*2.通過背景圖片定位方式將目標小圖移動到顯示位置*/
</style>
<style type="text/css">
.lt1{
width: 155px;
height: 48px;
background: url(img/bg.png) no-repeat;
}
.lt1:hover{
cursor: pointer;
background-position: 0 -48px;
}
</style>
</head>
<body>
<!-- 精靈圖:各種小圖拼接起來的一張大圖 -->
<!-- 為什麼要使用精靈圖:減少請求次數,降低效能的消耗,
二次載入圖片資源時極為迅速(不再需要傳送請求) -->
<div class="box"></div>
<div class="lt1"></div>
</body>
</html>
盒模型佈局細節:
直接舉例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型佈局細節</title>
<style type="text/css">
.sup{
width: 500px;
height: 100px;
background: orange;
}
.sub{
width: 50px;
height: 50px;
background-color: red;
}
/*sub再sup中 水平居中*/
.sub{
/*margin-right: auto;
margin-left: auto;*/
margin:0 auto;
}
/*sub再sup中 垂直居中*/
.sub{
/*這樣會父子(第一子)聯動*/
margin-top: 25px;
}
/*解決一:設定父級的border-top*/
.sup{
border-top: 1px solid transparent;
height: 99px;
}
/*解決二:設定padding_top*/
.sup{
padding-top: 1px;
height: 99px;
}
/*margin坑: 上兄弟margin-bottom與下兄弟,margin-top重合*/
/*解決方案:只設置一個,建議設定兄弟margin-top*/
/*margin佈局:下盒子的垂直起始位置決定於同結構中上盒子的margin借宿位置;水平其實位置就是父級content最左側*/
</style>
</head>
<body>
<div class="sup">
<div class="sub"></div>
</div>
</body>
</html>
盒模型案例:
舉例應用:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型案例</title>
<style type="text/css">
body,h1,ul{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
color: #333;
text-decoration: none;
}
</style>
<style type="text/css">
.main{
width: 1210px;
height: 500px;
background-color: orange;
margin: 0 auto;
}
.nav{
width: 1210px;
margin: 0 auto;
height: 48px;
}
.nav_a{
/*a標籤就支援寬高,並且可以巢狀其他標籤*/
display: block;
height: 48px;
background: red;
}
/*查詢li下的第一個 nav_a的*/
li:first-child .nav_a{
background: blue;
width: 155px;
}
li:nth-child(2) .nav_a{
background: pink;
width: 150px;
margin-left: 155px;
margin-top: -48px;
}
li:nth-child(3) .nav_a{
background: red;
width: 100px;
margin-left: 305px;
margin-top: -48px;
}
</style>
</head>
<body>
<!-- ul.nav>(li>a)*7 -->
<ul class="nav">
<li><a class="nav_a" href=""></a></li>
<li><a class="nav_a" href=""></a></li>
<li><a class="nav_a" href=""></a></li>
<li><a class="nav_a" href=""></a></li>
<li><a class="nav_a" href=""></a></li>
<li><a class="nav_a" href=""></a></li>
<li><a class="nav_a" href=""></a></li>
</ul>
<div class="main"></div>
</body>