新闻列表写法新思路 




 


 


 


<!DOCTYPE >

<html>

    <head>

        <title>test3改良版</title>

        <meta charset="utf-8">

        <style>

        *{

            padding:0;

            margin:0;

            list-style: none;

        }/* 初始化格式 */

        .L{

            width:300px;

            height:357px;

            border-top:1px grey solid;

            border-bottom:1px grey solid;

            margin:50px auto;

        }/* 样品总大小为(357+1*2)px */

        .L a{

            text-decoration: none;

        }

        .L .X{

            height:40px;

            margin-top: -1px;

        }

        .L .X h2{

            display:inline-block;/* 更改为行内块 */

            padding-top:9px;

            border-top:1px red solid;

        }

        .L .Y{

            height:150px;

            margin-top: 18px;

        }

        .L .Y img{

            width:100%;

            height:150px;

        }

        .L .Y h3{

            color:white;

            margin-top:-30px;

            font-size:16px;

            padding-left: 35px;

        }

        .L .DD{

            margin-top: 20px;

            font-size: 14px;

            /* color:lightgrey; */

        }

        .L .DD li{

            margin:5px;

        }

        .L .DD a{

            color: #808080;

        }

        .L .DD a:hover{

            color:red;

        }

        .L .DD a::before{

            content:'● ';

            font-size: 12px;

            color:#808080;

        }/* 增加圆圈 */

        </style>

    </head>

    <body>

        <div class="L">

            <div class="X">

                <h2>体育</h2>

            </div>

        <div class="Y">

            <a href="javascript:;">

                <img alt="logo" src="file:///C:/Users/%E8%A5%BF%E5%93%A5/Desktop/likepicture/b.webp"/>

                <h3>费德勒首负迪米 扶额摇头不满发挥</h3>

            </a>

        </div>

        <ul class="DD">

            <li><a href="javasreipt:;">乔治:我爱LA 喜欢和LBJ一起打球</a></li>

            <li><a href="javascript:;">格林:三年前降薪就在等KD 特制T恤嘲讽LBJ</a></li>

            <li><a href="javascript:;">塔克4000双鞋让保罗羡慕嫉妒 乔丹被震惊</a></li>

            <li><a href="javascript:;">CBA下新赛制:常规赛4组循环 增至46轮</a></li>

        </ul>



        </div>

    </body>

</html>





　　






            

            
posted @ 
2021-11-30 00:31 
thomas_001 
阅读(34) 
评论(0) 
 
收藏 
举报