川字结构布局/国字结构布局
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.国字结构布局
<!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>版权所有©东方翱翔</p></div>
</div>
</body>
</html>原文地址：https://blog.csdn.net/qq_74861982/article/details/142905170
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！