代碼
<title>搜索趣圖</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="searchPic">
<h3>搜索趣圖</h3>
<img src="image/bj.jpg" width="218" height="160" alt="">
<ul>
<li><a href="#">JPG:北京歡迎你</a></li>
<li><a href="#">JPG:北京歡迎你</a></li>
<li><a href="#">JPG:北京歡迎你</a></li>
</ul>
</div>
css代碼
* {/*清空默認(rèn)的內(nèi)外邊邊距*/
margin: 0;
padding: 0;
}
ul {
list-style: none;/*取消列表自帶的小點(diǎn)，默認(rèn)的列表樣式*/
}
.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: 3px solid #D9E0EE;
font-size: 16px;
font-weight: normal;/*讓粗體不變粗*/
padding-left: 12px;
}
.searchPic img {
margin: 7px 0 0 8px;/*上右下左*/
}
.searchPic ul li a {
font-size: 12px;
color: #666666;
text-decoration: none;/*取消下劃線*/
}
.searchPic ul {
margin-left: 8px;
}
.searchPic ul li {
padding-left: 10px;
height: 26px;
line-height: 26px;
background:url("../image/ff.png") no-repeat left center;/*背景設(shè)置*/
}
.searchPic ul li a:hover {
text-decoration: underline;/*添加下劃線*/
color: #FF8400;
}
結(jié)果
image.png
