当前位置：网站首页>Xiaobai programmer's fifth day

Xiaobai programmer's fifth day

2022-07-25 22:20:00 【Too difficult L】

Web news interface establishment

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title> Entertainment News </title>

    <style>

        body{

            background-color:silver;

        }

        /* Remove underscores */

        a{

            text-decoration: none;

        }

        .news-wrapper{

            /* Set width */

            width: 350px;

            /* Set height */

            height: 357px;

            /* Set the background color */

            background-color:#fff;

            /* Set the top border */

            border-top: 1px #ddd solid;

            margin: 50px auto;

        }

   

        .news-title{

            /* Turn inline elements into inline blocks , To make the border as wide as the text */

            display: inline-block;

            /* Set the top border */

            border-top: 1px red solid;

            /* Set the top border to move up , Cover the gray border */

            margin-top: -1px;  

            /* Set height */        

            height: 40px;

            /* Text centered vertically */

            line-height: 40px;

        }

        /* Set up title The style of hyperlinks in */

        .news-title a{

            /* Set text size */

            font-size: 16px;

            /* Set the text color */

            color: #40406B;

            /* The words are bold */

            font-weight: bold;

        }

     

        .news-title a:hover{

            color: red;

        }

        /* Set the height of the picture container */

        .news-img{

            height: 100px;

        }

        .news-img .img-title{

            /* Move text up */

            margin-top: -30px;

            /* Shift text right */

            margin-left: 25px;

            /* Set font color */

            color:whitesmoke;

            /* Set font bold */

            font-weight: bold;          

        }

     

        .news-list{

            margin-top: 20px;

        }

        /* Set up li*/

        .news-list li{

            margin-bottom: 20px;        

        }

        /* Set up li Text styles in */

        .news-list li a{

            /* Set font size 、 Color */

            font-size: 14px;

            color: gray;

        }

        /* Set the mouse hyperlink move in state */

        .news-list li a:hover{

            color: red;

        }

     

        .news-list li::before{

            /* Add bullet */

            content: "■";

            /* Set the color size margin */

            color: rgb(218,218,218);

            font-size: 12px;

            margin-right: 4px;

        }

    </style>

</head>

<body>

    <div class="news-wrapper">

        <!-- Create Title labels -->

        <h2 class="news-title"><a href="#"> entertainment </a></h2>

        <!-- Create a picture container -->

        <div class="news-img">

            <a href="#">

                <img src="2.PNG" alt="">

                <h3 class="img-title"> <span>#</span> </h3>

            </a>

        </div>

        <!-- News list -->

        <ul class="news-list">

            <li><a href="#"> Huang Zongze restaurant announced its closure &nbsp; Loss of more than one million </a></li>

            <li><a href="#"> Zhang Kaili ： Actors should not be eager for quick success , Have real talent </a></li>

            <li><a href="#"> The net revealed that Yang Yang's wax statue was harassed by a young woman </a></li>

            <li><a href="#"> Ding Taisheng roast that Guo Jingming plagiarized Vulgar words are scolded </a></li>

        </ul>

    </div>  

</body>

</html>

 

原网站

版权声明
本文为[Too difficult L]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/201/202207190520526272.html

边栏推荐

猜你喜欢

随机推荐