老师帮我修改一下代码·
来源：2-10 作业题
慕仰8079247
2019-05-19 23:15:06
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
*{padding:0;margin:0;}
img{float:left;width:20%;height:100px;}
.nav{float:right;background:#07cbc9;width:80%;height:100px;overflow:hidden;}
.nav ul li{float:left; margin:0 40px;list-style:none; font-size:15px;color:black;line-height:100px;}
.banner img{width:100%;height:400px;}
.banner1{width:400px;height:200px;float:left;top:200px;position:absolute;right:25%;}
.bnaner1 table tr td{border:double white 5;}
.about{float:left;overflow:hidden;margin:0 60px;}
.hello{width:60px;height:30px;background:#000;color:white;}
.nihao{margin-top: 80px;}
.buhui{float:left;margin:0 30px;}
.laji{width:100px;height:80px;border:double 5;background:black;color:white;}
.hei{background:#07cbc9;width:100px;height:100px;}
</style>
<body>
<img src="images/logo.png">
<div class="nav">
<ul>
<li>home</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>FACULTY<li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</div>
<div class="banner">
<img src="images/banner3.jpg">
</div>
<div class="banner1">
<table>
<tr>
<td></td></tr>
<br/><br/>
<tr> <form>you phone<input type="text"name="you name"></form><td></td></tr>
<br/>
<br/>
<tr> <form>you email<input type="text"name="you name"></form><td></td></tr>
<br/><br/>
<tr><form>wiite your comment here<input type="text"name="you name"></form><td></td>
</tr>
</table>
</div>
<div align="center" >
<h3>ABOUT</h3>
<p>We always knew our daughter </p><p>Kendall was going be a performe</p>
<p>Kendall was going be a performe</p>
</div>
<div class="about">
<h3>A WORO</h3>
<h3>ABOUT US</h3>
<p>We always knew our daughter</p><p> Kendall was going be a</p> <p>performer of some sort. She </p><p>entertained people in our</p> <p>small town by putting on</p> <p>shows on our front porch when</p><p> she was only three or</p>
<p class="hello"> about</p>
</div>
<div class="nihao">
<img src="images/bb3.jpg">
</div>
<div class="buhui">
<p class="laji"> 70000<br/> alwaysknew</p>
<br>
<p class="laji"> 60000We <br> alwaysknew</p>
</div>
<div ><img src="images/b1.jpg">
<div class="hei">
<ol>
<li>We always knew our daughter</li>
<li> Kendall was going be a</li> <li>performer of some sort. She </li> <p class="hello"> about</p></ol></div></div>
</body>
</html>
1回答
-
好帮手慕星星
2019-05-20
你好，效果实现如下：
这个作业问题较多，可能要写好几页文档，这边可以给你布局建议，修改之后可以直接在右侧上传作业（压缩文件）：
批复作业的老师会给出详细的建议和修改方式。
1、about中间部分：
（1）设置一个蓝色的大div盒子，然后用margin：0 auto；设置这个盒子居中，注意这里的宽度要和GALLERY区的宽度一致，建议设置为1000px左右，
（2）里面3个小的绿色div，设置浮动使显示在一行。用margin将三个隔开，
（3）最后在设置一个粉色div容纳遮罩的这部分，并使用绝对定位，要相对于上面说到的蓝色大div。
2、about图文混排部分：
一个大的div容器，里面写八个小的div，分别容纳图片和内容，分别给8个不同的div设置左浮动，这样就能横向显示，并且每个div的宽度设置为25%，这样正好一排显示4个。注意里面字体的大小和颜色的设置，以及位置的定位，需要改变位置的可以使用填充。
3、文字区域中的三角形：
可以用border设置边框的方式来实现小三角形状的编写，我写了个小例子，你可以参考一下：
实现小三角形之后，将小三角定位到相应的位置，这里就要用到position定位的知识了。
自己动手写一写，祝学习愉快！
欢迎采纳~
0
相似问题