HTML+CSS练习-页面布局

最新推荐文章于 2024-03-26 11:27:02 发布

凡菲儿

最新推荐文章于 2024-03-26 11:27:02 发布

阅读量469

点赞数 8

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_44965777/article/details/136592437

版权

本文详细介绍了HTML和CSS代码实现一个包含页面布局、导航栏、文章内容和心理名言展示的网页，强调了创造力在将想法付诸实践中的重要性。

摘要由CSDN通过智能技术生成

文章目录

前言
一、页面布局
二、代码实现

前言

实现效果：
在这里插入图片描述

一、页面布局

在这里插入图片描述

二、代码实现

文件
在这里插入图片描述

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./1.css">
</head>

<body>
    <header>
        <h1>名人名言</h1>
        <p>分享名人名言，开始一段触动心灵的智慧之旅跳到内容</p>
        <div>
            <ul>
                <li>登录</li>
                <li>关于</li>
                <li>名人名言</li>
                <li>英文名言(English)</li>
                <li>心理杂志</li>
                <li>心理书籍</li>
                <li>专题活动</li>
                <li>发表</li>
            </ul>
        </div>
        <hr>
    </header>

    <div class="box">
        <article>
            <div class="d1">
                <h2>心理学经典名言的智慧</h2>
                <p>洞察人性的美与丑，认识自我的强与弱。一句好的格言能够穿越时间，永不失色、历久弥香，它总是能给人们带来心灵的滋养。</p>
            </div>
            <p>创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去实现”。所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。</p>
            <p>创造力（creativity）有两个词根：Crera拉丁语的意思是“去创造”。Krainir希腊语的意思是“去实现”。所以，创造力不仅仅是一种想象力、一种天赋，创造力更是一种将自己的想法付诸实现的能力。</p>
            <p>发表在 未分类 | 标签： 《换个脑袋去思考》, 创造力 | 留下评论</p>

            <div class="d1">
                <h2>作者简介</h2>
            </div>
            <p>如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一点。
            </p>
            <p>如果你还没有注意到你有能力让对方作出你所希望得到的反应，那么你就还没有很好地掌握人生的真谛。这其实简单到不可思议。如果你希望他人对你感兴趣，那么你就要先对他人产生兴趣；如果你想让他人紧张，那么你自己首先要紧张起来。就是这么简单。人们会按照你对待他们的方式对待你。这其中没有什么秘诀。看看周围的人，你可以在与下一个人交流时证实这一点。
            </p>
            <p>发表在 未分类 | 标签： 《怎样出售设计创意》, 温斯顿·丘吉尔 | 留下评论</p>

            <div class="d1">
                <h3>赞助广告</h3>
                <img src="img/ad_2.jpg" alt="图片暂未加载">
            </div>
        </article>

        <nav>
            <div class="d1">
                <h3>赞助广告</h3>
                <img src="img/ad.jpg" alt="图片暂未加载">
                <h3>搜索</h3>
                <input type="text" placeholder="点击搜索">
                <h3>标签</h3>
                <p>60年语录 《犯罪心理》 世间百态 二十四史传统名人 体育人物 卡斯特罗 卡斯特罗名言 卡斯特罗语录 历史 友谊爱情 古代格言 名人名言 名人随语 教子立人 新闻事件 李白 爱情语录 韩寒语录 </p>
            </div>
        </nav>
    </div>

    <footer>
        <hr>
        <p>&copy;All Right Reserved by Psytopic.来自Psytopic.com的礼物</p>
    </footer>
</body>

</html>

CSS

header {
            width: 1200px;
            margin: 0 auto;
        }

        h1 {
            font-size: 28px;
            font-weight: 900;
            font-family: "黑体";
            text-indent: 32px;
        }

        h2 {
            margin: 0;
            font-size: 20px;
            font-weight: 900;
        }

        h3 {
            font-size: 16px;
            color: #00000098;
            font-style: italic;
        }

        header p {
            color: #00000098;
            text-indent: 32px;
            font-style: italic;
        }

        ul {
            list-style: none;
            width: 800px;
            font-size: 0;
        }

        li {
            display: inline-block;
            border-top: 1px solid #ccc;
            border-right: 1px solid #ccc;
            font-size: 16px;
            padding: 10px;
            margin: 0;
        }

        li:first-of-type {
            border-left: 1px solid #ccc;
        }

        hr {
            margin: 0;
            border: 1px solid #ccc;
        }

        .d1 {
            border: 1px solid #ccc;
            padding-left: 16px;
            padding-right: 16px;
        }
        .d1+p{
            font-weight: bold;
        }
        p{
            margin: 0;
            line-height: 24px;
        }
        .d1:last-of-type p{
            font-style: italic;
            color: #00000098;
        }
        article {
            width: 660px;
            height: 700px;
            float: left;
            margin-top: 30px;
        }

        nav {
            width: 370px;
            height: 600px;
            float: right;
            margin-top: 30px;
        }
        nav .d1{
            padding-bottom: 20px;
        }

        .box {
            width: 1200px;
            height: 700px;
            display: flex;
            justify-content: space-around;
            margin: 0 auto;
        }

        footer {
            width: 1200px;
            margin: 0 auto;
        }

        footer p {
            text-align: center;
            color: #8b8b8b;
        }

图片
在这里插入图片描述