想请老师帮忙看一下代码 优化一下 还有就是图文混排区域这里排版一直排不好
来源：4-10 自由编程
我不是西格玛
2021-06-05 09:51:45
相关截图：
html相关代码：
<!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>3.27自由编程</title>
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<!-- 头部 -->
<header>
<div class="header-top">
<!-- logo -->
<div class="logo">
<img src="images/logo.png" alt="">
</div>
<!-- 导航 -->
<nav>
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">GALLERY</a></li>
<li><a href="">FACULTY</a></li>
<li><a href="">EVENTS</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</nav>
</div>
</header>
<section>
<!-- Banner部分 -->
<div class="Banner">
<!-- 图片 -->
<div class="banner-img">
<img src="images/banner3.jpg" alt="">
</div>
<!-- 遮罩层 -->
<div class="main">
<p>Banner遮罩层</p>
</div>
<!-- 表单 -->
<div class="biaodan">
<form action="">
<p>
<input type="text" placeholder="your Name">
<input type="text" placeholder="your Phone">
<input type="email" placeholder="your Email">
<textarea rows="5" cols="30" placeholder="Write Tour Comment Nere"></textarea>
</p>
<p>
<input class="button" type="submit" value="SEND MESSAGE">
</p>
</form>
</div>
</div>
<!-- About区域 -->
<div class="About">
<!-- About上半部分 标题和简短描述区 -->
<div class=" about-top">
<h1>ABOUT</h1>
<p class="fenge"></p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting <p></p>
<p>industry.Lorem Ipsum has been the industry's standard dummy</p>
<p>text ever since the 1500s.</p>
</div>
<!-- About下半部分 gallery详细信息区 -->
<div class="about-bottom">
<div class="left">
<h1>A WORD </h1>
<h1>ABOUT US</h1>
<p>
Praesent dignissim viverra est, sed bibendum ligula congue non.
Sed ac nisl et felis gravida commodo?
Suspendisse eget ullamcorper ipsum.
Suspendisse diam amet.
<input class="button" type="submit" value="EXPLORE">
</p>
</div>
<img src="images/bb3.jpg" alt="">
<div class="right">
<div class="r1">
<p class="zi">70000</p>
<p class="fenge"></p>
<p>Students</p>
</div>
<div class="r2">
<p class="zi">600</p>
<p class="fenge"></p>
<p>Faculty</p>
</div>
</div>
</div>
</div>
<!-- 图文混排区域 -->
<div class="photo-and-words">
<!-- 图片1 -->
<div>
<img src="images/b1.jpg" alt="">
</div>
<!-- 文字2 -->
<div class="wenzi">
<h1>Libary</h1>
<p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="p2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p><a href="">EXPLORE</a></p>
</div>
<!-- 图片3 -->
<div>
<p><img src="images/b2.jpg" alt=""></p>
</div>
<!-- 文字4 -->
<div class="wenzi">
<h1>Libary</h1>
<p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="p2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p><a href="">EXPLORE</a></p>
</div>
<!-- 文字5 -->
<div class="wenzi">
<h1>Libary</h1>
<p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="p2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p><a href="">EXPLORE</a></p>>
</div>
<!-- 图片6 -->
<div>
<p><img src="images/b3.jpg" alt=""></p>
</div>
<!-- 文字7 -->
<div class="wenzi">
<h1>Libary</h1>
<p class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="p2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p><a href="">EXPLORE</a></p>
</div>
<!-- 图片8 -->
<div>
<p><img src="images/b4.jpg" alt=""></p>
</div>
</div>
<!-- Gallery区域 -->
<div class="Gallery">
<!-- gallery上半部分 标题和简短描述区 -->
<div class="gallery-top">
<h1>GALLERY</h1>
<p class="fenge"></p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting <p></p>
<p>industry.Lorem Ipsum has been the industry's standard dummy</p>
<p>text ever since the 1500s.</p>
</div>
<!-- gallery下半部分 gallery详细信息区 -->
<div class="gallery-bottom">
<div>
<dl>
<dt><img src="images/03-01.jpg" alt=""></dt>
<dd>Science Lab</dd>
</dl>
</div>
<div>
<dl>
<dt><img src="images/03-02.jpg" alt=""></dt>
<dd>Indoor Stadium</dd>
</dl>
</div>
<div>
<dl>
<dt><img src="images/03-03.jpg" alt=""></dt>
<dd>Transportation</dd>
</dl>
</div>
<div>
<dl>
<dt><img src="images/03-04.jpg" alt=""></dt>
<dd>Kids Room</dd>
</dl>
</div>
<div>
<dl>
<dt><img src="images/03-05.jpg" alt=""></dt>
<dd>Meditation Classes</dd>
</dl>
</div>
<div>
<dl>
<dt><img src="images/03-06.jpg" alt=""></dt>
<dd>Kids Play Ground</dd>
</dl>
</div>
</div>
</div>
</section>
<!-- Footer区域 -->
<div class="Footer">
<p>© 2016 imooc.com 京ICP备13046642号 </p>
</div>
</body>
</html>
css相关代码：
* {
margin: 0;
padding: 0;
}
/* 去掉所有ol和ul的小圆点 */
ul, ol {
list-style: none;
}
/* 去掉所有超级链接的下划线 */
a {
text-decoration: none;
}
/* 使用继承性 给body标签设置字体 */
body {
font: normal 14px/25px '微软雅黑';
}
/* 头部样式 */
header {
background-color: #07cbc9;
}
header .header-top {
width: 1200px;
height: 80px;
margin: 0 auto;
/* 清除浮动 */
overflow: hidden;
}
/* header */
header .header-top .logo {
float:left;
height: 48px;
padding-top: 16px;
}
header .header-top nav ul {
float: right;
}
header .header-top nav ul li{
float: left;
line-height: 80px;
margin-right: 20px;
text-align: center;
}
header .header-top nav ul li a {
color: white;
font-size: 16px;
}
header .header-nav nav li a:hover {
background-color: gray;
}
/* banner */
.Banner{
position: relative;
}
.Banner .banner-img img{
width: 100%;
height: 600px;
}
.Banner .main {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
background:rgba(0, 0, 0, 0.5);
}
.Banner .biaodan{
width: 504px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -252px;
margin-top: -200px;
text-align: center;
}
.Banner .biaodan form p input{
width: 504px;
height: 40px;
margin-bottom: 20px;
background: none;
color: #808080;
border: 1px solid #808080;
}
.Banner .biaodan form p textarea{
width: 504px;
height: 110px;
background: none;
margin-bottom: 20px;
border: 1px solid #808080;
}
.Banner .biaodan form p input.button {
width: 200px;
height: 40x;
}
/* section about */
section .About .about-top{
width: 500px;
height: 120px;
padding-top: 30px;
margin: 0 auto;
margin-bottom: 20px;
}
section .About h1 {
font-size: 32px;
text-align: center;
padding-bottom: 10px;
}
section .About p.fenge {
width: 60px;
height: 3px;
background: #07cbc9;
margin: 10px auto;
}
section .About .about-top p {
font-size: 14px;
color: gray;
text-align: center;
}
section .About .about-bottom {
width: 1201px;
height: 464px;
margin: 0 auto;
padding-top: 30px;
position: relative;
}
section .About .about-bottom .left {
float: left;
}
section .About .about-bottom .left h1 {
text-align: left;
margin-bottom: 10px;
margin-right: 100px;
}
section .About .about-bottom .left p{
position: absolute;
width: 300px;
padding: 20px;
font-size: 18px;;
border: 1 solid gray;
background: rgba(255, 255, 255, 0.5);
}
section .About .about-bottom .left p input {
width: 140px;
height: 40px;
color: white;
margin-top: 20px;
background: black;
}
section .About .about-bottom .right {
float: right;
}
section .About .about-bottom img {
width: 650px;
height: 434px;
margin: 0 auto;
}
section .About .about-bottom .right .r1,.r2{
width: 260px;
height: 115px;
border: 1px solid #07cbc9;
margin-bottom: 30px;
padding-top: 40px;
}
section .About .about-bottom .right p {
text-align: center;
}
section .About .about-bottom .right p.zi {
font-size: 26px;
font-weight: bold;
}
/* section photo-and-words */
section .photo-and-words{
width: 1600px;
height: 760px;
margin: 0 auto;
overflow: hidden;
background: #07cbc9;
}
section .photo-and-words div{
list-style: none;
float: left;
width: 400px;
height: 400px;
}
section .photo-and-words div.wenzi h1{
font-size: 24px;
color: white;
padding: 20px 0 30px 20px;
}
section .photo-and-words div.wenzi p.p1{
font-size: 16px;
color: white;
padding-left: 20px;
padding-bottom: 20px;
}
section .photo-and-words div.wenzi p.p2{
font-size: 14px;
color: gray;
padding-left: 20px;
padding-bottom: 20px;
padding-right: 20px;
}
section .photo-and-words div.wenzi p a{
display: block;
width: 138px;
height: 40px;
background-color: black;
text-align: center;
line-height: 40px;
margin: 0 auto;
color: white;
}
/* section Gallery */
section .Gallery .gallery-top {
width: 1200px;
height: 200px;
margin: 0 auto;
}
section .Gallery .gallery-top h1 {
font-size: 32px;
text-align: center;
padding-bottom: 10px;
padding-top: 30px;
}
section .Gallery p.fenge {
width: 60px;
height: 3px;
background: #07cbc9;
margin: 10px auto;
}
section .Gallery .gallery-top p {
font-size: 14px;
color: gray;
text-align: center;
}
section .Gallery .gallery-bottom {
width: 1200px;
height: 653px;
margin: 0 auto;
}
section .Gallery .gallery-bottom div{
float: left;
height: 240px;
width: 360px;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
position: relative;
margin-bottom: 15px;
}
section .Gallery .gallery-bottom div dl dd {
display: block;
width: 360px;
height: 50px;
background: rgba(0, 0, 0, 0.9);
color: white;
position: absolute;
bottom: 0;
padding-top: 12px;
padding-left: 20px;
box-sizing: border-box;
}
/* footer */
.Footer p{
display: block;
width: 100%;
height: 80px;
background-color: #07cbc9;
text-align: center;
}
写回答
1回答
-
好帮手慕然然
2021-06-05
同学你好，整体实现效果还可以，建议优化如下：
1、HTML代码中，以下位置处的代码建议优化一下，如图
2、css代码中，以下位置处的代码建议优化一下，如图
3、banner区域：图片与外层父盒子存在间隙问题（外层盒子的高大于图片的高），如图
建议：给图片设置display:block即可解决该问题，参考如下
4、图文混排区域：外层父盒子photo-and-words的高度为760px，而内层每个div盒子高度为400px，上下两个加起来为800px，超出了外层父盒子的高度，如图
建议：将外层父盒子photo-and-words的高度设置为800px即可，另外给图片设置与图文盒子一样的宽高，参考如下
5、footer页脚部分内容没有垂直居中显示，如图
建议：设置line-height属性实现文字垂直居中，参考如下
关于图文混排区域的布局：题目要求使用百分比布局，即大div设置宽度100%，八个小盒子设置宽度25%以及左浮动，实现两排四列布局效果。建议同学参考以下代码再实现一下：
祝学习愉快！
0
相似问题