搜索趣图（重点案例）

最新推荐文章于 2021-05-30 19:08:47 发布

weixin_34166847

最新推荐文章于 2021-05-30 19:08:47 发布

阅读量784

点赞数

原文链接：https://juejin.im/post/5cda17e4518825691b4a5b48

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /* 清空内外边距  几乎是我们写css 必须要写的 */
  * {  
    margin: 0;
    padding: 0;
  }
     ul {
      list-style: none;
    }

  
  .searchpic {
    width: 238px;
    height: 294px;
    border: 1px solid #d9e0ee;
    border-top: 3px solid #ff8400;
    margin: 100px;
  }
  .searchpic h3 {
    height: 35px; 
    line-height: 35px;
    border-bottom: 1px 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;
    height: 26px;
    line-height: 26px;
  }
.searchpic ul li {
  padding-left: 8px;
  background: url(3.png) no-repeat left center;
}
.searchpic ul li a:hover {
  text-decoration: underline;
  color:#ff8400

}
</style>
</head>

<body>
  <div class="searchpic">
    <p>搜索趣图</p>
    <img src="1.png" alt="">
    <ul>
      <li><a href="#">小胖墩 </a> </li>
      <li><a href="#">小胖墩 </a> </li>
      <li><a href="#">小胖墩 </a> </li>
    </ul>
  </div>
</body>
</html>
复制代码

weixin_34166847

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
搜索趣图（重点案例）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp...
复制链接

扫一扫