课程盒子的伪类

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

课程盒子的伪类

来源：3-9 作业题

soso_crazy

2019-03-08 21:47:21

<!DOCTYPE html>

<head>

</head>

<body>

</nav>

</div>

</div>

</header>

<h2 class="caption">前端小白入门系列课程</h2>

</div>

</div>

<h2 class="caption">HTML5与CSS3实现动态网页</h2>

</div>

</div>

<h2 class="caption">PHP从零基础到原生项目开发系列</h2>

</div>

</div>

<h2 class="caption">前端小白入门系列课程</h2>

</div>

</div>

<h2 class="caption">前端小白入门系列课程</h2>

</div>

</div>

<h2 class="caption">前端小白入门系列课程</h2>

</div>

</div>

<h2 class="caption">Android网路与数据存储系列</h2>

</div>

</div>

<h2 class="caption">Java基础语法与常用工具</h2>

</div>

</div>

<h2 class="caption">iOS基础语法</h2>

</div>

</div>

</div>

</div>

</footer>

</body>

</html>

body {

margin: 0;

padding: 0;

}

a {

text-decoration: none;

}

//布局样式

#layout(@name) {

& when (@name=header) {

height: 60px;

#bg-color(black);

}

& when (@name=banner) {

height: 562px;

#bg-color(light);

}

& when (@name=recommend) {

width: 1224px;/* 代码中设置的recommend盒子宽度为80%，自己测试的时候可能效果是正确的，但是每个显示器的分辨率不同，80%的宽度就会不同，所以建议设置盒子为固定宽度 */

margin: 0 auto;

background-color: transparent;

position: relative;/*为什么recommend的定位要设置自身为relative而不是banner设为relative，recommend设为absolute？*/

bottom: 121px; /*这里不是根据banner底部的121px定位，为什么不设置banner为relative？？*/

}

/* recommend设置相对定位也可以设置显示位置，不需要设置相对于banner来定位。Bottom设置为121px，是相对于自身位置进行移动的，也就是自身原本所在的位置向上移动121px。 */

& when (@name=footer) {

height: 95px;

#bg-color(black);

}

//定义背景颜色

#bg-color(@name) {

& when (@name=black) {

background-color: #000000;

}

& when (@name=light) {

background-color: #a9a9a9;

}

& when (@name=white) {

background-color: #ffffff;

}

& when (@name=dark) {

background-color: #696969;

}

//定义背景图

#bg-image(@src) {

background-image: url("素材/@{src}");

background-repeat: no-repeat;

}

.cover-background() {

background+_: no-repeat center;

background-size: cover;

}

#square(@w:10px) {

width: @w;

height: @w;

}

//定义字体大小

#font-size(@name) {

& when (@name=small) {

font-size: 12px;

}

& when (@name=medium) {

font-size: 14px;

}

& when (@name=large) {

font-size: 16px;

}

& when (@name=title) {

font-size: 12px;

}

//定义字体颜色

#font-color(@name) {

& when (@name=black) {

color: #000000;

}

& when (@name=white) {

color: #ffffff;

}

& when (@name=gray) {

color: #808080;

}

& when (@name=red) {

color: #ff0000;

}

//定义字体行高

#line-height(@height) {

line-height: @height;

height: @height;

}

#decorate-bottom() {

&:before {

content: ' ';

display: block;

width: 98%;

left: 1%;

bottom: -5px;

height: 3px;

#bg-color(white);

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;

#bg-color(white);

position: absolute;

border-radius: 4px;

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

}

//课程盒子设置

#recommend-course {

#decorate-bottom();

width: 253px;

height: 308px;

text-align: left;

font-size: 16px;

margin: 10px;

display: inline-block;

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

#bg-color(white);

}

//无参数函数定义

.fl() {

float: left;

}

.fr() {

float: right;

}

.clearfix() {

&:after {

content: ' ';

display: block;

font-size: 0;

line-height: 0;

clear: both;

zoom: 1;

}

//模块样式

.header {

#layout(header);

.logo {

width: 123px;

height: 37px;

background+_: url("素材/logo.png");

.cover-background();

margin: 12px 54px 14px 26px;

.fl();

}

.nav {

.fl();

height: 100%;

&__item {

display: block;

float: left;

padding: 0 26px;

#font-color(white);

#font-size(medium);

#line-height(60px);

&:hover {

#bg-color(light);

}

&-icon-new {

#bg-color(light);

:after {

content: ' ';

}

.search {

padding-right: 25px; /*搜索的放大镜留的位置*/

margin: 11px 25px;

height: 37px;

position: relative;

.fr();

&_input {

width: 267px;

border: none;

border-bottom: 1px solid #ccc;

#bg-color(black);

#line-height(37px);

#font-color(white);

padding: 0;

margin: 0;

}

&::before {

content: '前端入门';

display: block;

position: absolute;

width: 74px;

text-align: center;

#line-height(32px);

#bg-color(light);

}

&_submit {

display: block;

position: absolute;

right: 25px;

top: 4px;

background-position: 0 0; /*取第一个小图标*/

#square(22px); /*切图：每个小图标都是宽22 高22*/

#bg-image(@src: 'icon-1-sprite_w22.png');

}

.profile {

.fr();

&_item {

display: block;

float: left;

#square(59px);

margin-right: 1px;

position: relative;

&:hover {

#bg-color(dark);

}

&_shoppingBag::before, &_bell::before {

content: ' ';

display: block;

position: absolute;

right: 19px;

top: 22px;

#square(22px);

}

&_shoppingBag::before {

#bg-image(@src: 'icon-1-sprite_w23.png');

background-position: 0 -44px;

}

&_bell::before {

#bg-image(@src: 'shopcar.png');

background-position: 0 -212px;

}

&_user {

#square(40px);

margin: 11px;

border-radius: 50%;

background+_: url("素材/ava.jpg");

.cover-background();

}

.banner {

background+_: url("素材/bg.jpg");

.cover-background();

width: 100%;

height: 562px;

background-size: cover;

}

.recommend {

#layout(recommend);

overflow: hidden;

font-size: 0;/* 设置font-size属性值为0是为了清除内联元素之间的间隙 */

text-align: center;

.recommend-course {

#recommend-course();

border-radius: 10px;

margin-right:16px;

&__cover {

border-radius: 10px 10px 0 0;

width: 100%;

height: 110px;

overflow: hidden;

img {

width: 100%;

}

&__plan{

width: 100%;

#bg-image(@src: 'titlebg.png');

top: 135px;

transition: all 1s;

}

&__plan .caption {

#font-size(medium);

#font-color(black);

margin-top: 33px;

margin-left: 28px;

}

&__times {

#font-size(small);

#font-color(gray);

margin-left: 28px;

margin-bottom: 15px;

}

&__preson {

padding-left: 14px;

}

&__price{

margin-top: 38px;

margin-left: 24px;

#font-color(red);

font-style: normal;

padding: 0 3px;

vertical-align: super;

}

&:hover .recommend-course__plan{

top: 80px;

}

.recommend-course:last-child{

margin: 0 auto;

}

.clearfix();

}

footer{

#layout(footer);

.footer-link{

width: 900px;

margin: 0 auto;

#line-height(16px);

&__item{

padding: 30px 0 15px 0;

display: inline-block;

margin-right: 30px;

float: left;

#font-color(gray);

#font-size(medium);

}

.footer-copy{

width: 500px;

#line-height(13px);

margin: 0 auto;

#font-size(small);

#font-color(gray);

}

.footer-share{

float: right;

width: 134px;

height: 40px;

&__item_i{

&_1{

display: inline-block;

width: 40px;

height: 32px;

#bg-image(@src:'icon-6-sprit_w32.png');

background-position: 0 0px;

}

&_2{

display: inline-block;

width: 40px;

height: 32px;

#bg-image(@src:'icon-6-sprit_w32.png');

background-position: 0 -32px;

}

&_3{

display: inline-block;

width: 40px;

height: 32px;

#bg-image(@src:'icon-6-sprit_w32.png');

background-position: 0 -64px;

}

课程盒子的伪类要怎么添加才可以给每个课程加下下面叠住的两个div的效果？

footer部分需要做哪些修改？

写回答

1回答

Miss路

2019-03-10

同学，你好。

你的代码好像不太完整，建议你上传完整的代码。或者直接提交作业，把自己的问题标注，批作业的老师会为你一一指出问题，并给出修改建议。

如果帮助到了你，欢迎采纳！

祝学习愉快！

0 学习 · 5012 问题

查看课程

相似问题

before，after这些伪类可以用hover改变背景图吗

回答 1

请问老师如何在有焦点状态时，用伪元素：：before写的“前端入门消失”?

回答 1

关于HEADE里的A元素

回答 2

实际项目中的问题？

回答 2

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

回答 3

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