龙空技术网

CSS模仿今日头条文章显示

程序员COW哥 312

前言:

此刻兄弟们对“css文字显示在图片上”可能比较注重,看官们都想要剖析一些“css文字显示在图片上”的相关内容。那么小编同时在网上网罗了一些有关“css文字显示在图片上””的相关资讯,希望姐妹们能喜欢,姐妹们快快来学习一下吧!

运行效果

效果图

技术要点图片和文字的对齐方式,vertical-align: bottom 底部对齐,vertical-align: middle 居中对齐浮动 float: left,子元素一浮动,需要全部浮动,浮动后不占有位置,脱标,需要解决盒子的坍塌问题,具体可以参考以前的文章。CSS选择器,特别是伪类选择器利用画三角型的技巧,实现箭头的向上向下效果,具体参考以前文章的总结。元素的模式转换,display: block,display: inline,display:inline-block,行内元素、块级元素,行内块元素的特点以及区别,每个html标签默认是哪种模式,这个非常重要,标签是有语义的,哪种情况下需要用哪种标签,是否需要转换模式,需要很熟练掌握。源码如下:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>模仿今日头条</title>    <style type="text/css">        *{            margin: 0;            padding: 0;        }        li {            list-style: none;        }        /* 这里是外面的大盒子,设置高度350像素和宽度230像素,距离底部100像素,整个盒子设置10像素的圆角*/        .box{            width: 350px;            height: 230px;            margin: 100px auto;            border-radius: 10px;        }        /* begin 顶部的标题区,高度为40像素*/        .header {            height: 40px;        }        /* 设置图片高度30像素,vertical-align 为bottom,这样文字和图片底部对象*/        .header .title img{            height: 30px;            vertical-align: bottom;        }        .header .switch img{            height: 25px;            vertical-align: bottom;        }        .title {            float: left;            font-size: 20px;            padding-left: 10px;        }        .switch {            float: right;            font-size: 14px;            padding-right: 10px;        }        /* end */        /*begin 文章内容区*/        .content {            margin-top: 10px;            margin-left: 10px;        }        .content li  {            height: 40px;            line-height: 40px;        }        .content li div {            display: inline-block;            font-size: 20px;            font-weight: 700;            color: #A8A8A8;        }        .content li div:hover {            cursor: pointer;        }        .content li a {            font-size: 16px;            margin-left: 10px;        }        .content li a:hover {            color: red;            cursor: pointer;        }        .hot {            width: 20px;            height: 20px;            border-radius: 5px;            background: red;            line-height: 20px;        }        .content li div:nth-child(3) {            color: white;            font-size: 12px;            text-align: center;        }        #heng{            display: block;            width:10px;            height:2px;            background-color:red;            margin-bottom: -4px;        }        /* 向下箭头 */        #to_top {            width: 0;            height: 0;            border-top: 5px solid transparent;            border-bottom: 5px solid red;            border-left: 5px solid transparent;            border-right: 5px solid transparent;            display: block;        }        #line{            display: block;            width:2px;            height:10px;            background-color:red;            margin-left: 4px;        }        #number1 {            color: #D9A5A5;        }        #number2 {            color: #F36D6E;        }        #number3 {            color: #FF9A03;        }       /* end 文章内容区*/    </style></head><body>  <div class="box">     <div class="header">         <div  class="title">             <img src="image1.png" />             <span>头条热榜</span>         </div>         <div class="switch">             <img src="image2.png" />             <span>换一换</span>         </div>     </div>      <div class="content">          <ul>              <li>                  <div>                      <div id="heng"></div>                      <div id="to_top"></div>                      <div id="line"></div>                  </div>                  <a>构建网络空间命运共同体</a>              </li>              <li>                  <div id="number1">1</div>                  <a>印尼总统称强烈感觉普京不出席G20</a>                  <div class="hot" >热</div>              </li>              <li>                  <div id="number2">2</div>                  <a>小伙买房买贵了放弃5万定金毁约</a>                  <div class="hot" >热</div>              </li>              <li>                  <div id="number3">3</div>                  <a>携手构建网络空间命运共同体</a>              </li>              <li>                  <div>4</div>                  <a>泽连斯基将参加G20峰会</a>                  <div class="hot" >热</div>              </li>              <li>                  <div>5</div>                  <a>文旅局长被吐槽像如花 女儿当表情包</a>              </li>              <li>                  <div>6</div>                  <a>老太借房给重孙上学 孙子却拒还</a>              </li>          </ul>      </div>  </div></body></html>

标签: #css文字显示在图片上