为什么recommend区的代码不起作用？
来源：3-9 作业题
qq_鸭绿桥第一帅哥_0
2019-04-11 11:27:38
<!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动态网页带你走进前端的世界！</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动态网页带你走进前端的世界！</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动态网页带你走进前端的世界！</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动态网页带你走进前端的世界！</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动态网页带你走进前端的世界！</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动态网页带你走进前端的世界！</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动态网页带你走进前端的世界！</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动态网页带你走进前端的世界！</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动态网页带你走进前端的世界！</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动态网页带你走进前端的世界！</div>
</div>
<div class="recommend-course__price"><i>¥</i>399.00</div>
</div> -->
</div>
</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();
}
& when (@name=standard){
width: 224px;
height: 206px;
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(5n){
margin-right: 0;
}
}
}
#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{
#layout(recommend);
.recommend-course{
#course-box(recommend);
}
}写回答
2回答
-
你好，能够自己发现并解决问题很好哦，继续加油！
祝学习愉快！
0 -
qq_鸭绿桥第一帅哥_0
提问者
2019-04-11
解决了，谢谢
0
相似问题