webgis入门之html与css（练习）

Coding小亿~

已于 2024-02-29 10:45:11 修改

阅读量408

点赞数 10

分类专栏： webgis开发文章标签： css html css3

于 2024-02-25 16:56:53 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_67679364/article/details/136284240

版权

webgis开发专栏收录该内容

17 篇文章

订阅专栏

WEBGIS开发

完成两个布局

布局一

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生活</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .title {
            text-align: center;
        }
        .line{
            width: auto;
            height: 3px;
            background: linear-gradient(to bottom, #d3cdcd,#ffffff);
        }
        .content {
            width: 60vw;
            height: auto;
            margin: 0 auto;

        }

        .content>p img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="title">
        <p><strong>生活</strong></p>
    </div>
    <div class="line"></div>
    <div class="content">
        <h5><strong>此时此刻就是永远，此时此刻就是一切</strong></h5>
        <p><img src="./yan.jpg" alt="" sizes=""></p>
        <p>持续做自己想要做的事情好运自然会降临。如果不知道自己喜欢做什么 那就什么都去尝试并尽力做好,那么终究会发现自己所爱。就像大雨时,会挥洒到大地的每一处,但大雨谤沱之后总会向低地汇集。</p>
        <h5>句子：</h5>
        <ul>
            <li>每次说走就走的旅行背后，是一笔说去就去的款子</li>
            <li>所谓的我都是为你好，就是控制和伤害</li>
            <li>当你下定觉醒准备出发时，最困难的时刻就已经过去了。那么，出发吧</li>
        </ul>
        <p>尼采说：<br>对待生命你不妨大胆点，因为它中将离你远去
        </p>
    </div>
</body>

</html>

布局二

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人网站</title>
    <style>
        body {
            font-family: '宋体', 'Microsoft YaHei', sans-serif;
            /* 逐个尝试备用字体 */
        }

        .div1 {
            width: 300px;
            margin: 0 auto;
            background-image: url(./timg2.jpg);
        }

        .div1>h3 {
            color: rgb(56, 183, 233);
        }

        .div1>img {
            width: 90%;
            height: 90%;
            margin: 0 auto;
        }

        .div2 {
            padding-top: 15px;
            display: flex;
            align-items: center;
            /* 可选，用于垂直居中对齐 */
        }

        .div2 input {
            margin-left: 25px;
            margin-right: 18px;
        }
    </style>
</head>

<body>
    <div class="div1">
        <div class="div2">
            <input type="text">
            <button><a href="https://www.baidu.com">百度一下</a></button>
        </div>
        <h3><strong>&nbsp;&nbsp;&nbsp;|About Us|</strong></h3>
        <img src="./timg1.jpg" alt="">
        <p>关于单纯的信任</p>
        <p>关于拥抱的心疼</p>
        <p>关于青春 那件傻事的余震</p>
        <p>就用这一首歌来作证</p>
        <p>2015年 周笔畅 反思青春 温情解读关于（我们）</p>
        <a href="https://www.baidu.com">去百度</a>
        <a href="https://www.taobao.com">去淘宝</a>
    </div>
</body>

</html>

wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==