写得太艰难了。。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/common.css"> <script type="text/javascript" src="js/js.js"></script> </head> <body> <!-- 顶部 --> <div class="top"> <div><img src="images/logo.png"></div> <div class="menu"> <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> <!-- banner区 --> <div class="banner"> <div class="mask"></div> <div><img src="images/banner3.jpg"></div> <form> <ul> <li><input type="text" value="your Name" class="banner_text"></li> <li><input type="text" value="your Phone" class="banner_text"></li> <li><input type="text" value="your Emali" class="banner_text"></li> <!-- textarea多行文本框(rows高 cols宽)--> <li><textarea rows="4" cols="61" class="banner_text">Write Your Comment Here</textarea></li> <!-- submit提交按钮--> <li><input type="text" value="SEND MESSAGE" class="banner_submit"></li> </ul> </form> </div> <!-- ABOUT区上半部 --> <div class="ABOUT"> <!-- 上 --> <div class="ABOUT_upper"> <h3>ABOUT</h3> <P class="dividingLine">—</P> <p>Lorem Ipsum is simply dummy text of the printing and typesetting</p> <p>industry.Lorem Ipsum has been the industry's standard dummy</p> <p>text ever since the 1500s.</p> <!-- 图 --> <div class="img"><img src="images/bb3.jpg"></div> <!-- 左 --> <div class="lower"> <div class="left"> <h3>A WORD</h3><h3>ABOUT US</h3> </div> <div class="left_info"> <div class="menu"></div> <p>Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisi et felis gravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet.</p> <input type="text" value="EXPLORE"> </div> </div> <!-- 右 --> <div class="right"> <div> <h3>70000</h3> <p class="dividingLine">—</p> <P>Students</P></div> <div> <h3>600</h3> <p class="dividingLine">—</p> <p>Faculty</p></div> </div> </div> </div> <!-- ABOUT区下半部 --> <div class="ABOUT_lower"> <ul> <li><img src="images/b1.jpg"></li> <li> <div> <p class="p1">Library</p> <p class="p2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p> <p class="p3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambied it to make a type specimen book.</p> <a href="#"><!--button可点击按钮--> <input type="button" value="EXPLORE"> </a> </div> </li> <li><img src="images/b2.jpg"></li> <li> <div> <p class="p1">Computer Lab</p> <p class="p2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p> <p class="p3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambied it to make a type specimen book.</p> <a href="#"><!--button可点击按钮--> <input type="button" value="EXPLORE"> </a> </div> </li> <li> <div> <p class="p1">Conference Hall</p> <p class="p2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p> <p class="p3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambied it to make a type specimen book.</p> <a href="#"><!--button可点击按钮--> <input type="button" value="EXPLORE"> </a> </div> </li> <li><img src="images/b3.jpg"></li> <li> <div> <p class="p1">Play Ground</p> <p class="p2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p> <p class="p3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambied it to make a type specimen book.</p> <a href="#"><!--button可点击按钮--> <input type="button" value="EXPLORE"> </a> </div> </li> <li><img src="images/b4.jpg"></li> </ul> </div> <!-- GALLERY区 --> <div></div> </body> </html>
*{
margin:0px;
padding:0px;
font-family:Microsoft YaHei UI;
}
/*================顶部区===============*/
.top{
background-color:#07cbc9;
width:100%;
position:fixed;/*固定顶部导航栏*/
z-index:30;/*置顶*/
}
/*logl图片*/
.top img{
float:left;
margin-left:50px;
}
a{
text-decoration: none;/*无下滑线*/
color:white;
}
.top .menu ul{
margin-right:80px;
}
.top .menu ul li{
float:right;
margin-right:20px;
list-style:none;
line-height:55px;
}
/*鼠标移动到超链接上时，显示黑色*/
.top .menu ul li:hover{
background-color:black;
}
/*================banner区===============*/
/*透明层*/
.banner .mask{
/*background-color:black;*/
/*opacity:0.4;/*透明效果*/
background-color:rgba(0, 0, 0, 0.3);
z-index:10;/*置顶*/
position:absolute;
top:54px;
width:100%;
height:530px;
}
/*黑色图片*/
.banner img{
width:100%;
height:530px;
position:absolute;
top:54px;
}
.banner form{
text-align:center;
position:relative;
top:180px;
z-index:20;
}
.banner form ul li{
margin-bottom:20px;
}
.banner form ul li .banner_text{
color:#ccc;
border:1px solid #ccc;
width:400px;
line-height:30px;
background-color:transparent;/*背景透明*/
padding-left:10px;
}
/*提交按钮*/
.banner form ul li .banner_submit{
color:#ccc;
border:1px solid #ccc;
background-color:transparent;
padding:10px;
}
.banner form ul li .banner_text:hover{
border:1px solid #07cbc9;
}
.banner form ul li .banner_submit:hover{
background-color:#07cbc9;
border:none;
}
/*================ABOUT区上半部===============*/
.ABOUT{
position:relative;
top:250px;
}
/*上*/
.ABOUT .ABOUT_upper{
height:580px;
width:100%;
text-align:center;
}
.ABOUT .ABOUT_upper h3{
font-size:40px;
}
/*——*/
.ABOUT .ABOUT_upper .dividingLine{
color:#07cbc9;
font-weight:bold;/*加粗*/
}
/*图*/
.ABOUT .ABOUT_upper .img img{
margin-top:20px;
width:550px;
height:350px;}
/*左*/
.ABOUT .ABOUT_upper .lower{
margin-right:740px;
margin-top:-355px;
}
.ABOUT .ABOUT_upper .lower .left h3{
font-size:25px;
}
.ABOUT .ABOUT_upper .lower .left_info{
border:1px solid #ccc;
height:190px;
width:280px;
margin-left:350px;
}
.ABOUT .ABOUT_upper .lower .menu{
height:190px;
width:280px;
position:absolute;
background-color:white;
opacity:0.2;/*透明*/
}
.ABOUT .ABOUT_upper .lower .left_info p{
padding:18px 15px 10px 15px;
font-size:13px;
text-align:left;/
line-height:20px;
}
/*左 按钮*/
.ABOUT .ABOUT_upper .lower .left_info input{
width:70px;
padding:8px;
text-align:center;
margin-left:-160px;
background-color:black;
color:white;
position:relative;
}
.ABOUT .ABOUT_upper .lower .left_info input:hover{
background-color:white;
color:black;
}
/*右*/
.ABOUT .ABOUT_upper .right{
margin-left:820px;
margin-top:-280px;
}
.ABOUT .ABOUT_upper .right div{
border:1px solid #07cbc9;
padding:20px 40px;
margin:30px auto;
width:120px;
}
.ABOUT .ABOUT_upper .right h3{
font-size:25px;
}
.ABOUT .ABOUT_upper .right .dividingLine{
color:#07cbc9;
font-weight:bold;/*加粗*/
}
/*================ABOUT区下半部===============*/
.ABOUT_lower ul li{
top:280px;
position:relative;
float:left;
width:25%;
height:330px;
list-style-type:none;
}
.ABOUT_lower ul li img{
width:100%;
height:100%;
}
.ABOUT_lower ul li div{
width:100%;
height:100%;
background-color:#07cbc9;
color:#fff;
padding:25px;
box-sizing:border-box;/*盒子大小不变，压缩内容*/
}
.ABOUT_lower ul li div .p1{
font-size:25px;
margin-bottom:15px;
line-height:25px;
}
.ABOUT_lower ul li div .p2{
font-size:15px;
margin-bottom:10px;
line-height:25px;
}
.ABOUT_lower ul li div .p3{
font-size:13.5px;
margin-bottom:8px;
line-height:23px;
color:#ccc;
}
/*可点击按钮*/
.ABOUT_lower ul li div a input{
position:relative;
color:white;
background-color:black;
padding:12px 20px 12px 20px;
border:none;
margin-top:22px;
margin-left:120px;
}
.ABOUT_lower ul li a input:hover{
background-color:red;
}
/*================GALLERY区===============*/老师，我ABOUT区下半部，鼠标浮动背景色显示不出来
还有我缩放网页时，整个版面很奇怪。。
ABOUT区的按钮EXPLORE在页面点击时，不是a标签手指的效果，无法达到视频中的效果
23
收起
正在回答 回答被采纳积分+1
2回答
相似问题
作业太难了，都一个星期了写不出来，我不写了
1
0
1
老师，难道才去工作就要面临这么大的难关吗？
2
0
1
这个难度上升太快了，写代码没有思路怎么办
0
0
1
太艰难了请老师一点点检查
14
0
3
登录后可查看更多问答，登录/注册
2. 从网页搭建入门JavaWeb
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星