单行和多行的文字不一样，无法调整；然后多行的边框代码是2px，但无法显示。请老师指点！（附图和代码）
来源：2-10 作业题
如花慕少
2019-12-27 23:01:29
HTML代码部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<link rel="stylesheet" href="buju.css">
</head>
<body>
<!--顶部-->
<div class="header">
<div class="logo">
<a href="#"><img src="images/logo.png" alt="Career Builder"/></a>
</div>
<!--导航部分-->
<div class="nav">
<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>
<!--banner区-->
<div class="banner">
<div class="pic-banner">
<img src="images/banner3.jpg"/>
</div>
<div class="zhezhao"></div>
<!--表单-->
<div class="biaodan">
<form>
<input type="text" placeholder="Your Name" name="Name" class="biao1 h"/>
<br>
<input type="text" placeholder="Your Phone" name="phone" class="biao1 h"/>
<br>
<input type="text" placeholder="Your Email" name="Email" class="biao1 h"/>
<br>
<textarea placeholder="Write Your Comment"
name="textarea" class="biao2 h"/></textarea>
<br>
<input type="button" value="SEND MESSAGE" name="message" class="biao3 h1"/>
</form>
</div>
</div>
<!--ABOUT区-->
<div class="about">
<div class="letter">ABOUT</div>
<div class="xia"></div>
<div class="word">Lorem Ipsum dimply dummy text of the printing and typesetting industry.Lorem ipsum has been the industry's standard dummy text ever since the 1500s.</div>
<!--图文左部-->
<div class="pic-word">
<div class="p-w-left">
<p>A WORD<br>ABOUT US</p>
<div class="left2">
<div class="left2-word">Praesent dignissim viverra est,Sed bibendum ligula congue non.Sed ac nisl et felis gravida commodo?Suspendisse eget ullamcorper ipsum.Suspendisse diam amet.</div>
<div>
<input type="button" value="EXPLORE" name="explore" class="left3"/>
</div>
<div class="biao4"></div>
</div>
</div>
<div class="p-w-middle">
<img src="images/bb3.jpg"/>
</div>
<div class="p-w-right">
<div class="frame">
<p class="seven">70000</p>
<div class="yi"></div>
<p class="student">Students</p>
</div>
<div class="frame">
<p class="seven">600</p>
<div class="yi"></div>
<p class="student">Faculty</p>
</div>
</div>
</div>
</div>
<!--ABOUT底部区-->
<div class="AB-bottom">
<div class="kuai1">
<div class="pic1">
<img src="images/b1.jpg">
<div class="sanjiao1"></div>
</div>
<div class="word1">
<p class="p1">Library</p>
<p class="p2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="p3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,When an unknowm printer took a galley of type and scrambled it to make a type specinmen book.</p>
<button>EXPLORE</button>
</div>
</div>
<div class="kuai1">
<div class="pic1">
<img src="images/b2.jpg">
<div class="sanjiao1"></div>
</div>
<div class="word1">
<p class="p1">Computer Lab</p>
<p class="p2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="p3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,When an unknowm printer took a galley of type and scrambled it to make a type specinmen book.</p>
<button>EXPLORE</button>
</div>
</div>
<div class="kuai1">
<div class="word2">
<p class="p1">Conference Hall</p>
<p class="p2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="p3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,When an unknowm printer took a galley of type and scrambled it to make a type specinmen book.</p>
<button>EXPLORE</button>
</div>
<div class="pic2">
<img src="images/b3.jpg">
<div class="sanjiao2"></div>
</div>
</div>
<div class="kuai1">
<div class="word2">
<p class="p1">Play Ground</p>
<p class="p2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p class="p3">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,When an unknowm printer took a galley of type and scrambled it to make a type specinmen book.</p>
<button>EXPLORE</button>
</div>
<div class="pic2">
<img src="images/b4.jpg">
<div class="sanjiao2"></div>
</div>
</div>
</div>
<!--GALLERY区-->
<div class="gallery">
<div class="letter">GALLERY</div>
<div class="xia"></div>
<div class="word">Lorem Ipsum dimply dummy text of the printing and typesetting industry.Lorem ipsum has been the industry's standard dummy text ever since the 1500s.</div>
<!--GALLERY图文排版区-->
<div class="gallery-tw">
<div class="t1">
<div class="pic">
<img src="images/03-01.jpg"/>
</div>
<div class="k1">
<P>SCIENCELAB</P>
</div>
</div>
<div class="t1">
<div class="pic">
<img src="images/03-02.jpg"/>
</div>
<div class="k1">
<P>INDOOR STADIUM</P>
</div>
</div>
<div class="t1">
<div class="pic">
<img src="images/03-03.jpg"/>
</div>
<div class="k1">
<P>TRANSPORTATION</P>
</div>
</div>
<div class="t1">
<div class="pic">
<img src="images/03-04.jpg"/>
</div>
<div class="k1">
<P>KIDS ROOM</P>
</div>
</div>
<div class="t1">
<div class="pic">
<img src="images/03-05.jpg"/>
</div>
<div class="k1">
<P>MEDITATION CLASSES</P>
</div>
</div>
<div class="t1">
<div class="pic">
<img src="images/03-06.jpg"/>
</div>
<div class="k1">
<P>KIDS PLAY GROUND</P>
</div>
</div>
</div>
</div>
<!--页脚区-->
<div class="footer">
<p>© 2016 imooc.com 京ICP备13046642号</p>
</div>
</body>
</html>
-------------------------------------分隔线-------------------------------------------
CSS样式部分：
*{
padding: 0;
margin: 0;
background:center;
}
body{
width: 100%;
}
/*顶部*/
.header{
width:100%;
height:80px;
background:#07cbc9;
position:fixed;
overflow: hidden;
z-index:8;
}
/*顶部logo*/
.header img{
width:260px;
height:48px;
padding-left: 150px;
padding-top: 16px;
}
.header .logo{
float:left;
z-index:9;
}
/*顶部导航*/
.header .nav{
float:right;
color:#fff;
margin-right: 100px;
z-index:9;
}
.header .nav ul a{
color:#fff;
text-decoration:none;
}
.header .nav ul li{
font: bold 14px "微软雅黑";
padding-right: 20px;
line-height:80px;
list-style:none;
float:left;
}
/*顶部导航划过变色*/
.header .nav ul a:hover{
color:#b8b8b8;
}
/*banner区*/
.banner{
width:100%;
height:800px;
}
.banner img{
width:100%;
height:800px;
position:relative;
top:80px;
}
/*遮罩层*/
.banner .zhezhao{
width:100%;
height:800px;
background-color:#000;
position:absolute;
left:0;
top:80px;
opacity:0.5;
}
/*表单*/
.banner .biaodan{
width:507px;
height:420px;
position:absolute;
left:50%;
top:50%;
margin-left:-254px;
margin-top:-210px;
z-index:2;
}
/*表单单行文本*/
.banner .biaodan .biao1{
width:505px;
height:43px;
color:#07cbc9;
line-height:43px;
border:2px solid #808080;
margin-top:22px;
text-indent:1em;
}
/*表单多行文本*/
.banner .biaodan .biao2{
width:505px;
height:119px;
line-height:43px;
color:#07cbc9;
font-size: 16px;
font-family: "微软雅黑"；
border:2px solid #808080;
margin-top:22px;
text-indent:1em;
}
/*表单按钮*/
.banner .biaodan .biao3{
width:123px;
height:39px;
font-size:12px;
color:#808080;
line-height:39px;
border:2px solid #808080;
position:relative;
left:50%;
margin:25px 0 0 -62px;
text-align:center;
}
/*表单框划过变色*/
.banner .biaodan .h:hover{
border:2px solid #07cbc9;
}
.banner .biaodan .h1:hover{
border:none;
background-color:#07cbc9;
}
/*ABOUT区*/
.about{
width:100%;
height:700px;
position:relative;
}
/*ABOUT-标题与文字-字母部分*/
.about .letter{
font:bold 50px "微软雅黑";
text-align:center;
margin-top:140px;
}
/*ABOUT-标题与文字-蓝色横线*/
.about .xia{
width: 50px;
height:18px;
border-bottom:2px solid #07cbc9;
position:absolute;
left:50%;
margin-left:-25px;
}
/*ABOUT-标题与文字-文字部分*/
.about .word{
width: 500px;
height:100px;
font-size:16px;
line-height:28px;
font-family: "微软雅黑";
color:#606060;
text-align:center;
position:absolute;
left:50%;
top:108px;
margin-left:-250px;
}
/*ABOUT图文部分*/
.about .pic-word{
width: 1120px;
height:380px;
position:absolute;
top:220px;
left:50%;
margin-left:-560px;
}
/*ABOUT图文部分-左*/
.about .p-w-left{
width: 372px;
height:380px;
float:left;
position:relative;
}
/*ABOUT图文部分-左字母*/
.about .p-w-left p{
font-size:38px;
font-family: "微软雅黑";
text-indent:0.5em;
}
/*ABOUT图文部分-左框*/
.about .left2{
width: 372px;
height:248px;
position:relative;
}
.about .left2-word{
font:16px;
color:#606060;
font-family: "微软雅黑";
padding:30px 30px 20px 30px;
line-height:25px;;
}
.about .left3{
width: 102px;
height:45px;
font:bold 16px "微软雅黑";
color:#fff;
background-color:#000;
position:relative;
margin-left:30px;
}
.about .left3:hover{
background-color:transparent;
border:1px solid #000;
font:bold 16px "微软雅黑";
color:#000;
}
/*ABOUT图文部分-左半透明框底*/
.about .biao4{
width: 370px;
height:246px;
border:1px solid #909090;
background:#fff;
opacity:0.5;
position:absolute;
left:0;
top:0;
z-index:-1;
}
/*ABOUT图文部分-中*/
.about .pic-word .p-w-middle img{
width: 568px;
height:380px;
float:left;
position:absolute;
left:50%;
margin-left:-284px;
z-index:-2;
}
/*ABOUT图文部分-右*/
.about .p-w-right{
width: 240px;
height:380px;
float:right;
}
.about .frame{
width:238px;
height:144px;
border:1px solid #07cbc9;
position:relative;
margin-bottom:40px;
}
.about .frame .seven{
font:bold 35px "微软雅黑";
text-align:center;
margin-top:20px;
}
.about .frame .yi{
width: 40px;
height:8px;
border-bottom:2px solid #07cbc9;
position:absolute;
left: 50%;
top:50%;
margin-left:-20px;
}
.about .frame .student{
font-size:20px;
font-family: "微软雅黑";
text-align:center;
margin-top:30px;
}
/*ABOUT底部区*/
.AB-bottom{
width:100%;
height:auto;
text-align: center;
background: #07cbc9;
overflow:hidden;
}
.AB-bottom .kuai1{
width:50%;
height:auto;
float:left;
overflow:hidden;
position: relative;
}
.AB-bottom img{
width:100%;
height:auto;
}
.AB-bottom .pic1,.word1,.pic2,.word2{
width:50%;
height:auto;
float:left;
}
/*小三角*/
.AB-bottom .sanjiao1{
position: absolute;
top:50%;
margin-top:-20px;
left:50%;
margin-left: -40px;
border-width:20px 40px 20px 0;
border-style: solid;
border-color: transparent #07cbc9 transparent;
}
.AB-bottom .sanjiao2{
position: absolute;
top:50%;
margin-top:-20px;
left:50%;
border-width:20px 0 20px 40px;
border-style: solid;
border-color: transparent #07cbc9 transparent;
}
/*文字排版*/
.AB-bottom .p1{
font-size:30px;
color:#fff;
margin:40px 40px 20px 40px;
text-align:left;
}
.AB-bottom .p2{
font-size:18px;
color:#fff;
line-height:30px;
margin:0 40px;
text-align:left;
}
.AB-bottom .p3{
font-size:14px;
color:#e5e5e5;
line-height:25px;
margin:20px 40px;
text-align:left;
}
.AB-bottom button{
width:102px;
height:45px;
background: #000;
color:#fff;
font-size:16px;
position: relative;
top:20px;
}
.AB-bottom button:hover{
background-color:transparent;
border:1px solid #000;
font:bold 16px "微软雅黑";
color:#000;
}
/*GALLERY区*/
.gallery{
width: 1120px;
height:auto;
position:relative;
left:50%;
margin-left:-560px;
}
/*GALLERY-标题与文字-字母部分*/
.gallery .letter{
font:bold 50px "微软雅黑";
text-align:center;
margin-top:60px;
}
/*GALLERY-标题与文字-蓝色横线*/
.gallery .xia{
width: 50px;
height:20px;
border-bottom:2px solid #07cbc9;
position:relative;
left:50%;
margin-left:-25px;
}
/*GALLERY-标题与文字-文字部分*/
.gallery .word{
width: 500px;
height:100px;
font-size:16px;
line-height:28px;
font-family: "微软雅黑";
color:#606060;
position:relative;
top:25px;
left:50%;
margin-left:-250px;
}
/*GALLERY-排图部分*/
.gallery-tw{
width: 1140px;
height:628px;
position:relative;;
top:60px;
left:50%;
margin-left:-560px;
}
.gallery .t1{
width: 360px;
height:304px;
float:left;
margin-right: 20px;
margin-bottom: 20px;
}
.gallery .pic{
width: 360px;
height:240px;
}
.gallery img{
width: 360px;
height:240px;
}
/*GALLERY-排图部分-黑色块部分*/
.gallery .k1{
width: 360px;
height:64px;
background: #000;
}
.gallery p{
font-size:16px;
color: #fff;
text-align: left;
text-indent: 1em;
line-height: 64px;
}
/*页脚区*/
.footer{
width: 100%;
height:80px;
background: #07cbc9;
margin-top:130px;
}
.footer p{
font-size:14px;
color: #fff;
text-align:center;
line-height: 80px
}
如上图：单行和多行的文字不一样，无法调整；然后多行的边框代码是2px，但无法显示。请老师指点！
2回答
-
同学你好， 因为font-family属性值后面的分号是中文状态下，不符合代码规范，导致后面的字体样式和边框效果没有生效。建议修改：
修改后的效果图：
在作业区域是可以上传作业的，建议同学上传作业。会有批复作业的老师为你指导，并把问题与修改方案整理成文档发送给你，能够更好的帮助你完善作业。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0 -
如花慕少
提问者
2019-12-28
好的，我知道了，谢谢老师，我这就上传
0
相似问题