1:简介文字移入时不显示2：刷新时移入课程模块有偏移3：移入微信图标，二维码怎么显示

首页课程实战体系课手记专栏慕课教程

来源：3-9 作业题

qq_紫藤追寻_0

2018-11-13 22:55:06

4：鼠标移入头像时背景颜色无变化5：所有课程怎样居中显示

html:

<!DOCTYPE html>

<html>

<head>

<title>less-items</title>

</head>

<body>

</div>

</div>

</header>

<!-- <div class="caption">

<div class="caption__text">迈向编程之路成就职业梦想</div>

</div>

<div class="tips__title">系统化学习</div>

</div>

</div>

<div class="tips__text">学练测一体</div>

</div>

</div>

</div> -->

</div>

<div class="standard-course__plan-caption">前端小白入门系列课程</div>

<div class="standard-course__plan-desc-1">锄禾日当午，汗滴禾下土。谁之盘中餐，粒粒皆辛苦。</div>

</div>

</div>

<div class="standard-course__plan-caption">HTML5与CSS3实现动态网页系统课程</div>

<div class="standard-course__plan-desc-1">锄禾日当午，汗滴禾下土。谁之盘中餐，粒粒皆辛苦。</div>

</div>

</div>

<div class="standard-course__plan-caption">PHP从零基础到原声项目开发系列课程</div>

<div class="standard-course__plan-desc-1">锄禾日当午，汗滴禾下土。谁之盘中餐，粒粒皆辛苦。</div>

</div>

</div>

<div class="standard-course__plan-caption">ECShop3从基本使用到二次开发系列课程</div>

<div class="standard-course__plan-desc-1">锄禾日当午，汗滴禾下土。谁之盘中餐，粒粒皆辛苦。</div>

</div>

</div>

<div class="standard-course__plan-caption">零基础入门Android语法与界面系列课程</div>

<div class="standard-course__plan-desc-1">锄禾日当午，汗滴禾下土。谁之盘中餐，粒粒皆辛苦。</div>

</div>

</div>

<div class="standard-course__plan-caption">Android网络与数据存储系列课程</div>

<div class="standard-course__plan-desc-1">锄禾日当午，汗滴禾下土。谁之盘中餐，粒粒皆辛苦。</div>

</div>

</div>

<div class="standard-course__plan-caption">Android从界面到数据存储系列课程</div>

</div>

</div>

<div class="standard-course__plan-caption">Java基础语法与常用工具类系列课程</div>

<div class="standard-course__plan-desc-1">锄禾日当午，汗滴禾下土。谁之盘中餐，粒粒皆辛苦。</div>

</div>

</div>

<div class="standard-course__plan-caption">IOS基础语法与常用控件系列课程</div>

<div class="standard-course__plan-desc-1">锄禾日当午，汗滴禾下土。谁之盘中餐，粒粒皆辛苦。</div>

</div>

</div>

</div>

</a>

</div>

</a>

</footer>

<!-- <script type="text/javascript" src="js/less-items.js">

</script> -->

</body>

</html>

css:

* {

margin: 0;

padding: 0;

}

a {

text-decoration: none;

}

/*整体布局*/

/*背景颜色*/

/*字体大小*/

/*文字颜色*/

/*书签阴影*/

/*定义圆角*/

/*定义图片位置*/

.header {

height: 60px;

background-color: #000;

position: relative;

}

.header .logo {

width: 128px;

height: 36px;

background: url(../imgs/logo.png) no-repeat center;

margin: 12px 25px;

background-size: cover;

float: left;

}

.header .nav {

float: left;

height: 100%;

}

.header .nav__item {

display: block;

height: 60px;

line-height: 60px;

float: left;

padding: 0 25px;

color: #fbfbfb;

font-size: 14px;

}

.header .nav__item:hover {

background-color: #363c41;

}

.header .nav__item_icon_new {

background-color: #363c41;

}

.header .nav__item-icon {

position: absolute;

display: inline-block;

top: 14px;

width: 16px;

height: 16px;

background-position: 0 0;

}

.header .search {

float: right;

padding-right: 25px;

position: relative;

margin: 12px 25px;

height: 36px;

}

.header .search__input {

width: 240px;

border: none;

outline: none;

border-bottom: 1px solid #ccc;

background-color: #000;

height: 36px;

line-height: 36px;

}

.header .search::before {

content: "前端入门";

display: block;

width: 72px;

text-align: center;

position: absolute;

left: 0;

top: 0;

background-color: #2b333b;

color: #5c646b;

font-size: 12px;

height: 30px;

line-height: 30px;

}

.header .search__submit {

display: black;

position: absolute;

right: 45px;

top: 4px;

background-position: 0 0 ;

width: 22px;

height: 22px;

}

.header .profile {

float: right;

}

.header .profile__item {

display: block;

position: relative;

float: left;

width: 60px;

height: 60px;

margin-right: 1px;

}

.header .profile__shopcar:before {

content: ' ';

display: block;

position: absolute;

left: 19px;

top: 19px;

width: 22px;

height: 22px;

}

.header .profile__notice:before {

content: ' ';

display: block;

position: absolute;

left: 19px;

top: 19px;

width: 22px;

height: 22px;

}

.header .profile__shopcar:before {

background-position: 0px -210px;

}

.header .profile__notice:before {

background-position: 0 -44px;

}

.header .profile__ava {

width: 36px;

height: 36px;

margin: 12px 20px 12px 20px;

background-size: 100%;

border-radius: 50%;

}

.header .profile__shopcar:hover,

.header .profile__notice:hover,

.header .profile__ava:hover {

background-color: #363c41;

}

.banner {

background-position: center;

background-size: cover;

height: 560px;

position: relative;

}

.course {

height: 996px;

background-color: #fff;

position: relative;

}

.course__list {

width: 1200px;

margin: 0 auto;

position: relative;

}

.course__list:after {

content: ' ';

display: block;

font-size: 0px;

line-height: 0px;

clear: both;

zoom: 1;

}

.course__list .standard-course {

width: 285px;

height: 308px;

float: left;

margin: 0 20px 34px 0;

top: -120px;

position: relative;

box-shadow: 0 8px 16px rgba(7, 17, 27, 0.1);

background-color: #fff;

/*阴影*/

}

.course__list .standard-course:before {

content: "";

display: block;

width: 98%;

height: 3px;

left: 1%;

bottom: -5px;

position: absolute;

box-shadow: 0 8px 16px rgba(7, 17, 27, 0.2);

border-radius: 4px;

background-color: #fff;

}

.course__list .standard-course:after {

content: "";

display: block;

width: 96%;

height: 3px;

left: 2%;

bottom: -11px;

position: absolute;

box-shadow: 0 8px 16px rgba(7, 17, 27, 0.2);

border-radius: 4px;

background-color: #fff;

}

.course__list .standard-course:nth-child(4n) {

margin-right: 0;

}

.course__list .standard-course:nth-last-child(1) {

left: 50%;

margin-left: -142.5px;

}

.course__list .standard-course__cover {

width: 100%;

height: 109px;

overflow: hidden;

}

.course__list .standard-course__cover img {

width: 100%;

}

.course__list .standard-course__plan {

position: absolute;

top: 109px;

width: 225px;

padding: 30px 30px 0 30px;

transition: all 1s;

}

.course__list .standard-course__plan-caption {

font-size: 16px;

color: #07111b;

height: 22px;

line-height: 22px;

font-weight: bold;

}

.course__list .standard-course__plan-times {

padding-top: 20px;

font-size: 12px;

color: #959aa0;

height: 36px;

line-height: 36px;

}

.course__list .standard-course__plan-person {

padding-left: 1em;

}

.course__list .standard-course__plan-desc {

border-top: 1px solid #d9dde1;

padding-top: 8px;

}

.course__list .standard-course__plan-desc-1 {

font-size: 12px;

color: #959aa0;

height: 36px;

line-height: 36px;

display: none;

}

.course__list .standard-course__plan-desc-1:hover {

display: block;

}

.course__list .standard-course__price {

position: absolute;

bottom: 1px;

padding: 20px 35px;

color: red;

height: 30px;

line-height: 30px;

}

.course__list .standard-course__price i {

font-style: normal;

padding: 0 2px;

vertical-align: super;

}

.course__list .standard-course:hover .standard-course__plan {

top: 80px;

}

.footer {

height: 96px;

background-color: #000;

position: relative;

font-size: 12px;

}

.footer .footer-link {

width: 1200px;

margin: 0 auto;

height: 12px;

line-height: 12px;

padding: 30px 0 16px 40px;

}

.footer .footer-link__item {

display: inline-block;

margin-right: 30px;

color: #959aa0;

float: left;

}

.footer .footer-link__item:hover {

color: #fff;

}

.footer .footer-copy {

width: 1200px;

margin: 0 auto;

height: 12px;

line-height: 12px;

padding: 0 0 0 40px;

color: #5c646b;

}

.footer .footer-share {

position: absolute;

width: 135px;

height: 36px;

right: 370px;

top: 34px;

}

.footer .footer-share__item {

display: block;

margin-right: 13px;

float: right;

width: 32px;

height: 32px;

}

.footer .footer-share__item_i_qq {

background-position: 0 42px;

opacity: 1;

}

.footer .footer-share__item_i_weibo {

background-position: 0 84px;

opacity: 1;

}

.footer .footer-share__item_i_wechat {

position: relative;

background-position: 0 126px;

opacity: 1;

/*.code-wechat{

#bg-img('footer-sprite.png');

display:block;

position: absolute;

top:210px;

width:170px;

height:285px;

} */

}

.footer .footer-share__item_i_qq:hover,

.footer .footer-share__item_i_weibo:hover,

.footer .footer-share__item_i_wechat:hover {

opacity: 0.6;

}

less:

//通用样式

margin:0;

padding:0;

}

text-decoration:none;

}

.fl(){

float:left;

}

.fr(){

float:right;

}

.clearfix(){

&:after{

content:' ';

display:block;

font-size:0px;

line-height: 0px;

clear:both;

zoom:1;

}

//布局样式

#layout(@name){

&when(@name=header){

height:60px;

#bg-color(black);

}

&when(@name=banner){

height:560px;

}

&when(@name=course){

height:996px;

#bg-color(white);

}

&when(@name=footer){

height:96px;

#bg-color(black);

}

position:relative;

}/*整体布局*/

#bg-color(@name){

&when(@name=black){

background-color:#000;

}

&when(@name=white){

background-color:#fff;

}

&when(@name=light){

background-color:#363c41;

}

&when(@name=dark){

background-color:#2b333b;

}

}/*背景颜色*/

#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;

}

&when(@name=small){

font-size:12px;

}

}/*字体大小*/

#color(@name){

&when(@name=dark){

color:#5c646b;

}

&when(@name=white){

color:#fbfbfb;

}

&when(@name=black){

color:#07111b;

}

&when(@name=weak){

color:#959aa0;

}

&when(@name=red){

color:red;

}

&when(@name=dark){

color:#5c646b;

}

}/*文字颜色*/

//课程模块样式定义

#course-box(standard){

@width:285px;

width:@width;

height:308px;

float:left;

margin:0 20px 34px 0;

position:relative;

top:-120px;

position:relative;

box-shadow:0 8px 16px rgba(7,17,27,.1);

#bg-color(white);

#bg-img("titlebg.png");

#decorate-bottom();/*阴影*/

&:nth-child(4n){

margin-right:0;

}

&:nth-last-child(1){

#center-h(@width);

}

#decorate-bottom(){

&:before{

content:"";

display:block;

width:98%;

height:3px;

left:1%;

bottom:-5px;

position:absolute;

box-shadow:0 8px 16px rgba(7,17,27,.2);

#radius(4px);

#bg-color(white);

}

&:after{

content:"";

display:block;

width:96%;

height:3px;

left:2%;

bottom:-11px;

position:absolute;

box-shadow:0 8px 16px rgba(7,17,27,.2);

#radius(4px);

#bg-color(white);

}

}/*书签阴影*/

//功能样式定义

#radius(@radius:50%){

border-radius:@radius;

}/*定义圆角*/

#center-h(@width){

left:50%;

margin-left:@width*-.5;

}

#bg-img(@src){

background-image:url("../imgs/@{src}");

}/*定义图片位置*/

#square(@w:10px){

width:@w;

height:@w;

}

#line-height(@h){

height:@h;

line-height: @h

}

.cover-background(){

background-size:cover;

background+_:no-repeat center;

}

//模块样式-初步

.header{

#layout(header);

.logo{

width:128px;

height:36px;

background+_:url(../imgs/logo.png);

margin:12px 25px;

.cover-background();

.fl();

}

.nav{

.fl();

height:100%;

&__item{

display:block;

#line-height(60px);

.fl();

padding:0 25px;

#color(white);

#ft-size(medium);

&:hover{

#bg-color(light);

}

&_icon_new{

#bg-color(light);

}

&-icon{

position:absolute;

display: inline-block;

top:14px;

width:16px;

height:16px;

#bg-img("icon-new.png");

background-position: 0 0;

}

.search{

.fr();

padding-right: 25px;

position:relative;

margin:12px 25px;

height:36px;

&__input{

width:240px;

border:none;

outline:none;

border-bottom:1px solid #ccc;

#bg-color(black);

#line-height(36px);

}

&::before{

content: "前端入门";

display: block;

width:72px;

text-align: center;

position: absolute;

left:0;

top:0;

#bg-color(dark);

#color(dark);

#ft-size(small);

#line-height(30px);

}

&__submit{

display:black;

position: absolute;

right:45px;

top:4px;

background-position: 0 0 ;

#bg-img("icon-1-sprite_w22.png");

#square(22px);

}

.profile{

.fr();

&__item{

display:block;

position: relative;

.fl();

#square(60px);

margin-right: 1px;

}

&__shopcar:before{

content:' ';

display:block;

position:absolute;

left:19px;

top:19px;

#square(22px);

#bg-img("shopcar.png");

}

&__notice:before{

content:' ';

display:block;

position:absolute;

left:19px;

top:19px;

#square(22px);

#bg-img("icon-1-sprite_w22.png");

}

&__shopcar:before{

background-position:0px -210px;

}

&__notice:before{

background-position:0 -44px;

}

&__ava{

#square(36px);

margin:12px 20px 12px 20px;

#bg-img("ava.jpg");

background-size: 100%;

#radius(50%);

}

&__shopcar:hover,

&__notice:hover,

&__ava:hover{

#bg-color(light);

}

.banner{

#bg-img("bg.jpg");

background-position:center;

background-size:cover;

#layout(banner);

}

.course{

#layout(course);

&__list{

width:1200px;

margin:0 auto;

position:relative;

.clearfix();

.standard-course{

#course-box(standard);

&__cover{

width:100%;

height:109px;

overflow:hidden;

img{

width:100%;

}

&__plan{

position:absolute;

top:109px;

width:285px-60px;

padding:30px 30px 0 30px;

#bg-img("titlebg.png");

transition:all 1s;

&-caption{

#ft-size(lagre);

#color(black);

#line-height(22px);

font-weight: bold;

}

&-times{

padding-top:20px;

#ft-size(small);

#color(weak);

#line-height(36px);

}

&-person{

padding-left:1em;

}

&-desc{

border-top:1px solid #d9dde1;

padding-top:8px;

}

&-desc-1{

#ft-size(small);

#color(weak);

#line-height(36px);

display:none;

&:hover{

display:block;

}

&__price{

position:absolute;

bottom:1px;

padding:20px 35px;

#ft-size(large);

#color(red);

#line-height(30px);

font-style:normal;

padding:0 2px;

vertical-align:super;

}

&:hover .standard-course__plan{

top:80px;

}

.footer{

#layout(footer);

#ft-size(small);

.footer-link{

width:1200px;

margin:0 auto;

#line-height(12px);

padding:30px 0 16px 40px;

&__item{

display:inline-block;

margin-right:30px;

#color(weak);

.fl();

&:hover{

color:#fff;

}

.footer-copy{

width:1200px;

margin:0 auto;

#line-height(12px);

padding:0 0 0 40px;

#color(dark);

}

.footer-share{

position:absolute;

width:135px;

height:36px;

right:370px;

top:34px;

&__item{

display:block;

margin-right:13px;

.fr();

#square(32px);

#bg-img('footer-sprite.png');

&_i_qq{

background-position:0 42px;

opacity: 1;

}

&_i_weibo{

background-position:0 84px;

opacity: 1;

}

&_i_wechat{

position: relative;

background-position:0 126px;

opacity: 1;

/*.code-wechat{

#bg-img('footer-sprite.png');

display:block;

position: absolute;

top:210px;

width:170px;

height:285px;

} */

}

&_i_qq:hover{

}

&_i_qq:hover,

&_i_weibo:hover,

&_i_wechat:hover{

opacity: 0.6;

}

js:

var wechat=document.getElementById("wechat");

var code-wechat=document.getElementById("code-wechat");

wechat.onmouseover=function(){

code-wechat.style.display="block";

}

wechat.onmouseover=function(){

code-wechat.style.display="none";

}

</script>

写回答

1回答

好帮手慕星星

2018-11-14

已采纳

1、footer中缺少半个引号，如下：

2、因为你的简介文字设置了display:none;为隐藏，所以没哟显示出来。建议让简介文字不是隐藏的状态，给价格添加宽度和背景颜色遮盖住简介文字即可，参考：

可以将简介文字移动的幅度大一些，也就是将top值减少一些，参考：

3、刷新时移入课程模块有偏移这个效果老师是没有测试出来的，不知道同学在什么情况下或者是使用什么浏览器测试出来的，建议同学可以使用Chrome浏览器测试下。

4、底部的微信二维码并没有设置图片以及位置，所以没有效果，参考：

在less中设置的二维码样式：

开始是隐藏状态，通过js代码设置：

1）在js中声明变量时，不能使用-连接，可以使用下划线。

2）移出事件应该是onmouseout。

鼠标移入时显示效果：

下面应该还有一个小三角形指向微信小图标，自己可以使用border边框来实现。可以看到二维码也是透明显示的，这样是不对的，是因为父元素使用了opacity属性，子元素也会有透明显示，建议给父元素改变透明度可以使用rgba()。

5、建议给顶部右侧的头像外层再加一个盒子，移入这个盒子时，背景颜色发生改变。因为现在这个头像大小都是图片填充的，margin值是不会有背景颜色的变化的。

6、现在course课程区域整体就是居中显示的，设置了固定宽度，配合margin:0 auto;居中显示是没有问题的。

自己修改测试下，祝学习愉快！

0 学习 · 5012 问题

查看课程

相似问题

老师，写css时子元素集成父元素的样式，想让子元素不继承父元素的样式

回答 3

老师，为什么每次刷新的时候course还多了个动画？

回答 2

回答 1

回答 3

上次交的作业还有点问题

回答 1

打开慕课网App查看更多内容