css新闻列表案例(li标签和a标签各自控制一个背景图片)

这篇具有很好参考价值的文章主要介绍了css新闻列表案例(li标签和a标签各自控制一个背景图片)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>新闻列表</title>

  <style>

    * {

      margin: 0;

      padding: 0;

      box-sizing: border-box;

    }

    li {

      list-style: none;

    }

    a {

      text-decoration: none;

    }

    .news {

      margin: 100px auto;

      width: 360px;

      height: 200px;

      /* background-color: pink; */

    }

    .news .hd {

      height: 34px;

      background-color: #eee;

      border: 1px solid #dbdee1;

      border-left: 0;

    }

    .news .hd a {

      /* -1 盒子向上移动 */

      margin-top: -1px;

      display: block;

      border-top: 3px solid #ff8400;

      border-right: 1px solid #dbdee1;

      width: 48px;

      height: 34px;

      background-color: #fff;

      text-align: center;

      line-height: 32px;

      font-size: 14px;

      color: #333;

    }

    .news .bd {

      padding: 5px;

    }

    /* li标签和a标签各自控制一个背景图片 */

    .news .bd li {

      padding-left: 15px;

      background-image: url(./images/square.png);

      background-repeat: no-repeat;

      background-position: 0 center;

    }

    .news .bd li a {

      padding-left: 20px;

      background: url(./images/img.gif) no-repeat 0 center;

      font-size: 12px;

      color: #666;

      line-height: 24px;

    }

    .news .bd li a:hover {

      color: #ff8400;

    }

  </style>

</head>

<body>

  <!-- 新闻区域 包含 标题 + 内容 -->

  <div class="news">

    <div class="hd"><a href="#">新闻</a></div>

    <div class="bd">

      <ul>

        <li><a href="#">点赞“新农人” 温暖的伸手</a></li>

        <li><a href="#">在希望的田野上...</a></li>

        <li><a href="#">“中国天眼”又有新发现 已在《自然》杂志发表</a></li>

        <li><a href="#">急!这个领域,缺人!月薪4万元还不好招!啥情况?</a></li>

        <li><a href="#">G9“带货”背后:亏损面持续扩大,竞争环境激烈</a></li>

        <li><a href="#">多地力推二手房“带押过户”,有什么好处?</a></li>

      </ul>

    </div>

  </div>

</body>

</html>文章来源地址https://www.toymoban.com/news/detail-805650.html

到了这里,关于css新闻列表案例(li标签和a标签各自控制一个背景图片)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • java 爬虫 获取<ul>标签下<li>标签下的内容

    1 网页内容 all 里面 -- ul - li - 指定div 2 完整代码 将每条数据设置属性 存入map 中 再将map 存入list中

    2024年02月16日
    浏览(39)
  • html中图片、音乐、视频标签及选择器、背景

    目录 图片 音乐 视频 子代选择器 交集选择器 背景 文章主要补充之前html文章一些漏洞:HTML常用标签+表格+表单_小俱的一步步的博客-CSDN博客 在VScode中新创建html文件,!+“Tab”键,自动生成html骨架 图片 img src=\\\"图片相对地址\\\"/img      属性: alt:替换文本 title:提示文本

    2024年02月07日
    浏览(56)
  • selenium定位非select标签的下拉框(div/ul/li)

    1.定位下拉框,如果开发者选项是select标签的,我们一般会使用以下方法进行定位:  2.针对不是select属性的下拉框,如果再使用以上方法进行定位并选择可选项,就会报错,例如下拉框是在div标签,div标签下有ul,ul下有li可选项,这时候再使用1中的方法进行定位并选择,就

    2024年02月11日
    浏览(44)
  • 微信小程序:使用image标签做背景图片并铺满屏幕

     wxml页面 wxss页面 效果:    

    2024年02月03日
    浏览(93)
  • CSS实现一个交互感不错的卡片列表

    横向滚动 鼠标悬停时突出显示 默认堆叠展示 鼠标悬停时,完整展示当前块+适当旋出效果 移动端样式优化、磁吸效果 美化滚动条 flex 布局 css 简单变换+过渡 transform、transition 渐变色函数 linear-gradient … 伪类、伪元素 滚动条、::after、 ::before …

    2024年02月11日
    浏览(41)
  • vue、js获取页面中所有css样式(包括link标签)案例为打印使用

    最近碰到一个需求:将弹窗中的表单打印出来,还要保留弹窗表单的样式,为了对页面造成的影响最小采取iframe方案。 获取弹窗html内容很好办 这个时候我们点击打印按钮调用上面的方法,会发现表单缺少样式,怎么拿到缺少的css样式呢,代码如下 将代码加入方法print方法中

    2024年02月09日
    浏览(50)
  • CSS 设置背景图片

    一、基本设置 使用 CSS 可以通过以下属性设置背景图片: background-image : 设置背景图片的 URL。 background-size : 设置背景图片的大小。可以设置为绝对像素值,也可以设置为百分比或 \\\"cover\\\"(填充整个容器)或 \\\"contain\\\"(完整显示图片)。 background-repeat : 设置背景图片是否重复。可

    2024年02月12日
    浏览(48)
  • CSS-设置背景图片的大小

    要设置背景图片的大小,您可以使用CSS的 background-size 属性。这个属性允许您指定背景图片的尺寸。 background-size 属性可以接受不同的值,包括: auto :保持原始图片的尺寸。 cover :将图片缩放到完全覆盖背景区域,可能会裁剪部分图片。 contain :将图片缩放到完全适应背景

    2024年01月25日
    浏览(48)
  • CSS样式背景图片的自适应

    今天在写一个页面的时候,需要用到一个背景图片。 于是我把背景图片放到static(静态文件夹)里面,于是在css样式中引入,但是背景图片又太大,最后的样式就是比例失调。但是由于太久没有用到这个属性了,无可奈何又去找了一番度娘 废话不多说,上代码 1.css图片自适

    2024年02月11日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包