跟着黑马学CSS打卡第二天(设置精品推荐 recommend）

最新推荐文章于 2024-07-25 08:14:42 发布
最新推荐文章于 2024-07-25 08:14:42 发布
阅读量74 收藏
点赞数
分类专栏： css学习打卡 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74385740/article/details/133841451
版权

提示：个人记录学习使用 

前言

第三天写博客

一、设置精品推荐 recommend区域整体布局

一、设置背景和行内格式

1、index.html

    <!-- 精品推荐 recommend -->
    <div class="recommend wrapper">
        <h3>精品推荐</h3>
        <ul>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">Node.js</a></li>
            <li><a href="#">Ajax</a></li>
            <li><a href="#">Vue2.0</a></li>
            <li><a href="#">Vue3.0</a></li>
            <li><a href="#">TypeScrip</a></li>
            <li><a href="#">Recart</a></li>
        </ul>
        <a href="#" class="modify" >修改兴趣</a>
    </div>

2、index.css

1、 .recommend

注意细节：1、外边距隔开与banner的距离；2、内边距给两边内容留空白；3、box-shadow: 设置阴影

/* 精品推荐 recommend */
.recommend {
    display: flex;
    /* 外边距 */
    margin-top: 11px;
    /* 内边距 */
    padding: 0px 20px;

    height: 60px;
    background-color: #fff;
    /* 阴影 */
    box-shadow: 0px 1px 2px 0px rgba(211, 211, 211, 0.5);
    /* 行高 垂直居中 */
    line-height: 60px;
}

 

二、设置标题样式

1、.recommend h3

注意细节：无

/* 设置标题样式 */
.recommend h3 {
    font-size: 18px;
    color: #00a4ff;
    font-weight: 400;
}

 三、设置ul样式

1、.recommend ul

注意细节：1、flex:1 可以让ul整体在正中间，另外两个标签贴边

/* 设置 ul 整体样式 */
.recommend ul {
    /* 除去标题和修改兴趣的尺寸，父级剩余尺寸都给 ul 实现修改兴趣被挤到最右侧 */
    flex: 1;
    /* 让所有 li 在同一行显示 */
    display: flex;
}

2、 .recommend ul li a

注意细节：1、a标签的内外边距设置；2、目的是让边框和字体高度一样，所以边框加给a

/* a 标签 边和字一样高，所以边框加给 a 标签 */
.recommend ul li a {
    /* 内边距  */
    padding: 0px 24px;
    /* 不能设置外边距，会导致边框线显示位置错误 */
    /* margin: 0px 24px; */
    border-right: 1px solid #e0e0e0;

    font-size: 18px;
}

3、 .recommend ul li:last-child a

注意细节：1、li:last-child a: 找到最后一个a标签；2、border-right: 0 消除最后一个边框线

/* 单独处理最后一个 a 标签 */
.recommend ul li:last-child a {
    border-right: 0;
}

四、设置尾标签

1、.modify

注意细节：1、给a标签单独加标签，单独设置样式，不会和其他a标签产生冲突

/* 修改兴趣标签 */
.modify {
    font-size: 16px;
    color: #00a4ff;
}

 五、阶段效果图

五、设置精品课程 course区域

一、 设置整体布局

tip：重复内容可以靠js来简化，这里暂时不写

1、index.html

(wk，原来可以有颜色区分的啊，之前一直没选语言所以没有。。。算了前面的不改了，主要是想在c++方向多花时间，这个当娱乐学就不那么纠结了（强迫症难受

    <!-- 精品课程 course -->
    <div class="course wrapper">
        <!-- 标题 -->
        <div class="hd">
            <h3>精品推荐</h3>
            <a href="#" class="more">查看全部</a>
        </div>
        <!-- 具体内容 -->
        <div class="bd">
            <ul>
                <li>
                    <a href="#">
                        <div class="pic"><img src="./uploads/course01.png" alt=""></div>
                        <div class="text">
                            <h4>JavaScript数据看板项目实战</h4>
                            <p><span>高级</span> . <i>1125</i>人在学习</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic"><img src="./uploads/course02.png" alt=""></div>
                        <div class="text">
                            <h4>Vue.js实战——面经全端项目</h4>
                            <p><span>高级</span> . <i>1125</i>人在学习</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic"><img src="./uploads/course03.png" alt=""></div>
                        <div class="text">
                            <h4>玩转Vue全家桶，iHRM人力资源项目</h4>
                            <p><span>高级</span> . <i>2726</i>人在学习</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic"><img src="./uploads/course04.png" alt=""></div>
                        <div class="text">
                            <h4>js实战医疗项目——优医问诊</h4>
                            <p><span>高级</span> . <i>9465</i>人在学习</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic"><img src="./uploads/course05.png" alt=""></div>
                        <div class="text">
                            <h4>Vue.小程序实战：小兔鲜电商小程序项目</h4>
                            <p><span>高级</span> . <i>1125</i>人在学习</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic"><img src="./uploads/course06.png" alt=""></div>
                        <div class="text">
                            <h4>前端框架Flutter开发实战</h4>
                            <p><span>高级</span> . <i>7194</i>人在学习</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic"><img src="./uploads/course07.png" alt=""></div>
                        <div class="text">
                            <h4>熟练使用React.js——极客园H5项目</h4>
                            <p><span>高级</span> . <i>2703</i>人在学习</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic"><img src="./uploads/course08.png" alt=""></div>
                        <div class="text">
                            <h4>熟练使用React.js——极客园PC端项目</h4>
                            <p><span>高级</span> . <i>1346</i>人在学习</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic"><img src="./uploads/course09.png" alt=""></div>
                        <div class="text">
                            <h4>前端实用技术，Fetch API 实战</h4>
                            <p><span>高级</span> . <i>6247</i>人在学习</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic"><img src="./uploads/course10.png" alt=""></div>
                        <div class="text">
                            <h4>前端高级Node.js零基础入门教程</h4>
                            <p><span>高级</span> . <i>9625</i>人在学习</p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

2、index.css

 注意事项：

/* 精品课程 course */
.course {
    margin-top: 15px;
}

 二、设置公共标题

1、.hd（公共类）

注意细节：1、设置为公共类，便于复用；2、利用主轴对齐分开头尾标签

/* 标题 公共类，与其他区域共用 */
.hd {
    display: flex;
    /* 主轴对齐方式 */
    justify-content: space-between;
    height: 60px;
    /* 垂直居中 */
    line-height: 60px;
}

2、.hd h3

注意细节：无

/* 小标题 */
.hd h3 {
    font-size: 21px;
    font-weight: 400;
}

3、.hd .more（公共尾标签）

注意细节：1、利用内边距防止文字和图片重叠；

/* 公共尾标签 */
.hd .more {
    /* 设置有内边距，隔开箭头 */
    padding-right: 20px;
    /* 平铺的原因是因为父级是flex布局，a标签已经成为一个弹性盒子，侧轴默认拉伸 */
    background: url(../images/more.png) no-repeat right center;

    font-size: 14px;
    color: #999;
}

4、.bd ul

注意细节：1、flex-wrap: wrap: 弹性换行 ；2、利用主轴对齐来间隔水平标签

/* ul 大框架 */
.bd ul {
    display: flex;
    /* 弹性换行 */
    flex-wrap: wrap;
    /* 主轴对齐方式 水平间距 */
    justify-content: space-between;
}

5、 .bd li（公共类）

注意细节：1、设置下边距来隔开垂直方向的边距

/* 课程内容 - 公共类 */
.bd li {
    width: 228px;
    height: 271px;
    background-color: pink;
    /* 上下间距 */
    margin-bottom: 14px;
}

 6、.bd li .pic

注意细节：无

/* 图片 */
.bd li .pic {
    height: 156px;
}

7、 .bd li .text

注意细节：1、设置内边距限制行内文本位置

/* a 标签内的文本样式 */
.bd li .text {
    /* 内边距 */
    padding: 20px;
    height: 115px;
    background-color: #fff;
}

 8、.bd li .text h4

注意细节：1、固定高度可以解决字多换行对其他标签的影响；2、设置底 内边距可以隔开上下两个标签的位置

.bd li .text h4 {
    /* 固定高度40.换行也不会影响下一个标签的位置 */
    height: 40px;
    /* 底内边距 */
    margin-bottom: 13px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

 9、.bd li .text p

注意细节：无

/* 文本框架 */
.bd li .text p {
    font-size: 14px;
    line-height: 20px;
    color: #999;
}

10、 .bd li .text p span

注意细节：无

/* 小标题 */
.bd li .text p span {
    color: orange;
}

11、 .bd li .text p i

注意细节：无

/* 文本内容 */
.bd li .text p i {
    /* i 标签默认倾斜，取消倾斜 */
    font-style: normal;
}

 三、阶段效果图

总结

分享歌词：
たとえ　愛されなくてもいいよ　君がいるなら，
就算不被爱着也没关系 因为有你陪伴在我身边，
私は　まだ　歌っていられるよ，
所以我还能继续歌唱喔，
大丈夫　愛されなくてもいいよ 君が笑うなら，
没问题的 就算不被爱着也没关系 只要你能展露笑容的话，
ずっと　ここで　初音ミクでいられるの！
我就能一直在这里 作为初音未来存在着。
分享ピノキオピー/初音ミク的单曲《愛されなくても君がいる (就算没有爱 只要有你就好)》

米库打油
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS3案例黑马程序员—学成在线
Scrow1204的博客
10-31 9126
要点： 1.直接只用&lt;header&gt;&lt;nav&gt;等CSS3新标签 2.使用新的盒子模型border-box内减式模型，不用再来回设置盒子大小 3.过渡效果和动画效果的联合使用，不考虑兼容 base.css *{ box-sizing: border-box; /*全部定义为内减式盒子模型*/ } a{ text-decoration: none; } bod...
CSS3 box-shadow 效果大全（内阴影，外阴影，三边阴影，双边阴影，单边阴影，细线描边…）
热门推荐
油墨香^-^的博客
06-22 4万+
CSS3 box-shadow 属性用来描述一个元素的一个或多个阴影效果，该属性几乎可以让你完成你想要的任何阴影效果。然而 box-shadow 属性语法和取值非常灵活，对于新手有点不容易理解。今天总结一下语法和 box-shadow 属性各种阴影效果。 语法 CSS 代码: /* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | bl
CSS 伪类选择器 last-child 和 last-of-type 的区别
将PHP Web开发进行到底
09-01 2905
在日常前端开发工作中，总有最后一个同类元素进行特殊的样式处理需求。我们一般会用到 CSS 伪类:last-child 或:last-of-type，但有时会遇到不起作用的效果，基于此，本文通过示例代码详细介绍二者的区别，希望对大家的学习和工作有所帮助。...
first-child和last-child的一点理解
keanuhrb的博客
05-20 8390
在看CSS时，看到first-child和last-child，看了点资料，谈谈自己的感想。 first-child选择器用于选取属于其父元素的首个子元素的指定选择器。 last-child选择器用于选取属于其父元素的最后一个子元素的指定选择器。 我们来看两个简单的例子： a: first-child {color：yellow;} p: last-child {background: pink;} 从这两个例子我们可以看出first-child和last-child的含义。这两个选择器实际上是一种
CSS 学成网（二）
林彬的专栏
06-01 6211
学成网小圆点 /* 小圆点模块 */ .circle { width: 180px; height: 22px; /* background-color: pink; */ position: absolute; bottom: 10px; left: 50%; margin-left: -90px; } .circle li { float: left; ...
【黑马程序员】5、学成在线网页制作_2023新版前端Web开发HTML5+CSS3+移动Web视频教程_笔记
qq_37581764的博客
07-15 3097
网站根目录：存档网站的第一层文件夹，内部包含当前网站的所有素材。
html css support安装设置,Support — CSS HTML Validator for Windows
weixin_35426348的博客
06-10 3222
Need Your Registration Key?Online DocumentationLicense AgreementsIntegration SupportForum VIP CodeThe VIP code you'll need to register for a forum account (if you don't already have one) is 73205.CSS ...
Python实现音乐推荐系统【跟着迪哥学python】
王斯的博客
01-07 1万+
Python实现音乐推荐系统 文章目录Python实现音乐推荐系统推荐系统数据读取对每一个用户，分别统计他的播放总量对于每一首歌，分别统计它的播放总量看看目前的排行情况取其中一部分数（按大小排好序的了，这些应该是比较重要的数据），作为我们的实验数据加入音乐详细信息我们现有的数据清洗数据集展示最流行的歌曲最受欢迎的releases最受欢迎的歌手用户播放过歌曲量的分布开始构建推荐系统简单暴力，排行榜单推荐，对新用户来说解决冷启动问题基于歌曲相似度的推荐计算相似度得到推荐结果基于矩阵分解（SVD）的推荐使用SVD
[附相应图片]HTML+CSS学成网首页制作基础案例
weixin_43682519的博客
01-23 8241
这是一个比较基础的html和css基础案例实战，适合刚学习完各种html控件和css标签的应用。
spark学习7-mllib als推荐引擎学习
Cumu Blog
10-15 9802
继续上一篇学习spark 本次将介绍下如何利用mllib进行商品或者用户的推荐，具体用到的算法是ALS（交替二乘法） 推荐算法介绍 推荐算法可以分为：UserCF(基于用户的协同过滤)、ItemCF(基于商品的协同过滤)、ModelCF(基于模型的协同过滤)，具体介绍见：http://blog.csdn.net/ygrx/article/details/15501679 spark中的协同
News_recommend-master_Recommend_推荐_
10-03
本项目"News_recommend-master_Recommend_"聚焦于构建一个能够根据用户喜好实时推荐内容的推荐系统，旨在提高用户的信息获取效率，提升用户体验。下面将详细探讨推荐系统的概念、原理及其在新闻推荐中的应用。 推荐...
协同过滤算法实现的Movies_Recommend电影推荐系统源码
03-25
项目概述：Movies_Recommend 是一款采用协同过滤算法实现的电影推荐系统。该系统主要由 Python 语言开发，辅以 HTML、JavaScript 和 CSS，以提供用户友好的界面和交互体验。 技术细节： - 主要编程语言：Python - ...
recommend.zip_Recommend算法_推荐数据集_推荐算法_电商
07-15
在电商环境中，推荐系统还可以结合其他策略，如热门商品推荐、基于社交网络的推荐、混合推荐（结合多种推荐策略）等，以提升推荐的准确性和多样性。 总的来说，"recommend.zip"提供的资源是学习和实践推荐算法的好...
recommend:推荐系统学习集合
03-11
在这个“recommend:推荐系统学习集合”中，我们可以深入探究推荐系统的原理、实现方法以及相关开源项目。 推荐系统的核心算法分为基于内容的推荐和协同过滤推荐两大类。基于内容的推荐通过分析用户过去喜欢的项目...
yifanyang-search_recommend-master_Recommend_java_搜索推荐_
09-30
本项目“yifanyang-search_recommend-master_Recommend_java_搜索推荐_”专注于利用ElasticSearch7进行相关性搜索，并通过Spark MLlib构建个性化推荐系统。以下是这两个核心技术的详细说明。 **Elasticsearch7...
css实现线条中间高亮，左右两边模糊（linear-gradient的运用）
贵林之恋的博客
07-24 318
效果： CSS实现边框底部渐变色的方法:(最简单的一种) 参考文章：CSS实现边框底部渐变色的4种方法_css下边框渐变-CSDN博客
css 作业 2
最新发布
没有 bug 的代码是不完美的！
07-25 665
写完了
CSS 创建：从入门到精通
wjs2024的博客
07-24 392
CSS是网页设计和开发的重要组成部分。通过掌握CSS的创建和应用，您可以更好地控制网页的布局和样式，创建出既美观又实用的网站。不断实践和学习，您将能够熟练地使用CSS来实现各种设计效果。
CSS相关记录
oThrowsException的博客
07-24 754
它接受两个参数，分别表示在X轴和Y轴上的缩放比例。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。CSS的transform属性是一个功能强大的工具，允许你对HTML元素应用2D或3D转换效果，包括旋转、缩放、倾斜和移动等。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。scaleX()、scaleY()、scaleZ()：这些函数分别用于沿X轴、Y轴和Z轴缩放元素。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值