recommend区
来源：3-9 作业题
qq_鸭绿桥第一帅哥_0
2019-04-11 13:42:03
问题一，怎样使banner区的背景图片露出来？
问题二，怎样实现鼠标触碰时，.recommend-course__desc的文字上划？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3-9</title>
<link rel="stylesheet" type="text/css" href="css/3-9.css">
</head>
<body>
<!-- 头部导航 -->
<header class="header">
<div class="logo"></div>
<nav 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>
</nav>
<div class="profile">
<a href="" class="profile__item profile__phone"></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>
<!-- banner区 -->
<div class="banner">
</div>
<!-- recommend区 -->
<div class="recommend">
<div class="recommend-course">
<div class="recommend-course__cover"><img src="imgs/course1.jpg" alt=""></div>
<div class="recommend-course__plan">
<h2 class="caption">HTML5与CSS3实现动态网页</h2>
<div class="recommend-course__times">24课<span class="recommend-course__preson">106人在学</span></div>
<div class="recommend-course__desc">HTML5与CSS3实现动态网页HTML5与CSS3实现动态网页</div>
</div>
<div class="recommend-course__price"><i>¥</i>399.00</div>
</div>
<div class="recommend-course">
<div class="recommend-course__cover"><img src="imgs/course2.jpg" alt=""></div>
<div class="recommend-course__plan">
<h2 class="caption">HTML5与CSS3实现动态网页</h2>
<div class="recommend-course__times">24课<span class="recommend-course__preson">106人在学</span></div>
<div class="recommend-course__desc">HTML5与CSS3实现动态网页HTML5与CSS3实现动态网页</div>
</div>
<div class="recommend-course__price"><i>¥</i>399.00</div>
</div>
<div class="recommend-course">
<div class="recommend-course__cover"><img src="imgs/course3.jpg" alt=""></div>
<div class="recommend-course__plan">
<h2 class="caption">HTML5与CSS3实现动态网页</h2>
<div class="recommend-course__times">24课<span class="recommend-course__preson">106人在学</span></div>
<div class="recommend-course__desc">HTML5与CSS3实现动态网页HTML5与CSS3实现动态网页</div>
</div>
<div class="recommend-course__price"><i>¥</i>399.00</div>
</div>
<div class="recommend-course">
<div class="recommend-course__cover"><img src="imgs/course4.jpg" alt=""></div>
<div class="recommend-course__plan">
<h2 class="caption">HTML5与CSS3实现动态网页</h2>
<div class="recommend-course__times">24课<span class="recommend-course__preson">106人在学</span></div>
<div class="recommend-course__desc">HTML5与CSS3实现动态网页HTML5与CSS3实现动态网页</div>
</div>
<div class="recommend-course__price"><i>¥</i>399.00</div>
</div>
<div class="recommend-course">
<div class="recommend-course__cover"><img src="imgs/course5.jpg" alt=""></div>
<div class="recommend-course__plan">
<h2 class="caption">HTML5与CSS3实现动态网页</h2>
<div class="recommend-course__times">24课<span class="recommend-course__preson">106人在学</span></div>
<div class="recommend-course__desc">HTML5与CSS3实现动态网页HTML5与CSS3实现动态网页</div>
</div>
<div class="recommend-course__price"><i>¥</i>399.00</div>
</div>
<div class="recommend-course">
<div class="recommend-course__cover"><img src="imgs/course6.jpg" alt=""></div>
<div class="recommend-course__plan">
<h2 class="caption">HTML5与CSS3实现动态网页</h2>
<div class="recommend-course__times">24课<span class="recommend-course__preson">106人在学</span></div>
<div class="recommend-course__desc">HTML5与CSS3实现动态网页HTML5与CSS3实现动态网页</div>
</div>
<div class="recommend-course__price"><i>¥</i>399.00</div>
</div>
<div class="recommend-course">
<div class="recommend-course__cover"><img src="imgs/course7.jpg" alt=""></div>
<div class="recommend-course__plan">
<h2 class="caption">HTML5与CSS3实现动态网页</h2>
<div class="recommend-course__times">24课<span class="recommend-course__preson">106人在学</span></div>
<div class="recommend-course__desc">HTML5与CSS3实现动态网页HTML5与CSS3实现动态网页</div>
</div>
<div class="recommend-course__price"><i>¥</i>399.00</div>
</div>
<div class="recommend-course">
<div class="recommend-course__cover"><img src="imgs/course8.jpg" alt=""></div>
<div class="recommend-course__plan">
<h2 class="caption">HTML5与CSS3实现动态网页</h2>
<div class="recommend-course__times">24课<span class="recommend-course__preson">106人在学</span></div>
<div class="recommend-course__desc">HTML5与CSS3实现动态网页HTML5与CSS3实现动态网页</div>
</div>
<div class="recommend-course__price"><i>¥</i>399.00</div>
</div>
<div class="recommend-course">
<div class="recommend-course__cover"><img src="imgs/course9.jpg" alt=""></div>
<div class="recommend-course__plan">
<h2 class="caption">HTML5与CSS3实现动态网页</h2>
<div class="recommend-course__times">24课<span class="recommend-course__preson">106人在学</span></div>
<div class="recommend-course__desc">HTML5与CSS3实现动态网页HTML5与CSS3实现动态网页</div>
</div>
<div class="recommend-course__price"><i>¥</i>399.00</div>
</div>
<div class="recommend-course">
<div class="recommend-course__cover"><img src="imgs/course1.jpg" alt=""></div>
<div class="recommend-course__plan">
<h2 class="caption">HTML5与CSS3实现动态网页</h2>
<div class="recommend-course__times">24课<span class="recommend-course__preson">106人在学</span></div>
<div class="recommend-course__desc">HTML5与CSS3实现动态网页HTML5与CSS3实现动态网页</div>
</div>
<div class="recommend-course__price"><i>¥</i>399.00</div>
</div>
</div>
<!-- footer区 -->
<footer class="footer">
<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"></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>
</footer>
</body>
</html>
body{ padding:0;margin:0;}
a{
text-decoration: none;
}
// 布局样式
#layout(@name) {
& when(@name=header){
height: 60px;
#bg-color(black);
}
& when(@name=banner){
height: 560px;
/* background-color: #6a6593; */
}
& when(@name=recommend){
height: 900px;
#bg-color(white);
}
& when(@name=courses){
height: 686px;
#bg-color(pale);
}
& when(@name=footer){
height: 98px;
#bg-color(black);
}
}
#layout(@name){
position: relative;
}
#bg-color(@name) {// 背景色定义
& when(@name=black) {
background-color: #000;
}
& when(@name=white) {
background-color: #fff;
}
& when(@name=pale) {
background-color: #f3f5f7;
}
& when(@name=night) {
background-color: #4d555d;
}
& when(@name=dark) {
background-color: #2b333b;
}
& when(@name=light){
background-color: #363c41;
}
}
#ft-size(@name){// 字体大小定义
& when(@name=small){
font-size: 12px;
}
& when(@name=medium){
font-size: 14px;
}
& when(@name=lagre){
font-size: 16px;
}
& when(@name=title){
font-size: 32px;
}
& when(@name=big){
font-size: 22px;
}
}
#color(@name){//字体颜色定义
& when(@name=dark){
color: #5c646b;
}
& when(@name=black){
color: #141914;
}
& when(@name=white){
color: #fbfbfb;
}
& when(@name=yellow){
color: #ffcc33;
}
& when(@name=red){
color: red;
}
& when(@name=weak){
color: #959aa0;
}
}
// 小样式定义
#course-box(@name){
& when(@name=recommend){
width: 285px;
height: 342px;
position: absolute;
top: -210px;
box-shadow: 0 8px 16px rgba(7,17,27,.2);
background-color: #fff;
#bg-img("course-b-bg.png");
#center-h(285px);
#decorate-bottom();
float: left;
}
& when (@name=standard){
width: 285px;
height: 300px;
float: left;
box-shadow: 0 4px 8px rgba(7,17,27,.1);
background-color: #fff;
position: relative;
margin: 0 20px 34px 0;
#bg-img("course-s-bg.png");
#decorate-bottom();
&:nth-child(4n){
margin-right: 0;
}
&:nth-child(9){
margin-left: 309px;
}
}
}
#decorate-bottom(){
&:before{
content: ' ';
display: block;
width: 98%;
left: 1%;
bottom: -5px;
height: 3px;
background-color: #fff;
position: absolute;
border-radius: 4px;
box-shadow: 0 8px 16px rgba(7,17,27,.2);
}
&:after{
content: ' ';
display: block;
width: 96%;
left: 2%;
bottom: -11px;
height: 3px;
background-color: #fff;
position: absolute;
border-radius: 4px;
box-shadow: 0 8px 16px rgba(7,17,27,.2);
}
}
// 功能函数定义
#radius(@radius:50%){
border-radius: @radius
}
#square(@w:10px){
width: @w;
height: @w;
}
#bg-img(@src){
background-image: url("../imgs/@{src}") ;
background-repeat: no-repeat;
}
#center-h(@width){
left:50%;
margin-left:@width*-.5;
}
#line-height(@height){
height: @height;
line-height: @height;
}
// 无参数函数定义
.fl(){
float: left;
}
.fr(){
float: right;
}
.clearfix(){
&:after{
content: ' ';
display: block;
font-size: 0;
line-height: 0;
clear: both;
zoom:1;
}
}
.cover-background(){
background+_: no-repeat center;
background-size: cover;
}
// 模块样式
.header{
#layout(header);
@standard-height:36px;
.logo{
.fl();
width: 128px;
background+_: url(../imgs/logo.png) ;
.cover-background();
margin: 12px 25px;
height: @standard-height;
}
.nav{
.fl();
height: 100%;
&__item{
display: block;
float: left;
line-height: 60px;
padding: 0 25px;
#color(white);
#ft-size(medium);
&:hover{
#bg-color(light)
}
&_icon_new{
#bg-color(light);
#bg-img("icon-new.png");
background-position: 90px 10px ;
:after{
content: ' ';
}
}
}
}
.search{
padding-right: 25px;
position: relative;
.fr();
margin: 12px 25px;
height: @standard-height;
&__input{
width: 242px;
border:none;
background-color: #000;
height: 36px;
outline: none;
color: #fff;
border-bottom: 1px solid #ccc;
}
&::before{
content: '前端入门';
display: block;
position: absolute;
width: 72px;
height: 30px;
line-height: 30px;
text-align: center;
#bg-color(dark);
#color(dark);
#ft-size(small)
}
&__submit{
display: block;
position: absolute;
right: 25px;
top: 4px;
background-position: 0 0 ;
#square(22px);
#bg-img("icon-1-sprite_w22.png");
}
}
.profile{
.fr();
&__item{
display: block;
float: left;
width: 60px;
height: 60px;
position: relative;
&:hover{
#bg-color(light)
}
}
&__phone:before,&__message:before{
content: ' ';
display: block;
position: absolute;
left: 19px;
top: 19px;
#square(22px);
#bg-img("icon-1-sprite_w22.png");
}
&__phone:before{
#bg-img("shopcar.png");
background-position: 0 -213px ;
}
&__message:before{
background-position: 0 -44px ;
}
&__ava{
width: 36px;
height: 36px;
margin: 12px;
#bg-color(light);
#radius(50%);
#bg-img("ava.jpg");
background-size: 100% 100%;
}
}
}
.banner{
#layout(banner);
background-position: center;
background-size: cover;
#layout(banner);
#bg-img("bg.jpg");
}
.recommend{
width: 1200px;
position: absolute;
top: -210px;
margin: 0 auto;
background-color: transparent;
#layout(recommend);
.recommend-course{
#course-box(standard);
&__cover{
width: 100%;
height: 172px;
overflow: hidden;
img{
width: 100%;
}
}
.caption{
margin: 0;
padding: 0 35px;
#line-height(24px);
#ft-size(lagre);
#color(black);
}
&__plan{
position: absolute;
width: 100%;
top: 135px;
height: 125px;
overflow: hidden;
padding: 30px 0px 20px 0px;
#bg-img("titlebg.png");
transition: all 1s;
}
&__times{
padding: 30px 35px;
padding-bottom: 8px;
#line-height(22px);
#ft-size(small);
#color(weak);
}
&__preson{
padding-left: 1em;
}
&__desc{
border-top: 1px solid #d9dde1;
padding-top: 10px;
overflow: hidden;
margin: 0 35px;
#ft-size(small);
#color(weak);
}
&__price{
position: absolute;
bottom: 0;
padding: 20px 35px;
#ft-size(small);
#color(red);
#line-height(30px);
i{
font-style: normal;
padding: 0 3px;
vertical-align: super;
}
}
}
&:hover .recommend-course__plan{
top:80px;
};
}
.footer{
#layout(footer);
#ft-size(small);
.footer-link{
width: 1200px;
margin: 0 auto;
height: 12px;
padding: 30px 0 16px 40px;
&__item{
display: inline-block;
margin-right: 30px;
float: left;
#color(white);
}
}
.footer-copy{
width: 1200px;
margin: 0 auto;
height: 12px;
padding: 0 0 0 40px;
#color(weak);
}
.footer-share{
position: absolute;
width: 135px;
height: 32px;
right: 40px;
top: 34px;
&__item{
color: #787d82;
padding-left: 13px;
display: inline-block;
.fl();
#square(32px);
#bg-img('icon-6-sprit_w32.png');
&:nth-child(2){
background-position: 0 -32px;
}
&:nth-child(3){
background-position: 0 -64px;
}
}
}
}写回答
1回答
-
你好，
1、recommend区域不设置背景颜色就可以显示出banner的图片：
效果：
2、这个效果实现的是正确的，只不过是需要移入每一个小盒子，简介部分整体上移，可以给价格设置宽高以及背景颜色，将文字遮盖住，鼠标移入的时候上移显示出来即可，参考：
现在老师改变的是css，自己可以对应到less中。
可以重新测试下，祝学习愉快！
0
相似问题
为什么footer区会这样？
回答 1