天貓商城前端學習總結(1)
阿新 • • 發佈：2018-12-19
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> </head> <div class="homepageCategoryProducts"> <div class="eachHomepageCategoryProducts"> <div class="left-mark"></div> <span class="categoryTitle">太陽鏡</span> <br> <div class="productItem"> <a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/9543.jpg"></a> <a href="#nowhere" class="productItemDescLink"> <span class="productItemDesc">[熱銷] 好先生同款墨鏡孫紅雷偏光男士太陽鏡韓明星 </span> </a> <span class="productPrice"> 97.50 </span> </div> <div class="productItem"> <a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/9532.jpg"></a> <a href="#nowhere" class="productItemDescLink"> <span class="productItemDesc">[熱銷] 陌森太陽眼鏡男女2016偏光定製駕駛近視 </span> </a> <span class="productPrice"> 518.70 </span> </div> <div class="productItem"> <a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/9521.jpg"></a> <a href="#nowhere" class="productItemDescLink"> <span class="productItemDesc">[熱銷] 帕莎Prsr太陽鏡女偏光鏡潮范冰冰同款女 </span> </a> <span class="productPrice"> 624.00 </span> </div> <div class="productItem"> <a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/9510.jpg"></a> <a href="#nowhere" class="productItemDescLink"> <span class="productItemDesc">[熱銷] 變色眼鏡男女款半框太陽鏡大框潮流防輻射防 </span> </a> <span class="productPrice"> 170.00 </span> </div> <div class="productItem"> <a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/9499.jpg"></a> <a href="#nowhere" class="productItemDescLink"> <span class="productItemDesc">[熱銷] 新款男士偏光太陽鏡日夜兩用墨鏡潮運動開車 </span> </a> <span class="productPrice"> 551.00 </span> </div> <div style="clear:both"></div> </div> <div class="eachHomepageCategoryProducts"> <div class="left-mark"></div> <span class="categoryTitle">安全座椅</span> <br> <div class="productItem"> <a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/10192.jpg"></a> <a href="#nowhere" class="productItemDescLink"> <span class="productItemDesc">[熱銷] 新生兒嬰兒提籃式安全座椅汽車用車載兒童安 </span> </a> <span class="productPrice"> 882.00 </span> </div> <div class="productItem"> <a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/10181.jpg"></a> <a href="#nowhere" class="productItemDescLink"> <span class="productItemDesc">[熱銷] REEBABY汽車兒童安全座椅ISOFI </span> </a> <span class="productPrice"> 1,344.00 </span> </div> <div class="productItem"> <a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/10170.jpg"></a> <a href="#nowhere" class="productItemDescLink"> <span class="productItemDesc">[熱銷] REEBABY兒童安全座椅9個月-12歲 </span> </a> <span class="productPrice"> 1,216.00 </span> </div> <div class="productItem"> <a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/10159.jpg"></a> <a href="#nowhere" class="productItemDescLink"> <span class="productItemDesc">[熱銷] 好孩子汽車兒童安全座椅goodbaby9 </span> </a> <span class="productPrice"> 1,199.40 </span> </div> <div class="productItem"> <a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/10148.jpg"></a> <a href="#nowhere" class="productItemDescLink"> <span class="productItemDesc">[熱銷] 惠爾頓兒童安全座椅isofix硬介面汽車 </span> </a> <span class="productPrice"> 1,993.60 </span> </div> <div style="clear:both"></div> </div> <img src="http://how2j.cn/tmall/img/site/end.png" class="endpng" id="endpng"> </div>
出來的效果是這樣的
<div class="productItem"> <a href="#nowhere"><img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/9543.jpg"></a> <a href="#nowhere" class="productItemDescLink"> <span class="productItemDesc">[熱銷] 好先生同款墨鏡孫紅雷偏光男士太陽鏡韓明星 </span> </a> <span class="productPrice"> 97.50 </span> </div>
一個div佔一行，裡面包含著的內容是超連結 圖片 價格
之後加入樣式css
div.homepageCategoryProducts{
background-color: #F5F5F5;
padding: 50px 10px 50px 10px;
margin: 10px auto;
max-width: 1013px;
}
div.homepageCategoryProducts這句話的意思是div標籤下的homepageCategoryProducts類的樣式。
padding: 50px 10px 50px 10px;設定內邊距，屬性定義元素邊框與元素內容之間的空間 margin: 10px auto;是外邊距，居中 display: inline-block;把其中的樣式改為內聯
塊級元素div預設是佔用100%的寬度
常見的塊級元素有div h1 p 等
而內聯元素span的寬度由其內容的寬度決定
常見的內聯元素有 a b strong i input 等