代码
<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代码
* {/*清空默认的内外边边距*/
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: 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;/*背景设置*/
}
.searchPic ul li a:hover {
text-decoration: underline;/*添加下划线*/
color: #FF8400;
}
结果
image.png
