<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="image/logo.css">
</head>
<body>
<!--头部区域开始-->
<div class="header w">
<div class="logo">
<img src="image/logo.img.png" alt="学车在线">
</div>
<div>
<ul >
<li class="li"><a href="#">首页</a></li>
<li class="li"><a href="#">课程</a></li>
<li class="li"><a href="#">职业规划</a></li>
</ul>
</div>
<div class="search">
<input type="text">
<button></button>
</div>
<div class="qq">
<img src="image/qq.img.png" alt="">
</div>
</div>
<!--头部区域结束-->
<div class="banner">
<div class="bas">
<div class="nav">
<ul class="a">
<li><a href="#">前端开发<span>></span></a></li>
<li><a href="#">后端开发<span>></span></a></li>
<li><a href="">移动开发<span>></span></a></li>
<li><a href="">人工智能<span>></span></a></li>
<li><a href="">商业预测<span>></span></a></li>
<li><a href="">云计算&大数据<span>></span></a></li>
<li><a href="">运维&大测试<span>></span></a></li>
<li><a href="">UI设计<span>></span></a></li>
<li><a href="">产品<span>></span></a></li>
</ul>
</div>
<!--课程表模块-->
<div class="course">
<div class="mecourse">
我的课程表
</div>
<div class="jixu1">
<ul>
<li>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</li>
<li>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</li>
<li>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</li>
</ul>
<div class="la">
全部课程
</div>
</div>
</div>
</div>
</div>
<!--课程表模块结束-->
<!--精品推荐模块-->
<div class="jingpin">
<h4>精品推荐</h4>
<ul>
<li><a href=""><span>|</span>JQuery</a></li>
<li><a href=""><span>|</span>Spark</a></li>
<li><a href=""><span>|</span>MySQL</a></li>
<li><a href=""><span>|</span>JavaWeb</a></li>
<li><a href=""><span>|</span>MySQL</a></li>
<li><a href=""><span>|</span>JavaWeb</a></li>
</ul>
<p>修改兴趣</p>
</div>
<!--精品推荐模块结束-->
<!--精品推荐具体-->
<div class="jingpintuijian">
<h4>精品推荐</h4>
<p>查看全部</p>
<div class="jinpin1 ">
<div class="jinpin2">
<ul>
<li>
<img src="矩形 35.png" alt="">
<p>我的意中人</p>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul></div>
<div class="jinpin2"></div>
<div class="jinpin2"></div>
<div class="jinpin2"></div>
<div class="jinpin2"></div>
<div class="jinpin2"></div>
<div class="jinpin2"></div>
<div class="jinpin2"></div>
<div class="jinpin2"></div>
<div class="jinpin2"></div>
</div>
</div>
<!--精品推荐具体结束-->
</body>
</html>
以上为Html代码
* { padding: 0;
margin: 0;}
.w { width: 1200px;
margin: auto;}
.header {
height: 48px;
margin: 30px auto;
}
body { height: 3000px;}
.logo { float: left;
width: 200px;
height: 46px;
padding-right: 28px;}
.li { line-height: 48px;
height: 48px;
padding-left: 32px;
float: left;
}
li {
list-style: none;}
a:hover {border-bottom: 1px solid #00a4ff;}
a { display: block;
color: #000;
text-decoration: none;}
.search { float: left;
margin-left: 94px;
line-height: 40px;
width: 412px;
height: 48px;
}
.search input { float: left;
width: 360px;
height: 40px;
border: 1px solid #00a4ff;
border-right: 0;}
.search button { float: left;
width: 50px;
height: 42px;
background: url("button.img.png");
border: 0;
}
.qq { float: left;
padding-top: 6px;
padding-left: 27px;}
.banner {
height: 420px;
background-color: #1c036c;}
.bas {
height: 420px;
margin: auto;
background: url("banner.img.png") no-repeat top center;
}
.nav { float: left;
width: 186px;
height: 420px;
margin-left: 120px;
background:rgba(0,0,0,0.3);}
.nav ul li a {
font-size: 14px;
color:#fff ;}
.nav ul li { padding-left: 17px;
padding-top: 26px;
padding-right: 5px;
}
.nav ul li :hover { color: #00a4ff;}
.nav ul li a span { float: right; }
.course { float: right;
margin-top: 48px;
margin-right: 85px;
background-color: #fff;
width: 230px;
height: 300px;}
.mecourse { width: 230px;
height: 46px;
background-color: #9bceea;
line-height: 46px;
text-align: center;
color: #fff;}
.jixu1 ul li h4 { color:#4e4e4e ;
font-size: 14px;}
.jixu1 ul li p { color: #dedede;
font-size: 12px;}
.jixu1 { margin:0 17px}
.jixu1 ul li { padding: 15px 0;
border-bottom: 1px solid #4e4e4e;}
.la{ margin-top: 5px;
width: 199px;
height: 40px;
border: 1px solid #00a4ff ;
line-height: 40px;
color:#00a4ff;
text-align: center;
font-size: 16px;}
.jingpin { margin-left: 120px;
margin-top: 10px;
width: 1202px;
height: 60px;
line-height: 60px;
background-color: #fff;
box-shadow: 0 2px 2px 3px rgba(0,0,0,0.1);}
.jingpin ul li { float: left;
}
.jingpin ul li a { padding-right: 30px;
}
.jingpin ul li:hover { color: #00a4ff;}
.jingpin h4{ float: left;
margin: 0 18px 0 44px;
font-size: 16px;
color: #00a4ff; }
.jingpin p { float: right;
margin-right: 10px;
font-size: 16px;
color: #00a4ff; }
.jingpin ul li span{ padding-right: 30px;
color: #4e4e4e;}
.jingpintuijian h4 { float: left;
margin: 34px 0px 21px 0;
font-size: 20px;
color:#494949 ;
font-family: 微软雅黑;}
.jingpintuijian { margin-left: 120px;}
.jingpintuijian p { float: right;
font: 12px 微软雅黑;
margin: 42px 150px 20px 0 ;}
.jinpin1 { height: 590px;
width: 1220px;
padding-top: 82px;
}
.jinpin2 ul li { float: left;
width: 228px;
height: 290px;
margin: 0 14px 14px 0 ;
background-color: #00a4ff;
}
.jinpin2 ul li img { width:100%}
.jinpin2 ul li p{ font-size: 14px;
margin: 0px 16px 0 22px;}
以上为css代码
我的问题是精品推荐下方的第一个盒子,我的文字为什么不可以直接在图片下面而是隔了一段距离