前端基础知识学习——HtmlCss实例(五)

16 篇文章 1 订阅
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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值