老师我的about区下面的部分做好了但是电脑换分辨率排版会乱掉怎么办
<!DOCTYPE html>
<html>
<head>
<title>Career Builder</title>
<link type="text/css" rel="stylesheet" href="cb.css"/>
<script type="text/javascript" src="cb.js"></script>
</head>
<body>
<div id="banner">
<div id="banner-fixed">
<img id="banner-logo" src="images/logo.png"/>
<ul>
<li><a href="#">CONTACT</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">FACULTY</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">HOME</a></li>
</ul>
</div>
<div id="banner-top">
<img id="banner-top-image" src="images/banner3.jpg"/>
<div id="banner-top-text">
<form>
<input id="t1" class="t" type="text" name="yourName" value="YOUR NAME"/>
<input id="t2" class="t" type="text" name="yourPhone" value="YOUR PHONE"/>
<input id="t3" class="t" type="text" name="yourEmail" value="YOUR EMAIL"/>
<textarea id="t4" name="yourComment"/>WRITE YOUR COMMENT HERE</textarea>
<input id="t5" type="submit" name="send" value="SEND MESSAGE"/>
</form>
</div>
</div>
</div>
<div id="about">
<h1 id="h1-about">ABOUT</h1>
<div id="p1">
<label id="line1"></label>
<p id="about-text-top">
The professional skill appraising center was set up in our college in 2003, and was approved by the Labor Department of Anhui province. 166 of the staff have acquired the qualification for assessor of professional skill.
</p>
<img src="images/bb3.jpg" id="about-image"/>
<div id="about-left">
<p id="about-text-left1">
A WORD ABOUT US
</p>
<div id="about-block-left">
<p id="about-text-left2">
The professional qualification tests for 20 different kinds of professions, such as fitter, wireless assembler, electrician and turner, can be carried out here. 3500 students can take their professional skill appraising examinations here every year.
</p>
<button id="about-btn1" href="#">EXPLORE</button>
</div>
<div id="about-right">
<div id="about-block-right1">
<h1>70000</h1>
<label id="line2"></label>
<p class="block-right">Students</p>
</div>
<div id="about-block-right2">
<h1>600</h1>
<label id="line3"></label>
<p class="block-right">Faculty</p>
</div>
</div>
</div>
</div>
<div id="detail">
<img class="detail-image" src="images/b1.jpg">
<div id="detail-t1" class="detail-textblock">
<p class="detail-textblock-title">Library</p>
<p class="detail-textblock-content1">
The center has a capacity of 1250 where students can do experiments and training.
</p>
<p class="detail-textblock-content2">
97% of the required experiments can be carried out here. In addition, the mechatronics base and the digital control operation base.
</p>
<button class="about-btn2" href="#">EXPLORE</button>
</div>
<img class="detail-image" src="images/b2.jpg">
<div id="detail-t2" class="detail-textblock">
<p class="detail-textblock-title">Computer Lab</p>
<p class="detail-textblock-content1">
The center has a capacity of 1250 where students can do experiments and training.
</p>
<p class="detail-textblock-content2">
97% of the required experiments can be carried out here. In addition, the mechatronics base and the digital control operation base.
</p>
<button class="about-btn2" href="#">EXPLORE</button>
</div>
<div id="detail-t3" class="detail-textblock">
<p class="detail-textblock-title">Conference Hall</p>
<p class="detail-textblock-content1">
The center has a capacity of 1250 where students can do experiments and training.
</p>
<p class="detail-textblock-content2">
97% of the required experiments can be carried out here. In addition, the mechatronics base and the digital control operation base.
</p>
<button class="about-btn2" href="#">EXPLORE</button>
</div>
<img class="detail-image" src="images/b3.jpg">
<div id="detail-t4" class="detail-textblock">
<p class="detail-textblock-title">Playground</p>
<p class="detail-textblock-content1">
The center has a capacity of 1250 where students can do experiments and training.
</p>
<p class="detail-textblock-content2">
97% of the required experiments can be carried out here. In addition, the mechatronics base and the digital control operation base.
</p>
<button class="about-btn2" href="#">EXPLORE</button>
</div>
<img class="detail-image" src="images/b4.jpg">
</div>
</div>
</body>
</html>
/*全页面格式设置*/
*{
margin: 0px 0px;
padding: 0px 0px;
font-family: "Microsoft YaHei UI";
}
/*Banner区块格式设置*/
#banner #banner-fixed{
width: 100%;
height: 66px;
background-color: #07cbc9;
position: fixed;
z-index: 100;
}
/*Banner区图片格式设置*/
#banner #banner-fixed #banner-logo{
float: left;
margin-left: 60px;
position: relative;
top: 9px;
}
/*Banner区列表总格式设置*/
#banner #banner-fixed ul{
margin-right:60px;
overflow: hidden;
}
/*Banner区列表格式设置*/
#banner #banner-fixed ul li{
list-style: none;
float: right;
overflow: hidden;
width: 95px;
text-align: center;
}
/*Banner区列表鼠标悬浮格式变化*/
#banner #banner-fixed ul li:hover{
background-color: black;
}
/*Banner区列表内文字格式设置*/
#banner #banner-fixed ul li a{
text-decoration: none;
color: white;
font-weight: bold;
line-height: 66px;
}
/*Banner文本区底图设置*/
#banner #banner-top #banner-top-image{
margin-top: 65px;
width: 100%;
height: 500px;
float: left;
z-index: 80;
margin-bottom: 50px
}
/*Banner文本区块格式设置*/
#banner #banner-top #banner-top-text{
float: left;
position: absolute;
z-index: 90;
top: 120px;
width: 34%;
left: 33%;
text-align: center;
}
/*Banner文本框批量格式设置*/
#banner #banner-top #banner-top-text .t{
width: 100%;
margin-top: 18px;
height: 26px;
opacity: 0.4;
padding: 6px;
background-color: black;
color: white;
border-color: #ffffff;
}
/*Banner文本框提交按钮格式设置*/
#banner #banner-top #banner-top-text #t5{
opacity: 0.4;
height: 36px;
width: 120px;
background-color: black;
color: white;
border-color: #ffffff;
margin: 12px auto;
}
/*Banner大文本框格式设置*/
#banner #banner-top #banner-top-text textarea{
width: 100%;
margin-top: 18px;
height: 90px;
opacity: 0.4;
padding: 6px;
background-color: black;
color: white;
resize: none;
border-color: #ffffff;
}
/*ABOUT区块标题格式设置*/
#about #h1-about{
text-align: center;
}
/*ABOUT区块p1总格式设置*/
#about #p1{
height: 620px;
}
/*ABOUT区简介文字格式设置*/
#about #p1 #about-text-top{
margin-top: -10px;
margin-left: 26%;
margin-bottom: 20px;
text-align: center;
width: 48%;
opacity: 0.4;
}
/*ABOUT区短横线格式设置*/
#about #p1 #line1{
background-color: #07cbc9;
width: 2%;
height: 2px;
margin: 18px auto;
display: block;
}
/*ABOUT区简介图片格式设置*/
#about #p1 #about-image{
margin-left: 25%;
margin-right: auto;
float: left;
}
/*ABOUT左侧标题格式设置*/
#about #p1 #about-text-left1{
font-size: 30px;
text-align: center;
width: 200px;
position: absolute;
left: 9%;
}
/*ABOUT左侧说明框格式设置*/
#about #p1 #about-block-left{
border: solid;
border-color: rgba(0,0,0,0.4);
position: absolute;
left: 10%;
top: 835px;
width: 400px;
height: 260px;
background-color: rgba(255,255,255,0.4);
}
/*ABOUT左侧说明框文本格式设置*/
#about #p1 #about-text-left2{
margin:20px;
line-height: 23px
}
/*ABOUT左侧说明框按钮格式设置*/
#about #p1 #about-btn1{
opacity: 1;
width: 90px;
height: 40px;
margin-left:20px;
color: white;
background-color: black;
}
/*ABOUT右侧说明框上格式设置*/
#about #p1 #about-right #about-block-right1{
border: solid;
border-color: #07cbc9;
position: absolute;
width: 220px;
height: 110px;
text-align: center;
margin-left: 77%;
padding: 25px;
}
/*ABOUT右侧说明框上短横线设置*/
#about #p1 #about-right #about-block-right1 #line2{
background-color: #07cbc9;
width: 16%;
height: 2px;
margin: 20px auto 12px auto;
display: block;
}
/*ABOUT右侧说明框下格式设置*/
#about #p1 #about-right #about-block-right2{
border: solid;
border-color: #07cbc9;
position: absolute;
width: 220px;
height: 110px;
text-align: center;
margin-left: 77%;
padding: 25px;
margin-top: 200px;
}
/*ABOUT右侧说明框下短横线设置*/
#about #p1 #about-right #about-block-right2 #line3{
background-color: #07cbc9;
width: 16%;
height: 2px;
margin: 20px auto 12px auto;
display: block;
}
/*ABOUT右侧说明框内文字批量设置*/
#about #p1 #about-right .block-right{
font-weight: bold;
font-size: 18px;
}
/*ABOUT部分Detail区块设置*/
#about #detail{
width: 100%;
padding-bottom: 50%;
background-color: #07cbc9;
}
/*ABOUT部分Detail区块图片批量设置*/
#about #detail .detail-image{
vertical-align: top;
width: 25%;
float: left;
}
/*ABOUT部分Detail区块文字块批量设置*/
#about #detail .detail-textblock{
width: 25%;
height: 330px;
float: left;
background-color: rgba(0,0,0,0);
}
/*ABOUT部分Detail区块文字块标题批量设置*/
#about #detail .detail-textblock-title{
color: white;
font-size: 26px;
margin-top: 20px;
margin-left: 20px;
}
/*ABOUT部分Detail区块文字块内容1批量设置*/
#about #detail .detail-textblock-content1{
color: white;
font-size: 16px;
margin-left: 20px;
margin-right: 18px;
margin-top: 20px;
font-weight: 400;
}
/*ABOUT部分Detail区块文字块内容2批量设置*/
#about #detail .detail-textblock-content2{
color: white;
font-size: 14px;
margin-left: 20px;
margin-right: 18px;
margin-top: 10px;
font-weight: 200;
}
/*ABOUT部分Detail区块文字块按钮批量设置*/
#about #detail .about-btn2{
opacity: 1;
width: 100px;
height: 36px;
margin-left:34%;
margin-top: 20px;
color: white;
background-color: black;
font-size: 10px;
}
这部分在我的电脑上看是正常的，改分辨率后就会错乱，麻烦老师帮我看看该怎么修改
13
收起
正在回答
2回答
同学你好，1. 测试代码并未发现混乱的情况，同学可以反馈一下问题，便于老师定位问题。
2. 现阶段同学做好页面排版即可。在过小或过大的分辨率下页面会出现混乱的问题，则建议同学深入学习一下前端内容。
祝学习愉快！
2. 从网页搭建入门JavaWeb
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星