<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* { /*清空默認的內外邊距 幾乎是我們寫css必須要寫的 */
margin: 0;
padding: 0;
}
ul {
list-style: none; /*取消列表自帶的小點 默認的列表樣式*/
}
.searchpic {
width: 238px;
height: 294px;
border: 1px solid #d9e0ee;
border-top: 3px solid #ff8400; /* 代碼從上往下依次執行 所以這句話要放在border的下面*/
margin: 100px;
}
.searchpic h3 {
height: 35px;
line-height: 35px; /*讓行高等於高度，可以讓文字垂直居中*/
border-bottom: 1px solid #d9e0ee;
font-size: 16px;
font-weight: normal; /*讓粗體不變粗*/
padding-left: 12px; /*因爲這個h3沒有給寬度，繼承父親的寬度padd就不會撐開盒子了*/
}
.searchpic img {
margin: 7px 0 0 8px; /*上右下左*/
}
.searchpic ul li a {
font-size: 12px;
color: #666;
text-decoration: none; /* 取消下劃線*/
}
.searchpic ul {
margin-left: 8px;
}
.searchpic ul li {
padding-left: 10px;
height: 26px;
line-height: 26px;
background: url(1.png) no-repeat left center; /*背景設置*/ /*水平 垂直*/
}
.searchpic ul li a:hover {
text-decoration: underline; /*添加下劃線*/
color: #ff8400;
}
</style>
</head>
<body>
<div class="searchpic">
<h3>搜索趣圖</h3>
<img src="1.jpg" height="160" width="218" alt="">
<ul>
<li><a href="#">魔獸世界新圖</a></li>
<li><a href="#">魔獸世界新圖</a></li>
<li><a href="#">魔獸世界新圖</a></li>
</ul>
</div>
</body>
</html>
盒子案例
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章