HTML名人名言案例

最新推荐文章于 2022-10-17 20:55:55 发布

张小鱼༒

最新推荐文章于 2022-10-17 20:55:55 发布

阅读量2.5k

点赞数 6

分类专栏： HTML以及CSS和javascripts 文章标签： html webview css

本文链接：https://blog.csdn.net/m0_56006701/article/details/124795835

版权

HTML以及CSS和javascripts 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

这个案例里面分了好几个板块来做，小编在这里先放一下效果图

一、father部分——由info和xbk两部分组成

father分了两个部分，小编这里着重讲一下xbk部分，我们在做这部分时候，用到的依然是ul和li，此处注意的一点是盒子的大小按照盒子里面的内容来撑开，这样做我们就可以不用计算边距问题了，只有给定一定的外边框就可以解决这个问题

二、box部分——分左右两部分来做

左边部分又可以分为几个小模块来做，此处还有段落标签出现，下面的图片部分，我们的图片还是以内容填充进去。

右边部分，在这个模块，我们用一个div标签就可以做，图片作为内容填充，给div盒子添加内外边框，就可以解决边框问题。

这里小编特别强调一点：

这里的左右两部分，我们需要用浮动来解决排版问题，左边左浮动，右边右浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul li{list-style: none;}
        p{font-size: 12px;}
        i{font-size: 12px;}
        strong{font-size: 12px;}
        h1{
            font-size: 28px;
            padding-bottom: 19px;
        }
        h2{
            font-size: 16px;
            padding-bottom: 8px;
        }
        .father{
            width: 1027px;
            height: 831px;
        }
        .info{
            height: 150px;
            padding-top: 20px;
            padding-left: 80px;
            border-bottom: 1px solid #cccccc;
        }
        .xbk{
            height: 39px;
            margin-top: 26px;
        }
        .xbk ul li{
            float: left;
            border: 1px solid #cccccc;
            padding: 13px 10px;
        }
        .box{
            width: 1027px;
            height: 643px;
            margin-left: 60px;
            margin-top: 30px;
            border-bottom: 1px solid #cccccc;
        }
        .box1{
            width: 501px;
            height: 583px;
            float: left;
        }
        .bk{
            width: 489px;
            height: 66px;
            border: 1px solid #cccccc;
            padding: 8px 0px 8px 10px; 
            margin-bottom: 15px;
        }
        .wz{
            width: 501px;
        }
        .head{
            width: 489px;
            height: 32px;
            line-height: 32px;
            padding: 8px 0px 8px 10px;
            border: 1px solid #cccccc;
            margin-bottom: 15px;
        }
        .two{
            width: 469px;
            height: 86px;
            border: 1px solid #cccccc;
            padding: 20px 19px 8px 11px;
            margin-bottom: 32px;
        }
        .img1{
            width: 469px;
            height: 60px;
            margin-top: 11px;
        }
        .three{
            width: 343px;
            height: 526px;
            padding: 36px 18px 26px 20px;
            float: right;
            border: 1px solid #cccccc;
        }
        .img2{
            width: 251px;
            height: 250px;
            margin-top: 14px;
            margin-bottom: 18px;
        }
        input{
            margin-top: 13px;
            margin-bottom: 16px;
        }
        input::placeholder{
            color: #000000;
        }
        .bqi{
            font-size: 18px;
            margin-top: 18px;
            color: #666666;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="info">
        <h1>名人名言</h1>
        <i>分享名人名言，开始一段触动心灵的智慧之旅跳到内容</i>
    <div class="xbk">
        <ul>
            <li>登录</li>
            <li>关于</li>
            <li>名人名言</li>
            <li>英文名言(English)</li>
            <li>心理杂志</li>
            <li>心理书籍</li>
            <li>专题活动</li>
            <li>发表</li>
        </ul>
    </div>
    </div>
<div class="box">
    <div class="box1">
        <div class="bk">
            <h2>心理学经典名言的智慧</h2>
            <p>洞察人性的美与丑，认识自我的强与弱。一句好的格言能够穿越时间，永不失色、历久弥香，它总是能给人们带来心灵的滋养。</p>
        </div>
        <div class="wz">                
        <strong>创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去实现”。所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。</strong>
        <p>创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去实现”。所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。</p>
        <p>发表在 未分类 | 标签： 《换个脑袋去思考》, 创造力 | 留下评论</p>
        </div> 
        <h2 class="head">作者简介</h2>
        <div class="wz">   
        <strong>如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一点。</strong>
        <p>如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一点。</p>
        <p>发表在 未分类 | 标签： 《怎样出售设计创意》, 温斯顿·丘吉尔 | 留下评论</p>
        </div>
        <div class="two">
            <i>赞助广告</i>
            <img class="img1" src="D:/学习笔记记录/HTML/作业5：名人名言/图片素材/ad_2.jpg" alt="">
        </div>
        </div>
        
        <div class="three">
            <i>赞助广告</i>
            <div class="img2"><img class="tp" src="D:/学习笔记记录/HTML/作业5：名人名言/图片素材/ad.jpg" alt=""></div>
            <i>搜索</i><br>
            <!-- <input type="text" placeholder="点击搜索" required> -->
            <input type="text" value="点击搜索" required><br/>
            <i>标签</i><br>
            <div class="bqi">
            <i>60年语录 《犯罪心理》 世间百态 二十四史传统名人 体育人物 卡斯特罗 卡斯特罗名言 卡斯特罗语录 历史 友谊爱情 古代格言 名人名言 名人随语 教子立人 新闻事件 李白 爱情语录 韩寒语录</i>
            </div>
        </div>       
        </div>
        </div>       
    </div>
</div>
</body>
</html>

此处小编给大家一些学习HTML小技巧，我们在做页面布局的时候可以使用页面检查，保证我们做的效果与客户要求的内容一致，多用一下页面检查，我们在理解内外边框时就可以更快的上手。

后面学习的知识面越广，我们做出的代码就越简洁，后面我们还会学到很多内容。

例如：用box-sizing这个属性时，我们就可以不用计算盒子内外边框对盒子的影响了，在后期制作网页时，我们也经常用到这个属性。

张小鱼༒

关注

6
点赞
踩
22

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML名人名言案例

这个案例里面分了好几个板块来做，小编在这里先放一下效果图一、father部分——由info和xbk两部分组成father分了两个部分，小编这里着重讲一下xbk部分，我们在做这部分时候，用到的依然是ul和li，此处注意的一点是盒子的大小按照盒子里面的内容来撑开，这样做我们就可以不用计算边距问题了，只有给定一定的外边框就可以解决这个问题二、box部分——分左右两部分来做左边部分又可以分为几个小模块来做，此处还有段落标签出现，下面的图片部分，我们的图片还是以内容填充进去。右边部分，在这个.
复制链接

扫一扫