黑马程序员-学成在线案例-推荐部分

已于 2022-11-05 14:13:26 修改
阅读量263 收藏 1
点赞数 1
文章标签： php 前端 css
于 2022-11-03 22:52:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73795744/article/details/127680109
版权

黑马程序员-学成在线案例-推荐部分

零、效果图

在这里插入图片描述

一、推荐栏
  1. 建立一个大盒子，分成三部分
  2. 分别浮动，使之排列在一排
  3. 调节标签之间的间距
    <div class="tuijian">
        <div class="jingping">精品推荐</div>
        <ul>
            <li><a href="#">JQuery</a></li>
            <li><a href="#">JQuery</a></li>
            <li><a href="#">JQuery</a></li>
            <li><a href="#">JQuery</a></li>
            <li><a href="#">JQuery</a></li>
            <li><a href="#">JQuery</a></li>
        </ul>
        <a href="#" class="xiu">修改兴趣</a>
    </div>
二、课程推荐
0.准备工作
  • 设置好大盒子，方便后续工作
1.标签头
  • 设置一个大盒子把两个标签装进去，方便浮动，其次方便后面的内容与他拉开边距
  • 两个标签左右浮动
    html
        <div class="box">
            <span>精品推荐</span>
            <p><a href="#" class="chakan">查看全部</a></p>
        </div>

css

.kou .box{
    height: 27px;
    width: 1200px;
}

.kou span{
    float: left;
    color: #494949;
    font-size: 20px;
}

.kou .chakan{
    float: right;
    padding-right: 35px;
    color: #a5a5a5;
    font-size: 12px;
}
2.课程推荐
  • 由于10个小盒子都很相似可以一起设置
  • 类名也可以设置后缀1、2、3、4等等
<div>
            <div class="ke1 ">
                <a href="#">
                    <img src="./images/course01.png" alt="">
                    <div class="zi1">Think PHP 5.0 博客系统实战项目演练</div>
                    <div class="zi2"><span class="zi21">高级</span>  •  1125人在学习</div>
                </a>
            </div>
            <div class="ke2 ">
                <a href="#">
                    <img src="./images/course02.png" alt="">
                    <div class="zi1">Think PHP 5.0 博客系统实战项目演练</div>
                    <div class="zi2"><span class="zi21">高级</span>  •  1125人在学习</div>
                </a>
            </div>
            <div class="ke3 ">
                <a href="#">
                    <img src="./images/course03.png" alt="">
                    <div class="zi1">Think PHP 5.0 博客系统实战项目演练</div>
                    <div class="zi2"><span class="zi21">高级</span>  •  1125人在学习</div>
                </a>
            </div>
            <div class="ke4 ">
                <a href="#">
                    <img src="./images/course04.png" alt="">
                    <div class="zi1">Think PHP 5.0 博客系统实战项目演练</div>
                    <div class="zi2"><span class="zi21">高级</span>  •  1125人在学习</div>
                </a>
            </div>
            <div class="ke5 ">
                <a href="#">
                    <img src="./images/course04.png" alt="">
                    <div class="zi1">Think PHP 5.0 博客系统实战项目演练</div>
                    <div class="zi2"><span class="zi21">高级</span>  •  1125人在学习</div>
                </a>
            </div>
            <div class="ke1 ">
                <a href="#">
                    <img src="./images/course01.png" alt="">
                    <div class="zi1">Think PHP 5.0 博客系统实战项目演练</div>
                    <div class="zi2"><span class="zi21">高级</span>  •  1125人在学习</div>
                </a>
            </div>
            <div class="ke2 ">
                <a href="#">
                    <img src="./images/course02.png" alt="">
                    <div class="zi1">Think PHP 5.0 博客系统实战项目演练</div>
                    <div class="zi2"><span class="zi21">高级</span>  •  1125人在学习</div>
                </a>
            </div>
            <div class="ke3 ">
                <a href="#">
                    <img src="./images/course03.png" alt="">
                    <div class="zi1">Think PHP 5.0 博客系统实战项目演练</div>
                    <div class="zi2"><span class="zi21">高级</span>  •  1125人在学习</div>
                </a>
            </div>
            <div class="ke4 ">
                <a href="#">
                    <img src="./images/course04.png" alt="">
                    <div class="zi1">Think PHP 5.0 博客系统实战项目演练</div>
                    <div class="zi2"><span class="zi21">高级</span>  •  1125人在学习</div>
                </a>
            </div>
            <div class="ke5 ">
                <a href="#">
                    <img src="./images/course04.png" alt="">
                    <div class="zi1">Think PHP 5.0 博客系统实战项目演练</div>
                    <div class="zi2"><span class="zi21">高级</span>  •  1125人在学习</div>
                </a>
            </div>

css

.kou .ke1{
    float: left;
    margin-top: 15px;
    width: 233px;
	height: 270px;
    background-color: #ffffff;
	box-shadow: 0px 2px 5px 0px 
		rgba(118, 118, 118, 0.5);
}

.kou .ke1 .zi1{
    margin: 25px auto;
    width: 184px;
    height: 32px;
    font-size: 14px;
    color: #050505;
}

.kou .ke1 .zi2{
    margin: 20px 84px 27px 23px;
    width: 121px;
    height: 12px;
    font-size: 12px;
}

.kou .ke1 .zi21{
    font-size: 12px;
    color: #ff7c2d;
}

.kou .ke2 {
    float: left;
    margin-top: 15px;
    width: 228px;
	height: 270px;
    background-color: #ffffff;
	box-shadow: 0px 2px 5px 0px 
		rgba(118, 118, 118, 0.5);
        margin-left: 10px;
}

.kou .ke2 .zi1{
    margin: 25px auto;
    width: 184px;
    height: 32px;
    font-size: 14px;
    color: #050505;
}

.kou .ke2 .zi2{
    margin: 20px 84px 27px 23px;
    width: 121px;
    height: 12px;
    font-size: 12px;
}

.kou .ke2 .zi21{
    font-size: 12px;
    color: #ff7c2d;
}


.kou .ke3{
    float: left;
    margin-top: 15px;
    width: 228px;
	height: 270px;
    background-color: #ffffff;
	box-shadow: 0px 2px 5px 0px 
		rgba(118, 118, 118, 0.5);
        margin-left: 10px;
}

.kou .ke3 .zi1{
    margin: 25px auto;
    width: 184px;
    height: 32px;
    font-size: 14px;
    color: #050505;
}

.kou .ke3 .zi2{
    margin: 20px 84px 27px 23px;
    width: 121px;
    height: 12px;
    font-size: 12px;
}

.kou .ke3 .zi21{
    font-size: 12px;
    color: #ff7c2d;
}


.kou .ke4{
    float: left;
    margin-top: 15px;
    width: 228px;
	height: 270px;
    background-color: #ffffff;
	box-shadow: 0px 2px 5px 0px 
		rgba(118, 118, 118, 0.5);
        margin-left: 10px;
}

.kou .ke4 .zi1{
    margin: 25px auto;
    width: 184px;
    height: 32px;
    font-size: 14px;
    color: #050505;
}

.kou .ke4 .zi2{
    margin: 20px 84px 27px 23px;
    width: 121px;
    height: 12px;
    font-size: 12px;
}

.kou .ke4 .zi21{
    font-size: 12px;
    color: #ff7c2d;
}


.kou .ke5{
    float: left;
    margin-top: 15px;
    width: 228px;
	height: 270px;
    background-color: #ffffff;
	box-shadow: 0px 2px 5px 0px 
		rgba(118, 118, 118, 0.5);
        margin-left: 10px;
}

.kou .ke5 .zi1{
    margin: 25px auto;
    width: 184px;
    height: 32px;
    font-size: 14px;
    color: #050505;
}

.kou .ke5 .zi2{
    margin: 20px 84px 27px 23px;
    width: 121px;
    height: 12px;
    font-size: 12px;
}

.kou .ke5 .zi21{
    font-size: 12px;
    color: #ff7c2d;
}
三、源码
    <div class="kou wrapper clearfix">
        <div class="box">
            <span>精品推荐</span>
            <p><a href="#" class="chakan">查看全部</a></p>
        </div>

        <div>
            <div class="ke1 ">
                <a href="#">
                    <img src="./images/course01.png" alt="">
                    <div class="zi1">Think PHP 5.0 博客系统实战项目演练</div>
                    <div class="zi2"><span class="zi21">高级</span>  •  1125人在学习</div>
                </a>
            </div>
            <div class="ke2 ">
                <a href="#">
                    <img src="./images/course02.png" alt="">
                    <div class="zi1">Think PHP 5.0 博客系统实战项目演练</div>
                    <div class="zi2"><span class="zi21">高级</span>  •  1125人在学习</div>
                </a>
            </div>
            <div class="ke3 ">
                <a href="#">
                    <img src="./images/course03.png" alt="">
                    <div class="zi1">Think PHP 5.0 博客系统实战项目演练</div>
                    <div class="zi2"><span class="zi21">高级</span>  •  1125人在学习</div>
                </a>
            </div>
            <div class="ke4 ">
                <a href="#">
                    <img src="./images/course04.png" alt="">
                    <div class="zi1">Think PHP 5.0 博客系统实战项目演练</div>
                    <div class="zi2"><span class="zi21">高级</span>  •  1125人在学习</div>
                </a>
            </div>
            <div class="ke5 ">
                <a href="#">
                    <img src="./images/course04.png" alt="">
                    <div class="zi1">Think PHP 5.0 博客系统实战项目演练</div>
                    <div class="zi2"><span class="zi21">高级</span>  •  1125人在学习</div>
                </a>
            </div>
            <div class="ke1 ">
                <a href="#">
                    <img src="./images/course01.png" alt="">
                    <div class="zi1">Think PHP 5.0 博客系统实战项目演练</div>
                    <div class="zi2"><span class="zi21">高级</span>  •  1125人在学习</div>
                </a>
            </div>
            <div class="ke2 ">
                <a href="#">
                    <img src="./images/course02.png" alt="">
                    <div class="zi1">Think PHP 5.0 博客系统实战项目演练</div>
                    <div class="zi2"><span class="zi21">高级</span>  •  1125人在学习</div>
                </a>
            </div>
            <div class="ke3 ">
                <a href="#">
                    <img src="./images/course03.png" alt="">
                    <div class="zi1">Think PHP 5.0 博客系统实战项目演练</div>
                    <div class="zi2"><span class="zi21">高级</span>  •  1125人在学习</div>
                </a>
            </div>
            <div class="ke4 ">
                <a href="#">
                    <img src="./images/course04.png" alt="">
                    <div class="zi1">Think PHP 5.0 博客系统实战项目演练</div>
                    <div class="zi2"><span class="zi21">高级</span>  •  1125人在学习</div>
                </a>
            </div>
            <div class="ke5 ">
                <a href="#">
                    <img src="./images/course04.png" alt="">
                    <div class="zi1">Think PHP 5.0 博客系统实战项目演练</div>
                    <div class="zi2"><span class="zi21">高级</span>  •  1125人在学习</div>
                </a>
            </div>
        </div>

    </div> 

.kou{
	/* height: 595px; */
    margin-top: 37px;
}

.kou .box{
    height: 27px;
    width: 1200px;
}

.kou span{
    float: left;
    color: #494949;
    font-size: 20px;
}

.kou .chakan{
    float: right;
    padding-right: 35px;
    color: #a5a5a5;
    font-size: 12px;
}

.kou .ke1{
    float: left;
    margin-top: 15px;
    width: 233px;
	height: 270px;
    background-color: #ffffff;
	box-shadow: 0px 2px 5px 0px 
		rgba(118, 118, 118, 0.5);
}

.kou .ke1 .zi1{
    margin: 25px auto;
    width: 184px;
    height: 32px;
    font-size: 14px;
    color: #050505;
}

.kou .ke1 .zi2{
    margin: 20px 84px 27px 23px;
    width: 121px;
    height: 12px;
    font-size: 12px;
}

.kou .ke1 .zi21{
    font-size: 12px;
    color: #ff7c2d;
}

.kou .ke2 {
    float: left;
    margin-top: 15px;
    width: 228px;
	height: 270px;
    background-color: #ffffff;
	box-shadow: 0px 2px 5px 0px 
		rgba(118, 118, 118, 0.5);
        margin-left: 10px;
}

.kou .ke2 .zi1{
    margin: 25px auto;
    width: 184px;
    height: 32px;
    font-size: 14px;
    color: #050505;
}

.kou .ke2 .zi2{
    margin: 20px 84px 27px 23px;
    width: 121px;
    height: 12px;
    font-size: 12px;
}

.kou .ke2 .zi21{
    font-size: 12px;
    color: #ff7c2d;
}


.kou .ke3{
    float: left;
    margin-top: 15px;
    width: 228px;
	height: 270px;
    background-color: #ffffff;
	box-shadow: 0px 2px 5px 0px 
		rgba(118, 118, 118, 0.5);
        margin-left: 10px;
}

.kou .ke3 .zi1{
    margin: 25px auto;
    width: 184px;
    height: 32px;
    font-size: 14px;
    color: #050505;
}

.kou .ke3 .zi2{
    margin: 20px 84px 27px 23px;
    width: 121px;
    height: 12px;
    font-size: 12px;
}

.kou .ke3 .zi21{
    font-size: 12px;
    color: #ff7c2d;
}


.kou .ke4{
    float: left;
    margin-top: 15px;
    width: 228px;
	height: 270px;
    background-color: #ffffff;
	box-shadow: 0px 2px 5px 0px 
		rgba(118, 118, 118, 0.5);
        margin-left: 10px;
}

.kou .ke4 .zi1{
    margin: 25px auto;
    width: 184px;
    height: 32px;
    font-size: 14px;
    color: #050505;
}

.kou .ke4 .zi2{
    margin: 20px 84px 27px 23px;
    width: 121px;
    height: 12px;
    font-size: 12px;
}

.kou .ke4 .zi21{
    font-size: 12px;
    color: #ff7c2d;
}


.kou .ke5{
    float: left;
    margin-top: 15px;
    width: 228px;
	height: 270px;
    background-color: #ffffff;
	box-shadow: 0px 2px 5px 0px 
		rgba(118, 118, 118, 0.5);
        margin-left: 10px;
}

.kou .ke5 .zi1{
    margin: 25px auto;
    width: 184px;
    height: 32px;
    font-size: 14px;
    color: #050505;
}

.kou .ke5 .zi2{
    margin: 20px 84px 27px 23px;
    width: 121px;
    height: 12px;
    font-size: 12px;
}

.kou .ke5 .zi21{
    font-size: 12px;
    color: #ff7c2d;
}
谢 肉肉、
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
学成在线项目-精品推荐模块
weixin_48370579的博客
12-07 177
学成在线项目-精品推荐模块 思路：大盒子包含三个小盒子，左边精品推荐，中间用小li包含小a ,右边是修改盒子。分析完毕，开干。 1、效果图如下 2、html代码如下： <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="./css/index.css"&g...
黑马程序员-学成在线案例-头部
weixin_73795744的博客
11-01 238
黑马程序员-学成在线案例-头部
黑马程序员-学成在线案例-版权部份
weixin_73795744的博客
11-06 310
黑马程序员-前端-pink老师的学成在线案例-版权部分。
前端第二篇-学成在线首页（作品）
DVchengxuyuan的博客
10-13 1305
学成在线页面制作 页面展示： 学成在线，是典型的企业级网站。 学习学成网的目的，是为了整体感知企业级网站布局流程，带着大家复习以前的知识 1.前期准备素材 学成在线PSD源文件 开发工具 = PS（切图） + sublime（代码） + chrome（测试） 2.前期准备工作 先把我们的前期准备工作做好， 我们本次采取结构与样式相分离思想。 创建 study 目录文件夹 (用于存放我们这个页面的相关内容)。 用vscode打开study目录文件夹. study 目
学成在线页面案例
TotoroChinchilla的博客
02-21 634
跟着bilibili的黑马程序员学习学成在线首页页面
2018年下半年黑马程序员课改之后最新Java企业级项目—学成在线学习平台。包含所有的资料和代码
03-27
《2018年下半年黑马程序员课改之后最新Java企业级项目——学成在线学习平台》 本项目基于Java技术栈，是2018年下半年黑马程序员进行课程改革后推出的企业级实战项目，名为“学成在线学习平台”。该平台旨在模拟真实...
学成在线PSD素材及代码
10-23
"学成在线"则可能是一个在线教育平台，提供这些资源作为其课程的一部分，帮助学员提升实际操作能力，更好地理解和应用所学知识。 总的来说，这个压缩包是一个宝贵的教育资源，无论你是想提升设计技能，还是增强HTML...
学成在线项目前端（图片、源码、psd图片）
04-01
在"学成在线"项目中，CSS可能被用来创建一致的视觉风格，如按钮样式、导航栏设计、页面响应式布局等，确保在不同设备上都能良好显示。 3. **JavaScript** 是一种客户端脚本语言，用于增加网页的交互性和动态功能。...
Java EE企业级应用开发教程（Spring Spring MVC MyBatis）（黑马程序员编著）
12-07
《Java EE企业级应用开发教程（Spring Spring MVC MyBatis）》是一本专注于Java企业级应用开发的专业教程，由黑马程序员编著。本书的核心在于深入浅出地介绍如何使用Java EE技术栈，特别是Spring、Spring MVC和...
学成网首页素材内含html，css，psd
08-14
标签"前端基础"表明这个资源聚焦于前端开发的基本技能，"html"和"css"是学习前端开发的必备技术，而"黑马"可能是指黑马程序员，这是一个知名的在线教育平台，以其高质量的编程课程而知名。因此，这个压缩包非常适合...
学成在线案例——黑马程序员pink老师\思路讲解\完整源代码
imByte的博客
08-14 6824
本文为跟随B站黑马程序员pink老师学习CSS时所写，文章讲解了学成在线首页的制作思路，并贴出了源代码，作为学习笔记分享给大家 如有错误，欢迎指出。如有侵权，联系删除 文章目录1. 案例准备工作2. CSS属性书写顺序3. 页面布局思路4. 确定版心5. 头部制作6. banner 制作7. 精品推荐小模块8. 精品推荐大模块9. 底部模块10. 完整源代码 总体制作效果如下，完整源代码见文末 1. 案例准备工作 本案例采取结构与样式相分离思想 images中存储所用图片 index.h.
学成在线-（精美推荐部分）
qq_40169837的博客
05-03 197
一·其中都有版心，分为两部分（左边部分和右边部分） 1.html部分 <!-- 精品推荐 --> <div class="recommend w"> <div class="rec-l"> <strong>精品推荐</strong>| <a href="#">jQuery<...
JavaWeb综合案例（黑马程序员2021年JavaWeb课程总结，所有功能均实现，包含数据库sql文件）
阿博的博客
09-25 9259
JavaWeb综合案例（黑马程序员2021年JavaWeb课程总结，所有功能均实现，包含数据库sql文件）
2023年最新黑马程序员Java微服务项目--学成在线
技术专家
01-13 7029
Java人必学的微服务项目上线
黑马程序员前端-CSS综合案例：学成在线模块添加
黑马程序员官方博客
03-22 512
前端学习笔记教程不定期更新中，传送门： 前端HTML第一天：什么是网页？什么是HTML？网页怎么形成？ 黑马程序员前端-CSS入门总结 黑马程序员前端-CSS之emmet语法 黑马程序员前端-CSS的复合选择器 黑马程序员前端-CSS的显示模式 黑马程序员前端-CSS背景 黑马程序员前端-CSS三大特性：叠层性、继承性、优先级 黑马程序员前端–CSS盒子模型以及PS基础 黑马程序员前端-CSS之圆角边框、盒子阴影、文字阴影 黑马程序员前端-CSS之浮动知识点汇总 黑马程序员前端-CS.
php项目视频教程分享,Thinkphp5.0博客项目实战视频教程全套
weixin_29173777的博客
03-10 201
ThinkPHP5.0开发个人博客项目视频教程下载课程介绍：此套ThinkPHP5.0开发个人博客项目视频教程由童老师倾心录制，为Thinkphp5第一季视频教程，以thinkphp5的新特性的讲解为重点，向大家详细介绍thinkphp5的知识点的应用.并实战开发出web项目。教程共包括32课时，由浅入深，手把手教学，适合有一定基础的同学学习。ThinkPHP5.0开发个人博客项目视频教程包括：视...
兄弟连+php+mysql_兄弟连新版PHP+Mysql视频教程 非常棒的PHP入门视频教程
weixin_36354131的博客
02-03 426
C:\wwwroot\xuebawang.net\public\index.php ( 0.76 KB )C:\wwwroot\xuebawang.net\thinkphp\start.php ( 0.74 KB )C:\wwwroot\xuebawang.net\thinkphp\base.php ( 2.66 KB )C:\wwwroot\xuebawang.net\thinkphp\libr...
CSS3案例黑马程序员—学成在线
Scrow1204的博客
10-31 9123
要点： 1.直接只用&lt;header&gt;&lt;nav&gt;等CSS3新标签 2.使用新的盒子模型border-box内减式模型，不用再来回设置盒子大小 3.过渡效果和动画效果的联合使用，不考虑兼容 base.css *{ box-sizing: border-box; /*全部定义为内减式盒子模型*/ } a{ text-decoration: none; } bod...
java版的上门家政系统和PHP版的上门家政有什么区别？
最新发布
baina666的博客
07-12 587
综上所述，Java版和PHP版的上门家政系统各有优缺点，选择哪种语言主要取决于项目的具体需求、预算、开发团队的技术栈以及未来的扩展计划等因素。同时，由于Java生态系统的复杂性和多样性，也可能需要投入更多的时间和资源来学习和掌握相关的技术和工具。Java版：Java拥有庞大的生态系统和丰富的第三方库，这为家政系统的开发和扩展提供了强大的支持。Java版：由于Java的编译执行机制和高效的垃圾回收算法，Java版家政系统通常具有更高的运行效率和更好的性能表现，尤其是在处理高并发、大数据量等复杂场景时。
黑马程序员讲义-C++核心编程pdf
09-07
黑马程序员讲义-C核心编程的PDF是程序员讲义的第三阶段的讲义，它包含了关于C语言的内容。你可以通过引用来获取这个PDF的具体内容。<span class="em">1</span><span class="em">2</span><span class="em">3</span>...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值