交作业
来源：3-27 自由编程
慕仰1415328
2021-04-01 15:15:48
<!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>
</head>
<body>
<!-- header区域 -->
<div class="header">
<div class="logo">
<h1>logo</h1>
</div>
<div class="nav">
导航区域
</div>
</div>
<!--banner区域-->
<div class="banner">
<div class="banner-img">
banner图片
</div>
<div class="banner-zoom">
banner遮罩层
</div>
<div class="banner-from">
banner表单
</div>
</div>
<!--网页内容区域-->
<div class="content">
<!-- about区域 -->
<div class="about">
<div class="about-top">
about上半部分
</div>
<div class="about-bottom">
about下半部分
</div>
</div>
<!-- 图文混排区域 -->
<div class="text-and-img">
<div class="text-and-img-style">
<div class="img">
图片1
</div>
<div class="text">
文字2
</div>
</div>
<div class="text-and-img-style">
<div class="img">
图片3
</div>
<div class="text">
文字4
</div>
</div>
<div class="text-and-img-style">
<div class="text">
文字5
</div>
<div class="img">
图片6
</div>
</div>
<div class="text-and-img-style">
<div class="text">
文字7
</div>
<div class="img">
图片8
</div>
</div>
</div>
<!-- Gallery区域 -->
<div class="gallery">
<div class="gallery-top">
gallery上半部分
</div>
<div class="gallery-bottom">
gallery下半部分
</div>
</div>
</div>
<!--footer区域-->
<div class="footer">
<p>©2016 imooc.com 京ICP备13046642号</p>
</div>
</body>
</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>
</head>
<body>
<!-- header区域 -->
<div class="header">
<div class="logo">
<h1>logo</h1>
</div>
<div class="nav">
导航区域
</div>
</div>
<!--banner区域-->
<div class="banner">
<div class="banner-img">
banner图片
</div>
<div class="banner-zoom">
banner遮罩层
</div>
<div class="banner-from">
banner表单
</div>
</div>
<!--网页内容区域-->
<div class="content">
<!-- about区域 -->
<div class="about">
<div class="about-top">
about上半部分
</div>
<div class="about-bottom">
about下半部分
</div>
</div>
<!-- 图文混排区域 -->
<div class="text-and-img">
<div class="text-and-img-style">
<div class="img">
图片1
</div>
<div class="text">
文字2
</div>
</div>
<div class="text-and-img-style">
<div class="img">
图片3
</div>
<div class="text">
文字4
</div>
</div>
<div class="text-and-img-style">
<div class="text">
文字5
</div>
<div class="img">
图片6
</div>
</div>
<div class="text-and-img-style">
<div class="text">
文字7
</div>
<div class="img">
图片8
</div>
</div>
</div>
<!-- Gallery区域 -->
<div class="gallery">
<div class="gallery-top">
gallery上半部分
</div>
<div class="gallery-bottom">
gallery下半部分
</div>
</div>
</div>
<!--footer区域-->
<div class="footer">
<p>©2016 imooc.com 京ICP备13046642号</p>
</div>
</body>
</html>
写回答
1回答
-
好帮手慕言
2021-04-01
同学你好，同学的代码可以实现效果，但是图文混排区域的布局不太合理，建议：类名为text-and-img的元素里面，添加8个div，这8个div相互独立（不要互相嵌套）
参考下方：
祝学习愉快~
0
相似问题