簡(jiǎn)介
- 實(shí)際上這次涉及到一些ps 相關(guān)的知識(shí)點(diǎn)
PS 基本操作
-
PS基本操作：
image.png
常規(guī)通用css
- 大多數(shù)CSS都需要包含如下通用屬性：
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
image.png
圓角矩形 border-radius
- 比如
border-radius: 10px;直接指定 px 或者用百分比均可吊输，例如 ：border-radius: 10%
image.png - 實(shí)際上可以順時(shí)針?lè)謩e改變四個(gè)角的值：
border-radius: 10px 20px 30px 40px
image.png
盒子陰影 box-shadow
- CSS 中新增盒子陰影胧华，可以使用
box-shadow屬性進(jìn)行設(shè)置。 - 寫(xiě)法
box-shadow: h-shadow v-shadow blur spread color inset爆雹，inset 可以省略表示外陰影性穿。
image.png
文字陰影 text-shadow
- 通過(guò)屬性
text-shadow: h v blur color
image.png
浮動(dòng) （float）
- 一個(gè)網(wǎng)頁(yè)布局通常通過(guò)三種布局方式組成：標(biāo)準(zhǔn)流勺三、浮動(dòng)、定位
- 浮動(dòng)可以改變?cè)貥?biāo)簽?zāi)J(rèn)的排列的方式需曾。
-
多個(gè)塊元素縱向排列用標(biāo)準(zhǔn)流吗坚，多個(gè)塊級(jí)元素橫向排列用浮動(dòng)。
image.png
image.png
浮動(dòng)的特性（脫標(biāo)）
- 1呆万、浮動(dòng)元素會(huì)脫離標(biāo)準(zhǔn)流（脫標(biāo)）
- 2商源、浮動(dòng)的元素會(huì)一行內(nèi)顯示并且元素頂部對(duì)齊。
- 3谋减、浮動(dòng)的元素會(huì)具有行內(nèi)塊元素的特性牡彻。（也就是說(shuō)如果給span加上float，那么他就變成行內(nèi)塊的特性了出爹。）
- 浮動(dòng)經(jīng)常和標(biāo)準(zhǔn)流的父級(jí)元素配合使用庄吼。
常見(jiàn)的網(wǎng)頁(yè)布局
-
基礎(chǔ)性
image.png -
常規(guī)形
image.png -
通過(guò)標(biāo)準(zhǔn)流和浮動(dòng)實(shí)現(xiàn)下面的例子（不能用flex，或者grid）
image.png - 實(shí)現(xiàn)參考代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.header {
background-color: darkgrey;
height: 45px;
}
.content {
width: 800px;
/*background-color: pink;*/
margin: 0 auto;
}
.footer {
background-color: darkgrey;
height: 100px;
}
.banner {
margin-top: 16px;
height: 150px;
background-color: gray;
}
.product-list {
height: 100px;
margin-top: 16px;
}
.detail-list {
height: 200px;
margin-top: 16px;
margin-bottom: 16px;
}
.product-list li,.detail-list li {
float: left;
margin-right: 16px;
width: 188px;
height: 100px;
background-color: purple;
}
.product-list .last,.detail-list .last {
margin-right: 0;
}
.detail-list li {
height: 200px;
}
</style>
</head>
<body>
<div class="header">Header</div>
<div class="content">
<div class="banner">Banner</div>
<div class="product-list">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</ul>
</div>
<div class="detail-list">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</ul>
</div>
</div>
<div class="footer">Footer</div>
</body>
</html>
- 浮動(dòng)只會(huì)壓住后面的標(biāo)準(zhǔn)流严就，而不影響之前的標(biāo)準(zhǔn)流霸褒。
為什么清除浮動(dòng)
-
由于父級(jí)盒子很多情況下，不方便給高度盈蛮，但是子盒子又不占有位置废菱，最后父級(jí)盒子高度為0時(shí)技矮，就會(huì)影響下面標(biāo)準(zhǔn)流的盒子。
image.png -
清除浮動(dòng)
image.png -
清除浮動(dòng)的四種方法
image.png
清除浮動(dòng)的額外標(biāo)簽法殊轴，也成為隔墻法（W3C推薦）
- 額外標(biāo)簽法會(huì)在浮動(dòng)元素末尾添加一個(gè)空的標(biāo)簽衰倦，例如：
<div style="clear: both"></div>
image.png
清除浮動(dòng)的 overflow 法。
- 找到父級(jí)元素添加
overflow: hidden即可旁理。
image.png
清除浮動(dòng)的 :after 偽元素法
-
給父元素添加:after 偽類(lèi)并寫(xiě)入如下代碼：
image.png - 測(cè)試代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.header {
background-color: darkgrey;
}
.footer {
background-color: peru;
height: 100px;
}
.cell {
float: left;
height: 50px;
width: 50px;
background-color: gold;
border: 1px solid red;
}
.clearfix:after {
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix {
*zoom: 1 ;
}
</style>
</head>
<body>
<div class="header clearfix">
<div class="cell">Cell1</div>
<div class="cell">Cell2</div>
<div class="cell">Cell3</div>
</div>
<div class="footer">Footer</div>
</body>
</html>
- 原理上類(lèi)似額外標(biāo)簽法樊零，優(yōu)點(diǎn)是不會(huì)影響原有標(biāo)簽結(jié)構(gòu)。
- 缺點(diǎn)是需要照顧低版本瀏覽器孽文，大廠(chǎng)都會(huì)參考這種方法驻襟，是一種高級(jí)的處理方式。
雙偽元素清除浮動(dòng)
-
閉合浮動(dòng)的精髓就是賭門(mén)芋哭，那么最好的方式就是前后都堵門(mén)沉衣，也就是雙偽元素清除浮動(dòng)。
image.png -
詳情：
image.png - 測(cè)試代碼：（clearfix 注意需要應(yīng)用到父元素中）
<style>
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom: 1 ;
}
</style>
結(jié)束
- 感謝閱讀
