黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（权重，盒子模型）
生活随笔
收集整理的這篇文章主要介紹了
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（权重，盒子模型）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一、基礎(chǔ)班學(xué)習(xí)路線
三、CSS3基礎(chǔ)
1.CSS的三大特性
CSS三大特性之層疊性
CSS三大特性之繼承性
行高的繼承
CSS三大特性之優(yōu)先級(jí)
CSS權(quán)重的疊加
- 十個(gè)在最后累加會(huì)變成0，0，0，10；權(quán)重雖然會(huì)疊加，但是永遠(yuǎn)不會(huì)有進(jìn)位
2.CSS盒子模型
網(wǎng)頁布局的本質(zhì) ：
盒子模型組成部分
盒子模型邊框border
邊框的復(fù)合寫法
表格細(xì)線邊框
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table {width: 500px;height: 249px;}th {height: 35px;}table,td,th {border: 1px pink solid;border-collapse: collapse;font: 14px;text-align: center;}</style> </head><body><table align="center" cellspacing="0"><thead><tr><th>排名</th><th>關(guān)鍵詞</th><th>進(jìn)入搜索</th><th>最近七日</th><th>相關(guān)鏈接</th></tr></thead><tbody><tr><td>1</td><td>鬼吹燈</td><td>456</td><td>123</td><td><a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a></td></tr><tr><td>1</td><td>鬼吹燈</td><td>456</td><td>123</td><td><a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a></td></tr><tr><td>1</td><td>鬼吹燈</td><td>456</td><td>123</td><td><a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a></td></tr><tr><td>1</td><td>鬼吹燈</td><td>456</td><td>123</td><td><a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a></td></tr><tr><td>1</td><td>鬼吹燈</td><td>456</td><td>123</td><td><a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a></td></tr></tbody></table> </body></html>邊框會(huì)影響盒子實(shí)際大小
盒子模型內(nèi)邊距padding
padding復(fù)合屬性
padding會(huì)影響盒子實(shí)際大小
padding應(yīng)用-新浪導(dǎo)航欄
小米側(cè)邊欄修改
padding不會(huì)撐開盒子的情況
- 如果盒子本身沒有指定w，h屬性，就和它父親一樣大，但如果指定了，又加了padding，可能會(huì)超出它的父親
盒子模型外邊距margin
外邊距典型應(yīng)用-塊級(jí)盒子水平對(duì)齊
行內(nèi)元素和行內(nèi)塊元素水平居中
外邊距合并-嵌套塊元素塌陷
清除內(nèi)外邊距
3.PS基本操作
4.綜合案例
產(chǎn)品模塊布局分析
box布局
圖片和段落制作
評(píng)價(jià)和詳情制作
豎線細(xì)節(jié)制作
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {background-color: #f5f5f5;}a {color: #333;text-decoration: none;}.box {width: 298px;height: 415px;background-color: #fff;/* 讓塊級(jí)的盒子水平居中對(duì)齊 */margin: 100px auto;}.box img {width: 100%;}.review {height: 70px;font-size: 14px;/* 因?yàn)檫@個(gè)段落沒有width屬性，所以 padding不會(huì)撐開盒子的寬度 *//* 同理，由于這個(gè)盒子有高度，不要因?yàn)榕c上面圖片有距離而增加padding上下 */padding: 0 28px;margin-top: 30px;}.appraise {font-size: 12px;color: #b0b0b0;margin-top: 20px;padding: 0 28px;}.info {font-size: 14px;margin-top: 15px;padding: 0 28px;}.info h4 {display: inline-block;font-weight: 400;}.info span {color: #ff6700;}.info em {font-style: normal;color: #ebe4e0;margin-top: 0 6px 0 15px;}</style> </head><body><div class="box"><img src="" alt=""><p class="review"><a href="#">快遞牛，整體不錯(cuò)藍(lán)牙可以秒接。紅米給力。</a></p><div class="appraise">來自于 117384232 的評(píng)價(jià)</div><div class="info"><h4><a href="#">Redmi AirDots真無線藍(lán)...</a></h4><em>|</em><span>99.9元</span></div></div> </body></html>解惑
總結(jié)
以上是生活随笔為你收集整理的黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（权重，盒子模型）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Discrete Logarithm i
- 下一篇： 黑马程序员pink老师前端入门教程，零基