複習
- 塊標籤
- 行內標籤
- 盒模型
- ul和ol的區別 去掉列表樣式的方法
- 塊標籤和行內標籤的轉換
h5
h4和h5的區別
- h4
標籤小寫 - h5
– 不區分大小寫,但是儘量規範
– 語義化標籤
<!--排版-->
<header>頭部標籤</header>
<nav>導航標籤</nav>
<section>正文--大段落
<aside>側標欄</aside>
<article>小段落標籤1</article>
<article>小段落標籤2</article>
</section>
<footer>頁腳--個人信息</footer>
<!--新增的表單-->
<input type="number"><!-- 數字 -->
<input type="email"><!-- 郵箱 -->
<input type="time"><!-- 時間 -->
<input type="date"><!-- 日期 -->
<input type="color"><!-- 顏色 -->
<input type="range"><!-- 範圍調節 -->
<!--媒體標籤-->
<video src="文件路徑" controls="controls" autoplay="autoplay" loop="loop"></video>
<!-- 播放標籤 controls是控制 autoplay是自動播放 loop是循環 -->
<audio src="文件路徑" ></audio><!-- 音頻標籤 -->
<!-- 下拉標籤 -->
<details>
<summary>標題</summary>
<p>段落</p>
</details>
<!-- 畫布標籤 配合js使用-->
<canvas class="cn"></canvas>
<script>
var cn=document.getElementsByClassName("cn")[0];
var can=cn.getContext('2d');
can.fillStyle="red";
can.fillRect(100,100,100,100);/*x,y,寬,高*/
</script>
css3新增屬性
文字陰影/盒子陰影
<style>
*{
margin:0;
padding: 0;
}
#box{
width: 200px;
height: 200px;
background: orange;
text-shadow: 5px 5px 5px blue;/*文字陰影 左右偏移 上下偏移 模糊程度 顏色*/
box-shadow: 5px 5px 5px blue;
}
</style>
<!-- 以上是header中內容 以下是body中內容 -->
<div id="box">
this is a box
</div>
邊框
border:5px solid #666;
border-color:; /*顏色*/
border-width:5px;/* 大小 */
border-style:;/* 樣式 */
border-image:url("路徑"); /* 圖片 必須設置border!*/
border-radius:5px;
背景
/* 建議使用background:url() norepeat 100px 100px;*/
background-image: ;/* 背景圖片 */
background-repeat:repeat/norepeat;/*是否重複*/
background-clip: ;/* 用來做裁剪 */
background-position:;/*定位*/
文字溢出隱藏[容錯]
- text-overflow
- white-space
- overflow
三者缺一不可 要強調寬度
#box p{
height: 30px;
width: 100%;
text-overflow: ellipsis;/*溢出文字變成...*/
white-space: nowrap;/*不換行*/
overflow: hidden;/*出界隱藏*/
}
透明底
- opacity:整體透明度一起改變 連字也變透明
opacity:0.3; /*調整透明度 取值在0-1之間 盒子和文字一起改透明度*/
- rgba:僅背景顏色變透明 字不會變透明
background:rgba(0,255,133,0.6);
/*前三個是顏色取值0-255 最後一個是透明度取值0-1*/
圖片精靈/雪碧圖
把頁面所需的圖標.圖片都在一張圖片上顯示,通過調整圖片的位置展示
優點: 節省空間 減少加載時間
background-position: -110px -110px;
background-origin: /*背景圖片的原點*/
background-attachment:fixed; /*頁面出現滾動條 是否跟着滾動條滾動 fixed是不滾動*/
彈性盒
佔位
一個元素不能又使用彈性盒又使用隱藏
<head>
<meta charset="UTF-8">
<title>彈性盒子</title>
<style>
*{
margin:0;
padding: 0;
}
#box{
width: 100%;
height:400px;
background: #ff9;
display: flex;/*要排列小盒子 要把彈性盒子給父元素*/
flex-direction: row-reverse;/* 排列方向 row默認橫向 column豎着排列 column-reverse反着豎着排*/
}
#box>div{
font-size: 30px;
flex-grow: 1;/*分配方式 可簡寫成flex*/
}
#box>div:nth-child(1){
flex: 0.2;/*佔比是20%*/
}
#box>div:nth-child(2){
flex: 0.5;/*佔比是50%*/
}
#box>div:nth-child(3){
flex: 0.3;/*佔比是30%*/
}
</style>
</head>
<body>
<div id="box">
<div class="innerbox" style="background:pink">111</div>
<div class="innerbox" style="background:blue">222</div>
<div class="innerbox" style="background:green">333</div>
</div>
</body>
變形
- 旋轉
<head>
<meta charset="UTF-8">
<title>變形</title>
<style>
#box{
width: 200px;
height: 200px;
background: red;
margin:0 auto;
transform: rotate(30deg);
/*rotateX rotateY 以x軸y軸旋轉 deg是角度*/
}
body{
perspective: 1000px;/*透視效果*/
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
- 縮放
取值爲0-1爲縮小 1以上爲放大 scaleX:橫向縮放 scaleY:縱向縮放 scaleZ
transform: scale(0.5);
- 平移
transform: translate(30px,30px);
- 扭曲
單位是deg角度 正值爲向左上扭曲,負值爲向右上扭曲 沒有z軸扭曲
transform: skew(30deg);
過渡
<head>
<meta charset="UTF-8">
<title>過渡</title>
<style>
#box{
margin:100px auto;
width: 100px;
height: 100px;
background: red;
transition: 1s ease-in height;
/*過渡1s,加速運行,只有height變化中用到過渡*/
}
#box:hover{/*鼠標經過*/
width: 50px;
height:200px;
}
#box:active{/*鼠標點擊 未鬆開的動作*/
background: purple;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
動畫
- 關鍵幀 @keyframes可以有很多個關鍵幀,但不能重名
<head>
<meta charset="UTF-8">
<title>動畫</title>
<style>
#box{
height: 100px;
width: 100px;
margin:0;
background: red;
position: absolute;
animation:run 5s 3s 3 backwards alternate;
/* 關鍵幀名 運行時間 延遲時間 結束後的狀態 往返*/
}
@keyframes run{
0%{left:0px;}
100%{left:500px;}
}
</style>
</head>
<body>
<div id="box"></div>
</body>