2-10 作业
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
/* 顶部top style */
* {
padding: 0;
margin: 0;
}
.top {
width: 100%;
background-color: #13ccc6;
height: 60px;
}
.top-img {
float: left;
padding-left: 5%;
}
.top-nav {
float: right;
}
.top-nav ul {
list-style: none;
height: 60px;
margin-right: 50px;
}
.top-nav ul li {
float: left;
margin-left: 20px;
font-size: 16px;
font-family: "Microsoft YaHei UI";
color: #fff;
line-height: 60px;
}
/* banner部分的 style */
.banner {
width: 100%;
}
.banner img {
width: 100%;
height: 500px;
position: relative;
}
.banner .banner-text {
width: 50%;
height: 250px;
position: absolute;
top: 230px;
left: 50%;
text-align: center;
margin-left: -25%;
margin-top: -80px;
/*background: rgba(0,0,0,0.5);*/
z-index: 1;
}
.banner .banner-text div .inp {
background-color: transparent;
border: 1px #fff solid;
width: 300px;
height: 30px;
margin-top: 10px;
text-indent:10px;
}
.banner .banner-text div .inps {
background-color: transparent;
border: 1px #fff solid;
width: 300px;
height: 100px;
margin-top: 10px;
text-indent:10px;
}
.banner .banner-text div .inpb {
background-color: transparent;
border: 1px #fff solid;
width: 100px;
height: 30px;
margin-top: 10px;
}
/* about区域 */
.about {
width: 100%;
}
.about .about-title {
width: 100%;
font-family: "微软雅黑";
font-size: 30px;
font-weight: bolder;
text-align: center;
margin-top: 20px;
}
.about .about-line {
width: 50px;
height: 2px;
background-color: #13ccc6;
margin: 10px auto;
}
.about .about-content {
text-align: center;
font-size: 14px;
line-height: 20px;
font-family: "微软雅黑";
margin-bottom: 20px;
}
/* about 乱七八糟区 */
.abouts {
width: 60%;
height: 400px;
margin: 0 auto;
}
.abouts .left {
width: 35%;
height: 400px;
float: left;
/*//*/
/*background: blue;*/
position: absolute;
left: 10%;
}
.abouts .middle {
width: 70%;
height: 400px;
float: left;
/*//*/
background: rgba(0,0,255,0.1);
}
.abouts .right {
width: 30%;
height: 400px;
float: left;
/*//*/
/*background: rgba(255,0,0,0.1);*/
}
.abouts .left .left-word {
font-family: "微软雅黑";
font-weight: bolder;
font-size: 30px;
text-align: center;
/*//*/
/*background: rgba(255,255,0,0.1);*/
width: 200px;
line-height: 60px;
}
.abouts .left .left-word-smail {
width: 300px;
height: auto;
/*//*//*
background: rgba(0,0,0,0.01);*/
padding: 25px;
border: 1px #efecec solid;
}
.abouts .left .left-word-smail p {
line-height: 30px;
font-size: 18px;
color: #A3A2A0;
}
.abouts .left .left-word-smail div {
width: 300px;
text-align: left;
}
.abouts .left .left-word-smail div input {
background-color: #000;
width: 100px;
height: 30px;
margin-top: 10px;
color: #fff;
}
/* middle */
.abouts .middle img {
width: 100%;
height: 400px;
}
/* right */
.abouts .right .top {
border: 1px #13ccc6 solid;
width: 70%;
height: 150px;
background: rgba(0,0,0,0);
float: right;
margin-bottom: 30px;
text-align: center;
}
.abouts .right .top .number {
font-size: 25px;
font-weight: bolder;
font-family: "微软雅黑";
margin-top: 20px;
}
.abouts .right .top .line {
width: 30px;
height: 2px;
background-color: #13ccc6;
margin: 10px auto;
margin-top: 25px;
}
.abouts .right .top .english {
font-size: 15px;
font-family: "微软雅黑";
margin-top: 25px;
}
/* 啊西八 还少一部分 */
.axb {
width: 100%;
margin: 50px auto;
}
.axb table tr td .title1{
font-size: 25px;
color: #fff;
/*background: rgba(255,0,0,0.1); */
}
.axb table tr td .title2 {
font-size: 16px;
color: #fff;
/*background: rgba(0,0,255,0.1);*/
}
.axb table tr td .content {
color: #fff;
font-size: 10px;
/*background: rgba(0,255,0,0.1);*/
}
.axb table tr td .button input {
background-color: #000;
width: 100px;
height: 30px;
margin-top: 10px;
color: #fff;
}
.axb table tr .back {
background-color: #13ccc6;
/*padding: 20px;*/
}
.axb table tr .back div {
margin: 40px 10px;
}
.clean {
clear:both;
}
/* GALLERY 区域1 <同上>*/
/* GALLERY 区域2 */
.gallery {
width: 1200px;
margin: 0 auto;
}
.gallery div .part, .gallery div .part2 {
float: left;
margin: 20px;
}
.gallery div .part div, .gallery div .part2 div{
background: #000;
}
.gallery div .part .text, .gallery div .part2 .text {
background-color: #000;
color: #fff;
padding-left: 20px;
}
/* footer */
.footer {
width: 100%;
height: 60px;
background-color: #13ccc6;
text-align: center;
line-height: 60px;
}
.footer div {
color: #fff;
height: 60px;
font-size: 16px;
font-family: "微软雅黑";
}
</style>
</head>
<body>
<!-- 顶部 -->
<div class="top">
<!-- 顶部logo -->
<div class="top-img">
<img src="../logo.png">
</div>
<!-- 顶部导航 -->
<div class="top-nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>EVENT</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<!-- banner 图 -->
<div class="banner">
<!-- 背景图 -->
<img src="../banner3.jpg">
<!-- 文本输入框 -->
<div class="banner-text">
<div>
<input class="inp" type="text" placeholder="you Name">
</div>
<div>
<input class="inp" type="text" placeholder="you Phone">
</div>
<div>
<input class="inp" type="text" placeholder="you Email">
</div>
<div>
<textarea class="inps" type="text" placeholder="Write Your Commnt Here"></textarea>
</div>
<div>
<input class="inpb" type="button" value="SEND MESSAGE">
</div>
</div>
</div>
<!-- about 区域 -->
<div class="about">
<!-- about-title -->
<div class="about-title">ABOUT</div>
<!-- about-line -->
<div class="about-line"></div>
<!-- about-content1 -->
<div class="about-content">
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.
</div>
</div>
<!-- about乱七八糟区 -->
<div class="abouts">
<!-- left -->
<div class="left">
<!-- left大文字 -->
<div class="left-word">
A WORD<br>ABOUT US
</div>
<!-- left小文字 -->
<div class="left-word-smail">
<p>
Praesent dignissim viverra est, sed
bibendum ligula congue non. Sed acniset
felis gravida commodo? uspendisse
eget ullamcorper ipsum. Suspendisse
diam amet.
</p>
<div>
<input type="button" value="EXPLORE">
</div>
</div>
</div>
<!-- middle -->
<div class="middle">
<img src="../bb3.jpg">
</div>
<!-- right -->
<div class="right">
<!-- right 上方块 -->
<div class="top">
<!-- 数字 -->
<div class="number">70000</div>
<!-- 横线 -->
<div class="line"></div>
<!-- 英文 -->
<div class="english">student</div>
</div>
<!-- right 下方块 -->
<div class="top">
<!-- 数字 -->
<div class="number">600</div>
<!-- 横线 -->
<div class="line"></div>
<!-- 英文 -->
<div class="english">Faculty</div>
</div>
</div>
</div>
<!-- 阿西吧 还少一部分! -->
<div class="axb">
<table>
<tr>
<td>
<img src="../b1.jpg">
</td>
<td class="back">
<!-- title1 -->
<div class="title1">
Library
</div>
<!-- title2 -->
<div class="title2">
Lorem Ipsum simply dummy text of the <br>
printing and typesetting industry
</div>
<!-- content -->
<div class="content">
Lorem Inpsum has been the industry's standard dummy<br>
text ever since the 1500s. when an unknown printer took<br>
a galley of type and scrambed it to make a type<br>
specimen book.
</div>
<div class="button">
<input type="button" value="EXPLORE">
</div>
</td>
<td>
<img src="../b2.jpg">
</td>
<td class="back">
<!-- title1 -->
<div class="title1">
Library
</div>
<!-- title2 -->
<div class="title2">
Lorem Ipsum simply dummy text of the <br>
printing and typesetting industry
</div>
<!-- content -->
<div class="content">
Lorem Inpsum has been the industry's standard dummy<br>
text ever since the 1500s. when an unknown printer took<br>
a galley of type and scrambed it to make a type<br>
specimen book.
</div>
<div class="button">
<input type="button" value="EXPLORE">
</div>
</td>
</tr>
<tr>
<td class="back">
<!-- title1 -->
<div class="title1">
Library
</div>
<!-- title2 -->
<div class="title2">
Lorem Ipsum simply dummy text of the <br>
printing and typesetting industry
</div>
<!-- content -->
<div class="content">
Lorem Inpsum has been the industry's standard dummy<br>
text ever since the 1500s. when an unknown printer took<br>
a galley of type and scrambed it to make a type<br>
specimen book.
</div>
<div class="button">
<input type="button" value="EXPLORE">
</div>
</td>
<td>
<img src="../b3.jpg">
</td>
<td class="back">
<!-- title1 -->
<div class="title1">
Library
</div>
<!-- title2 -->
<div class="title2">
Lorem Ipsum simply dummy text of the <br>
printing and typesetting industry
</div>
<!-- content -->
<div class="content">
Lorem Inpsum has been the industry's standard dummy<br>
text ever since the 1500s. when an unknown printer took<br>
a galley of type and scrambed it to make a type<br>
specimen book.
</div>
<div class="button">
<input type="button" value="EXPLORE">
</div>
</td>
<td>
<img src="../b4.jpg">
</td>
</tr>
</table>
</div>
<!-- GALLERY 区域1 -->
<div class="about">
<!-- about-title -->
<div class="about-title">GALLERY</div>
<!-- about-line -->
<div class="about-line"></div>
<!-- about-content1 -->
<div class="about-content">
Lorem Ipsum is simply dummy text of the printing and typesetting<br>
industry. Lorem Ipsum has been the industry's standard dummy text<br>
ever since the 1500s.
</div>
</div>
<!-- GALLERY 区域2 -->
<div class="gallery">
<!-- 第一排 -->
<div>
<!-- 第一个 -->
<div class="part">
<div>
<img src="../03-01.jpg">
</div>
<div class="text">
SCIENCELAB
</div>
</div>
<!-- 第二个 -->
<div class="part">
<div>
<img src="../03-02.jpg">
</div>
<div class="text">
SCIENCELAB
</div>
</div>
<!-- 第三个 -->
<div class="part">
<div>
<img src="../03-03.jpg">
</div>
<div class="text">
SCIENCELAB
</div>
</div>
</div>
<div class="clean"></div>
<!-- 第二排 -->
<div>
<!-- 第一个 -->
<div class="part2">
<div>
<img src="../03-04.jpg">
</div>
<div class="text">
SCIENCELAB
</div>
</div>
<!-- 第二个 -->
<div class="part2">
<div>
<img src="../03-05.jpg">
</div>
<div class="text">
SCIENCELAB
</div>
</div>
<!-- 第三个 -->
<div class="part2">
<div>
<img src="../03-06.jpg">
</div>
<div class="text">
SCIENCELAB
</div>
</div>
</div>
</div>
<div class="clean">
</div>
<!-- 页尾 -->
<div class="footer">
<div>© 2016 imooc.com 京ICP备1300291号</div>
</div>
</body>
</html>
/*****************************************************************************************************************************************/
浏览器自适应的话宽度设置100%, 但是这样就不能设置margin:0 auto; 居中了. 然后对居中显示, html页能在浏览器自适应还有很多疑惑, 再就是男老师讲的部分 关于position 使用场景不太知道...
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星