老师还有什么可以改进的
<!DOCTYPE html> <html> <head> <title>社交网站</title> <link rel="stylesheet" type="text/css" href="CSS/texting.css"> <script type="text/javascript" src="JS/texting.js"></script> </head> <body> <div class="header"> <div class="logo"> <div class="ziti"><img src="images/logo.png"></div> <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 class="banner"> <img src="images/banner3.jpg"> <table> <tr> <td class="a">your Name</td> <td class="a">your phone</td> <td class="a">your Email</td> <td class="b">Write your Comment here</td> <td class="c"><a href="#"> <input type="button" value="SENG MESSAGE"> </a></td> </tr> </table> </div> </div> <div class="content-about"> <h1>ABOUT</h1> <table border="0"> <td>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</td> </table> <div class="xiatu"> <img src="images/bb3.jpg"> <ul id="menu1"> <li><H2>A WORD</H2></li> <li><H2>ABOUT US<H2></li> </ul> <div class="zuowenzi"> <p>Praesent dinissim viverra est,sed bibendum ligula congue non.Sed ac nislet felis gravida commodo?Suspendisse eget ullamcorper ipsum.Suspendisse diam amet</p> <a href="#"><input type="button" name="" value="EXPLORE"></a> </div> <div class="youkuangk"> <ul> <li><p class="a">70000</p><label class="line"></label><p class="b">Student</p></li> <li><p class="a">600</p><label class="line"></label><p class="b">Faculty</p></li> </ul> </div> </div> </div> <div class="about-xia"> <img src="images/b1.jpg" class="a"> <div class="a1"> <p class="p3">Library</p> <p class="p1">Lorem Ipsum is simply du,,y text of the peinting and typesetting industry</p> <p class="p2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took agalley of typr and scrambled it to make a type specimen book. </p> <input type="button" name="" value="EXPLORE"> </div> <img src="images/b2.jpg" class="b"> <div class="a1"> <p class="p3">Computer Lab</p> <p class="p1">Lorem Ipsum is simply du,,y text of the peinting and typesetting industry</p> <p class="p2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took agalley of typr and scrambled it to make a type specimen book. </p> <input type="button" name="" value="EXPLORE"> </div> <div class="a1"> <p class="p3">Conference Hall</p> <p class="p1">Lorem Ipsum is simply du,,y text of the peinting and typesetting industry</p> <p class="p2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took agalley of typr and scrambled it to make a type specimen book. </p> <input type="button" name="" value="EXPLORE"> </div> <img src="images/b3.jpg" class="c"> <div class="a1"> <p class="p3">Play Ground</p> <p class="p1">Lorem Ipsum is simply du,,y text of the peinting and typesetting industry</p> <p class="p2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took agalley of typr and scrambled it to make a type specimen book. </p> <input type="button" name="" value="EXPLORE"> </div> <img src="images/b4.jpg" class="d"> </div> <div class="content-gallery"> <div class="gallery-title"> <h1>GALLERY</h1> <label class="line"></label> <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="gallery-more"> <div class="gallery-img"> <img src="images/03-01.jpg"> <div class="xiatu"> <p>SCIENCE LAB</p> </div> </div> <div class="gallery-img"> <img src="images/03-02.jpg"> <div class="xiatu"> <p>INDOOR STADIUM</p> </div> </div> <div class="gallery-img"> <img src="images/03-03.jpg"> <div class="xiatu"> <p>TRANSPORTATION</p> </div> </div> <div class="gallery-img"> <img src="images/03-04.jpg"> <div class="xiatu"> <p>KIDS ROOM</p> </div> </div> <div class="gallery-img"> <img src="images/03-05.jpg"> <div class="xiatu"> <p>MEDITATION CLASSES</p> </div> </div> <div class="gallery-img"> <img src="images/03-06.jpg"> <div class="xiatu"> <p>KIDS PLAY GROUND</p> </div> </div> </div> </div> <div class="footer"> <div class="footer-nei"> <p>@ 2016 imooc.com 京ICP备13046642号</p> </div> </div> </body> </html>
*{
margin:0px;
padding:0px;
}
.header{
width: 1200px;
margin:0px auto 0px auto;
}
.header .logo{
width: 1200px;
height: 50px;
background-color: #07cbc9;
/*float: left;*/
position: fixed;
z-index:1;
}
.header .logo .ziti{
float: left;
margin-left: 100px;
height: 30px;
}
.header .logo ul{
float: right;
line-height:48px;
/*height: 50px; */
/*margin-top:-25px;*/
}
.header .logo ul li{
float: right;
list-style: none;
margin-right:15px;
}
.header .logo ul li a{
text-decoration:none;/*去下划线*/
color:#fff;
font-size:10px;
}
/*有待商讨*/
.header .logo ul li:hover{
background-color:black;
}
.header .banner{
}
.header .banner img{
width: 1200px;
}
.header .banner table{
width: 300px;
margin: auto;
position: absolute;
top: -300px; left: 0; bottom: 0; right: 0;
}
.header .banner tr td{
display: block;
margin-top: 20px;
border: 1px solid #fff;
opacity: 0.4;
color: #fff;
font-size:8px;
}
.header .banner tr td:hover{
border-color:#07cbc9;
}
.header .banner tr .a{
height: 30px;
padding-left:8px;
line-height:30px;
}
.header .banner tr .b{
height: 70px;
padding-left:8px;
}
/*算一个难点，后续在思考*/
.header .banner .c{
width: 120px;
height: 40px;
margin:20px auto 0 auto;
line-height: 40px;
padding-left:2px;
overflow:hidden;
}
.header .banner .c input{
background-color:#07cbc9;
border: 0;
opacity:0.4;
background: rgba();
}
.header .banner .c input:hover{
background-color:#07cbc9;
}
.content-about{
margin:auto;
width: 1200px;
}
.content-about h1{
text-align: center;
height:50px;
margin-top:20px;
margin-bottom:20px;
}
.content-about table{
width:500px;
text-align: center;
margin:auto;
}
.content-about .xiatu{
width:1200px;
/*text-align:center;*/
}
.content-about img{
width:500px;
margin:20px;
position:relative;
left:-110px;
}
.content-about .xiatu #menu1{
float:left;
list-style:none;
top:35px;
left: 200px;
position:relative;
}
.content-about .xiatu .zuowenzi{
width:310px;
height:180px;
float:left;
position:relative;
border:1px solid #C0C0C0;
top:120px;
left:70px;
}
.content-about .xiatu .zuowenzi p{
position:relative;
left: 20px;
top:10px;
}
.content-about .xiatu .zuowenzi input{
width: 100px;
height:30px;
position:relative;
left: 20px;
top: 30px;
border:0px solid black;
background-color: black;
color:#fff;
}
.content-about .xiatu .zuowenzi input:hover{
background-color:#fff;
color:black;
border:1px solid black;
}
.content-about .xiatu .youkuangk{
width:200px;
float:right;
position:relative;
bottom:-5px;
right:130px;
}
.content-about .xiatu .youkuangk ul{
width:200px;
}
.content-about .xiatu .youkuangk ul li{
margin:15px;
list-style:none;
border:1px solid #07cbc9;
text-align: center;
height: 120px;
}
.content-about .xiatu .youkuangk ul li p{
font-size:20px;
line-height: 60px;
font-weight: bold;
}
.content-about .xiatu .youkuangk ul li label{
background-color:#07cbc9;
display:block;
width: 40px;
height: 2px;
margin:auto;
}
.about-xia{
width: 1200px;
height: 600px;
margin:auto;
background-color:#07cbc9;
}
.about-xia img{
width: 300px;
height: 300px;
float: left;
position: relative;
overflow: hidden;
}
.about-xia .a1{
width: 300px;
height: 300px;
float: left;
border:0px solid black;
position: relative;
overflow: hidden;
}
.about-xia p{
position: relative;
left:20px;
top: 20px;
margin-bottom:10px;
color:#fff;
}
.about-xia .p1{
font-size:13px;
position: relative;
width:250px;
height:50px;
}
.about-xia .p2{
font-size:2px;
width: 270px;
}
.about-xia .p3{
font-size:23px;
}
.about-xia input{
width: 100px;
height:30px;
position:relative;
left: 20px;
top: 30px;
background-color: black;
color:#fff;
border:0px solid black;
}
.about-xia input:hover{
background-color:#07cbc9;
color:#fff;
border:1px solid black;
}
.content-gallery .gallery-title{
width:1200px;
margin:auto;
}
.content-gallery .gallery-title h1{
margin:20px auto;
width: 200px;
height:50px;
text-align: center;
}
.content-gallery .gallery-title p{
width:500px;
text-align: center;
margin:20px auto;
}
.content-gallery .gallery-more{
width: 800px;
margin:auto;
}
.content-gallery .gallery-more .gallery-img{
width:230px;
height: 200px;
position: relative;
float: left;
margin: 10px;
/*overflow:hidden;*/
}
.content-gallery .gallery-more .gallery-img img{
width:230px;
height: 160px;
}
.content-gallery .gallery-more .gallery-img .xiatu{
width: 230px;
height:40px;
background-color: black;
color:#fff;
line-height: 40px;
}
.content-gallery .gallery-more .gallery-img .xiatu p{
position:relative;
left:5px;
font-size:10px;
}
.content-gallery label{
background-color:#07cbc9;
display:block;
width: 40px;
height: 2px;
margin:auto;
}
.footer{
width: 1200px;
height: 50px;
margin:60px auto;
/*border-top:0px solid #07cbc9;*/
overflow: hidden;
background-color:#07cbc9;
text-align: center;
line-height: 50px;
}
正在回答
同学你好，复制运行贴出代码，还有如下问题和建议：
1、根据题目要求，图片上要有半透明的遮罩，图片上为表单内容的input框来输入用户信息
1)、遮罩层的实现： 首先可以对其设置背景色为半透明黑色：
background-color: #000; opacity: 0.4;
再将大小设置与图片相同。
然后设置z-index让其显示在图片上层。
最后使用绝对定位使其定位在图片正上方。
2)、表单内容可以设置一个form表单，添加input框
根据题目要求，设置对应的css样式，这样在这些框中就可以输入内容了。
3)、 根据题目要求，鼠标滑过提交按钮时，按钮没有边框，背景颜色变成#07cbc9，如上所改，我们可以对submit提交按钮，设置如下样式：
.banner input[type="submit"]{
color: #bdbdbd;
padding: 10px;
margin: 10px;
background-color: transparent;
border: 2px solid gray;
outline: none;
cursor: pointer;
}
.banner input[type="submit"]:hover{
background-color: #07cbc9;
color:#fff;
border:1px solid #07cbc9;
} 2、About下有一个小横线，没有实现
我们可以写一个标签，<label class="line"></label>。然后给这个标签的样式设置为：
label.line{
background-color:#07cbc9;
display:block;
width: 40px;
height: 2px;
margin:15px auto;
} 3、对About左下方的文字添加背景颜色的透明度，例如：
4、建议整体使用百分比的形式设置宽度，因为根据题目要求，宽度相对于浏览器100%显示。
如果我的回答解决了你的疑惑，请采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星