前端學習筆記 day03 盒子模型（二）
阿新 • • 發佈：2018-12-01
1. 搜尋趣圖框的製作
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { /*一般在CSS佈局之前都需要寫上這句，用來清除元素預設的內外邊距*/ margin: 0px; padding: 0px; } ul { /*這個一般是使用無序列表ul時 不採用自帶的小圓點*/ list-style: none; } .searchpic { /*首先設定最外邊最大的那個容器*/ width: 238px; height: 294px; border: 1px solid #D9E0EF; border-top: 3px solid #FF8400; /*這部分是設定最上面的導航條*/ margin: 100px; } .searchpic h3 { /*這部分是設定搜尋邊框那個小盒子，也需要設定高度，而寬度就是用父盒子的寬度，需要設定下邊框*/ height: 35px; border-bottom: 1px solid #D9E0EF; font-size: 16px; font-weight: normal; line-height: 35px; padding-left: 12px; } .searchpic img { /*對於搜尋邊框下面的動圖，插入圖片使用width height 來設定插入圖片的寬高 然後圖片的位置，距離外面最大的盒子 有一段距離，可以使用margin-left來設定，因為iamge是一個行內塊元素，類似於盒子 可以設定外邊距，再補充一點，行內元素只可以設定左右內外邊距，不可以設定上下內外邊距*/ width: 200px; margin: 7px 0 0 8px; } .searchpic ul li a { /*對於動圖下面的a標籤，可以設定字型大小，字型的顏色，a標籤中的字型需要使用text-decoration去掉下劃線，由於a標籤是一個行內元素，是不可以設定寬度和高度的*/ text-decoration: none; font-size: 12px; color: #666; } .searchpic ul li { /*對於li標籤可以設定寬度 高度，盒子的左側外邊距，其實就是跟動圖的左側外邊距一樣，然後設定盒子中字型垂直方向居中對齊：line-height:height即可; 然後還可以設定左側內邊距，主要是li標籤裡面有一個a標籤，不讓a那麼緊挨著li標籤， 顯示效果就是a標籤的文字距離li盒子左側有距離*/ margin-left: 8px; background: url(../../images/square.png) no-repeat left center; /*插入背景圖片，其實就是文字前面的小圖片 這裡使用的是背景圖片 需要設定背景圖片的位置 bgp*/ padding-left: 10px; height: 26px; line-height: 26px; } .searchpic ul li a:hover { color: red; text-decoration: underline; } </style> </head> <body> <div class="searchpic"> <h3>搜尋趣圖</h3> <img src="../../images/happy.gif" alt="圖片無法載入" title="happy.gif"> <ul> <li><a href="#">我們是動圖下面的文字部分</a></li> <li><a href="#">我們是動圖下面的文字部分</a></li> <li><a href="#">我們是動圖下面的文字部分</a></li> </ul> </div> </body> </html>
執行結果：
