我写完了，老师可以帮我检查一下问题吗，我明天提交作业了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网站首页</title>
<style type="text/css">
*{margin:0;padding:0;list-style: none;}
/*综合*/
/*清楚a标签默认样式*/
a{
text-decoration: none;
color: #fffefe;
}
/*解决图片底下的小空隙*/
img{
vertical-align: middle;
}
/*头部*/
div.Head{
background: #07cbc9;
height: 80px;
padding-right: 100px;
min-width: 1000px;
position: sticky;
top: 0;
z-index: 3;
}
/*logo*/
div.Head img.logo{
margin: 16px 0 0 50px;
float: left;
}
/*nav*/
div.Head ul.nav{
float: right;
}
div.Head ul.nav li{
float: left;
padding:0 11px 0 11px;
line-height: 80px;
font-weight: bold;
font-size: 16px;
color: #fffefe;
}
/*设置logo nav被鼠标停留时的样式*/
div.Head ul.nav li:hover{
background: rgba(255,0,102,0.5)
}
/*banner图*/
div.banner{
width: 100%;
height: 700px;
background: yellow url(images/banner3.jpg) no-repeat;
background-size: 100% 700px;
}
/*遮罩层*/
div.Mask{
width: 100%;
height: 700px;
background-color: black;
opacity: 0.5;
position: absolute;
top: 80px;
left:0;
}
/*banner图上面的表单*/
div.Edit{
width: 509px;
height: 371px;
position:absolute;
left:50%;
margin-left: -255px;
top:430px;
margin-top: -183.5px;
z-index: 2;
}
div.Edit input.Edit1,div.Edit input.Edit2,div.Edit input.Edit3{
height: 39px;
width: 505px;
border: solid 2px #808080;
opacity: 0.7;
margin-bottom: 19px;
font-size: 18px;
background: transparent;
}
div.Edit textarea.Edit4{
height: 115px;
width: 505px;
border: solid 2px #808080;
opacity: 0.7;
margin-bottom: 19px;
font-size: 30px;
background: transparent;
}
div.Edit input.button{
width: 127px;
height: 43px;
border: solid 2px #808080;
opacity: 0.7;
margin-left: 191px;
background: transparent;
color: #bdbdbd;
}
/*鼠标滑过表单各项时，表单项的边框颜色变成#07cbc9*/
div.Edit input:hover,div.Edit textarea:hover{
border: solid #07cbc9 2px;
}
/*删除按钮默认样式选中显示1px蓝色轮廓*/
div.Edit input:focus,div.Edit textarea:focus{
outline: 0;
}
/*鼠标滑过提交按钮时，按钮没有边框，背景颜色变成#07cbc9*/
div.Edit input.button:hover{
border: 0;
background: #07cbc9;
}
/*内容区域*/
div.Content{
width: 100%;
padding-bottom: 65px;
}
/*内容区域上部*/
div.Content div.Content-top{
width: 100%;
max-width: 568px;
margin: 0 auto;
padding-bottom: 100px;
position: relative;
}
/*内容区域上部标题*/
div.Content div.Content-top div.content_title{
padding: 60px 0 40px 0;
}
/*内容区域上部标题 h3 */
div.Content div.Content-top div.content_title h3{
font-size: 50px;
color: #000000;
text-align: center;
padding-bottom: 24px;
}
/*内容区域上部标题段落 P */
div.Content div.Content-top div.content_title p{
font-size: 17px;
text-align: center;
padding-top: 24px;
color: #797979;
}
/*内容区域上部标题和段落之间的蓝线*/
div.noline{
border-bottom: solid #07cbc9 2px;
width: 40px;
margin:0 auto;
}
/*内容区域上部内容*/
div.Content div.Content-top div.content_image img{
width: 100%;
height: 380px;
}
/*内容区域上部内容左边透明区域*/
div.Content div.Content-top div.left-transparent{
width: 370px;
height: 345px;
position: absolute;
top:282px;
left:-235px;
}
/*内容区域上部内容左边透明区域里面的透明盒子*/
div.Content div.Content-top div.left-transparent div.transparent-box{
width: 370px;
height: 246px;
box-sizing: border-box;
border: solid #c5c5c5 1px;
padding:33px 0 0 27px;
color: #000000;
line-height: 25px;
/*重要知识:
规定颜色值为 rgb 代码的背景颜色可以设置颜色的透明度.且子元素不会被继承!*/
background: rgba(255,255,255,0.5);
}
div.Content div.Content-top div.left-transparent div.transparent-box form input.button-type{
width: 102px;
height: 42px;
background: #000000;
color: white;
border: 0px;
margin-top: 24px;
}
/*中间部分左侧的EXPLORE按钮，鼠标移入时背景变为透明的，但是有黑色的边框*/
div.Content div.Content-top div.left-transparent div.transparent-box form input.button-type:hover{
background: transparent;
border: solid #000000 1px;
color: #000000;
}
/*删除按钮默认的选中显示轮廓*/
div.Content div.Content-top div.left-transparent div.transparent-box form input.button-type:focus{
outline: 0;
}
div.Content div.Content-top div.left-transparent h3{
font-size: 27px;
width: 180px;
text-align: center;
}
/*内容区域上部内容右边方框框*/
div.Content div.Content-top div.right-jeBox{
width: 238px;
height: 318px;
position: absolute;
top: 282px;
left:603px;
}
div.Content div.Content-top div.right-jeBox div.right-jeBox1{
margin-bottom: 30px;
}
div.Content div.Content-top div.right-jeBox div.right-jeBox1,div.Content div.Content-top div.right-jeBox div.right-jeBox2{
width: 238px;
height: 144px;
box-sizing: border-box;
border: 1px solid #07cbc9;
text-align: center;
padding-top: 30px;
}
div.Content div.Content-top div.right-jeBox h3{
padding-bottom: 20px;
font-size: 25px;
}
div.Content div.Content-top div.right-jeBox p{
padding-top: 20px;
font-size: 14px;
font-weight: bold;
}
/*内容区域下部*/
div.Content-bottom{
width: 100%;
height: 800px;
min-width: 1800px;
overflow: hidden;
position: relative;
}
div.Content-bottom ul li{
width: 25%;
background: #07cbc9;
height: 400px;
float: left;
}
div.Content-bottom ul li img{
width: 100%;
height: 400px;
}
div.Content-bottom ul li.Text{
box-sizing: border-box;
padding:40px 0 0 50px;
color: white;
}
/*设置文本区域的样式和按钮样式*/
div.Content-bottom ul li.Text h4{
font-size: 25px;
font-weight: normal;
padding-bottom: 25px;
}
div.Content-bottom ul li.Text p.describe{
font-size: 18px;
line-height: 30px;
padding-bottom: 25px;
}
div.Content-bottom ul li.Text p.paragraph{
font-size: 14px;
padding-bottom: 50px;
}
div.Content-bottom ul li.Text input.buttons{
width: 104px;
height: 43px;
border: 0;
background: #000000;
color: white;
outline: none;
margin-left: 210.75px;
}
/*鼠标划过下部分的文字区域片中的按钮时，按钮的背景颜色为透明色，边框为黑色*/
div.Content-bottom ul li.Text input.buttons:hover{
background: transparent;
border: solid 1px #000000;
}
/*设置三角形*/
/*div.Content-bottom ul:after{
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}*/
div.Content-bottom div.triangle1{
position: absolute;
top:25%;
left:25%;
margin-left: -60px;
margin-top: -25px;
border-width: 25px 30px 25px 30px;
border-style: solid;
border-color: transparent #07cbc9 transparent transparent;
}
div.Content-bottom div.triangle2{
position: absolute;
top:25%;
left:75%;
margin-left: -60px;
margin-top: -25px;
border-width: 25px 30px 25px 30px;
border-style: solid;
border-color: transparent #07cbc9 transparent transparent;
}
div.Content-bottom div.triangle3{
position: absolute;
top:75%;
left:25%;
margin-top: -25px;
border-width: 25px 30px 25px 30px;
border-style: solid;
border-color: transparent transparent transparent #07cbc9;
}
div.Content-bottom div.triangle4{
position: absolute;
top:75%;
left:75%;
margin-top: -25px;
border-width: 25px 30px 25px 30px;
border-style: solid;
border-color: transparent transparent transparent #07cbc9;
}
/*图文混排*/
/*设置图文混排文字标题部分*/
div.Graphic{
width: 100%;
max-width: 1140px;
margin: 0 auto;
min-width: 1140px;
padding-bottom: 65px;
}
div.Graphic div.mixed{
text-align: center;
padding-bottom: 52px;
}
div.Graphic div.mixed h3{
font-size: 50px;
padding-bottom: 28px;
color: #000000;
}
div.Graphic div.mixed p{
padding-top: 23px;
font-size: 17px;
color: #797979;
}
/*设置图文混排图片内容部分*/
div.bywith{
overflow: hidden;
}
div.bywith dl{
float: left;
margin-right: 30px;
}
div.bywith dl.Attributes{
margin-right: 0;
}
div.bywith dl.Following{
margin-bottom: 30px;
}
/*设置图文混排文字的样式*/
div.bywith dl dd{
height: 64px;
background: #000000;
box-sizing: border-box;
padding-left: 15px;
line-height: 64px;
color: #efffff;
font-size: 15px;
}
/*底部信息*/
div.data-role{
width: 100%;
height: 80px;
background: #07cbc9;
text-align: center;
line-height: 80px;
color: white;
font-size: 16px;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="Head">
<!-- logo -->
<a href="#"><img src="images/logo.png" class="logo"></a>
<!-- nav -->
<ul class="nav">
<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>
<!-- banner图 -->
<div class="area">
<!-- banner图img -->
<div class="banner">
</div>
<!-- banner图遮罩层 -->
<div class="Mask"></div>
<!-- banner图上面的框 -->
<div class="Edit">
<form>
<input type="text" name="Edit1" class="Edit1" placeholder="your Name">
<input type="text" name="Edit2" class="Edit2" placeholder="your Phone">
<input type="text" name="Edit3" class="Edit3" placeholder="your Pellow">
<textarea name="Edit4" class="Edit4" placeholder="wriamemnn commant Here"></textarea>
<input type="submit" name="button" class="button" value="SEND MESSAGE">
</form>
</div>
</div>
<!-- 内容区 -->
<div class="Content">
<!-- 内容区域上部 -->
<div class="Content-top">
<!-- 内容区域上部标题 -->
<div class="content_title">
<h3>ABOUT</h3>
<div class="noline"></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>
<!-- 内容区域上部内容 -->
<div class="content_image">
<img src="images/bb3.jpg">
</div>
<!-- 以下用定位实现 -->
<!-- 左边透明区域 -->
<div class="left-transparent">
<h3>A WORD<br>ABOUT US</h3>
<div class="transparent-box">
<p>Praesent dignissim viverra est,sed<br>bibendum ligula congue non. Sed ac nisl<br>et felis gravida commodo? Suspendisse<br>eget ullamcorper ipsum. Suspendisse<br>diam amet.</p>
<form>
<input type="submit" name="button" class="button-type" value="EXPLORE">
</form>
</div>
</div>
<!-- 右边方框框 -->
<div class="right-jeBox">
<div class="right-jeBox1">
<h3>70000</h3>
<div class="noline"></div>
<p>Students</p>
</div>
<div class="right-jeBox2">
<h3>600</h3>
<div class="noline"></div>
<p>Faculty</p>
</div>
</div>
</div>
<!-- 内容区域下部 -->
<div class="Content-bottom">
<ul>
<li><img src="images/b1.jpg"></li>
<li class="Text">
<h4>Library</h4>
<p class="describe">Lorem Ipsum is simply dummy text of the<br>printing and typesetting industry</p>
<p class="paragraph">Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s,when an unknown printer took<br>a galley of type and scrambled it to make a type<br>specimen book.</p>
<form><input type="submit" name="buttons" class="buttons" value="EXPLORE"></form>
</li>
<li><img src="images/b2.jpg"></li>
<li class="Text">
<h4>Computer Lab</h4>
<p class="describe">Lorem Ipsum is simply dummy text of the<br>printing and typesetting industry</p>
<p class="paragraph">Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s,when an unknown printer took<br>a galley of type and scrambled it to make a type<br>specimen book.</p>
<form><input type="submit" name="buttons" class="buttons" value="EXPLORE"></form>
</li>
<li class="Text">
<h4>Conference Hall</h4>
<p class="describe">Lorem Ipsum is simply dummy text of the<br>printing and typesetting industry</p>
<p class="paragraph">Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s,when an unknown printer took<br>a galley of type and scrambled it to make a type<br>specimen book.</p>
<form><input type="submit" name="buttons" class="buttons" value="EXPLORE"></form>
</li>
<li><img src="images/b3.jpg"></li>
<li class="Text">
<h4>Play Ground</h4>
<p class="describe">Lorem Ipsum is simply dummy text of the<br>printing and typesetting industry</p>
<p class="paragraph">Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s,when an unknown printer took<br>a galley of type and scrambled it to make a type<br>specimen book.</p>
<form><input type="submit" name="buttons" class="buttons" value="EXPLORE"></form>
</li>
<li><img src="images/b4.jpg"></li>
</ul>
<!-- 三角设置 -->
<div class="triangle1"></div>
<div class="triangle2"></div>
<div class="triangle3"></div>
<div class="triangle4"></div>
</div>
</div>
<!-- 图文混排 -->
<div class="Graphic">
<!-- 图文混排标题 -->
<div class="mixed">
<h3>GALLERY</h3>
<div class="noline"></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>
<!-- 图文混排内容 -->
<div class="bywith">
<dl class="Following">
<dt><img src="images/03-01.jpg"></dt>
<dd>SCIENCE LAB</dd>
</dl>
<dl class="Following">
<dt><img src="images/03-02.jpg"></dt>
<dd>INDOOR STADIUM</dd>
</dl>
<dl class="Attributes Following">
<dt><img src="images/03-03.jpg"></dt>
<dd>TRANSPORTATION</dd>
</dl>
<dl>
<dt><img src="images/03-04.jpg"></dt>
<dd>KIDS ROOM</dd>
</dl>
<dl>
<dt><img src="images/03-05.jpg"></dt>
<dd>MEDITATION CLASSES</dd>
</dl>
<dl class="Attributes">
<dt><img src="images/03-06.jpg"></dt>
<dd>KIDS PLAY GROUND</dd>
</dl>
</div>
</div>
<!-- 底部 -->
<div class="data-role">
<p>© 2016 imooc.com 京ICP备13046642号</p>
</div>
</body>
</html>33
收起
正在回答
3回答
同学你好， 编程是很灵活的，只要效果实现的可以，不会扣分的，图文混排区域，由于设置了min-width，导致在其他电脑下打开出现水平滚动条，建议：去掉min-width，只设置百分百宽度适应窗口的宽度， 剩下的细节同学自己下去调整一下即可。
作业中存在的其他问题，建议：同学直接提交作业，批作业的老师会针对同学的项目给出详细的修改建议，并整理成文档返给同学，方便同学查看修改。
如果帮助到了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星