川字结构布局/国字结构布局

1.串字结构布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .main{
            width: 1000px;
            height: 800px;
            background-color: gray;
            border: 1px solid black;
            /* 外边距 */
            margin: 0px auto;
        }
        .left{
            /* 定位方式 */
            position: relative;
            width: 180px;
            height: 700px;
            background-color: green;
            border: 1px solid black;
            /* 距离父盒子顶部距离 */
            top: 50px;
            /* 盒子的左外边距 */
            margin-left: 15px;
            /* 浮动方式 */
            float: left;
        }
        .middle{
            position:relative;
            width: 600px;
            height: 700px;
            background-color: aquamarine;
            border: 1px solid black;
            float: left;
            top: 50px;
        }


        .right{
            position: relative;
            width: 180px;
            height: 700px;
            background-color: green;
            border: 1px solid black;
            float: left;
            top: 50px;
        }
    </style>

</head>

<body>
    <div class="main">
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
    </div>    
</body>
</html>

2.国字结构布局

bash 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div{
            border: 1px solid black;
        }
        .wrap{
            width: 800px;
            height: 700px;
        }
        
        .top{
            width: 762px;
            height: 100px;
            background-color: aquamarine;
            margin:20px 20px 0 20px;
        }

        .left{
            width: 380px;
            height: 460px;
            background-color: gray;
            float: left;
            margin-left: 20px;
        }
        .right{
            width: 380px;
            height: 460px;
            background-color: gray;
            float: left;
        }

        .bottom{
            /* 保证当前块级元素不会重叠 */
            clear: both;
            width: 762px;
            height: 100px;
            background-color: aquamarine;
            margin-left: 20px;
        
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="top">top</div>
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="bottom">bottom</div>
    </div>
    
</body>
</html>

课后作业

思考下面的如何制作

首先是top位置是一张图片

然后是left是文字描述

right也是文字秒速

bottom是版权信息也是文字描述,

最后依次替换即可

照片

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div{
            border: 1px solid black;
        }
        .wrap{
            width: 800px;
            height: 700px;
        }
        
        .top{
            width: 762px;
            height: 100px;
            background-color: aquamarine;
            margin:20px 20px 0 20px;
            background-image:url("banner.png");
        }

        .left{
            width: 380px;
            height: 460px;
            background-color: gray;
            float: left;
            margin-left: 20px;
        }
        .right{
            width: 380px;
            height: 460px;
            background-color: gray;
            float: left;
        }

        .bottom{
            /* 保证当前块级元素不会重叠 */
            clear: both;
            width: 762px;
            height: 100px;
            background-color: aquamarine;
            margin-left: 20px;
        
        }
        p{
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <img src="./banner.png" alt="" class="top">
        <div class="left">
            <p>什么是甲流</p>
            甲流一般指甲型流感,主要是由于受到甲型流感病毒感染所引起的急性呼吸道传染病。
            <p>甲流症状有哪些</p>
            通常会出现高热、头痛、乏力、肌肉酸痛、食欲减退、咽喉肿痛等各种不良症状。甲型流感早期症状特别类似于普通感冒,但是部分患者很可能会出现消化道症状,并且是具有传染性,主要是通过空气中的飞沫进行传播,也可能会通过密切接触进行传播。</div>
        <div class="right">
            <p>甲流的预防措施</p>
            第一、注意个人卫生 在平时的生活当中,应该注意做好个人的清洁卫生工作,尤其是年龄小的孩子,要做到勤洗手、勤换衣服,讲究卫生,小心因为不讲卫生所引发的感染。
            第二、注意调节饮食 在饮食方面要注意做好荤素搭配,保证充足的营养补给,多吃新鲜的蔬菜和水果,提高身体抵抗力。在做饭的时候生熟要分开,尤其是猪肉要彻底烹饪熟了,这样才能将甲流病毒杀死。
            第三、进行体育锻炼 平时进行适当的体育锻炼,有助于提高身体的抵抗力,增强对方甲流的能力,可以结合个人的身体状况,到外面散散步、跑跑步、打打球等,但也要注意控制好量,不能过于劳累。
            第四、接种流感疫苗 接种流感疫苗是预防甲流非常不错的一种方式,但要把握好接种的时间,在每年甲流发病的高峰期前一段时间要及时接种。
            第五、加强保暖 日常应该注意加强保暖,尤其是在寒冷的冬季要注意及时增加衣物,减少因为着凉等所引发的被传染。
            第六、文明咳嗽 甲型流感在咳嗽期间很容易把病毒散播到空气中,所以打喷嚏最好使用口罩遮住口鼻,避免飞沫污染他人。</div>
        <div class="bottom"><p>版权所有&copy;东方翱翔</p></div>
    </div>
    
</body>
</html>
相关推荐
待磨的钝刨6 分钟前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
小白白一枚1118 小时前
css实现div被图片撑开
前端·css
薛一半9 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
@蒙面大虾9 小时前
CSS综合练习——懒羊羊网页设计
前端·css
过期的H2O29 小时前
【H2O2|全栈】JS进阶知识(四)Ajax
开发语言·javascript·ajax
MarcoPage9 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js
顾菁寒9 小时前
WEB第二次作业
前端·css·html