A.今天學(xué)到什么
1.文本修飾
1.1文本樣式
/*設(shè)置文本對齊的方向，默認(rèn)為left*/
text-align: center;
/* 文本修飾 */
/*下劃線*/
text-decoration: underline;
/* line-through 穿過 */
/* overline 上劃線 */
/* a標(biāo)簽自帶下劃線 不需要下劃線 none */
/* 全部小寫 */
text-transform: lowercase;
/* 全部小寫 */
text-transform: uppercase;
/* 首字母小寫 capitalize */
1.2文本字體
/* 可以設(shè)置多個字體為后備 如果沒有這種字體會自動選擇其他字體 */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
/* 一般默認(rèn)字體為14px */
font-size: 14px;
/* 默認(rèn)樣式 normal */
font-style: normal;
/* 字體權(quán)重 范圍100-900*/
font-weight: bold;/* light*/
/* 字體 */
2.鏈接
a:link{
/* 正常，未訪問過的鏈接 */
color: #333;
}
a:visited{
/* 用戶已訪問過的鏈接 */
color:yellow;
}
a:hover{
/* 當(dāng)用戶鼠標(biāo)放在鏈接上時 */
color: blue;
}
a:active{
/* 鏈接被點擊的那一刻 */
color: red;
}
/* 若單獨設(shè)置幾個鏈接，必須遵守如下規(guī)則： */
/* a:hover 必須跟在 a:link 和 a:visited后面 */
/* a:active 必須跟在 a:hover后面 */
3.列表樣式
/* 去掉列表樣式 list-style:none; */
/* 列表樣式 list-style-type:circle|square|disc*/
/* 列表樣式圖片 list-style-image:url("xxx") */
ul{
list-style-type:disc;
}
4.邊框樣式
div{
width: 100px;
height: 100px;
border: 10px solid #333;
}
5.表格
5.1表格樣式
table{
text-align: center;
line-height: 30px;
width: 500px;
/* 邊框折疊 */
border-collapse: collapse;
}
table,th,td{
border: 1px solid #333;
}
5.2跨越行的表格
table{
border-collapse: collapse;
text-align:center;
line-height: 50px;
width: 800px;
}
table,th,td{
border: 1px solid #333;
}
5.3跨越列的表格
table{
border-collapse: collapse;
text-align:center;
line-height: 50px;
width: 800px;
}
table,th,td{
border: 1px solid #333;
}
5.4有間隔的表格
table{
border-collapse: collapse;
text-align:center;
line-height: 50px;
width: 800px;
}
table,th,td{
border: 1px solid #333;
}
.gap{
height: 20px;
}
6.輪廓
div{
width: 100px;
height: 100px;
background:skyblue;
/* 邊框不改變原來的大小 */
outline: 10px solid #333;
}
input{
margin-top: 50px;
/* 鼠標(biāo)放上去 框不點亮 */
outline: none;
}
7.透明度
.child{
width: 100px;
height: 100px;
background-color: blue;
opacity: 0.5;
}
.parent{
width: 200px;
height: 200px;
background: red;
}
8.繼承
8.1樣式繼承
/* div{
子元素不設(shè)置寬度會繼承父元素的寬度
只發(fā)生在塊元素之間
background: red;
height: 40;
} */
.child{
/* 如果父元素不設(shè)置高度 會得到子元素的高度 */
width: 20px;
height: 30px;
background: yellow;
}
.parent {
width: 40px;
background: red;
}
8.2文本繼承
body{
color: red;
font-size: red;
cursor: pointer;
}
ul{
list-style: none;
}
8.3繼承順序
/* 優(yōu)先級別 .parent>a > a > parent */
<div class="parent">
<a href="">手機</a>
<a href="">平板</a>
<a href="">電腦</a>
</div>
9.盒子模型
border-sizing:content-box|border-box
當(dāng)盒子模型的 boxsizing 設(shè)置為 boder-box時
設(shè)計border padding 它的寬高不會改變
10.浮動
10.1浮動顯示
.parent{
width: 400px;
height: 200px;
background: red;
}
.child{
width: 150px;
height: 150px;
background: yellow;
float: left;
}
.two{
/* 清除浮動 讓下面的不收上面的浮動影響 */
/* clear: both; */
width: 150px;
height: 150px;
background: green;
float: left;
}
10.2浮動繼承
/* 子元素浮動讓父元素有高度
1.給父元素overflow :hidden
2.給另一個子元素設(shè)置 clear:both*/
.parent{
width: 300px;
background: red;
/* overflow: hidden; */
}
.child{
width: 100px;
height: 50px;
background: yellow;
float: left;
}
/* .one{
clear: both;
} */
.parent:after{
content: "";
display: table;
clear: both;
}
11.定位
11.1定位用法
.parent{
/* 相對定位：就是元素在頁面上正常的位置 */
width: 200px;
height: 200px;
background: red;
position: relative;
left: 100px;
top: 100px;
}
.child{
/* 絕對定位:移動的位置是相對于最近給了相對定位的父元素的 */
/* 相對定位和絕對定位是成對出現(xiàn)的 父元素給相對定位 子元素給絕對定位 */
width: 100px;
height: 100px;
background: green;
position: absolute;
right: 0;
}
11.2定位實現(xiàn)垂直水平居中
.parent{
width: 300px;
height: 300px;
background: red;
position: relative;
}
.child{
width: 80px;
height: 80px;
background: yellow;
position: absolute;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
}
11.3盒子手機水平居中
html,body{
width: 100%;
height: 100%;
}
img{
width: 618px;
height: 128px;
position: absolute;
/* left: 50%;
top: 50%;
margin-left: -309px;
margin-top: -64px; */
/* left: 0; */
/* right: 0; */
top: 0;
bottom: 0;
margin: auto;
}
12.搜索框
.search{
position: relative;
width: 250px;
height: 40px;
}
.btn{
position: absolute;
width: 23px;
height: 22px;
background: url("images/icon4.png");
border: none;
top:0;
right: 10px;
bottom: 0;
margin: auto;
}
.search>input{
width: 250px;
height: 40px;
background: #eee;
border:none;
outline: none;
border-radius: 30px;
padding-left: 20px;
box-sizing: border-box;
}
<div class="search">
<input type="text" placeholder="搜索">
<button class="btn"></button>
</div>
13.懸停
.one{
position: fixed;
background:red;
width: 100px;
height: 100px;
right: 0;
bottom: 100px;
}
14.z-index
<!-- z-index
功能:設(shè)置元素的堆疊順序，設(shè)置了絕對定位的元素 -->
<div class="parent">
<div class="one">
</div>
<div class="two">
</div>
</div>
