黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（权重，盒子模型）
生活随笔
收集整理的這篇文章主要介紹了
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（权重，盒子模型）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、基礎班學習路線
三、CSS3基礎
1.CSS的三大特性
CSS三大特性之層疊性
CSS三大特性之繼承性
行高的繼承
CSS三大特性之優(yōu)先級
CSS權重的疊加
- 十個在最后累加會變成0，0，0，10；權重雖然會疊加，但是永遠不會有進位
2.CSS盒子模型
網頁布局的本質 ：
盒子模型組成部分
盒子模型邊框border
邊框的復合寫法
表格細線邊框
<!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>關鍵詞</th><th>進入搜索</th><th>最近七日</th><th>相關鏈接</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>邊框會影響盒子實際大小
盒子模型內邊距padding
padding復合屬性
padding會影響盒子實際大小
padding應用-新浪導航欄
小米側邊欄修改
padding不會撐開盒子的情況
- 如果盒子本身沒有指定w，h屬性，就和它父親一樣大，但如果指定了，又加了padding，可能會超出它的父親
盒子模型外邊距margin
外邊距典型應用-塊級盒子水平對齊
行內元素和行內塊元素水平居中
外邊距合并-嵌套塊元素塌陷
清除內外邊距
3.PS基本操作
4.綜合案例
產品模塊布局分析
box布局
圖片和段落制作
評價和詳情制作
豎線細節(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;/* 讓塊級的盒子水平居中對齊 */margin: 100px auto;}.box img {width: 100%;}.review {height: 70px;font-size: 14px;/* 因為這個段落沒有width屬性，所以 padding不會撐開盒子的寬度 *//* 同理，由于這個盒子有高度，不要因為與上面圖片有距離而增加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="#">快遞牛，整體不錯藍牙可以秒接。紅米給力。</a></p><div class="appraise">來自于 117384232 的評價</div><div class="info"><h4><a href="#">Redmi AirDots真無線藍...</a></h4><em>|</em><span>99.9元</span></div></div> </body></html>解惑
總結
以上是生活随笔為你收集整理的黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（权重，盒子模型）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Discrete Logarithm i
- 下一篇： 黑马程序员pink老师前端入门教程，零基