前端基础知识学习——HtmlCss实例（五）

~小先生~

已于 2023-05-26 11:03:59 修改

阅读量47

点赞数

分类专栏：前端 Html Css 文章标签：前端学习 css

于 2023-05-25 18:19:47 首次发布

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

版权

前端同时被 3 个专栏收录

16 篇文章 1 订阅

订阅专栏

Html

16 篇文章 1 订阅

订阅专栏

Css

12 篇文章 1 订阅

订阅专栏

实现下图html复现
在这里插入图片描述

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        /*清除默认样式*/
        body,ul,dl,dl,dd{margin:0;padding:0;font-family:"宋体";}
        li{list-style:none;}
        a{text-decoration:none;}
        /*清除图片样式与间隙*/
        img{border:none;vertical-align:top}
        /*清除浮动*/
        .clear{zoom:1;}
        .clear:after{content:"";display:block;clear:both;}
        /*样式编写*/
        .wrap{width:460px;margin:30px auto;padding:12px 8px 0 7px;background:url(bg.gif) no-repeat 220px 0;}
        .left{width:212px;float:left;}
        .lefttop .pic{width: 124px;background:url(picBg.gif) no-repeat right 0;padding-right:5px;
                      float:left;}
            /*a标签为内嵌元素，包不住图片，所以加display:block变为块元素包住图片*/
        .lefttop .pic a{border:1px solid #c3cfd9;display:block;padding:3px;}
        .lefttop dl{float:left; width:60px;padding-left:5px;font-size:12px; line-height:20px;color:cadetblue;}
        .leftbottom {
            padding-top: 10px;
            color: aquamarine;
        }
        .leftbottom li{  font-size:12px;line-height:20px;padding-left:10px;background:url(liBg.gif) no-repeat 0 7px;}
        .leftbottom li a{color:forestgreen;}
        .right{width:220px;float:right; }
        .right li {width:100px;float:left;padding-left:10px;  }
        .right li a{ display:block;}
        .right li img{border:1px solid #c3cfd9;padding:3px;}
            /*strong加display:block支持宽高*/
        .right strong{display:block;font-size:12px;line-height:24px;padding-top:3px;text-align:center;}
    </style>
</head>
<body>
    <div class="wrap clear">
        <div class="left">
            <div class="lefttop clear">
                <div class="pic">
                    <a href="#"> 
                        <img src="59.png"  width="115" alt="Alternate Text" />
                    </a>
                </div>
                <dl>
                    <dt><a href="#">落日</a></dt>
                    <dd>拍摄：姜伟</dd>
                    <dd>后期：之江</dd>
                </dl>
            </div>
            <ul class="leftbottom clear">
                <li><a href="#">秦时明月汉时关</a> </li>
                <li>
                    <a href="#" >但使龙城飞将在</a>
                    <a href="#">众里寻他千百度</a>
                </li>
            </ul>
        </div>
        <ul class="right">
            <li>
                <a href="#">
                    <img src="27.png"  alt="Alternate Text" width="100" height="100" />
                    <strong>但愿人长久</strong>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="54.png" alt="Alternate Text" width="100" height="100"/>
                    <strong>千里共婵娟</strong>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>