分页的样式问题
来源：3-7 LESS样式-courses课程列表模块（分页）样式
qq_顺其自然_67
2018-09-05 19:12:27
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>index</title>
<link href="css/index.css" type="text/css" rel="stylesheet" />
<script src="js/less.min.js"></script>
</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>
</div>
<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_mail"></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>
<section>
<div class="banner">
<div class="caption">
<span class="caption_text">一条通往有前途</span>
<img src="images/qiantu.png" alt="">
<span class="caption_text">的职业路径</span>
</div>
<div class="tips">
<div class="tips_item tips_item_i_1">
<div class="tips_title">更精简</div>
<div class="tips_text">只学必要内容</div>
</div>
<div class="tips_item tips_item_i_2">
<div class="tips_title">更精简</div>
<div class="tips_text">只学必要内容</div>
</div>
<div class="tips_item tips_item_i_3">
<div class="tips_title">更精简</div>
<div class="tips_text">只学必要内容</div>
</div>
</div>
</div>
<div class="recommend">
<div class="recommend-course">
<div class="recommend-course_cover"><img src="images/b1.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.0</div>
</div>
</div>
<div class="courses">
<div class="courses_header">
<a href="" class="courses_item">全部</a>
<a href="" class="courses_item">前端开发</a>
<a href="" class="courses_item">后端开发</a>
<a href="" class="courses_item">移动开发</a>
<a href="" class="courses_item">运维&测试</a>
</div>
<div class="courses_list">
<div class="standard-course">
<div class="courses_list_cover">
<img src="images/s1.jpg" alt="">
</div>
<div class="plan">
<div class="caption">SSH框架探幽</div>
<div class="category">Spring / Struts2 / Hibernate</div>
<div class="-times">11课程<span class="-person">792学习</span></div>
</div>
</div>
<div class="standard-course">
<div class="courses_list_cover">
<img src="images/s2.jpg" alt="">
</div>
<div class="courses_list_cover_plan">
<div class="caption">SSH框架探幽</div>
<div class="category">Spring / Struts2 / Hibernate</div>
<div class="-times">11课程<span class="-person">792学习</span></div>
</div>
</div>
<div class="standard-course">
<div class="courses_list_cover">
<img src="images/s3.jpg" alt="">
</div>
<div class="courses_list_cover_plan">
<div class="caption">SSH框架探幽</div>
<div class="category">Spring / Struts2 / Hibernate</div>
<div class="-times">11课程<span class="-person">792学习</span></div>
</div>
</div>
<div class="standard-course">
<div class="courses_list_cover">
<img src="images/s4.jpg" alt="">
</div>
<div class="courses_list_cover_plan">
<div class="caption">SSH框架探幽</div>
<div class="category">Spring / Struts2 / Hibernate</div>
<div class="-times">11课程<span class="-person">792学习</span></div>
</div>
</div>
<div class="standard-course">
<div class="courses_list_cover">
<img src="images/s5.jpg" alt="">
</div>
<div class="courses_list_cover_plan">
<div class="caption">SSH框架探幽</div>
<div class="category">Spring / Struts2 / Hibernate</div>
<div class="-times">11课程<span class="-person">792学习</span></div>
</div>
</div>
<div class="standard-course">
<div class="courses_list_cover">
<img src="images/s6.jpg" alt="">
</div>
<div class="courses_list_cover_plan">
<div class="caption">SSH框架探幽</div>
<div class="category">Spring / Struts2 / Hibernate</div>
<div class="-times">11课程<span class="-person">792学习</span></div>
</div>
</div>
<div class="standard-course">
<div class="courses_list_cover">
<img src="images/s7.jpg" alt="">
</div>
<div class="courses_list_cover_plan">
<div class="caption">SSH框架探幽</div>
<div class="category">Spring / Struts2 / Hibernate</div>
<div class="-times">11课程<span class="-person">792学习</span></div>
</div>
</div>
<div class="standard-course">
<div class="courses_list_cover">
<img src="images/s8.jpg" alt="">
</div>
<div class="courses_list_cover_plan">
<div class="caption">SSH框架探幽</div>
<div class="category">Spring / Struts2 / Hibernate</div>
<div class="-times">11课程<span class="-person">792学习</span></div>
</div>
</div>
<div class="standard-course">
<div class="courses_list_cover">
<img src="images/s9.jpg" alt="">
</div>
<div class="courses_list_cover_plan">
<div class="caption">SSH框架探幽</div>
<div class="category">Spring / Struts2 / Hibernate</div>
<div class="-times">11课程<span class="-person">792学习</span></div>
</div>
</div>
<div class="standard-course">
<div class="courses_list_cover">
<img src="images/s10.jpg" alt="">
</div>
<div class="courses_list_cover_plan">
<div class="caption">SSH框架探幽</div>
<div class="category">Spring / Struts2 / Hibernate</div>
<div class="-times">11课程<span class="-person">792学习</span></div>
</div>
</div>
</div>
<div class="-pagination">
<a href="" class="-page_status_disabled">首页</a>
<a href="" class="-page_status_disabled">上一页</a>
<a href="" class="-number -page_status_current">1</a>
<a href="" class="-number -page_status_current">2</a>
<a href="" class="-number -page_status_current">3</a>
<a href="" class="-number -page_status_current">4</a>
<a href="" class="courses_page">下一页</a>
<a href="" class="courses_page">尾页</a>
</div>
</div>
</section>
<footer class="footer">
<div class="footer-link">
<a href="" class="-item">网站首页</a>
<a href="" class="-item">企业合作</a>
<a href="" class="-item">人才招聘</a>
<a href="" class="-item">联系我们</a>
<a href="" class="-item">讲师招募</a>
<a href="" class="-item">常见问题</a>
<a href="" class="-item">意见反馈</a>
<a href="" class="-item">慕课大学</a>
<a href="" class="-item">友情链接</a>
</div>
<div class="footer-copy">Copyright © 2016 imooc.com All Rights Reserved | 京ICP备 13046642号-2</div>
<div class="footer--shar">
<div class=""></div>
<a href="" class="item_i_1"></a>
<a href="" class="item_i_2"></a>
<a href="" class="item_i_3"></a>
</div>
</footer>
</body>
</html>
less样式
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: 200px;
#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,0.2);
background-color: #fff;
#bg-img("course-b-bg.png");
#center-h(@width);
#decorate-bottom();
#bg-color(white);
}
& when (@name=standard){
width: 224px;
height: 206px;
float: left;
box-shadow: 0 4px 8px rgba(7,17,27,.1);
background-color: #fff;
position: relative;
#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);
: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,&__mail:before{
content: ' ';
display: block;
position: absolute;
left: 19px;
top: 19px;
#square(22px);
#bg-img("icon-1-sprite_w22.png");
}
&__phone:before{
background-position: 0 -22px ;
}
&__message:before{
background-position: 0 -44px ;
}
&__mail:before{
background-position: 0 -66px ;
}
&__ava{
width: 36px;
height: 36px;
margin: 12px;
#bg-color(light);
#radius(50%);
}
}
}
.banner{
background-position: center;
background-size: cover;
#layout(banner);
#bg-img("banner.jpg");
.caption{
text-align: center;
padding-top: 50px;
#ft-size(title);
#color(white);
&__text{
display: inline-block;
}
img{
vertical-align: middle;
}
}
.tips{
position: absolute;
top: 20 8px;
width: 602px;
#center-h(602px);
&__item{
position: relative;;
float: left;
margin-right: 202px;
text-align: center;
#square(64px);
#bg-img("propaganda-h64.png");
}
&__title{
width: 200%;
position: absolute;
margin-left:-50%;
top: 74px;
#ft-size(big);
#color(yellow);
}
&__text{
width: 200%;
position: absolute;
margin-left:-50%;
top: 106px;
#ft-size(medium);
#color(white);
}
&__item:last-child{
margin-right: 0;
}
&__item:nth-child(2){
background-position: -80px 0;
}
&__item:nth-child(3){
background-position: -156px 0;
}
}
}
.recommend{
#layout(recommend);
.recommend-course{
#course-box(recommend);
.caption{
margin: 0;
padding: 0 35px;
#line-height(24px);
#ft-size(lagre);
#color(black);
}
&__cover{
width: 100%;
height: 172px;
overflow: hidden;
img{
width: 100%;
}
}
&__plan{
position: absolute;
width: 100%;
top: 135px;
padding: 30px 0px 20px 0px;
#bg-img("course-b-bg.png");
}
&__times{
padding: 0 35px;
padding-bottom: 8px;
#line-height(22px);
#ft-size(small);
#color(weak);
}
&__preson{
padding-left: 1em;
}
&__desc{
border-top: 1px solid #d9dde1;
padding-top: 8px;
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;
}
}
}
.courses{
#layout(courses);
overflow: hidden;
&__header{
text-align: center;
padding: 30px 0 34px 0;
#line-height(32px);
}
&__item{
display: inline-block;
padding: 0 12px;
margin: 0 12px;
#line-height(32px);
#color(black);
&:nth-child(1) , &:hover{
#color(white);
#bg-color(night);
}
}
&__list{
width: 1200px;
margin: 0 auto;
position: relative;
.clearfix();
.standard-course{
#course-box(standard);
&__plan{
position: absolute;
top: 90px;
width: 224px-40px;
padding: 16px 20px 0 20px;
#bg-img("course-s-bg.png");
}
&__cover{
height: 90px;
img{
width: 100%;
}
}
&__caption{
#ft-size(small);
#color(black);
#line-height(18px);
}
&__category{
#ft-size(small);
#color(weak);
#line-height(34px);
}
&__times{
padding-top: 10px;
#ft-size(small);
#color(weak);
#line-height(34px);
}
&__preson{
.fr();
}
}
}
.pagination{
text-align: center;
padding: 40px 0 60px 0;
#line-height(32px);
@disabled:#d6dade;
@link:#4d555d;
@hover:#fefefe;
&__page{
display: inline-block;
text-align: center;
margin: 0 12px;
color: @link;
&_status_disabled{
color: @disabled;
}
&_status_current{
color:@hover;
background: @link;
}
}
&__number{
#square(32px);
border-radius: 50%;
&:hover{
color:@hover;
background-color: @link;
}
}
}
}
.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;
}
}
}
}
我的decorate-bottom的伪样式，不起效果，只能一条白线，而且位置都是错位的
2回答
-
你好，如下，你上传的less，都是两个_哦，你可以在看下上传的这个。
祝学习愉快~
0 -
好帮手慕糖
2018-09-06
你好，1、你这里的html页面中，都是一个_，而less中是两个，所以你截图这个效果也是没有测试出来的，建议：可以对比下看HTML还有其他哪里不一致。
2、如下，这里应该传入的是值。
若能帮助你，望采纳。
祝学习愉快~
0h018-09-07
相似问题