老师能讲解一下，这个案例，一些布局的技巧吗？我自己写 了，感觉好乱。。。。。懵了。

老师能讲解一下，这个案例，一些布局的技巧吗？我自己写 了，感觉好乱。。。。。懵了。

<!DOCTYPE html>

<html lang="en">


<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Career Builder 网页布局案例作业</title>

<style>

/*  头部 */

body {

min-width: 1000px;

}


header {

width: 100%;

height: 80px;

background: #07cbc9;

position: relative;

}


header .left {

position: absolute;

left: 156px;

top: 16px;

}


header .right {

position: absolute;

right: 110px;

top: 0;

}


header .right ul {

list-style: none;

}


header .right ul li {

display: inline-block;

line-height: 80px;

padding-left: 20px;

color: aliceblue;

font-size: 16px;

font-weight: 900;

cursor: pointer;

}


/* banner区域 */

.banner {

width: 100%;

height: 600px;

overflow: hidden;

/* background-image: url("/images/banner3.jpg") */

position: relative;

}


.banner form {

width: 509px;

margin: 0 auto;

text-align: center;

}


.banner img {

width: 100%;

height: 600px;

}


/* 表单区域 */

.banner form {

position: absolute;

top: 50%;

left: 50%;

margin-top: -200px;

margin-left: -255px;

color: #fff;

}


.banner form .ww_hh {

width: 505px;

height: 39px;

border: 2px solid #808080;

margin-bottom: 20px;

background: none;

color: #fff;

/* 表单文本缩进 2个字符 */

text-indent: 2rem;

}


/* 鼠标划过状态 */

.banner form .hover:hover {

border: 2px solid #07cbc9;

}


.banner form .ww_hhh {

height: 115px;

color: #808080;

/* 取掉默认样式，获得焦点蓝色边框 */

outline: none;

/* 取消可拖动样式 */

resize: none;

}


.banner form .w_hh {

width: 127px;

color: #808080;

/* 按钮取消文字缩进效果 */

text-indent: 0;

}


.banner form .hover_btn:hover {

/* 添加背景颜色 */

background: #07cbc9;

/* 取掉边框 */

border: none;

color: #fff;

cursor: pointer;

}


/* 主体内容区域 */

.content {

/* background: pink; */

width: 100%;

height: 1530px;

}


/* 内容板块1：文本标题*/

.content .content_top {

/* background: yellowgreen; */

width: 1141px;

height: 258px;

margin: 0 auto;

text-align: center;

}


.content .content_top h1 {

display: inline-block;

font-size: 50px;

font-weight: 900;

margin-top: 70px;

margin-bottom: 52px;

color: black;

}


.content .content_top h1::before {

content: '__';

position: relative;

top: 20px;

left: 50%;

color: #07cbc9;

}


/* 内容板块2：内容表述*/

.content .content_middle {

/* background: #ccc; */

width: 1141px;

height: 337px;

margin: 0 auto;

position: relative;

}


/* 三个盒子 并排显示 */

.content_middle_left,

.content_middle_centent,

.content_middle_right {

display: inline-block;

width: 33%;

}


.content_middle_left {

position: absolute;

top: 0%;

left: 15%;

}


.content_middle_left h1 {

font-size: 40px;

line-height: 2.3rem;

color: black

}


.content_middle_left p {

padding: 20px;

}


.content_middle_left .middle_left_time {

width: 338px;

height: 182px;

background: rgb(255, 255, 255, 0.3) no-repeat center;

border: 1px solid #c5c5c5;

}


.content_middle_centent {

padding-left: 50%;

margin-left: -188.5px;

padding-bottom: 100px;

}


.content_middle_right {

width: 238px;

height: 144px;

margin: 0 auto;

text-align: center;

}


.content_middle_right .middle_right_time1 {

border: 1px solid #07cbc9;

width: 218px;

height: 70px;

padding-left: 20px;

text-align: center;

}


.content_middle_right .middle_right_time1:nth-child(1) {

padding-bottom: 74px;

}


.content_middle_right .middle_right_time1:nth-child(2) {

padding-bottom: 74px;


}



/* 内容板块3：内容表述*/

.content .content_bottom {

/* background: green; */

width: 100%;

margin: 0 auto;

}


.content .content_bottom div {

float: left;

width: 460px;

height: 397px;

}


.content .content_bottom .text {

width: 460px;

height: 397px;

background: #07cbc9;

color: #fff;

text-align: center;

margin: 0 auto;

}


.content .content_bottom .text .text_box {

padding: 36px 46px 0 50px;

}


.content .content_bottom .text h1 {

font-size: 40px;

text-align: left;

margin-bottom: 24px;

}


.content .content_bottom .text p {

text-align: left;

line-height: 30px;

margin-bottom: 20px;

}


.content .content_bottom .text p:nth-child(3) {

color: #ccc;

}


.content .content_bottom .text button {

margin: 0 auto;

text-align: center;

background: black;

color: #fff;

width: 105px;

height: 43px;


}


.content .content_bottom div img {

width: 100%;

height: 100%;

}

</style>


</head>


<body>

<!-- 顶部  -->

<header>

<div class="left">

<!-- logo -->

<img src="images/logo.png" alt="">

</div>

<div class="right">

<!-- nav -->

<ul>

<li>CONTACT</li>

<li>EVENTS</li>

<li>FACULTY</li>

<li>GALLERY</li>

<li>ABOUT</li>

<li>HOME</li>

</ul>

</div>

</header>

<!-- banner 区  -->

<div class="banner clearfix">

<img src="images/banner3.jpg" alt="头图轮播">

<form action="">

<input class="ww_hh hover" ype="text" placeholder="your Name" required> <br>

<input class="ww_hh hover" ype="tel" placeholder="your Phone" required> <br>

<input class="ww_hh hover" ype="email" placeholder="your Email" required> <br>

<textarea class="ww_hh ww_hhh hover" role="2" cols="30">Write Your Comment Here </textarea>

<input class="ww_hh w_hh hover_btn" type="submit" value="SEND MESSAGE">

</form>

</div>

<!-- ABOUT 区  -->

<section class="content clearfix">

<!-- <div class="top">

           <h1>ABOUT</h1>

           <p>

               China and Chile should connect their development strategies and promote interconnectivity between Chile

               <br>

               and other Latin American countries, President Xi Jinping said on Wednesday.

           </p>

       </div>

       <div class="middle">

           <div class="middle_left">

               <h1> A WORD <br />ABOUT US</h1>

               <div>

                   <p> Xi said Chile is the first South American country to have established diplomatic relations with

                       China, and the first Latin American nation to fully acknowledge China's status as a

                       market-oriented

                       economy.

                   </p>

                   <button>EXPLOSE</button>

               </div>

           </div>

           <div class="middle_centent">

               <img src="images/bb3.jpg" alt="图片">

           </div>

           <div class="middle_right">

               <div class="middle_right_top">

                   <h3>70000</h3>

                   <p>Students</p>

               </div>

               <div class="middle_right_bottom">

                   <h3>600</h3>

                   <p>Faculty</p>

               </div>

           </div>

       </div> -->


<!-- 第一部分内容 -->

<div class="content_top">

<h1>ABOUT</h1>

<p>

China and Chile should connect their development strategies and promote interconnectivity between

Chile

<br>

and other Latin and other Latin American countries, President Xi Jinping said on Wednesday.

<br>

and other Latin American countries, President Xi Jinping said on Wednesday.

</p>

</div>

<!-- 第二部分内容 -->

<div class="content_middle">

<div class="content_middle_left">

<h1>A WORD <br> ABOUT US</h1>

<div class="middle_left_time">

<p>China and Chile should connect their development strategies and promote interconnectivity

betweenChile</p>

<button>EXPLPRE</button>

</div>

</div>

<div class="content_middle_centent">

<img src="images/bb3.jpg" alt="" width="100%">

</div>

<div class="content_middle_right">

<div class="middle_right_time1">

<h1>70000</h1>

<p>Students</p>

</div>

<div class="middle_right_time1">

<h1>600</h1>

<p>Students</p>

</div>

</div>

</div>

<!-- 第三部分内容 -->

<div class="content_bottom clearfix">

<div class="conten-bottom-time IMG">

<img src="images/b1.jpg" alt="">

</div>

<div class="conten-bottom-time text">

<div class="text_box">

<h1>Library</h1>

<p>List of Deliverables of the Second Belt and Road Forum for International

Cooperation</p>

<p>The Belt and Road is "a great positive initiative" in the 21st century, said

Evandro de Carvalho, a

law professor at Brazil's largest think-tank, the Getulio Vargas Foundation

(FGV), and coordinator

of the Brazil-China Study Center.</p>

<button>EXPLORE</button>

</div>

</div>

<div class="conten-bottom-time IMG">

<img src="images/b2.jpg" alt="">

</div>

<div class="conten-bottom-time text">

<h1>Library</h1>

<p>List of Deliverables of the Second Belt and Road Forum for International Cooperation</p>

<p>The Belt and Road is "a great positive initiative" in the 21st century, said Evandro de Carvalho, a

law professor at Brazil's largest think-tank, the Getulio Vargas Foundation (FGV), and coordinator

of the Brazil-China Study Center.</p>

<button>EXPLORE</button>


</div>

<div class="conten-bottom-time text">

<h1>Library</h1>

<p>List of Deliverables of the Second Belt and Road Forum for International Cooperation</p>

<p>The Belt and Road is "a great positive initiative" in the 21st century, said Evandro de

Carvalho, a

law professor at Brazil's largest think-tank, the Getulio Vargas Foundation (FGV), and

coordinator

of the Brazil-China Study Center.</p>

<button>EXPLORE</button>

</div>

<div class="conten-bottom-time IMG">

<img src="images/b3.jpg" alt="">

</div>

<div class="conten-bottom-time text">

<h1>Library</h1>

<p>List of Deliverables of the Second Belt and Road Forum for International Cooperation</p>

<p>The Belt and Road is "a great positive initiative" in the 21st century, said Evandro de

Carvalho, a

law professor at Brazil's largest think-tank, the Getulio Vargas Foundation (FGV), and

coordinator

of the Brazil-China Study Center.</p>

<button>EXPLORE</button>


</div>

<div class="conten-bottom-time IMG">

<img src="images/b4.jpg" alt="">

</div>

</div>


</section>

<!-- GALLERT 区  -->

<section class="conten_buttom">

<div class="content_top">

<h1>ABOUT</h1>

<P>

China and Chile should connect their development strategies and promote interconnectivity

between

Chile

<br>

and other Latin and other Latin American countries, President Xi Jinping said on Wednesday.

<br>

and other Latin American countries, President Xi Jinping said on Wednesday.

</P>

</div>

</section>

<!-- 页脚 区  -->

<footer>

&copy; 2019imooc.com 京ICP备案123213号

</footer>

</body>


</html>
007号学员 2019-04-27
源自：项目：网页布局案例   2-10 作业题
1
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

2回答
好帮手慕夭夭 回答被采纳获得+3积分 2019-04-28 11:34:52

你好同学。布局的话先把页面分成几个大块，每一个大块里面也要分成一个一个的小块，把页面看出很多块组成。所以不要着急去做，先分析一下页面结构，这样结构就清晰了，布局也就简单了。布局也没有什么技巧，还是以后熟练了就慢慢的好了。老师帮助你分析一下这个页面。

页面分成几个大块，例如头部，banner区域，about区域，gallery区域，尾部。然后给一个区域分成不同的小块，每一个小块可能还可以分成更小的块。老师拿几个区域给你分析一下

例如头部，分成两部分组成一个，logo和导航，两个区域应该一个左浮动，一个右浮动即可

http://img1.sycdn.imooc.com//climg/5cc51d5c0001664f18990131.jpg

banner区域里面的盒子要放在img图片，遮罩层，表单。遮罩层和表单都要使用定位，让它能悬浮在图片之上显示的。banner区域也要设置相对定位，让它成为子元素 参照点。

http://img1.sycdn.imooc.com//climg/5cc51dbe0001e76919000604.jpg

例如about中间部分，盒子里分左中右三部分，很多同学在三个小盒子的布局中使用定位，这样很麻烦，使用给它们三个一起设置浮动就能显示在一排，这样就简单。

http://img1.sycdn.imooc.com//climg/5cc51e8e000168ee05540198.jpg

所以定位不能滥用，像如下文本框因为要部分显示在图片上，所以它使用定位很合理：

http://img1.sycdn.imooc.com//climg/5cc51f240001620705540210.jpg

在例如下图gallery区域图片部分 ,整体内容放在一个大盒子里面 ,并设置固定宽度和margin:0 auto居中 .里面放6个小盒子 ,小盒子设置固定宽度以及适当的左右间距. 并设置左浮动 ,让它们在一排显示 ,因为大盒子会因为子元素浮动而高度塌陷 ,所以给大盒子设置 overflow: hidden;解决父元素高度塌陷哦

http://img1.sycdn.imooc.com//climg/5cc51e6a0001db2605540247.jpg

同学可以先往下练习，作业区域是可以提交作业的，完成作业可以上传，会有批复作业的老师为你的作业进行详细指导哦。

祝学习愉快 ，望采纳。


0
收起回答
  • 007号学员 提问者 #1
    谢谢?，我清楚了。我再练习。
    2019-04-28 12:29:10
  • 007号学员 提问者 #2
    about中间部分浮动 中间那个图片 跑 左边去了。会塌陷
    2019-04-28 12:36:57
好帮手慕夭夭 2019-04-28 13:37:37

你好同学，老师的回复中有提到过解决父元素塌陷问题，如下

http://img1.sycdn.imooc.com//climg/5cc53bec0001cd4d07870092.jpg

在前面的浮动课程中清除浮动是有讲过的，同学学习课程时一定要认真，同时老师的回复也要认真阅读哦。

祝学习愉快 ，望采纳。

0
收起回答
  • 提问者 007号学员 #1
    已经解决了。
    2019-04-28 14:12:49
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

CSS里面的这个男老师真的讲的不好
2 0 6
分布式定时任务，希望基础先讲
204 29 10
感觉bootstrap的导航条好难用啊，还不如自己写一个，大家怎么看
22 1 6
感觉这个课程讲得节奏太快了
18 2 4
这个男老师都在讲些什么？
3 0 10

登录后可查看更多问答，登录/注册

1.前端零基础入门
  • 参与学习           人
  • 提交作业       8403    份
  • 解答问题       40143    个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

了解课程

本课精华内容

问答 作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师