CSS2-10作业

<!DOCTYPE html>

<html>

<head>

<title>css assignment</title>

*{padding:0;margin:0;}

/*头部的CSS样式*/

.header{ width:100%;

height:90px;

position: fixed;

top: 0;

left: 0;

z-index: 999;

background:#07cbc9;}

.header img{height:70px;

width:300px;

float:left;

padding-left:50px;

padding-top: 8px;}

/*导航的文字CSS样式*/

.header .daohang ul{padding-right:50px;

font-weight: bold;

font-variant: small-caps;}

.header .daohang ul li{float:right;

list-style: none;

color:#ffffff;

cursor: pointer;

font-size:1.5em;

margin:0 20px;

height:100px;

line-height: 100px;}

.header .daohang li:hover {background: #333;

height: 90px;}

/*banner的CSS样式*/

.bannerphoto{width: 100%;

height: 600px;

margin-top: 90px;/*装着banner图片的盒子紧贴header*/

position: relative;}

.banner img{width: 100%;

height: 600px;

position: relative;}

/*遮罩层的CSS样式*/

.cover{height:600px;

position:absolute;

top:90px;

width: 100%;

opacity: 0.5;

left:0;

background: #000;}

/*装着输入的盒子的CSS样式*/

/*相对于banner图居中*/

.banner .shuru {width: 500px;

height: 350px;

position: absolute;

/*background-color:black;*/

top: 390px;

left:50%;

margin-top: -175px;

margin-left: -250px;}

/*输入表单的CSS样式*/

/*令表单相对于shuru居中*/

.banner .shuru input{ width: 300px;

height: 20px;

background-color: none;

margin-top: 20px;

margin-left: 100px;/*(500-300)/2*/

color: white;

background:rgba(0,0,0,0.5);

font-size: 5px;

font-family: "微软雅黑";}

.banner .shuru .writecomment input {width: 300px;

height: 100px;

background-color: none;

color: white;

background:rgba(0,0,0,0.5);

font-size: 5px;

font-family: "微软雅黑";}

.banner .shuru input[type="Buttom"]{width: 100px;

margin-left: 200px;/*(500-100)/2*/}

.about{width: 100%;

position: relative;}

.about .abouthight{width: 100%;

position: relative;}

.about .abouthight .title{width: 600px;

position: absolute;

height: 100px;

top: 120px;

margin-top: -50px;

right: 50%;

margin-right: -300px;

text-align: center;}

.about .abouthight .title .middle img{padding: 10px 0;

width: 600px;

height: 300px;}

.about .aboutdown{width: 400px;

position: relative;}

.about .aboutdown .aboutus{position: absolute;

font-size: 16px;

width: 100px;

font-weight: bolder;

left: 450px;

top: 200px;}

.about .aboutdown .text{position: absolute;

width: 300px;

height: 170px;

left: 450px;

top:240px;

padding: 10px 0;

background: rgba(255,255,255,.3);

border: 1px #ccc solid;

z-index: 9;}

.about .aboutdown .right{width: 200px;

height: 150px;

position: absolute;

left: 1280px;

top: 200px;

z-index: 99;}

.about .aboutdown .right .upup,.lowlow{width: 200px;

height:100px;

text-align: center;

vertical-align: middle;

display: table;

border: 1px #07cbc9 solid;

margin: 20px 0;}

.about .aboutlow {position: absolute;

top: 600px;

width: 100%;

height: 500px;}

.about .aboutlow .texttext{float: left;

width: 475.75px;

height: 300px;

background:#07cbc9;}

.about .aboutlow img{float: left;

width: 475.75px;

height: 300px;}

hr{background:#07cbc9;

height: 2px;

width: 30px;

margin:5px auto;}

button{width: 100px;

height: 50px;

color: #ffffff;

font-size: 10px;

border: 0;

background-color: #000;}

.gallery{width:100%;

height: 600px;

background: #fff;

position: relative;

top:1300px;}

.gallery .gallery-top{margin: 10px auto;}

.gallery .gallery-top .word{font-size: 1.5em;

font-weight: bold;

text-align: center;}

.gallery .gallery-top .text1{ text-align: center;

width:400px;

margin: 10px auto; }

.gallery-bottom{width: 1300px;

margin: 10px auto;}

.gallery-bottom .gallery-bottom-item{margin: 20px;

float: left;

position: relative;}

.gallery-bottom .gallery-bottom-item .gallery-bottom-top{position: relative;

bottom: 20px;

height: 30px;

line-height: 30px;

color:#ffffff;

background-color: #000;}

/*footer部分*/

.footer{width: 100%;

height: 50px;

text-align: center;

line-height: 50px;

color: #ffffff;

z-index: 999;

position: fixed;

bottom: 0;

background-color:#07cbc9;}

</style>

</head>

<body>

<ul>

<li>about</li>

<li>gallery</li>

<li>faculity</li>

<li>event</li>

<li>contact</li>

</ul>

</div>

</div>

<form>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

</div>

<h2 class="about-title">ABOUT</h2>

<hr/>

<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

</div>

<p class="aboutus">A WORD ABOUT US</p>

<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

<button>EXPLORE</button>

</div>

<hr/>

<p class="downdown">students</p>

</div>

<hr/>

<p class="downdown">Faculty</p>

</div>

</div>

<h2>Library</h2>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>

<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkonw printer tool a galley of type and scrambled it to make a type specimen book.</p>

<button>EXPLOER</button>

</div>

</div>

<h2>Computer Lab</h2>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>

<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkonw printer tool a galley of type and scrambled it to make a type specimen book.</p>

<button>EXPLOER</button>

</div>

<h2>Conference Hall</h2>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>

<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkonw printer tool a galley of type and scrambled it to make a type specimen book.</p>

<button>EXPLOER</button>

</div>

</div>

<h2>Play Ground</h2>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>

<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkonw printer tool a galley of type and scrambled it to make a type specimen book.</p>

<button>EXPLOER</button>

</div>

</div>

<div class="word">Gallery</div>

<hr/>

<div class="text1">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>

</div>

<div class="gallery-bottom-top"> SCIENCE LAB</div>

</div>

<div class="gallery-bottom-top"> INDOOR STADIUM</div>

</div>

<div class="gallery-bottom-top"> TRANSPORTATION</div>

</div>

</div>

<div class="gallery-bottom-top"> MEDITATION CLASSES</div>

</div>

<div class="gallery-bottom-top"> KIDS PLAYGROUND</div>

</div>

</div>

</body>

</html>

在about区的右手边的7000 6000的部分文字如何垂直居中，加上display：table-cell之后两个框并列了
about的图片区如何设置width才能平铺整个界面，我的width是一个一个尝试出来的
为什么我的footer部分如果不加上fixed bottom:0就不能显示？
每个部分的位置应该如何确定top的值？如about部分，about的上半部分的top值是我一直尝试不同数值才调整出来的。

soso_crazy 2018-09-08

源自：项目：网页布局案例 2-10 作业题

收起

3回答

Miss路 2018-09-10 10:43:00

1、这里不是浮动的问题，是定位的问题，我再上一条回复中说的很清楚哦，是所有的大模块都使用了定位，不是浮动，所以清楚浮动是不起作用的，

2、不想让他们在一行，那就把他们分开写，分别包裹父元素，如下：

如果帮助到了你，欢迎采纳！

收起回答

Miss路 2018-09-10 09:47:24

因为你上面所有得大模块都使用了定位，导致除了footer之外的元素都是处于脱离文档流的状态，如果你不让footer也脱离文档流，那就会被脱离文档流的元素覆盖，因为脱离文档流之后的元素层级比文档流中的要高。

如果帮助到了你，欢迎采纳！

收起回答

提问者 soso_crazy #1

1.我尝试过在gallery模块中加入一个空的div 对这个div设置clear:both 但是footer还是不能显示，要如何解决? 2.about的右手边的6000 7000的文字加上display:table-cell后，文字是垂直居中，但是两个div并列显示，要如何解决?

2018-09-10 09:58:53

Miss路 2018-09-09 13:33:18

问题1、2、4都属于思路问题，我给你一些思路参考：

【about区】

设置一个大的div，然后设置这个div居中，注意这里的宽度要和GALLERY区的宽度一致，建议设置为1000px左右，里面3个小的div，设置浮动使显示在一行。

最后在设置一个div容纳遮罩的这部分，并使用绝对定位，要相对于上面说到的大div。

具体该填充多少值可以参考原型图。

2、以下区域

实现思路：

一个大的div容器，里面写八个小的div，分别容纳图片和内容，分别给8个不同的div设置左浮动，这样就能横向显示，并且每个div的宽度设置为25%，这样正好一排显示4个。注意里面字体的大小和颜色的设置，以及位置的定位，需要改变位置的可以使用填充。文字指向图片的地方还有个小三角，这个用border做，并且用position将其定位到相应的位置，

下面有右三角形的小例子，可以参考一下：