about区域的定位在不同显示器下差距很大
老师，帮看下about区域的定位，在笔记本上显示还接近，笔记本用的谷歌浏览器，换成台式，显示器比笔记本大，about区域的位置乱了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4-3项目</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<script type="text/javascript" src="js/common.js"></script>
</head>
<body>
<div class="head">
<div class="logo">
<img src="images/logo.png">
<div class="menu">
<ul>
<li>HOME</li>
<li>ABAOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="banner">
<img src="images/banner3.jpg" class="banner-img">
<div class="message">
<form action="" method="post">
<ul>
<li><input type="text" name="" value="your Name"></li>
<li><input type="text" name="" value="your Phone"></li>
<li><input type="text" name="" value="your Email"></li>
<li><textarea>Write You Comment Here</textarea>
</li>
<li><input type="submit" value="SEND MESSAGE" name=""></li>
</ul>
</form>
</div>
</div>
<div class="about">
<div class="about-top">
<div class="about-top-head">
<h3 class="h3">ABOUT</h3>
<p class="line1"></p>
<p class="p1">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="about-top-left">
<h4>A WORD ABOUT US</h4>
<div class="about-top-left-down">
<p class="p1">Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisl et felis gravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet.</p>
<div class="about-top-left-down-radio">
<p class="p2">EXPLORE</p>
</div>
</div>
</div>
<div class="abot-top-center">
<img src="images/bb3.jpg">
</div>
<div class="about-top-right">
<div class="about-top-right-up">
<h5>70000</h5>
<p class="line2"></p>
<p class="stu1">Students</p>
</div>
<div class="about-top-right-down">
<h5>600</h5>
<p class="line3"></p>
<p class="fac1">Faculty</p>
</div>
</div>
</div>
<div class="about-down">
<div class="about-down-1"></div>
<div class="about-down-2">
<h3>Library</h3>
<h4>Lorem Ipsum is simply dummy text of the printing and typesetting industry</h4>
<h5>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.</h5>
<a href="#"
class="about-down-btn">
<p>EXPLORE</p>
</a>
</div>
<!-- <div class="about-down-3"></div>
<div class="about-down-4">
<h3>Computer Lab</h3>
<h4>Lorem Ipsum is simply dummy text of the printing and typesetting industry</h4>
<h5>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.</h5>
<a href="#" class="about_btn"><span>EXPLORE</span></a>
</div>
<div class="about-down-5">
<h3>Conference Hall</h3>
<h4>Lorem Ipsum is simply dummy text of the printing and typesetting industry</h4>
<h5>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.</h5>
<a href="#" class="about_btn"><span>EXPLORE</span></a>
</div>
<div class="about-down-6"></div>
<div class="about-down-7">
<h3>Play Ground</h3>
<h4>Lorem Ipsum is simply dummy text of the printing and typesetting industry</h4>
<h5>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.</h5>
<a href="#" class="about_btn"><span>EXPLORE</span></a>
</div>
<div class="about-down-8"></div> -->
</div>
</div>
<div class="GALLERY"></div>
</div>
<div class="foot">
</div>
</body>
</html>
+++++++++++++++++++++++++++++++++++++
* {
margin: 0px;
padding: 0px;
list-style-type: none;
font-family: Microsoft YaHei UI;
/*消除浏览器的默认距离*/
}
.head {
width: 100%;
/*设置与浏览器宽度一致*/
background: #07cbc9;
height: 50px;
position: fixed;
top: 0px;
z-index: 100;
/*值越大显示就在上面*/
}
/*设置logo区域*/
.head
.logo {
margin-left: 50px;
height: 50px;
line-height: 50px;
}
/*设置菜单区域*/
.head
.logo
.menu {
float: right;
margin-right: 50px;
}
/*设置菜单中的选项*/
.head
.logo
.menu ul li {
float: left;
margin-right: 30px;
list-style: none;
height: 50px;
line-height: 50px;
color: white;
}
.head
.logo
.menu ul li:hover {
background: #000;
}
/*设置content区域*/
.content {
width: 100%;
margin-top: 50px;
}
/*设置banner区域*/
.content
.banner {
width: 100%;
position: relative;
}
/*/*设置banner区域图片*/
.content
.banner
.banner-img {
width: 100%;
height: 800px;
opacity: 0.4;
float: left;
}
/*设置banner区域中的输入信息div，
需要使用position中的绝对定位
否则输入框会被浮动的div挤出.message的div，
输入框会在图片的下方*/
.content
.banner
.message {
z-index: 2;
width: 400px;
height: 350px;
position: absolute;
/*(800-350)/2=225
即：message距离图片顶部的距离=
（图片的高度-message的高度）/2=225
通过此设置，实现上下居中
请问老师，这样计算对吗？*/
margin-top: 225px;
right: 50%;
/*50%代表message块的右边距离网页右面的距离为50%*/
margin-right: -200px;
/*-200是代表将message块的右边，
从左向右移动message宽度的一半
从而达到居中的效果*/
text-align: center;
/* +++++++++++++++++++++慕课老师的代码
z-index: 2;
width: 500px;
position: absolute;
top: 350px;（老师能不能解释一下这个350和-150的计算过程）
margin-top:-150px;
负值代表向上
right: 50%;
margin-right: -250px;
负值代表从左向右
text-align: center;*/
}
/*设置banner区域中的input输入框的格式*/
.content
.banner
.message form ul li input {
background: transparent;
color: #ffffff;
width: 390px;
height: 30px;
border: 1px solid #ffffff;
padding-left: 5px;
margin-top: 5px;
}
/*设置banner区域中的input输入框
当鼠标放在上面时增加边框效果*/
.content
.banner
.message form ul li input[type="text"]:hover {
border: #07cbc9 1px solid;
}
/*设置banner区域中的textarea输入框的格式*/
.content
.banner
.message form ul li textarea {
background: transparent;
color: #ffffff;
width: 396px;
height: 185px;
border: 1px solid #ffffff;
padding-left: 5px;
padding-top: 10px;
box-sizing: border-box;
margin-top: 5px;
}
/*设置banner区域中的textarea输入框
当鼠标放在上面时增加边框效果*/
.content
.banner
.message form ul li textarea:hover {
border: #07cbc9 1px solid;
}
/*设置banner区域中的submit按钮格式*/
.content
.banner
.message form ul li input[type="submit"] {
width: 150px;
margin-left: -20px;
/*老师，这个-20px是我试出来的，请问有没有计算的方法;
我在.message的div中设置了属性text-align: center，
但是效果上没有对中，所以试出了这个-20px这个属性，
请问为什么设置了居中，没有居中效果？
假如-20px要计算的怎么计算？
*/
}
/*设置banner区域中的submit输入框
当鼠标放在上面时增加背景色效果*/
.content
.banner
.message form ul li input[type="submit"]:hover {
background: #07cbc9;
}
/*设置about区域格式*/
.about {
width: 100%;
height: 1600px;
top: 800px;
position: relative;
background: red;
}
/*设置about区域的上部格式*/
.about
.about-top {
width: 100%;
height: 600px;
margin-top: 50px;
position: absolute;
/*left: 50%;
margin-left: -200px;*/
background: green;
/*text-align: center;*/
}
/*设置about区域的标题about的格式*/
.about
.about-top
.about-top-head
.h3{
text-align: center;
font-size: 30px;
/*老师，感觉about有加粗的效果，怎么设置喃*/
}
/*设置about区域的标题about的下划线格式*/
.about
.about-top
.about-top-head
.line1{
width: 80px;
height: 2px;
margin-top: 5px;
left:50%;
margin-left: -40px;
position: absolute;
background: #07cbc9;
}
/*设置about区域的标题about的下面文字的格式*/
.about
.about-top
.about-top-head
.p1{
text-align: center;
width: 520px;
left: 50%;
position: absolute;
margin-top: 20px;
margin-left: -225px;
}
/*设置about区域的中间图片的div格式*/
.about
.about-top
.abot-top-center {
margin-top: 100px;
width: 650px;
height: 435px;
left: 50%;
position: absolute;
margin-left: -290px;
background: blue;
}
/*设置about区域的上部左边格式*/
.about
.about-top
.about-top-left {
width: 350px;
margin-top:200px;
position: absolute;
background: pink;
text-align: center;
/*设置居中，包括标题及文字均居中，
后面的子元素不需要再设置*/
}
/*设置about区域的上部左边标题A WORD ABOUT US格式*/
.about
.about-top
.about-top-left h4{
font-size: 30px;
width: 180px;
margin-left: 120px;
font-weight: normal;
}
/*设置about上部左下div格式，
通过z-index显示浮在上面
背景设置最后一个属性是使其透明*/
.about
.about-top
.about-top-left
.about-top-left-down {
width: 300px;
height: 200px;
position: absolute;
margin-left: 120px;
z-index: 50;
background:rgba(255, 255, 255, 0.4);
}
/*设置about上部左下第一段文字的上边距*/
.about
.about-top
.about-top-left
.about-top-left-down
.p1{
margin-top: 30px;
}
/*设置about上部左下按钮EXPLORE格式*/
.about
.about-top
.about-top-left
.about-top-left-down
.about-top-left-down-radio p{
margin-top: 20px;
margin-left: 5px;
color: #fff;
background: #000;
width: 80px;
}
/*设置about上部左下按钮EXPLORE鼠标放上面的格式*/
.about
.about-top
.about-top-left
.about-top-left-down
.about-top-left-down-radio p:hover{
background:transparent;
border:1px #000 solid;
}
/*设置about上部右div的格式*/
.about
.about-top
.about-top-right{
right: 50px;
position: absolute;
margin-top: 100px;
text-align: center;
}
/*设置about上部右上div的格式*/
.about
.about-top
.about-top-right
.about-top-right-up
{
border: 1px #07cbc9 solid;
width: 230px;
height: 160px;
}
/*设置about上部右上70000的格式*/
.about
.about-top
.about-top-right
.about-top-right-up
h5
{
margin-top: 40px;
font-size: 30px;
margin-left: 10px;
}
/*设置about上部右上70000下面的横线的格式*/
.about
.about-top
.about-top-right
.about-top-right-up
.line2{
width: 40px;
height: 2px;
margin-top: 10px;
margin-left: 100px;
background: #07cbc9;
}
/*设置about上部右上student的格式*/
.about
.about-top
.about-top-right
.about-top-right-up
.stu1{
font-weight:normal;
margin-bottom:20px;
padding-top: 15px;
}
/*设置about上部右下div的格式*/
.about
.about-top
.about-top-right
.about-top-right-down
{
border: 1px #07cbc9 solid;
width: 230px;
height: 160px;
margin-top: 30px;
}
/*设置about上部右下600的格式*/
.about
.about-top
.about-top-right
.about-top-right-down
h5
{
margin-top: 40px;
font-size: 30px;
margin-left: 10px;
}
/*设置about上部右上600下面的横线的格式*/
.about
.about-top
.about-top-right
.about-top-right-down
.line3{
width: 40px;
height: 2px;
margin-top: 10px;
margin-left: 100px;
background: #07cbc9;
}
/*设置about上部右下Faculty的格式*/
.about
.about-top
.about-top-right
.about-top-right-down
.fac1{
font-weight:normal;
margin-bottom:20px;
padding-top: 15px;
}
/*设置about区域的下部格式*/
.about
.about-down {
width: 100%;
height: 600px;
margin-top: 670px;
position: absolute;
background: plum;
}
/*设置about区域的下部左边第一排第一张图片格式*/
.about
.about-down
.about-down-1 {
width: 396px;
height: 396px;
background: url(../images/b1.jpg);
float: left;
}
/*设置about区域的下部左边第一排第二个文本格式*/
.about
.about-down
.about-down-2 {
width: 396px;
height: 396px;
float: left;
background: #07cbc9;
color: #ffffff;
}
.about
.about-down
.about-down-2 h3 {
font-size: 30px;
margin-top: 30px;
font-weight: normal;
margin-left: 50px;
}
.about
.about-down
.about-down-2 h4 {
/*font-size: 30px;*/
margin-top: 25px;
font-weight: normal;
font-size: 20px;
margin-left: 50px;
}
.about
.about-down
.about-down-2 h5 {
/*font-size: 30px;*/
margin-top: 25px;
font-size:15px;
font-weight: normal;
margin-left: 50px;
}
.about
.about-down
.about-down-2
.about-down-btn{
color: #ffffff;
text-decoration: none;
/*消除下划线 */
}
/*设置about区域的下部左边第一排第二个文本超链接格式*/
.about
.about-down
.about-down-2
.about-down-btn p{
margin-left: 150px;
margin-top: 35px;
background: #000;
width: 100px;
height: 30px;
line-height:30px;
text-align: center;
}
正在回答 回答被采纳积分+1
同学你好，
1. 首先 content是不需要设置的，每个区都是互相平行的关系，各区之间不是包含的关系。
2. 将同学的about-top设置单独的div，作用的是下图所示范围：
about横线及文章可以单独设置在上方，如下图显示部分：
然后将同学的about-top-left的div(注：只包含A WORD ABOUT US，不包含下面的遮罩区)，about-top-center的div，about-top-center的div设置浮动使显示在一行。
3. 设置一个div容纳遮罩的这部分，单独设置一个div来容纳设置遮罩的区域，而不放在about-top-left的div中。
老师将代码粘贴在下方：
html：先截图告知同学放的位置：
代码：
<div class="about-top-left-down"> <div class="aboutleftbottom"> <p>Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisl et felis gravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet.</p> <a href="#" data-toggle="modal" data-target="#myModal">EXPLORE</a> </div> </div>
css(位置放在哪里都可以)，代码：
.aboutleftbottom {
border: 1px solid #C5C5C5;
padding: 25px 25px;
text-align: left;
position: absolute;
width: 320px;
top: 350px;
color: black;
background-color: rgba(255, 255, 255, 0.4);
}
.aboutleftbottom p{
margin-bottom:10px;
line-height:25px;
}
.aboutleftbottom a{
background-color:black;
padding:10px 15px;
color:white;
border:2px solid black;
margin:8px 0px;
display:inline-block;
}
.aboutleftbottom a:hover{
color:black;
border:2px solid black;
background:transparent;
}显示效果：
注：同学可以自己调整div的大小，老师只是提供老师的一种思路，同学按照自己的代码独立完成即可！加油！
如果我的回答解决了你的疑惑，请采纳！祝学习愉快~
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星