老师，麻烦看一下代码结构和样式的合理性，最后图文图文混合部分是不是可以用ul搭配li实现，效果最好？
来源：4-10 自由编程
聪U
2020-11-20 14:05:32
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Career Builder</title>
<meta name="Keywords" content="职业生涯建设者">
<meta name="description" content="职业生涯,职业规划,生涯建设,建设,职业">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- 网页头部 -->
<header>
<!-- 设置header-top控制子元素版心 -->
<div class="header-top">
<div class="logo">
<!-- <h1>Career Builder</h1> -->
<img src="images/logo.png" alt="">
</div>
<!-- 头部导航栏部分 -->
<nav class="main-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>
<!-- 网页Banner区域 -->
<section class="banner">
<!-- banner背景图片 -->
<div class="bg-img">
<img src="images/banner3.jpg" alt="">
</div>
<!-- 遮罩层 -->
<div class="mask"></div>
<!-- 表单 -->
<div class="ban-form">
<form action="">
<input type="text" placeholder="your Name" />
<input type="tel" placeholder="your Phone" />
<input type="email" placeholder="your Email" />
<textarea placeholder="Write Your Comment Here"></textarea>
<input type="submit" value="SEND MESSAGE" class="sub-mit">
</form>
</div>
</section>
<!-- about区域 -->
<!-- about上版 -->
<section class="about-above">
<div class="about-header">
<h3>ABOUT</h3>
<div class="empty"></div>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting<br /> industry. Lorem Ipsum has
been the industry's standard dummy <br /> text ever since the 1500s.</p>
</div>
<!-- about-body版心 -->
<div class="about-body">
<h3>A WORD<br /> ABOUT US</h3>
<div class="about-main">
<p>Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisl et felis gravida commodo?
Suspendisse eget ullamcorper ipsum. Suspendisse diam amet.</p>
<span>EXPLORE</span>
</div>
<div class="about-above-pic">
<img src="images/bb3.jpg" alt="">
</div>
<div class="students">
<p class="title">70000</p>
<div class="empty"></div>
<p>Students</p>
</div>
<div class="num">
<p class="title">600</p>
<div class="empty"></div>
<p>Faculty</p>
</div>
</div>
</section>
<!-- about下版 -->
<section class="about-below">
<div class="about-below-pic">
<img src="images/b1.jpg" alt="">
</div>
<div class="about-below-content">
<h4>Library</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="pc">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>
<span>EXPLORE</span>
</div>
<div class="about-below-pic">
<img src="images/b2.jpg" alt="">
</div>
<div class="about-below-content">
<h4>Library</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="pc">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>
<span>EXPLORE</span>
</div>
<div class="about-below-pic">
<img src="images/b3.jpg" alt="">
</div>
<div class="about-below-content">
<h4>Library</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="pc">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>
<span>EXPLORE</span>
</div>
<div class="about-below-pic">
<img src="images/b4.jpg" alt="">
</div>
<div class="about-below-content">
<h4>Library</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="pc">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>
<span>EXPLORE</span>
</div>
</section>
</body>
</html>
-----------------------------------------------------------------------------------------------------------
* {
margin: 0;
padding: 0;
}
header {
height: 80px;
background-color: #07cbc9;
}
header .header-top {
/* .header-top没有形成BFC,然后清除浮动 */
width: 1200px;
height: 80px;
margin: 0 auto;
/* background-color: yellow; */
/* overflow: hidden; */
}
header .header-top .logo {
float: left;
width: 260px;
height: 48px;
padding: 16px 0;
}
header .header-top .logo img {
width: 260px;
height: 48px;
}
header .header-top .main-nav {
float: right;
/* padding-top: 30px; */
}
header .header-top .main-nav ul {
list-style: none;
height: 80px;
}
header .header-top .main-nav ul li {
float: left;
line-height: 80px;
margin-left: 20px;
}
header .header-top .main-nav ul li:first-child {
margin-left: 0;
}
header .header-top .main-nav ul li a {
display: block;
padding: 0 10px;
height: 80px;
font-size: 16px;
color: white;
text-decoration: none;
}
header .header-top .main-nav ul li a:hover {
background-color: yellow;
color: purple;
}
/* banner部分样式 */
.banner {
/* 相对定位，子绝父相 */
position: relative;
/* 不设置高度，也能撑开，因为图片img的height */
}
.banner .bg-img img {
width: 100%;
height: 600px;
}
/* 遮罩层效果样式 */
.banner .mask {
/* 利用定位平铺在banner上 */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 600px;
background-color: rgba(0 , 0, 0, .3);
}
/* 表单层效果 */
.banner .ban-form {
position: absolute;
top: 100px;
left: 50%;
width: 504px;
margin-left: -252px;
/* 让文本居中，然后可以让input居中，submit按钮居中 */
text-align: center;
}
.banner .ban-form input {
height: 40px;
border: 2px solid #808080;
margin-bottom: 40px;
}
.banner .ban-form input,
.banner .ban-form textarea {
width: 500px;
background: none;
outline: none;
color: rgb(241, 29, 241);
}
.banner .ban-form textarea {
height: 110px;
border: 2px solid #808080;
}
.banner .ban-form .sub-mit {
width: 200px;
height: 40px;
color: #808080;
margin-top: 40px;
cursor: pointer;
}
/* about部分样式 */
.about-above {
padding-top: 30px;
}
.about-above .about-header {
width: 100%;
/* background-color: yellow; */
text-align: center;
}
.about-above .about-header h3 {
font-size: 32px;
}
.about-above .about-header .empty,
.about-body .students .empty,
.about-body .num .empty {
width: 60px;
height: 3px;
margin: 10px auto;
background-color: #07cbc9;
}
.about-above .about-header p {
color: gray;
font-size: 14px;
}
.about-body {
position: relative;
width: 1201px;
height: 434px;
margin: 0 auto;
padding-top: 30px;
/* background-color: purple; */
}
.about-body h3 {
float: left;
font-size: 32px;
}
.about-body .about-above-pic {
width: 650px;
height: 435px;
margin: 0 auto;
}
.about-body .about-main {
position: absolute;
top: 150px;
left: 0;
width: 300px;
padding: 20px;
font-size: 18px;
border: 1px solid gray;
background-color: rgba(255, 255, 255,0.5);
}
.about-body .about-main span,
.about-below .about-below-content span {
display: block;
width: 140px;
height: 40px;
background-color: #000;
margin-top: 10px;
color: white;
line-height: 40px;
text-align: center;
cursor: pointer;
}
.about-body .students {
position: absolute;
top: 30px;
right: 0;
width: 260px;
margin-bottom: 30px;
padding: 40px 0;
border: 1px solid #07cbc9;
text-align: center;
}
.about-body .students .title,
.about-body .num .title {
font-size: 28px;
font-weight: 700;
}
.about-body .num {
position: absolute;
top: 223px;
right: 0;
width: 260px;
padding: 40px 0;
border: 1px solid #07cbc9;
text-align: center;
}
/* about下版样式 */
.about-below {
width: 100%;
/* 不设置高度，自适应，待会清除浮动形成BFC */
margin-top: 40px;
overflow: hidden;
background-color: #07cbc9;
}
.about-below .about-below-pic img {
width: 100%;
height: 380px;
}
.about-below .about-below-pic,
.about-below-content,
.about-below-pic {
float: left;
width: 25%;
height: 380px;
/* border: 1px solid transparent; */
}
.about-below .about-below-conten {
/* 清除内嵌时，塌陷的方法，然后为了解决padding扩大盒子问题 */
overflow: hidden;
/* 也可以给盒子一个上边框，border：1px solid transparent ,当然也可以给padding值，但是会扩大盒子不适合这里*/
}
.about-below .about-below-content h4,
.about-below .about-below-content p {
margin: 20px;
font-size: 16px;
color: white;
}
.about-below .about-below-content h4 {
margin: 20px 0 30px 20px;
font-size: 24px;
color: white;
}
.about-below .about-below-content .pc {
color: gray;
}
.about-below .about-below-content span {
margin: 30px auto;
cursor: pointer;
}
1回答
-
同学你好，练习效果图中，图文混排区域第二行内容先展示文字内容，然后展示图片内容，但是同学的代码实现效果先展示了图片，然后才是文字内容，不符合要求，如下图所示：
建议：调整下html结构的顺序。
另外，有一个细节可以优化下，鼠标移入顶部导航项时，改变背景颜色为黑色，效果实现会更好。示例：
图文混合使用div或者ul都能够能够效果，同学可以根据自己的习惯选择一种去实现效果即可。
祝学习愉快~
1
相似问题