为什么会多出一片空白界面
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link type="text/css" href="登录界面.css" rel="stylesheet "><body><!--头部，导航栏--><div class="head"> <nav> <ul id="head-1"> <li><a href="#" target="_self">开课吧首页</a></li> <li><a href="#">创业微学院</a></li> <li><a href="#">摄影微学院</a></li> <li><a href="#">微聚</a></li> <li><a href="#">论坛</a></li> </ul> <ul id="head-2"> <li><a href="登录界面.html" target="_self">登录 | 注册</a></li> <li><a href="#">播放记录</a></li> <li><a href="#">APP下载</a></li> </ul> </nav></div><div class="body"> <div class="body-1"> <ul id="ul1"> <li id="li1"></li> <li><a href="个人中心链接.html">个人中心</a></li> <li><a href="#">视频播放</a></li> </ul> <ul id="ul2"> <li></li> <li></li> <li>󰄪</li> <li></li> </ul> </div></div><!--尾部div--><div class="top-div"> <p class="div-p-top">top</p></div><footer> <p class="tail-character">Copyright[表情]2015 开课吧 kaikeba.com 版权所有</p></footer></body></html>
外链式
@charset "UTF-8";*{margin: 0; padding: 0; font-family: 微软雅黑;}.head{width: 100%; height: 46px; background-color: #0a2536;}.head nav li a{text-decoration: none; color: white; line-height: 46px; margin-right:30px;}#head-1{float: left; padding-left: 10pc;}#head-2{float: right; padding-right: 300px;}.head nav li{ display: inline-block; font-size: 20px;}.body{background:url("images/banner01.jpg")no-repeat; width: 100%; height: 675px; position: relative; font-size: 20px;}#li1{background: url("images/LOGO.png")no-repeat; width: 118px; height: 28px; margin-left: 300px; margin-right: 30px; margin-top: 10px }#ul1{float: left; color: white;}#ul1 a{text-decoration: none; color: white; line-height: 50px; margin-right:30px;}.body .body-1 ul li{display: inline-block;}.body-1{ width: 100%; height: 50px; position: absolute; background-color: rgba(250,250,250,0.5);}#ul2{float: right; line-height: 50px; margin-right:160px ;}footer{background-color: #0a2536; width: 100%; height: 100px; position: relative; top: 573px; /*margin-top: 50px;*/}footer .tail-character{color: white; text-align: center; line-height: 100px;}.top-div{background: url("images/sanjiao.png")no-repeat; background-size: cover; width: 58px; height: 32px; /*border: solid yellow;*/ margin-top: 20px; margin-left: 725px; }.top-div{background: url("images/sanjiao.png")no-repeat; background-size: cover; width: 58px; height: 32px; /*border: solid yellow;*/ position: absolute; top: 521px; }.top-div .div-p-top{text-align: center; color: white; line-height: 2;}
以后发布问题最好用代码块发布。可以提高可读性
1.你少了head的闭合标签。
2..body 的background:url 和no-repeat要有空格。
3.至于是空白说明你的url地址不对。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link type="text/css" href="登录界面.css" rel="stylesheet ">
<style>
* {
margin: 0;
padding: 0;
font-family: 微软雅黑;
}
.head {
width: 100%;
height: 46px;
background-color: #0a2536;
}
.head nav li a {
text-decoration: none;
color: white;
line-height: 46px;
margin-right: 30px;
}
#head-1 {
float: left;
padding-left: 10pc;
}
#head-2 {
float: right;
padding-right: 300px;
}
.head nav li {
display: inline-block;
font-size: 20px;
}
.body {
background: url("../1623738862\(1\).png") no-repeat;
width: 100%;
height: 675px;
position: relative;
font-size: 20px;
}
#li1 {
background: url("images/LOGO.png") no-repeat;
width: 118px;
height: 28px;
margin-left: 300px;
margin-right: 30px;
margin-top: 10px
}
#ul1 {
float: left;
color: white;
}
#ul1 a {
text-decoration: none;
color: white;
line-height: 50px;
margin-right: 30px;
}
.body .body-1 ul li {
display: inline-block;
}
.body-1 {
width: 100%;
height: 50px;
position: absolute;
background-color: rgba(250, 250, 250, 0.5);
}
#ul2 {
float: right;
line-height: 50px;
margin-right: 160px;
}
footer {
background-color: #0a2536;
width: 100%;
height: 100px;
position: relative;
top: 573px;
/*margin-top: 50px;*/
}
footer .tail-character {
color: white;
text-align: center;
line-height: 100px;
}
.top-div {
background: url("images/sanjiao.png")no-repeat;
background-size: cover;
width: 58px;
height: 32px;
/*border: solid yellow;*/
margin-top: 20px;
margin-left: 725px;
}
.top-div {
background: url("images/sanjiao.png")no-repeat;
background-size: cover;
width: 58px;
height: 32px;
/*border: solid yellow;*/
position: absolute;
top: 521px;
}
.top-div .div-p-top {
text-align: center;
color: white;
line-height: 2;
}
</style>
</head>
<body>
<!--头部，导航栏-->
<div class="head">
<nav>
<ul id="head-1">
<li><a href="#" target="_self">开课吧首页</a></li>
<li><a href="#">创业微学院</a></li>
<li><a href="#">摄影微学院</a></li>
<li><a href="#">微聚</a></li>
<li><a href="#">论坛</a></li>
</ul>
<ul id="head-2">
<li><a href="登录界面.html" target="_self">登录 | 注册</a></li>
<li><a href="#">播放记录</a></li>
<li><a href="#">APP下载</a></li>
</ul>
</nav>
</div>
<div class="body">
<div class="body-1">
<ul id="ul1">
<li id="li1"></li>
<li><a href="个人中心链接.html">个人中心</a></li>
<li><a href="#">视频播放</a></li>
</ul>
<ul id="ul2">
<li></li>
<li></li>
<li>󰄪</li>
<li></li>
</ul>
</div>
</div>
<!--尾部div-->
<div class="top-div">
<p class="div-p-top">top</p>
</div>
<footer>
<p class="tail-character">Copyright[表情]2015 开课吧 kaikeba.com 版权所有</p>
</footer>
</body>
</html>
大段代码，放到代码段里看着方便点哈~。浮动元素必要清楚浮动，可以试着用一下flex布局，现在都用这个
点赞不点赞我都不会说什么的
回不回没有clear:both哇
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>为什么会多出一片空白界面</title>
<link type="text/css" href="login.css" rel="stylesheet ">
</head>
<body>
<!--头部，导航栏-->
<div class="head">
<nav>
<ul id="head-1">
<li>
<a href="#" target="_self">开课吧首页</a></li>
<li>
<a href="#">创业微学院</a></li>
<li>
<a href="#">摄影微学院</a></li>
<li>
<a href="#">微聚</a></li>
<li>
<a href="#">论坛</a></li>
</ul>
<ul id="head-2">
<li>
<a href="登录界面.html" target="_self">登录 | 注册</a></li>
<li>
<a href="#">播放记录</a></li>
<li>
<a href="#">APP下载</a></li>
</ul>
</nav>
</div>
<div class="body">
<div class="body-1">
<ul id="ul1">
<li id="li1">LOGO</li>
<li>
<a href="个人中心链接.html">个人中心</a></li>
<li>
<a href="#">视频播放</a></li>
</ul>
<ul id="ul2">
<li>展开</li>
<li>星座</li>
<li>󰄪</li>
<li>评论</li>
</ul>
</div>
</div>
<div class="con-box">
<ul>
<li>左内容区域1，两列布局</li>
<li>左内容区域1，两列布局</li>
</ul>
<ul>
<li>右内容区域1，两列布局</li>
<li>右内容区域1，两列布局</li>
</ul>
</div>
<!--尾部div-->
<div class="top-div">
<p class="div-p-top">top</p></div>
<footer>
<p class="tail-character">Copyright[表情]2015 开课吧 kaikeba.com 版权所有</p></footer>
</body>
</html>@charset "UTF-8";
* {
margin:0;
padding:0;
font-family:微软雅黑;
}
.head {
width:100%;
height:46px;
background-color:#0a2536;
}
.head nav li a {
text-decoration:none;
color:white;
line-height:46px;
margin-right:30px;
}
#head-1 {
float:left;
padding-left:10pc;
}
#head-2 {
float:right;
padding-right:300px;
}
.head nav li {
display:inline-block;
font-size:20px;
}
.body {
/* background:url("images/banner01.jpg") no-repeat;*/
background-color: red;
width:100%;
height: 50px;
/* height:675px;*/
/* position:relative;*/
font-size:20px;
}
#li1 {
background:url("images/LOGO.png") no-repeat;
width:118px;
height:28px;
margin-left:300px;
margin-right:30px;
margin-top:10px
}
#ul1 {
float:left;
color:white;
}
#ul1 a {
text-decoration:none;
/* color:white;*/
line-height:50px;
margin-right:30px;
}
.body .body-1 ul li {
display:inline-block;
}
.body-1 {
width:100%;
height:50px;
position:absolute;
background-color:rgba(250,250,250,0.5);
}
#ul2 {
float:right;
line-height:50px;
margin-right:160px;
}
footer {
background-color:#0a2536;
width:100%;
height:100px;
/* position:relative;*/
position: absolute;
/* top:573px;*/
/* margin-top:50px;*/
bottom: 0;
}
footer .tail-character {
color:white;
text-align:center;
line-height:100px;
}
/*.top-div {*/
/* background:url("images/sanjiao.png") no-repeat;*/
/* background-size:cover;*/
/* width:58px;*/
/* height:32px;*/
/* position:absolute;*/
/* right: 0;*/
/*}*/
.top-div {
width: 0;
height: 0;
position: absolute;
top: 50%;
right: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 30px solid red;
}
.top-div .div-p-top {
text-align:center;
color:white;
line-height:2;
}
.con-box {
display: flex;
}
.con-box ul {
width: 50%;
}
.con-box ul li {
padding: 100px;
border: 1px solid red;
margin: 10px 5px;
list-style-type: none;
}