检查代码，看看我这样分区对不对，代码是否需要优化

来源：2-10 作业题

weixin_慕的地5241954

2019-08-18 05:54:54

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>CSS布局</title>
<link rel="stylesheet" href="index.css/style1.css" type="text/css" /><!-- 引用css样式表，记住格式 -->
</head>

<body>
<!-- 此处写代码 -->
<div class="header">
<!-- 顶部区 -->
<div class="logo"> <!-- logo图 -->
<a href="#"><img src="images/logo.png" /></a>
</div>
<div class="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>
</div>
</div>
<div class="content"><!-- 主题区 -->
<div class="banner"><!-- banner图 -->
<div class="banimg">
<img src="images/banner3.jpg" />
</div>
<div class="imgLayer"><!-- 遮罩层 -->
<div class="banuser"><!-- 遮罩层上面的form标签 -->
<form action="#" method="GET">
<input type="text" name="user" value="    your Name" />
<input type="text" name="user" value="    your Phone" />
<input type="text" name="user" value="    your Email" />
<textarea name="introduce" id="comment" cols="30"
rows="10">    write Your Comment Here</textarea>
<button name="send">SEND MESSAGE</button>
</form>
</div>
</div>
</div>
<div class="about"><!-- 主题区中的about区 -->
<div class="abtop"><!-- about区中的上图片区 -->
<div class="tittle">
<h1>ABOUT</h1>
<div class="line"></div><!-- 标题区中的盒子划线 -->
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry.Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s.
</p>
</div>
<!-- about区中的图片区 -->
<div class="pic">
<div class="picleft"> <!-- 图片区中的左图片区-->
<div class="lefth">
<h2> A WORD ABOUT US</h2>
</div>
<div class="leftword">
<p>
Praesent dignissim viverra est,sed bibenddum ligula congue non.
Sed ac nislet felis gravida commodo?Suspenddisse eget ullamcorper
ipsum.Suspenddisse <br/>diam amet.
</p>
<button>EXPLORE</button>
</div>
<div class="wordLayer"></div> <!-- 左图片区中的遮罩层-->
</div>
<div class="picmiddle"> <!-- 图片区中的中间图片区-->
<img src="images/bb3.jpg" />
</div>
<div class="picright"> <!-- 图片区中的右盒子区-->
<div class="rightbox">
<p class="word1">70000</p>
<div class="line"></div><!-- 右盒子区中的盒子画线-->
<p class="word2">Students</p>
</div>
<div class="rightbox">
<p class="word1">600</p>
<div class="line"></div><!-- 右盒子区中的盒子画线-->
<p class="word2">Faculty</p>
</div>
</div>
<div class="clear"></div><!-- 清除图片区中3个部分的浮动-->
</div>
</div>
<div class="abbottom">  <!-- about区中的下图片区 -->
<div class="bottomone">
<div class="bottomimg"><img src="images/b1.jpg" /></div>
<div class="bottomword">
<div class="wordcon"><!-- 下图片区中的文字盒子部分 -->
<p class="word1">Library</p>
<p class="word2">Lorem Ipsum is simply dummy text of the<br />
printing and typesetting industry
</p>
<p class="word3">Lorem Ipsum has been the industry's standard dummy<br />
text ever since the 1500s,when an unknown pronter took<br />
a galley of type and scrambled it to make a type<br />
specimen book.
</p>
<!--多行文字如何在盒子里面自动换行，不然p会撑满整行？使用br标签，是否右更好的办法？-->
<button>EXPLORE</button>
</div>
</div>
<div class="bottomimg"><img src="images/b2.jpg" /></div>
<div class="bottomword">
<div class="wordcon"><!-- 下图片区中的文字盒子部分 -->
<p class="word1">Computer Lab</p>
<p class="word2">Lorem Ipsum is simply dummy text of the<br />
printing and typesetting industry
</p>
<p class="word3">Lorem Ipsum has been the industry's standard dummy<br />
text ever since the 1500s,when an unknown pronter took<br />
a galley of type and scrambled it to make a type<br />
specimen book.
</p>
<button>EXPLORE</button>
</div>
</div>
</div>
<div class="bottomtwo">
<div class="bottomword">
<div class="wordcon"><!-- 下图片区中的文字盒子部分 -->
<p class="word1">Conferenca Hall</p>
<p class="word2">Lorem Ipsum is simply dummy text of the<br />
printing and typesetting industry
</p>
<p class="word3">Lorem Ipsum has been the industry's standard dummy<br />
text ever since the 1500s,when an unknown pronter took<br />
a galley of type and scrambled it to make a type<br />
specimen book.
</p>
<button>EXPLORE</button>
</div>
</div>
<div class="bottomimg"><img src="images/b3.jpg" /></div>
<div class="bottomword">
<div class="wordcon"><!-- 下图片区中的文字盒子部分 -->
<p class="word1">Play Ground</p>
<p class="word2">Lorem Ipsum is simply dummy text of the<br />
printing and typesetting industry
</p>
<p class="word3">Lorem Ipsum has been the industry's standard dummy<br />
text ever since the 1500s,when an unknown pronter took<br />
a galley of type and scrambled it to make a type<br />
specimen book.
</p>
<button>EXPLORE</button>
</div>
</div>
<div class="bottomimg"><img src="images/b4.jpg" /></div>
</div>
</div>
</div>
<div class="gallery"><!-- 主题区中的gallery区 -->
<div class="tittle">
<h1>GALLERY</h1>
<div class="line"></div><!-- gallery区tittle中的盒子画线 -->
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry.Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s.
</p>
</div>
<div class="pic"><!-- gallery区的下图片区，使用ul标签 -->
<ul>
<li>
<img src="images/03-01.jpg"/>
<p>SCIENCE LAB</p>
</li>
<li>
<img src="images/03-02.jpg"/>
<p>INDOOR STADIUM</p>
</li>
<li>
<img src="images/03-03.jpg"/>
<p>TRANSPORTATION</p>
</li>
</ul>
<ul>
<li>
<img src="images/03-04.jpg"/>
<p>KIDS ROOM</p>
</li>
<li>
<img src="images/03-05.jpg"/>
<p>MEDITATION CLASSES</p>
</li>
<li>
<img src="images/03-06.jpg"/>
<p>KIDS PLAY GROUND</p>
</li>
</ul>
</div>
</div>
</div>
<!-- 底部区 -->
<div class="footer">&copy;&nbsp;2016&nbsp;imooc.com&nbsp;京ICP备13046642号</div>
</body>

</html>

还有我注释的地方很多，能解答一下吗，非常感谢。

写回答

2回答

好帮手慕码

2019-08-19

已采纳

同学你好！
（1）父级不设置高度100%就是撑不开的，如下例子：

效果：

设置了父级高度100%之后：

（2）不建议使用绝对定位去实现水平居中。建议计算宽度并设置margin: 0 auto;即可。这种方法也是比较常用的

（3）三角形布局没有简单的方法，都是通过边框实现的：

如果帮助到了你，欢迎采纳，祝学习愉快~

heixin_慕的地5241954

h 非常感谢！！

h019-08-20

共1条回复

好帮手慕码

2019-08-18

同学你好！

按照从上到下的顺序，问题如下：

（1）可以将header，footer相同的属性使用群组选择器写在一起，不同的再另外写

（2）top: 0; left: 0;right: 0; bottom: 0;margin: auto auto;这种居中方法，一般来说使用在绝对定位中，那么它的父级可以是相对定位，也可以是绝对定位，或者是固定定位，都可以作为参照物的

（3）对于多行文字垂直居中还可以将它们包含在div中，使用（2）里居中的方法实现垂直居中，或者是设置top:50%,margin:负的自身高度一半%

（4）.abbottom .bottomword没有出现高度塌陷的问题，是有高度的：

（5）.content .gallery .pic底部外边距无法撑开是因为父级设置了固定的定位，无法撑开。可以给父级设置高度100%：

（6）是因为i内联元素存在的间隙导致，这里建议给li设置为块级，并左浮动

（7）自动换行可以使用word-break:break-all;，示例：

效果：

（8）针对代码，顶部的导航项有鼠标移入背景颜色发生变化而不是字体颜色的变化；

（9）about图文混排区域中缺少指向箭头，可以添加上

可以参考如上继续优化下代码，也可以提交作业，我们的批复作业老师也会给同学指出作业中问题哦

如果帮到了你，欢迎采纳，祝学习愉快~

heixin_慕的地5241954

h 首先非常感谢老师，还有几个疑问: 1.就是（5）中父元素的高度直接去掉，它由子元素高度撑开也是100%，我自己测试了一下，不设置100%是不行，因为我用审查工具看见子元素高度溢出了父元素，为什么一定要设置呢，原理是什么？ 2.（6）中ul该如何设置水平居中，我用了（2）中的居中妙计，好像不行，排版错乱，为什么？ 3.(9)中的箭头，我百度了是使用div单个边框实现，很复杂，是否有更好的方法？

h019-08-18

共1条回复

0 学习 · 40143 问题

查看课程

相似问题

老师看看代码有问题吗

回答 2

position:absolute对后面模块会产生影响吗？

回答 1

2-5代码这样写可以吗？可以优化吗

回答 1

请老师帮忙看下这个排版问题

回答 4

请老师检查，优化代码

回答 1

打开慕课网App查看更多内容