css2-10作业问题

*{margin: 0;

padding: 0;

font-size: "Microsoft YaHei UI"}

.header{background-color: #07cbc9;

width:100%;

height:80px;

position: fixed;

z-index: 9;}

.logo{width:200px;

height:50px;

float: left;

padding: 15px 100px;

}

.nav{float: right;

padding-right: 100px;}

.nav ul li{list-style: none;

float: left;

line-height: 80px;

margin:auto 10px;

color: #fff;

}

.nav ul li a{text-decoration: none;

color: #fff;}

.nav ul li:hover{background: #000;}

.banner img{width:100%;

height: 600px;

margin-top: 80px;}

.banner-top{width:100%;

height:600px;

position: absolute;

top:80px;

background: #000;

z-index: 2;

opacity: 0.5;}

.banner-from{width:100%;

height: 600px;

position: absolute;

top:80px;

z-index: 3;

}

.table{width:400px;

height:400px;

margin:0 auto;

}

.table form{padding-top: 130px;

}

.table input{padding: 8px;

margin:10px;

background: transparent;

color:#fff;

border-width: 2px;}

textarea{margin:10px;

padding:8px;

background: transparent;

color:#fff;

font-weight: bold;

border-width: 2px;}

.table form .button{margin-left: 150px;}

.table form input:hover{border-color: #07cbc9;}

.table form textarea:hover{border-color: #07cbc9;}

.table .button:hover{background:#07cbc9;}

.about-top{width:100%;

height: auto;

text-align: center;}

.about-title{font-size: 40px;

margin-top: 30px;

font-weight: bolder;}

.hr{background:#07cbc9;

height: 2px;

width: 30px;

margin:5px auto;}

.about-word{color: gray;}

.about-middle{width: 1000px;

height:auto;

margin:0 auto;}

.m-title{font-size: 30px;

width: 200px}

.m-word{background: #fff;

opacity: 0.5

width:100px;

height: 200px;}

.about-middle img{margin-left: 200px;

float: right;

position: relative;

left: -200px;}

<!DOCTYPE html>

<html>

<head>

<title>css作业</title>

</head>

<body>

</div>

<ul>

<li><a href="#"> ABOUT</a></li>

<li><a href="#"> GALLERY</a></li>

<li><a href="#"> FACULTY</a></li>

<li><a href="#"> EYENTS</a></li>

<li><a href="#"> CONTACT</a></li>

</ul>

</div>

</div>

<form>

</form>

</div>

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

<div class="about-word">Lorem lpsum is simply dummy text the printing and typesetting<br> industry.Loram lpsum has been the industry's stardard dummy<br> text ever since the 1500s</div>

</div>

A WOED<br>ABOUT US

</div>

Praesent dignissim viverra est.sed<br>bibendum ligula congue non.Sed ac nisiet telis gravida commodo?Suspendisse<br>eget uliamcorper ipsum.Suspendisse diam amet.

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

老师，这个作业到about-middle部分我不会设置了，请老师指点一下。

左边的文字和中间的图以及右边的list，怎样让他们按照要求排列在一起呢？如果用浮动的话好像不行，是用position吗，还是二者结合？感觉自己用了好长时间，可是还是没有弄好，很是苦恼，有很大的挫败感。请老师给一定的提示和解答，万分感谢！

慕粉2148041931 2017-11-19

源自：项目：网页布局案例 2-9 页面的底部

收起

3回答

小于飞飞回答被采纳获得+3积分 2017-11-21 10:11:16

如果有新问题，在提问区重新提问新问题，以便更快的回复，新代码的建议如下：

开发中外层使用div，具体内容根据具体情况选择使用的标签。
该问题不是很清楚，可以在详细描述，同时把代码和效果图截下图。
文本框对齐，使用css样式统一设置宽度。
左侧文字和按钮部分，使用两个div块实现（框和内容），这块可以合并成一个。

动手实践下，祝学习愉快。

收起回答

提问者慕粉2148041931 2017-11-20 22:17:58

*{margin: 0;

padding: 0;

font-family: "Microsoft YaHei UI"}

.header{background-color: #07cbc9;

width:100%;

height:80px;

position: fixed;

z-index: 9;}

.logo{width:200px;

height:50px;

float: left;

padding: 15px 100px;

}

.nav{float: right;

padding-right: 100px;}

.nav ul li{list-style: none;

float: left;

line-height: 80px;

margin:auto 10px;

color: #fff;

}

.nav ul li a{text-decoration: none;

color: #fff;}

.nav ul li:hover{background: #000;}

.banner img{width:100%;

height: 600px;

margin-top: 80px;}

.banner-top{width:100%;

height:600px;

position: absolute;

top:80px;

background: #000;

z-index: 2;

opacity: 0.5;}

.banner-from{width:100%;

height: 600px;

position: absolute;

top:80px;

z-index: 3;

}

.table{width:400px;

height:400px;

margin:0 auto;

}

.table form{padding-top: 130px;

}

.table input{padding: 8px;

margin:10px;

background: transparent;

color:#fff;

border-width: 2px;}

textarea{margin:10px;

padding:8px;

background: transparent;

color:#fff;

font-weight: bold;

border-width: 2px;}

.table form .button{margin-left: 150px;}

.table form input:hover{border-color: #07cbc9;}

.table form textarea:hover{border-color: #07cbc9;}

.table .button:hover{background:#07cbc9;}

.about-top{width:100%;

height: auto;

text-align: center;}

.about-title{font-size: 40px;

margin-top: 30px;

font-weight: bolder;}

.hr{background:#07cbc9;

height: 2px;

width: 30px;

margin:5px auto;}

.about-word{color: gray;}

.about-middle{width: 1000px;

height:auto;

margin:25px auto;

position: relative;}

.m-l{width:150px;

height:auto;

float: left; }

.m-m{width:550px;

height: auto;

float: right;

position: relative;}

.m-m img{width:550px;

height: 350px;

text-align: center;}

.m-r{float: right;

width: 250px;

height: auto;

}

.list1,.list2{width:200px;

height:120px;

text-align: center;

vertical-align: middle;

border:1px solid #07cbc9;

margin:0 0 25px 25px;

}

.stu{padding: 25px;}

.stu-p{font-size: 25px;font-weight: bolder;}

.about-toplayer{background-color: #fff;

opacity: 0.3;

width:320px;

height: 200px;

position: absolute;

left: 15px;

top:80px;

z-index: 8;

border:1px solid #000;}

.m-title{font-size: 30px;

width: 200px;

text-align: center;}

.m-word{width:300px;

height: 200px;

position: absolute;

left: 15px;

top:80px;

z-index: 9;

padding: 15px;}

.button2{width: 80px;

height: 40px;

background: #000;

color: #fff;

border:1px solid #000;

margin-top: 20px;}

.button2:hover{background: #fff;

color: #000;}

<!DOCTYPE html>

<html>

<head>

<title>css作业</title>

</head>

<body>

</div>

<ul>

<li><a href="#"> ABOUT</a></li>

<li><a href="#"> GALLERY</a></li>

<li><a href="#"> FACULTY</a></li>

<li><a href="#"> EYENTS</a></li>

<li><a href="#"> CONTACT</a></li>

</ul>

</div>

</div>

<form>

</form>

</div>

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

<div class="about-word">Lorem lpsum is simply dummy text the printing and typesetting<br> industry.Loram lpsum has been the industry's stardard dummy<br> text ever since the 1500s</div>

</div>

A WORD<br>ABOUT US

</div>

Praesent dignissim viverra est.sed bibendum ligula congue non.Sed ac nisiet telis gravida commodo?Suspendisseeget uliamcorper ipsum.Suspendisse diam amet.

</div>

students

</div>

faculty

</div>

</div>

</div>

</div>

</div>

</body>

</html>

收起回答

小于飞飞 2017-11-20 10:16:32

about-middle部分：设置一个大的div，然后设置这个div居中，注意这里的宽度要和下面GALLERY区的宽度一致，建议设置为1000px左右，里面3个div（分别存放相应内容），设置浮动使显示在一行。最后在设置一个div容纳遮罩的这部分，并使用绝对定位，要相对于上面说到的大div。在试一试，加油。

收起回答

提问者慕粉2148041931 #1

老师，那左边的标题和下边的文字都要用div来容纳吗，我试过，可是怎么让他们同时垂直浮动在大div的最左面呢。

2017-11-20 10:21:34
小于飞飞回复提问者慕粉2148041931 #2

方法不唯一，左边的标题和下面文字可以使用div来布局，可以使用定位，然后使其向右移动，然后显示在中间图片上面。

2017-11-20 17:11:01
提问者慕粉2148041931 回复小于飞飞 #3

老师，这里写不开，你看一下下面的代码。有以下几个问题。 1.我的代码是不是过于繁琐了啊，用了好多div。实际开发中也这样吗？ 2.遮罩层和遮罩层那块的字体和作业中给出的字体位置不是完全一样，怎样能给它设置成和图中的一样呢？ 3.上边的多行文本框，怎样能设置的和上边的完全对齐呢，他们的长度单位好像不一样，不管怎么调总是差一点。请老师明示。 4.麻烦您再给看一下前半部分还有什么需要其他需要修改或者优化的吗

2017-11-20 22:16:46