gallery区怎么设置了没用
*{
padding:0;
margin:0;
}
.header{
width:100%;
height:100px;
background-color:#07cbc9;
position:fixed;
}
.header img{
width:260px;
height:48px;
padding-left:100px;
padding-top:26px;
}
.header .logo{
float:left;
}
.header .nav{
float:right;
}
.header .nav ul{
padding-right: 50px;
}
.header .nav ul li{
float:left;
list-style: none;
width:100px;
height:100px;
line-height: 100px;
font-size: 15px;
}
.header .nav ul li a{
text-decoration: none;
color:#fff;
}
.header .nav ul li a:hover{
background-color:#000;
}
.mian .banner{
width:100%;
height:800px;
}
.mian .banner img{
width:100%;
height:800px;
}
.mian .banner-play{
position:absolute;
top:100px;
left:0;
background-color:#000;
width:100%;
height:800px;
opacity: 0.5;
}
.mian .banner-play-top{
width:400px;
height:300px;
background-color:#000;
color:#fff;
position:absolute;
top:350px;
margin-top:-150px;
z-index: 2;
right:50%;
margin-right: -200px;
}
.mian .about{
width:1000px;
margin:0 auto;
}
.mian .about .about-top{
padding-top:100px;
text-align:center;
}
.mian .about .about-mid{
padding-top:20px;
text-align:center;
}
.mian .about .about-mid img{
width:400px;
height:300px;
}
.mian .about .about-bottom{
width:100%;
height:400px;
background-color: #07cbc9;
}
.mian .about .about-bottom tr{
width:25%;
height:200px;
}
.mian .about .about-bottom img{
width:200px;
height:190px;
}
.mian .gallery{
width:800px;
margin:0 auto;
}
.mian .gallery .gallery-top{
padding-top:100px;
text-align:center;
}
.footer{
width: 100%;
height:100px;
background-color: #07cbc9;
color: #fff;
font-size: 15px;
font-family:"微软雅黑";
text-align:center;
line-height:100px;
margin-top: 20px;
}<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网页布局</title> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <!-- 头部 --> <div class="header"> <!-- logo --> <div class="logo"> <img src="images/logo.png" alt="logo"/> </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="mian"> <div class="banner"> <img src="images/banner3.jpg"> </div> <!-- 遮罩层 --> <div class="banner-play"> <div class="banner-play-top"> <form> <input type="text" size="40" value="YOUR NAME"><br/> <input type="text" size="40" value="YOUR PHONE"><br/> <input type="text" size="40" value="YOUR EMAILL"><br/> <textarea name="textarea" cols="45" rows="8"></textarea><br/> <input type="submit" name="submit" value="SEND MISSAGE"> </form> </div> </div> <div class="about"> <div class="about-top"> <h1>ABOUT</h1> <p>bsisjx jsok bisjb ihvsghh vxibxyus gishxh hoixsuxhi<br/> hsoijos bxijxni bxishiw bxijowlj ixisnxijxisy <br/>vijnvxijxnx xinxoxmo</p> </div> <div class="about-mid"> <img src="images/bb3.jpg"/> </div> <div class="about-bottom"> <table> <tr> <td><img src="images/b1.jpg"/></td> <td>111111111</td> <td><img src="images/b2.jpg"/></td> <td>1111111111</td> </tr> <tr> <td>111111111</td> <td><img src="images/b3.jpg"/></td> <td>111111111</td> <td><img src="images/b4.jpg"/></td> </tr> </table> </div> </div> <div class="gallery"> <div class="gallery-top"> <h1>GALLERY</h1> <p>bsisjx jsok bisjb ihvsghh vxibxyus gishxh hoixsuxhi<br/> hsoijos bxijxni bxishiw bxijowlj ixisnxijxisy <br/>vijnvxijxnx xinxoxmo</p> </div> <div class="gallery-bottom"> </div> </div> </div> <!-- 底部 --> <div class="footer"> @ 2016 imooc.com 京ICP备13046642号 </div> </body> </html>
0
收起
正在回答 回答被采纳积分+1
2回答
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星