关于ABOUT区上半部分，左边的文字和中间的图片位置问题。
来源：4-3 项目作业
SHAMAN_y
2019-04-13 10:29:34
1.ABOUT区上半部分，左边的文字和中间的图片在分辨率改变后，两者之间的距离发生改变，请问应该怎么修改。
2.我感觉自己的代码有重复或者无用的部分。应该怎么避免。
谢谢！麻烦了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Career Builder</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
<div class="header">
<div class="logo">
<a href="#"><img src="images/logo.png"></a>
</div>
<div class="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">FACULTY</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
<div class="banner">
<div class="banner_img">
<img src="images/banner3.jpg">
</div>
<div class="shadow"></div>
<div class="form_table">
<form action="#" method="">
<table>
<tr><td><input type="text" name="" class="message" placeholder="your Name"></td></tr>
<tr><td><input type="text" name="" class="message" placeholder="your Phone"></td></tr>
<tr><td><input type="text" name="" class="message" placeholder="your Email"></td></tr>
<tr><td><textarea placeholder="Write Your Commont Here"></textarea></td></tr>
<tr><td><input type="submit" name="" class="send_message" value="SEND MESSAGE"></td></tr>
</table>
</form>
</div>
</div>
<div class="about">
<div class="about_top">
<div class="about_top_title">
<h1>ABOUT</h1>
</div>
<label class="about_top_line"></label>
<div class="about_top_text">
<p>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>
<div class="about_content">
<div class="about_content_left">
<div class="about_content_left_top">
<h2>A WORD ABOUT US</h2>
</div>
<div class="about_content_left_bottom">
<p>Praesent dignissim viverra est,sed bibendum ligula congue non.Sed ac nisl et
felis gravida commodo?Suspendisse eget ullamcocper ipsum.Suspenisse diam ament.</p>
<div class="about_content_left_bottom1">
<a href="#">EXPLORE</a>
</div>
</div>
</div>
<div class="about_content_center">
<img src="images/bb3.jpg">
</div>
<div class="about_content_right">
</div>
</div>
<div class="about_bottom"></div>
</div>
<div class="gallery"></div>
<div class="footer"></div>
</body>
</html>
CSS代码：
*{
padding: 0px;
margin: 0px;
}
body{
font-family: Microsoft YaHei UI;
}
img{
display: block;
}
a{
text-decoration:none;
display: block;
}
/* header */
.header{
margin: auto;
height: 68px;
background-color: #07CBC9;
}
.header .logo{
float: left;
position:relative;
margin-left: 120px;
margin-top: 10px;
}
.header .menu{
float: right;
margin-right: 75px;
}
.header .menu ul li{
float:left;
margin-right: 5px;
list-style:none;
}
.header .menu ul li a{
text-decoration: none;
color: #FFFFFF;
width: 80px;
height: 68px;
display: block;
text-align: center;
line-height: 68px;
}
.header .menu ul li a:hover{
background-color: #000000;
}
/* content-banner */
.banner{
width: auto;
height: 500px;
position: relative;
}
.banner .banner_img img{
width: 100%;
height: 500px;
position: absolute;
}
.banner .shadow{
width: 100%;
height: 500px;
position: absolute;
background-color: black;
opacity: 0.4;
}
.banner .form_table{
width: 50%;
height: 300px;
position: absolute;
left: 25%;
top: 100px;
}
.banner .form_table form table{
margin: auto;
border: none;
text-align: center;
}
.banner .form_table form table tr td .message{
background-color: transparent;
width: 420px;
height: 35px;
border: 2px solid #BDBEBD;
float: left;
margin-bottom: 20px;
}
.banner .form_table form table tr td textarea{
background-color: transparent;
width: 420px;
height: 100px;
border: 2px solid #BDBEBD;
float: left;
margin-bottom: 20px;
font-family: Microsoft YaHei UI;
}
.banner .form_table form table tr td .send_message{
background-color: transparent;
height: 35px;
border: 2px solid #BDBEBD;
color: #BDBEBD;
}
.banner .form_table form table tr td .message:hover{
border: 2px solid #07cbc9;
}
.banner .form_table form table tr td textarea:hover{
border: 2px solid #07cbc9;
}
.banner .form_table form table tr td .send_message:hover{
border: none;
background-color: #07cbc9;
}
::-webkit-input-placeholder { /* 设置input-placeholde默认的颜色 */
color: #BDBEBD;
}
/* about_top */
.about{
width: auto;
height: 1000px;
}
.about_top_title{
height: 60px;
width: auto;
margin: 0px auto 20px auto;
padding-top: 50px;
text-align: center;
}
.about_top_line{
display: block;
border-bottom: 3px solid #07cbc9;
margin: auto;
width: 30px;
}
.about_top_text{
height: 100px;
width: 520px;
text-align: center;
margin: 20px auto;
color: #BDBEBD;
}
/* about_content */
.about_content{
position: relative;
}
.about_content_left{
width: 350px;
height: 360px;
left: 18%;
float: left;
position: relative;
z-index: 100;
}
.about_content_left_top{
width: 160px;
height: 70px;
text-align: center;
}
.about_content_left_bottom{
width: 310px;
height: 150px;
padding: 15px;
background-color: rgba(255, 255, 255, 0.4);
border: 2px solid #BDBEBD;
}
.about_content_left_bottom1{
width: 90px;
height: 30px;
background-color: black;
text-align: center;
line-height: 30px;
margin-top: 20px;
}
.about_content_left_bottom1 a{
color: #FFFFFF;
}
.about_content_center{
width: 560px;
height: 350px;
position: relative;
margin: auto;
/*top: -360px;*/
}
.about_content_center img{
width: 560px;
height: 320px;
}写回答
1回答
-
您好，分辨率可以使用百分比的形式设置具体左侧距离、宽度等。代码重复可以将相同样式设置同名class，同时设置样式。祝学习愉快！
1
相似问题
老师，关于图片缩放的问题
回答 2