3-9作业
来源：3-9 作业题
夕落呀
2018-12-19 20:32:16
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>less作业</title>
<link rel="stylesheet" href="css/less.css">
</head>
<body>
<header class="header">
<div class="logo"></div>
<div class="nav">
<a href="" class="nav__item">课程</a>
<a href="" class="nav__item nav__item_icon_new">职业路径</a>
<a href="" class="nav__item">实战</a>
<a href="" class="nav__item">猿问</a>
<a href="" class="nav__item">手记</a>
</div>
<div class="profile">
<a href="" class="profile__item profile__shop"></a>
<a href="" class="profile__item profile__message"></a>
<a href="" class="profile__item profile__ava"></a>
</div>
<div class="search">
<input type="text" class="search__input">
<a href="" class="search__submit"></a>
</div>
</header>
<!-- header.header>.logo+.nav>a.-item{课程}+a.-item.-item_icon_new{职业路径}+a.-item{实战}+a.-item{猿问}+a.-item{手记}^.profile>a.-item.-shop+a.-item.-message+a.-item.-ava^.search>input.-input+a.-submit|bem -->
<div class="banner"></div>
<div class="course">
<div class="course__list">
<div class="standard-course">
<div class="standard-course__cover"><img src="imgs/course1.jpg" alt=""></div>
<div class="standard-course__plan">
<div class="standard-course__plan-capation">前端小白入门系列课程</div>
<div class="standard-course__plan-times">33课<span class="standard-course__plan-times-person">368人在学</span></div>
<div class="standard-course__plan-category">带你通过系统的学习，完成从“会做网页”到“做出好的动态网页”的蜕变</div>
</div>
<div class="standard-course__price"><i>￥</i>499.00</div>
</div>
<div class="standard-course">
<div class="standard-course__cover"><img src="imgs/course2.jpg" alt=""></div>
<div class="standard-course__plan">
<div class="standard-course__plan-capation">HTML5与CSS3实现动态网页系列课程</div>
<div class="standard-course__plan-times">24课<span class="standard-course__plan-times-person">1031人在学</span></div>
<div class="standard-course__plan-category">带你通过系统的学习，完成从“会做网页”到“做出好的动态网页”的蜕变</div>
</div>
<div class="standard-course__price"><i>￥</i>599.00</div>
</div>
<div class="standard-course">
<div class="standard-course__cover"><img src="imgs/course3.jpg" alt=""></div>
<div class="standard-course__plan">
<div class="standard-course__plan-capation">PHP从零基础到原生项目开发系列课程</div>
<div class="standard-course__plan-times">18课<span class="standard-course__plan-times-person">110人在学</span></div>
<div class="standard-course__plan-category">带你通过系统的学习，完成从“会做网页”到“做出好的动态网页”的蜕变</div>
</div>
<div class="standard-course__price"><i>￥</i>498.00</div>
</div>
<div class="standard-course">
<div class="standard-course__cover"><img src="imgs/course4.jpg" alt=""></div>
<div class="standard-course__plan">
<div class="standard-course__plan-capation">ECShop3从基本使用到二次开发系列课程</div>
<div class="standard-course__plan-times">11课<span class="standard-course__plan-times-person">7人在学</span></div>
<div class="standard-course__plan-category">ECShop3来啦！一个基于PHP语言开发的跨平台开源程序,带你玩转大型商城系统,你的商城你做主！</div>
</div>
<div class="standard-course__price"><i>￥</i>298.00</div>
</div>
<div class="standard-course">
<div class="standard-course__cover"><img src="imgs/course5.jpg" alt=""></div>
<div class="standard-course__plan">
<div class="standard-course__plan-capation">零基础入门Android语法与界面系列课程</div>
<div class="standard-course__plan-times">41课<span class="standard-course__plan-times-person">442人在学</span></div>
<div class="standard-course__plan-category">带你通过系统的学习，完成从“会做网页”到“做出好的动态网页”的蜕变</div>
</div>
<div class="standard-course__price"><i>￥</i>399.00</div>
</div>
<div class="standard-course">
<div class="standard-course__cover"><img src="imgs/course6.jpg" alt=""></div>
<div class="standard-course__plan">
<div class="standard-course__plan-capation">Android网络与数据储存系列课程</div>
<div class="standard-course__plan-times">20课<span class="standard-course__plan-times-person">54人在学</span></div>
<div class="standard-course__plan-category">带你通过系统的学习，完成从“会做网页”到“做出好的动态网页”的蜕变</div>
</div>
<div class="standard-course__price"><i>￥</i>599.00</div>
</div>
<div class="standard-course">
<div class="standard-course__cover"><img src="imgs/course7.jpg" alt=""></div>
<div class="standard-course__plan">
<div class="standard-course__plan-capation">Android从界面到数据存储系列课程</div>
<div class="standard-course__plan-times">38课<span class="standard-course__plan-times-person">9人在学</span></div>
<div class="standard-course__plan-category">带你通过系统的学习，完成从“会做网页”到“做出好的动态网页”的蜕变</div>
</div>
<div class="standard-course__price"><i>￥</i>599.00</div>
</div>
<div class="standard-course">
<div class="standard-course__cover"><img src="imgs/course8.jpg" alt=""></div>
<div class="standard-course__plan">
<div class="standard-course__plan-capation">Java基础语法与常用工具类系列课程</div>
<div class="standard-course__plan-times">27课<span class="standard-course__plan-times-person">182人在学</span></div>
<div class="standard-course__plan-category">带你通过系统的学习，完成从“会做网页”到“做出好的动态网页”的蜕变</div>
</div>
<div class="standard-course__price"><i>￥</i>229.00</div>
</div>
<div class="standard-course">
<div class="standard-course__cover"><img src="imgs/course9.jpg" alt=""></div>
<div class="standard-course__plan">
<div class="standard-course__plan-capation">ios基础语法(OC&Swift)与常用控件系列课程</div>
<div class="standard-course__plan-times">16课<span class="standard-course__plan-times-person">122人在学</span></div>
<div class="standard-course__plan-category">带你通过系统的学习，完成从“会做网页”到“做出好的动态网页”的蜕变</div>
</div>
<div class="standard-course__price"><i>￥</i>299.00</div>
</div>
</div>
</div>
<!-- .course>.-list>(.standard-course>.-cover>img[src=imgs/course$.jpg]^.-plan>.-plan-capation{前端小白入门系列课程}+.-plan-times{33课}>span.-plan-times-person{368人在学}^.-plan-category{带你通过系统的学习，完成从“会做网页”到“做出好的动态网页”的蜕变}^.-price>i{￥}+{499.00})*9|bem --> <footer class="footer">
<div class="footer-box">
<div class="footer-link">
<a href="" class="footer-link__item">网站首页</a>
<a href="" class="footer-link__item">企业合作</a>
<a href="" class="footer-link__item">人才招聘</a>
<a href="" class="footer-link__item">联系我们</a>
<a href="" class="footer-link__item">讲师招募</a>
<a href="" class="footer-link__item">常见问题</a>
<a href="" class="footer-link__item">意见反馈</a>
<a href="" class="footer-link__item">慕课大学</a>
<a href="" class="footer-link__item">友情衔接</a>
</div>
<div class="footer-copy">Copyright © 2016 imooc.com All Rights Reserved | 京ICP备 13046642号-2</div>
<div class="footer-share">
<a href="" class="footer-share__item footer-share__item_i_1">
<span class="footer-share__item-img" style="display: none;"></span>
</a>
<a href="" class="footer-share__item footer-share__item_i_2">
</a>
<a href="" class="footer-share__item footer-share__item_i_3">
</a>
</div>
</div>
</footer>
<!-- footer.footer>.footer-link>a.-item{网站首页}+a.-item{企业合作}+a.-item{人才招聘}+a.-item{联系我们}+a.-item{讲师招募}+a.-item{常见问题}+a.-item{意见反馈}+a.-item{慕课大学}+a.-item{友情衔接}^.footer-copy{Copyright © 2016 imooc.com All Rights Reserved | 京ICP备 13046642号-2}+.footer-share>(a.-item_i_$>.-item-img-$)*3|bem -->
</body>
</html>
css
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}
/*header*/
.header {
height: 60px;
background-color: #000;
position: relative;
}
.header .logo {
width: 128px;
height: 40px;
margin: 10px 25px;
background: url(../imgs/logo.png) no-repeat center;
background-size: cover;
float: left;
}
.header .nav {
height: 100%;
float: left;
}
.header .nav__item {
display: inline-block;
padding: 0 25px;
float: left;
height: 60px;
line-height: 60px;
color: #fff;
font-size: 14px;
}
.header .nav__item:hover {
background-color: #363c41;
}
.header .nav__item_icon_new {
background-color: #363c41;
}
.header .search {
position: relative;
height: 40px;
margin: 10px 25px;
float: right;
}
.header .search__input {
width: 265px;
border: 0;
outline: 0;
box-sizing: border-box;
border-bottom: 1px solid #606468;
text-indent: 72px;
font-size: 14px;
color: #fff;
background-color: #000;
height: 40px;
line-height: 40px;
}
.header .search::before {
content: '前端入门';
display: block;
position: absolute;
width: 72px;
top: 0;
left: 0;
text-align: center;
height: 30px;
line-height: 30px;
font-size: 12px;
background-color: #2b333b;
color: #5c646b;
}
.header .search__submit {
display: block;
position: absolute;
right: 25px;
top: 4px;
background-position: 0 0;
width: 22px;
height: 22px;
background-image: url('../imgs/icon-1-sprite_w22.png');
}
.header .profile {
margin-right: 15px;
float: right;
}
.header .profile__item {
display: block;
position: relative;
margin-right: 1px;
width: 60px;
height: 60px;
float: left;
}
.header .profile__shop:before,
.header .profile__message:before {
content: ' ';
display: block;
position: absolute;
top: 19px;
left: 19px;
background-position: 0 -44px;
width: 22px;
height: 22px;
background-image: url('../imgs/icon-1-sprite_w22.png');
}
.header .profile__shop:before {
background-image: url('../imgs/shopcar.png');
background-position: 1px -214px;
}
.header .profile__ava {
margin: 10px;
width: 40px;
height: 40px;
border-radius: 50%;
background: url(../imgs/ava.jpg) no-repeat center;
background-size: cover;
}
/*banner*/
.banner {
background: url(../imgs/bg.jpg) no-repeat center;
background-size: cover;
height: 560px;
position: relative;
}
/*course*/
.course {
height: 990px;
background-color: #fff;
position: relative;
}
.course .course__list {
width: 1200px;
margin: 0 auto;
height: 560px;
position: relative;
top: -120px;
}
.course .course__list:after {
content: ' ';
display: block;
font-size: 0;
line-height: 0;
clear: both;
zoom: 1;
}
.course .course__list .standard-course {
width: 285px;
height: 300px;
float: left;
margin: 0 20px 34px 0;
box-shadow: 0 4px 8px rgba(7, 17, 27, 0.1);
position: relative;
border-radius: 4px;
background-color: #fff;
}
.course .course__list .standard-course:before {
content: ' ';
display: block;
width: 98%;
height: 3px;
position: absolute;
left: 1%;
bottom: -5px;
box-shadow: 0 8px 16px rgba(7, 17, 27, 0.2);
border-radius: 4px;
background-color: #fff;
}
.course .course__list .standard-course:after {
content: ' ';
display: block;
width: 96%;
height: 3px;
position: absolute;
left: 2%;
bottom: -11px;
box-shadow: 0 8px 16px rgba(7, 17, 27, 0.2);
border-radius: 4px;
background-color: #fff;
}
.course .course__list .standard-course:nth-child(4n) {
margin-right: 0;
}
.course .course__list .standard-course__cover {
height: 110px;
}
.course .course__list .standard-course__cover img {
width: 100%;
border-radius: 4px;
}
.course .course__list .standard-course__plan {
position: absolute;
top: 100px;
box-sizing: border-box;
width: 285px;
padding: 30px 25px 0 25px;
background-image: url('../imgs/titlebg.png');
transition: all 1s;
}
.course .course__list .standard-course__plan-capation {
font-weight: 700;
color: #07111b;
font-size: 16px;
height: 24px;
line-height: 24px;
}
.course .course__list .standard-course__plan-times {
padding-top: 30px;
padding-bottom: 12px;
border-bottom: 1px solid #d9dde1;
color: #959aa0;
font-size: 12px;
}
.course .course__list .standard-course__plan-times-person {
margin-left: 1rem;
}
.course .course__list .standard-course__plan-category {
padding-top: 12px;
font-size: 12px;
color: #959aa0;
height: 24px;
line-height: 24px;
}
.course .course__list .standard-course:hover .standard-course__plan {
top: 30px;
}
.course .course__list .standard-course:last-of-type {
left: 50%;
margin-left: -142.5px;
}
.course .course__list .standard-course__price {
position: absolute;
bottom: 0;
width: 260px;
padding-bottom: 14px;
padding-top: 33px;
padding-left: 25px;
background-color: #fff;
color: red;
font-size: 12px;
height: 30px;
line-height: 30px;
}
.course .course__list .standard-course__price i {
font-style: normal;
vertical-align: super;
padding: 0 1px;
}
.footer {
height: 98px;
background-color: #000;
position: relative;
}
.footer .footer-box {
width: 1200px;
margin: 0 auto;
position: relative;
font-size: 12px;
}
.footer .footer-link {
height: 12px;
line-height: 12px;
padding: 30px 0 14px 45px;
}
.footer .footer-link__item {
display: inline-block;
margin-right: 30px;
float: left;
color: #959aa0;
}
.footer .footer-link__item:hover {
color: #fff;
}
.footer .footer-copy {
height: 12px;
line-height: 12px;
padding: 0 0 0 45px;
color: #959aa0;
}
.footer .footer-share {
position: absolute;
right: 0;
top: 33px;
width: 135px;
height: 32px;
}
.footer .footer-share__item {
display: block;
margin-right: 13px;
float: left;
width: 32px;
height: 32px;
border-radius: 50%;
background-image: url('../imgs/footer-sprite.png');
}
.footer .footer-share__item_i_1 {
background-position: 0 -280px;
position: relative;
}
.footer .footer-share__item_i_1:hover .footer-share__item-img {
display: block !important;
}
.footer .footer-share__item-img {
position: absolute;
top: -220px;
left: -68px;
display: inline-block;
width: 170px;
height: 210px;
background-position: -1px -2px;
/*box-shadow: 1px 1px */
background-image: url('../imgs/footer-sprite.png');
}
.footer .footer-share__item_i_2 {
background-position: 0 -320px;
}
.footer .footer-share__item_i_3 {
background-position: 0 -364px;
}
.footer .footer-share__item:hover {
background-color: rgba(255, 255, 255, 0.4);
}
老师，当鼠标移到课程那块弹出内容时顶部为什么会多出一条线，如图所示
1回答
-
将简介部分定位初始值设置的小一些，就可以看出效果了：
简介部分内容背景颜色是透明的，而图片是带有颜色的，所以显示出来的线条是图片的边，建议给简介部分添加背景颜色为白色：
自己动手添加测试下。
祝学习愉快！
0
相似问题