CSS3.0知識和例子大合集：盒子模型，圖片邊框，蝙蝠邊框，加載動(dòng)畫【詩書畫唱】
CSS3.0非常適合前端的界面的設(shè)計(jì)。下面的例子基本是使用嵌入式的CSS。
下面是知識點(diǎn)和例子的超級大的合集。
本期內(nèi)容：
圖片邊框（比如蝙蝠邊框）
多張圖片疊加的廣告效果界面
CSS3加載動(dòng)畫
CSS3閃耀的星星的動(dòng)態(tài)效果
CSS3心型
CSS3跳動(dòng)的心型?
CSS3多媒體查詢實(shí)例?
CSS樣式類型
寫在style標(biāo)簽中的樣式就叫嵌入式樣式?
寫在元素的style屬性中的樣式就叫內(nèi)聯(lián)式樣式
通用選擇器
子選擇器：>表示選擇ul標(biāo)簽的兒子中間的a標(biāo)簽
? ? 空格表示選擇ul標(biāo)簽所有的后代中的a標(biāo)簽
群組選擇器
學(xué)習(xí)筆記講義
CSS選擇器
CSS偽類選擇器
CSS偽元素選擇器
CSS權(quán)重
CSS樣式繼承?
CSS元素的分類?
CSS邊框
CSS浮動(dòng)模型
CSS層模型
CSS定位布局例子
CSS清除浮動(dòng)
盒子模型
樣式中的長度單位
rem的使用?
CSS3新的屬性
CSS3boxsizing屬性?
CSS3線性漸變
學(xué)習(xí)筆記講義
CSS3-1新的屬性.ppt?
CSS3-2字體.ppt
CSS3-3轉(zhuǎn)換和過渡.ppt
CSS3-4動(dòng)畫.ppt
CSS3-5媒體查詢.ppt
CSS3-6彈性盒子.ppt
CSS3-7柵格系統(tǒng).ppt
作業(yè)
通過CSS繪制一個(gè)三角形
通過CSS代碼居中顯示div
推薦教程：https://www.runoob.com/css3/css3-3dtransforms.html
CSS3加載動(dòng)畫 START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {/* 將所有標(biāo)簽的邊距和填充都設(shè)為0 */
? ? margin: 0;
? ? padding: 0;
? ? box-sizing: border-box;
}
html, body {
? ? width: 100%;
? ? height: 100%;
}
body {
? ? background: #0b0b14;
? ? font-family: 'Inconsolata', monospace/*等寬字體*/;
? ? overflow: hidden;/*清除浮動(dòng)*/
}
@keyframes rt {
? ? 100% {
? ? ? ? transform: rotate(360deg);/*旋轉(zhuǎn)*/
? ? }
}
@keyframes cw {
? ? 0% {
? ? ? ? width: 0;
? ? ? ? height: 0;
? ? }
? ? 75% {
? ? ? ? width: 40px;
? ? ? ? height: 40px;
? ? }
? ? 100% {
? ? ? ? width: 0;
? ? ? ? height: 0;
? ? }
}
@keyframes txt {
? ? 0% {
? ? ? ? content: "LOADING.";
? ? }
? ? 50% {
? ? ? ? content: "LOADING..";
? ? }
? ? 100% {
? ? ? ? content: "LOADING...";
? ? }
}
.arc {
? ? position: absolute;
? ? margin: auto;
? ? top: 0;
? ? ? right: 0;
? ? bottom: 0;
? ? left: 0;
? ? width: 100px;
? ? height: 100px;
? ? border-radius: 50%;
? ? border-top: 2px solid #ffea29;
? ? border-left: 1px solid transparent;/*transparent表示全透明黑色*/
? ? border-right: 1px solid transparent;
? ? /*infinite表示無限次重復(fù),linear表示線性*/
? ? animation: rt 2s infinite linear;
}
.arc::before {
? ? position: absolute;
? ? margin: auto;
? ? top: 0;
? ? right: 0;
? ? bottom: 0;
? ? left: 0;
? ? width: 70px;
? ? height: 70px;
? ? ? border-radius: 50%;
? ? border-top: 2px solid #8d29ff;
? ? border-left: 1px solid transparent;/*transparent表示全透明黑色r*/
? ? border-right: 1px solid transparent;
? ? /*infinite表示無限次重復(fù),linear表示線性,reverse表示一直向后運(yùn)動(dòng)*/
? ? animation: rt 4s infinite linear reverse;
? ? content: "";
}
.arc::after {
? ? position: absolute;
? ? margin: auto;
? ? top: 0;
? ? right: 0;
? ? bottom: 0;
? ? left: 0;
? ? width: 0;
? ? height: 0;
? ? border-radius: 50%;
? ? border-top: initial;/*默認(rèn)的屬性*/
? ? border-left: initial;
? ? border-right: initial;
? ? animation: cw 1s infinite;
? ? content: "";
? ? background: snow;
}
h1 {
? ? position: absolute;
? ? height: 40px;
? ? margin: auto;
? ? top: 200px;
? ? left: 0;
? ? right: 0;
? ? bottom: 0;
? ? text-transform: uppercase;/*將文本的英文字母改為大寫*/
? ? text-align: center;? ? ?
? ? letter-spacing: 0.1em;/*字體間距,相當(dāng)于十分之一的字體大小*/
? ? font-size: 14px;
? ? font-weight: lighter;/*字體為細(xì)體*/
? ? color: white;
}
h1 span {
? ? display: none;
}
h1::after {
? ? animation: txt 5s infinite;
? ? content: "";
}
</style>
</head>
<body>
<div class="arc"></div>
<h1><span></span></h1>
</body>
</html>
CSS3加載動(dòng)畫 END
CSS3跳動(dòng)的心型 START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
width: 100%;
text-align: center;
}
.ax{
position: relative;
width: 300px;
height: 300px;
margin: 200px auto;
background-color: chartreuse;
transform: rotate(45deg);
animation: name 2s infinite;
}
.ax div{
position: absolute;
width: 200px;
height: 200px;
background-color: red;
}
.left{
left: 0;
bottom: 0;
background-color: blue;
border-radius:50%;
}
.right{
top: 0;
right: 0;
/*background-color: yellow;*/
border-radius:50%;
}
.cen{
right: 0;
bottom:0;
/*background-color: #FF8C00;*/
}
@keyframes name{
10%{
transform: scale(1.1) rotate(45deg);
}
20%{
transform: scale(1.2)rotate(45deg);
}
30%{
transform: scale(1.3)rotate(45deg);
}
40%{
transform: scale(1.4)rotate(45deg);
}
50%{
transform: scale(1.3)rotate(45deg);
}
60%{
transform: scale(1.2)rotate(45deg);
}
70%{
transform: scale(1.3)rotate(45deg);
}
80%{
transform: scale(1.4)rotate(45deg);
}
90%{
transform: scale(1.2)rotate(45deg);
}
}
</style>
</head>
<body>
<div class="ax">
<div class="left"></div>
<div class="cen"></div>
<div class="right"></div>
</div>
</body>
</html>
CSS3跳動(dòng)的心型 END
CSS3閃耀的星星的動(dòng)態(tài)效果 START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
/*設(shè)置背景顏色為黑色*/
background-color: #000;
}
span {
/*span是行內(nèi)元素，本來不可以設(shè)置寬和高。但添加絕對定位就變成BFC元素，就可以設(shè)置寬和高*/
position: absolute;
width: 30px;
height: 30px;
background: url("51.png");
background-size: 100% 100%;
}
span:hover {
/*scale(3,3)表示寬度和高度都放大三倍（2D縮放轉(zhuǎn)換），并旋轉(zhuǎn)180度*/
transform: scale(3,3) rotate(180deg) !important;
transition: all 1s;
}
</style>
<script>
window.onload = function() {
//獲取當(dāng)前界面的大小，界面變小或變小星星的位置和數(shù)量不會(huì)改變
var screenW = document.documentElement.clientWidth;
var screenH = document.documentElement.clientHeight;
//動(dòng)態(tài)創(chuàng)建多個(gè)星星
for(var i = 0;i < 150;i ++) {
var span = document.createElement('span');
//將動(dòng)態(tài)創(chuàng)建的span元素添加到body里面
document.body.appendChild(span);
//隨機(jī)函數(shù)產(chǎn)生0-1之間的數(shù)，左閉右開，定位星星的位置
var x = parseInt(Math.random() * screenW);
var y = parseInt(Math.random() * screenH);
span.style.left = x + 'px';
span.style.top = y + 'px';
//圖片大小隨機(jī)
var scale = Math.random() * 1.5;
//定義2D縮放轉(zhuǎn)換
span.style.transform =?
? ? 'scale(' + scale + ',' + scale + ')';
}
}
</script>
</head>
<body>
</body>
</html>
CSS3閃耀的星星的動(dòng)態(tài)效果 END
CSS3心型 START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
width: 100%;
text-align: center;
}
.ax{
position: relative;
width: 300px;
height: 300px;
margin: 200px auto;
background-color: chartreuse;
transform: rotate(45deg);
}
.ax div{
position: absolute;
width: 200px;
height: 200px;
background-color: red;
}
.left{
left: 0;
bottom: 0;
background-color: blue;
border-radius:50%;
}
.right{
top: 0;
right: 0;
/*background-color: yellow;*/
border-radius:50%;
}
.cen{
right: 0;
bottom:0;
/*background-color: #FF8C00;*/
}
</style>
</head>
<body>
<div class="ax">
<div class="left"></div>
<div class="cen"></div>
<div class="right"></div>
</div>
</body>
</html>
CSS3心型 END
CSS3多媒體查詢實(shí)例 START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul {
? ?list-style-type: none;
}
ul li a {
? ? color:green;
? ? text-decoration: none;
? ? padding: 3px;?
? ? display: block;
}
@media screen and (max-width: 699px) and (min-width: 520px), (min-width:1151px){
? ? ul li a {
? ? ? ? padding-left: 30px;
? ? ? ? background: url(img/emoticon2.ico) left center no-repeat;
? ? }
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
? ? ul li a:before {
? ? ? ? content: "地址: ";
? ? ? ? font-style: italic;
? ? ? ? color: #666666;
? ? }
}
@media screen and (min-width: 1001px) {
? ? ul lia:after {
? ? ? ? content: " ("attr(data-ctx)")";
? ? ? ? font-size: 12px;
? ? ? ? font-style: italic;
? ? ? ? color: #666666;
? ? }
}
</style>
</head>
<body>
<ul>
? ? <li><a href="#" data-ctx="說明1">鏈接1</a></li>
? ? <li><a href="#" data-ctx="說明1">鏈接2</a></li>
? ? <li><a href="#" data-ctx="說明1">鏈接3</a></li>
</ul>
</body>
</html>
CSS3多媒體查詢實(shí)例 END
CSS樣式類型 START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 寫在style標(biāo)簽中的樣式就叫嵌入式樣式 -->
<style type="text/css">
p {
font-size: 30px;
color: blue;
}
</style>
<link rel="stylesheet" href="css/my.css" />
</head>
<body>
<!-- 寫在元素的style屬性中的樣式就叫內(nèi)聯(lián)式樣式 -->
<div style="width: 100px;height: 100px;background-color: red;"></div>
<p>Hello world</p>
<span>測試文字</span>
</body>
</html>
CSS樣式類型 END
CSS選擇器 START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#ctx {
color: red;
}
.bg {
}
span {
color: orange;
}
/*通用選擇器*/
*{}
/*子選擇器：>表示選擇ul標(biāo)簽的兒子中間的a標(biāo)簽
? ? 空格表示選擇ul標(biāo)簽所有的后代中的a標(biāo)簽*/
ul>a {
color: red;
}
/*群組選擇器：,*/
div,input {
background-color: yellow;
}
#ctx,span {
font-size: 50px;
}
</style>
</head>
<body>
<ul>
<a href="#">擴(kuò)展</a>
<li>語文</li>
<li>數(shù)學(xué)<a href="#">瀏覽</a></li>
<li>英語<div><h1><a href="#">PPP</a></h1></div></li>
</ul>
<div id="ctx">aaa</div>
<span class="bg">hehe</span>
<span class="bg">bbb</span>
<span class="bg">cccc</span>
<input type="text" class="bg" />
<span>lop</span>
</body>
</html>
CSS選擇器 END
CSS偽類選擇器 START????
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#inp:active {
border: 5px red solid;
}
#inp:focus {
font-size: 50px;
}
div:hover {
color: orange;
}
a:link {
color: deeppink;
text-decoration: line-through;
}
a:visited {
color: green;
}
li:first-child {
color: red;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<ul>
<li>語文</li>
<li>數(shù)學(xué)</li>
<li>英語</li>
</ul>
<input id="inp" type="text" />
<div>Hello world</div>
<a href="#">瀏覽</a>
</body>
</html>
CSS偽類選擇器 END
CSS偽元素選擇器 START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p::first-letter {
font-size: 50px;
}
#myDiv::first-line {
color: red;
}
#link {
position: relative;
display: inline-block;
outline: none;
text-decoration: none;
color: #000;
font-size: 12px;
padding: 5px 10px;
left: 100px;
}
#link:hover::before,a:hover::after {
position: absolute;
}
#link:hover::before {
content: '\5B';
left: -20px;
}
#link:hover::after {
content: '\5D';
right: -20px;
}
#sc {
position: absolute;
left: 200px;
top: 400px;
}
#sc:hover::before {
content: url(img/wingLeft.jpg);
position: absolute;
left: -80px;
top: -80px;
opacity: 0.5;
}
#sc:hover::after {
content: url(img/wingRight.jpg);
position: absolute;
right:-80px;
top:-80px;
opacity: 0.5;
}
</style>
</head>
<body>
<a href="#" id="sc">
<img src="img/23.png" />
</a>
<br>
<a id="link" href="#">haoroom</a>
<p>
舉頭望明月，低頭思故鄉(xiāng)
</p>
<p>
兩岸猿聲啼不住，輕舟已過萬重山
</p>
<div id="myDiv">
aaaaaaaaaaaa
<br>
bbbbbbbbbbbb
<br>
cccccccccccc
</div>
</body>
</html>
CSS偽元素選擇器 END
CSS權(quán)重 START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
? ? color: red;/*0,0,0,0*/
}
div {
color: yellow;/*0,0,0,1*/
}
div span {
color: green;/*0,0,0,2*/
}
span[id] {
color:orange;/*0,0,1,1*/
}
#sp1 {
color: pink;/*0,1,0,0*/
}
</style>
</head>
<body>
<!-- 1,0,0,0 -->
<div style="color: orange;">Hello world</div>
<div>Hello
<span>A</span>
<span id="sp1">G</span>
<span>K</span>
</div>
</body>
</html>
CSS權(quán)重 END
CSS樣式繼承 START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
color:yellow;
}
.list .item {/*0,0,2,0*/
color: red;
font-size: 50px;
border: 5px solid green;
}
</style>
</head>
<body>
<ul class="list">
<li class="item">AAA
<!-- span元素沒有color屬性，按道理應(yīng)該就是顯示黑色，
? 但是因?yàn)樗母冈豯i的color屬性是紅色，
? 所以這個(gè)樣式屬性被繼承給了它的子元素span
-->
<span>注意文字的顏色</span>
</li>
<li>
BBB
</li>
</ul>
</body>
</html>
CSS樣式繼承 END
CSS元素的分類 START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
height: 100px;
background-color: gray;
}
</style>
</head>
<body>
<a href="#">KKK</a>
<a href="#">JJJ</a>
<a href="#">HHH</a>
<span style="width: 1500px;">Hello world</span>
<div>A</div><div>B</div>
<div style="width: 200px;">
<div>C</div>
</div>
<input type="text" style="width: 200px;height: 60px;"/>
<input type="text"/>
<input type="text"/>
</body>
</html>
CSS元素的分類 END
CSS邊框 START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#ctx {
width: 200px;
height: 200px;
border: 10px solid red;
border-radius: 100%;
}
</style>
</head>
<body>
<div id="ctx">AAA</div>
</body>
</html>
CSS邊框 END
CSS浮動(dòng)模型 START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 100px;
height: 100px;
float: right;
}
</style>
</head>
<body>
<div style="background-color: red;">A</div>
<div style="background-color: green;">B</div>
</body>
</html>
CSS浮動(dòng)模型 END
CSS層模型 START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1 {
width: 200px;
height: 200px;
border: 5px solid red;
position: relative;
top: 2300px;
left: 300px;
}
#d2 {
width: 200px;
height: 200px;
border: 5px solid blue;
}
#d3 {
width: 200px;
height: 200px;
border: 5px solid green;
position: fixed;
top: 100px;
right: 10px;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3">廣告位</div>
</body>
</html>
CSS層模型 END
CSS定位布局例子 START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1 {
width: 400px;
height: 400px;
background-color: pink;
position: relative;
left: 100px;
top: 150px;
}
#box2 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 50px;
top: 100px;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">AAA</div>
</div>
</body>
</html>
CSS定位布局例子 END
CSS清除浮動(dòng) START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*清除浮動(dòng)方法三：給父元素添加一個(gè)偽元素*/
#dv::after {
display: block;
clear: both;
content: '';
visibility: hidden;
height: 0;
}
</style>
</head>
<body>
<!-- 清除浮動(dòng)方法二：在父元素樣式中添加overflow: hidden; -->
<div id="dv" style="background-color: blue;">
<div style="float: left;">A</div>
<div style="float: left;">B</div>
<div style="float: left;">C</div>
<!-- 清除浮動(dòng)的方法一 -->
<!--<div style="width: 0;height: 0;clear: both;"></div>-->
</div>
</body>
</html>
CSS清除浮動(dòng) END
盒子模型 START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#a {
background-color: red;
height: 100px;
}
#c {
background-color: blue;
height: 100px;
}
#b {
background-color: yellow;
width: 100px;
height: 100px;
margin: -50px 0px;
border: 5px red solid;
padding: 20px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<br>
<input type="text" />
<span style="margin-left: -170px;">搜索</span>
</body>
</html>
盒子模型 END
樣式中的長度單位 START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
font-size: 100px;
}
div {
/*字體大小是： 100 * 0.3 = 30px */
font-size: 0.3em;
/*寬度是當(dāng)前元素的字體大小的6倍： 30 * 6 = 180px */
width: 6em;
height: 6em;
background-color: red;
}
#ctx {
font-size: 50px;
}
p {
font-size: 0.8em;
width: 3em;
}
</style>
</head>
<body>
<div>Hello world</div>
<div id="ctx">
<p>AAA</p>
</div>
</body>
</html>
樣式中的長度單位 END
rem的使用 START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html {
font-size: 200px;
}
.cls {
width: 5rem;
height: 4rem;
background-color: pink;
position: absolute;
top: 50%;
left: 50%;
margin-left: -2.5rem;
margin-top: -2rem;
padding: 0px;
}
</style>
</head>
<body>
<div class="cls"></div>
</body>
</html>
rem的使用?END
CSS3新的屬性 START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#a {
border: 2px solid red;
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: 10px 10px 5px #808080;
}
#b {
border: 15px solid transparent;
width: 100px;
height: 100px;
border-image: url(img/Bat.png) 30 30 stretch;
}
#c {
width: 400px;
height: 400px;
background-image: url(img/shot.png),url(img/bg1.jpg);
background-position: left bottom,left top;?
background-repeat: no-repeat,no-repeat;
}
#d {
border: 100px solid white;
background-color: pink;
padding: 100px;
background-image: url(img/23.png);
background-repeat: no-repeat;
background-position: left;
background-origin: padding-box;
}
</style>
</head>
<body>
<div id="d">Hello world</div>
<div id="c"></div>
<div id="a"></div>
<div id="b"></div>
</body>
</html>
/*?圖片邊框*/
多張圖片疊加的廣告效果界面：
CSS3新的屬性 END
CSS3boxsizing屬性 START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
width: 300px;
height: 300px;
background-color: yellow;
}
.first {
width: 150px;
height: 100px;
float: left;
background-color: pink;
border: 5px red solid;
box-sizing: border-box;
}
.second {
width: 150px;
height: 100px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="first"></div>
? ? <div class="second"></div>
</div>
</body>
</html>
CSS3boxsizing屬性 END
CSS3線性漸變 START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#a {
height: 400px;
/*top,bottom,left,right*/
background-image: linear-gradient(to top left,red,blue);
}
#b {
height: 400px;
background-image: linear-gradient(red,orange,yellow,green,blue,indigo,violet);
}
</style>
</head>
<body>
<div id="b"></div>
<div id="a"></div>
</body>
</html>
CSS3線性漸變 END
學(xué)習(xí)筆記講義 START
盒子模型：
content:內(nèi)容
padding:填充，控制內(nèi)容和邊框之間的空白的
border:邊框
margin:外邊距
position：位置
長度單位：px,em,rem
px:像素
em:比例縮放,子元素的樣式根據(jù)父元素的字體大小進(jìn)行設(shè)置
rem:root em，根據(jù)根標(biāo)簽<html>的字體大小來進(jìn)行計(jì)算
學(xué)習(xí)筆記講義?END
CSS3-1新的屬性.ppt START
CSS3-1新的屬性.ppt END
CSS3-2字體.ppt START
linear：規(guī)定以相同速度開始至結(jié)束的過渡效果
ease：規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過渡效果
ease-in：規(guī)定以慢速開始的過渡效果
ease-out：規(guī)定以慢速結(jié)束的過渡效果
ease-in-out：規(guī)定以慢速開始和結(jié)束的過渡效果
CSS3-3轉(zhuǎn)換和過渡.ppt END
CSS3-4動(dòng)畫.ppt START
CSS3-4動(dòng)畫.ppt END
CSS3-5媒體查詢.ppt START
CSS3-5媒體查詢.ppt END
CSS3-6彈性盒子.ppt START
align-content屬性用于修改flex-wrap屬性的行為。類似于align-items, 但它不是設(shè)置彈性子元素的對齊，而是設(shè)置各個(gè)行的對齊。
1、stretch：默認(rèn)，各行將會(huì)伸展以占用剩余的空間。
2、flex-start：各行向彈性容器的起始位置堆疊。
3、flex-end：各行向彈性容器的結(jié)束位置堆疊。
4、center：各行向彈性盒容器的中間位置堆疊。
5、space-between：各行在彈性盒容器中平均分布。
6、space-around：各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。
注意：必須對父元素設(shè)置自由盒屬性display:flex;，并且設(shè)置排列方式為橫向排列flex-direction:row;并且設(shè)置換行，flex-wrap:wrap;這樣這個(gè)屬性的設(shè)置才會(huì)起作用。?
flex屬性用于指定彈性子元素如何分配空間。
auto: 計(jì)算值為 1 1 auto?
initial: 計(jì)算值為 0 1 auto?
none：計(jì)算值為 0 0 auto
inherit：從父元素繼承
[ flex-grow ]：定義彈性盒子元素的擴(kuò)展比率。
[ flex-shrink ]：定義彈性盒子元素的收縮比率。
[ flex-basis ]：定義彈性盒子元素的默認(rèn)基準(zhǔn)值
CSS3-6彈性盒子.ppt END
CSS3-7柵格系統(tǒng).ppt START
CSS3-7柵格系統(tǒng).ppt END
作業(yè) START
1、通過CSS繪制一個(gè)三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#dengBianSanJiaoXing{
? ? width: 0;
? ? height: 0;
? ? border-left: 50px solid transparent;
? ? border-right: 50px solid transparent;
? ? border-bottom: 100px solid red;
}
</style>
<body>
<div id="dengBianSanJiaoXing">
</div>
</body>
</html>
更多擴(kuò)展例子：https://www.jb51.net/article/42513.htm
transparent屬性用來bai指定全透明色彩
transparent是全透明黑色(black)的速記法，即一個(gè)類似rgba(0,0,0,0)這樣的值。在CSS1中，transparent被用來作為background-color的一個(gè)參數(shù)值，用于表示背景透明。
transparent透明的。
2、通過CSS代碼居中顯示div
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#seKuai{
width: 66px;
height: 66px;
background-color: red;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
</style>
<body>
<div? id="seKuai">
</div>
</body>
</html>
absolute：絕對定位
推薦：https://blog.csdn.net/a1044187112/article/details/108261893
