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

~小先生~

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

阅读量56

点赞数

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

于 2023-05-26 11:03:04 首次发布

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

版权

前端同时被 3 个专栏收录

16 篇文章 1 订阅

订阅专栏

Html

16 篇文章 1 订阅

订阅专栏

Css

12 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body,ul,h2,h3,p{margin:0;padding:0; font-family:"宋体";font-size:12px;}
        li{list-style:none;}
        /*去除图片底部空隙：vertical-align:top;*/
        img{border:none;vertical-align:top; }
        a{text-decoration:none;}
        .wrap{width:366px;background:#f4fafb;margin:30px auto;        }
        .head{height:23px;background:url(headBg.gif) no-repeat;}
        .title{background:url(titleBg.gif) no-repeat 6px 4px;line-height:22px;font-size:12px;color:#294852;padding-left:30px;}
         .list{padding:0 7px 2px 5px;}
            /*li里面的内容浮动，所以要清浮动*/
        .list li{zoom:1;overflow:hidden;vertical-align:top;padding:13px 0 9px 0;}
        .lis .pic{float:left;border:1px solid #c8c4d3;padding:2px;background:#fff;}
    .list .text{width:240px;float:right;}
    .lis h3{line-height:24px;}
        .list h3 a {
            color: #333;
            font-size: 14px;
        }
    .list p{font-size:14px;line-height:22px;}
    .list p a{color:#666;}
    </style>
</head>
<body>
    <div class="wrap">
        <div class="head">
            <h2 class="title">玄机</h2>
        </div>
        <ul class="list">
            <li>
                <a href="#" class="pic">
                    <img src="1.png" alt="Alternate Text" width="100" height="100" />
                </a>
                <div class="text">
                    <h3>  <a>《明月几时有 把酒问青天》</a> </h3>
                    <p>
                        在爱情的事上如果你考虑起自尊心来，那只能有一个原因

                        ：实际上你还是最爱自己...[<a href="#">详细</a>]
                    </p>
                </div>
            </li>
        </ul>
        <ul class="list">
            <li>
                <a href="#" class="pic">
                    <img src="2.png" alt="Alternate Text" width="100" height="100"  />
                </a>
                <div class="text">
                    <h3>  <a>《不知天上宫阙 今昔是何年》</a> </h3>
                    <p>为什么讨人喜欢的女人总是嫁给蠢物啊？” “因为有脑子的男人是不娶讨人喜欢的女人的。”...[<a href="#">详细</a>]</p>
                </div>
            </li>
        </ul>
        <ul class="list">
            <li>
                <a href="#" class="pic">
                    <img src="3.png" alt="Alternate Text"  width="100" height="100" />
                </a>
                <div class="text">
                    <h3>  <a>《我欲乘风归去 又恐琼楼玉宇》</a> </h3>
                    <p>爱情要占据一个人莫大的精力，它要一个人离开自己的生活专门去做一个爱人...[<a href="#">详细</a>]</p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>