前端之常用標簽的使用、邊界圓角、精靈圖以及盒模型的佈局 前言 上篇博客介紹了組合選擇器，包括四種，分別是群組選擇器、後代（子代）選擇器、兄弟（相鄰選擇器）及交集選擇器；a 標簽的四大偽類選擇器，a:link、a:hover、a:active、a:visited，其中 hover 和 active 也 ...
前端之常用標簽的使用、邊界圓角、精靈圖以及盒模型的佈局
前言
上篇博客介紹了組合選擇器，包括四種，分別是群組選擇器、後代（子代）選擇器、兄弟（相鄰選擇器）及交集選擇器；a 標簽的四大偽類選擇器，a:link、a:hover、a:active、a:visited，其中 hover 和 active 也可以用於其他標簽，索引選擇器包括三種
<!-- 先位置後類型 -->
div:nth-child(1)
<!-- 先類型後位置 -->
div:nth-of-type(1)
<!-- 取反，先找到有 abc 和 div 類的標簽，然後取反-->
.div:not([abc])最後介紹了最最重要的盒模型，盒模型由四部分組成由內到外分別是：content+padding+border+margin，其中 content+padding+border 參與盒子顯示，margin 參與盒子佈局。
常用標簽的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用標簽的使用</title>
<!-- SEO -->
<!-- <meta name="keywords" content="8-12個以英文逗號隔開的單詞或詞語"> -->
<!-- <meta name="description" content="80字以內的一段話，與網站內容相關"> -->
<!-- 移動適配 -->
<!-- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> -->
<link rel="icon" type="image/x-icon" href="http://www.baidu.com/favicon.ico">
<style type="text/css">
.img {
/*根據需求,是指定高還是指定寬,設置一個,另一個會等比縮放*/
/*width: 200px;*/
height: 100px;
}
/*四個偽類*/
/*reset操作*/
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/timg.jpg" alt="">
<a href="00_複習預習.html">前往00頁面</a>
<!-- 前往本頁面中個某個位置: Top => 錨點 -->
<!-- 1.設置錨點 2.設置前往錨點的a轉跳 -->
<ul>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ul>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<!-- 通配標簽頁可以設置錨點 -->
<!-- <a href="" name="t_123"></a> -->
<div id="t_123">123</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<!-- 2.設置前往錨點的a轉跳: #錨點名 -->
<a href="#page_top">Top</a>
<a href="#t_123">123</a>
<a href="00_複習預習.html#md">前往錨點</a>
</body>
</html>邊界圓角
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>邊界圓角</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: orange;
}
.box {
/*邊界圓角*/
/*百分比控制*/
/*border-radius: 50%;*/
/*實際像素控制*/
/*border-radius: 20px;*/
/*橫縱分離 橫 / 縱*/
/*border-radius: 20px / 50%;*/
/*左上為第一個角, 順時針賦值, 無值找對角*/
/*左上橫30px 右上橫100px 右下橫=左上橫 左下橫=右上橫, 四角縱向全是50%*/
/*border-radius: 30px 100px / 50%;*/
/*單獨設置時, 橫向 縱向*/
/*border-top-left-radius: 50% 100%;
border-top-right-radius: 50% 100%;*/
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;
}
.wrap {
/*圖片過大會顯示不全*/
background-image: url('img/timg.jpg');
/*規定背景圖片顯示尺寸*/
background-size: 200px 200px;
}
.box {
/*圖片過小會平鋪*/
background-image: url('img/123.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/123.png') red no-repeat 50px 50px;
}
/*註: 實際開發中,資源圖片大小一定要與顯示區域等大*/
</style>
</head>
<body>
<img src="img/123.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">
.box {
width: 500px;
height: 100px;
/*height: 300px;*/
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 0 0;
}
.lt1:hover {
cursor: pointer;
background: url('img/bg.png') no-repeat 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-left: auto;
margin-right: auto;*/
margin: 0 auto;
}
/*垂直居中*/
.sub {
margin-top: 24px;
}
/*margin坑: 父子聯動*/
/*.box {
width: 1px;
height: 1px;
}*/
/*解決一: 設置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="box"></div> -->
<div class="sub"></div>
</div>
</body>
</html>
