前端基础知识——HtmlCss实例（七）

最新推荐文章于 2024-07-17 15:26:15 发布

~小先生~

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量51

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/weixin_45496521/article/details/130889296

版权

在这里插入图片描述

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body,h2,ul{margin:0;padding:0;font-family:"宋体";}
        li{list-style:none;}
        a{text-decoration:none;color:cadetblue;}
        img{border:none;vertical-align:top;}
        .clear{zoom:1;}
        .clear:after{content:"";display:block;clear:both;}   
        .wrap{width:500px; margin:30px 200px;padding-top:11px;background:#f4fafb;}
        .head {
            height:25px;
            background: url(headBg.gif) no-repeat;
        }
        .title { 
            line-height: 24px;
            padding-top: 1px;
            font-size: 12px;
            color: steelblue;
            text-indent:33px;
            background: url(titleBg.gif) no-repeat 6px 4px;
        }
        .picls {
            padding-top: 16px;
        }
            .picls li {
                padding-right: 17px;
                margin: 0 8px;
                float: left;
                display: inline;
                background: url(liBg.gif) no-repeat right 17px;
            }
            .picls a {
                display: block;
            }

            .picls img {
                border: 1px solid #c8c4d3;
                padding: 2px;
                background: #fff;
            }

            .picls strong {
                display: block;
                text-align: center;
                padding-top: 4px;
                font: normal 12px/22px "宋体";
            }

        .textls {
            padding: 0 27px;
            line-height: 22px;
            font-size: 12px;
        }

            .textls li {
                background: url(textListBg.gif) no-repeat 0 10px;
                text-indent: 14px;
            }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="head">
            <h2 class="title">一切都会好起来哒</h2>
        </div>
        <ul class="picls clear" >
            <li>
                <a href="#">
                    <img src="4.png" width="100" alt="Alternate Text" />
                    <strong>康康是谁</strong>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="5.png" width="105" alt="Alternate Text" />
                    <strong>上个勾儿</strong>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="6.png" width="100" alt="Alternate Text" />
                    <strong>夏西仁儿</strong>
                </a>
            </li>
        </ul>
        <ul class="textls">
            <li> <a href="#">to be or not to be</a>   </li>
            <li> <a href="#">to be or not to be</a>   </li>
            <li> <a href="#">to be or not to be</a>   </li>
        </ul>
    </div>
</body>
</html>