学成在线首页静态页面（HTML+CSS）

最新推荐文章于 2023-09-30 14:52:13 发布
最新推荐文章于 2023-09-30 14:52:13 发布
阅读量2.6k 收藏 38
点赞数 5
分类专栏： web开发 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68259809/article/details/125721795
版权

一、效果图展示

 二、代码展示

①HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学成在线首页</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 头部模块 -->
    <div class="header w">
        <!-- logo部分 -->
        <div class="logo">
            <img src="images/logo.png">
        </div>
        <!-- 导航栏部分 -->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
        <!-- 搜索 -->
        <div class="search">
            <input type="text" value="输入关键词">
            <button></button>
        </div>
        <!-- 用户 -->
        <div class="user">
            <img src="images/user.png">qq-lilei
        </div>
    </div>
    <!-- banner模块 -->
    <div class="banner">
        <div class="w">
            <div class="subnav">
                <ul>
                    <li><a href="#">前端开发 <span>></span></a></li>
                    <li><a href="#">后端开发 <span>></span></a></li>
                    <li><a href="#">移动开发 <span>></span></a></li>
                    <li><a href="#">人工智能 <span>></span></a></li>
                    <li><a href="#">商业预测 <span>></span></a></li>
                    <li><a href="#">云计算&大数据 <span>></span></a></li>
                    <li><a href="#">运维&从测试 <span>></span></a></li>
                    <li><a href="#">UI设计 <span>></span></a></li>
                    <li><a href="#">产品 <span>></span></a></li>
                </ul>
            </div>
            <div class="course">
                <h2>我的课程表</h2>
                <div class="bd">
                    <ul>
                        <li><h4>继续学习 程序语言设计</h4>
                        <p>正在学习-使用对象</p></li>
                        <li><h4>继续学习 程序语言设计</h4>
                        <p>正在学习-使用对象</p></li>
                        <li><h4>继续学习 程序语言设计</h4>
                        <p>正在学习-使用对象</p></li>
                    </ul>
                    <a href="#">全部课程</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 精品推荐导航模块 -->
    <div class="goods w">
        <h3>精品推荐</h3>
        <ul>
            <li><a href="#">JQuery</a></li>
            <li><a href="#">Spark</a></li>
            <li><a href="#">MySQL</a></li>
            <li><a href="#">JavaWeb</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">SQLServer</a></li>
        </ul>
        <a href="#" class="mod">修改兴趣</a>
    </div>
    <!-- box核心区域 -->
    <!-- 精品推荐模块 -->
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul>
                <li><img src="images/pone.png">
                    <div class="hot">
                        <img src="images/hot.png">
                    </div>
                    <p>Think PHP 5.0 博客系统实战项目演练</p>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
                <li><img src="images/ptwo.png">
                    <div class="hot">
                        <img src="images/new.png">
                    </div>
                    <p>Android 网络图片加载框架详解</p>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
                <li><img src="images/pthree.png">
                    <p>Angular 2 最新框架+主流技术+项目实战</p>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
                <li><img src="images/pfour.png">
                    <p>Android Hybrid APP开发实战 H5+原生！</p>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
                <li><img src="images/pfour.png">
                    <p>Android Hybrid APP开发实战 H5+原生！</p>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
                <li><img src="images/pone.png">
                    <div class="hot">
                        <img src="images/hot.png">
                    </div>
                    <p>Think PHP 5.0 博客系统实战项目演练</p>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
                <li><img src="images/ptwo.png">
                    <div class="hot">
                        <img src="images/new.png">
                    </div>
                    <p>Android 网络图片加载框架详解</p>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
                <li><img src="images/pthree.png">
                    <p>Angular 2 最新框架+主流技术+项目实战</p>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
                <li><img src="images/pfour.png">
                    <p>Android Hybrid APP开发实战 H5+原生！</p>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
                <li><img src="images/pfour.png">
                    <p>Android Hybrid APP开发实战 H5+原生！</p>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 编程入门模块 -->
    <div class="box w">
        <div class="box-hd">
            <h3>编程入门</h3>
            <ul>
                <li><a href="#" class="as">热门</a></li>
                <li><a href="#" class="as">初级</a></li>
                <li><a href="#" class="as">中级</a></li>
                <li><a href="#" class="as">高级</a></li>
            </ul>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <div class="php">
                <img src="images/php.png">
            </div>
            <div class="plogo">
                <img src="images/plogo.png">
            </div>
            <ul>
                <li class="pli"><img src="images/pfive.png">
                    <p>Android Hybrid APP开发实战 H5+原生！</p>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
                <li class="pli"><img src="images/psix.png">
                    <p>Kami2首页界面切换效果</p>
                    <div class="info2">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>                
                <li class="pli"><img src="images/pseven.png">
                    <p>Unity Profiler入门</p>
                    <div class="info2">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
                <li class="pli"><img src="images/peight.png">
                    <p>Cocos2d-x 引擎源码中的纹理优化</p>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 数据分析师模块 -->
    <div class="box w">
        <div class="box-hd">
            <h3>数据分析师</h3>
            <ul>
                <li><a href="#" class="as">热门</a></li>
                <li><a href="#" class="as">初级</a></li>
                <li><a href="#" class="as">中级</a></li>
                <li><a href="#" class="as">高级</a></li>
            </ul>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <div class="php">
                <img src="images/phptwo.png">
            </div>
            <div class="plogo">
                <img src="images/plogotwo.png">
            </div>
            <ul>
                <li class="pli"><img src="images/psix.png">
                    <p>Kami2首页界面切换效果</p>
                    <div class="info2">
                        <span>初级</span>  •  1125人在学习
                    </div>
                </li> 
                <li class="pli"><img src="images/pfive.png">
                    <p>Android Hybrid APP开发实战 H5+原生！</p>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>   
                <li class="pli"><img src="images/peight.png">
                    <p>Cocos2d-x 引擎源码中的纹理优化</p>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>            
                <li class="pli"><img src="images/pseven.png">
                    <p>Unity Profiler入门</p>
                    <div class="info2">
                        <span>中级</span>  •  1125人在学习
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 机器学习工程师模块 -->
    <div class="box w">
        <div class="box-hd">
            <h3>机器学习工程师</h3>
            <ul>
                <li><a href="#" class="as">热门</a></li>
                <li><a href="#" class="as">初级</a></li>
                <li><a href="#" class="as">中级</a></li>
                <li><a href="#" class="as">高级</a></li>
            </ul>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul>
                <li><img src="images/pfive.png">
                    <p>Android Hybrid APP开发实战 H5+原生！</p>
                    <div class="info">
                        <span>初级</span>  •  125人在学习
                    </div>
                </li>
                <li><img src="images/peight.png">
                    <p>Cocos2d-x 引擎源码中的纹理优化</p>
                    <div class="info">
                        <span>高级</span>  •  11250人在学习
                    </div>
                </li>
                <li><img src="images/pseven.png">
                    <p>Unity Profiler入门</p>
                    <div class="info2">
                        <span>中级</span>  •  178人在学习
                    </div>
                </li>
                <li><img src="images/pnine.png">
                    <p>微软人工智能-数据分析平台</p>
                    <div class="info2">
                        <span>高级</span>  •  5639人在学习
                    </div>
                </li>
                <li><img src="images/psix.png">
                    <p>Kami2首页界面切换效果</p>
                    <div class="info2">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- footer模块 -->
    <div class="footer">
        <div class="box w">
            <div class="left">
                <img src="images/logo.png">
                <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
                    © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
                <a href="#">下载APP</a>
            </div>
            <div class="right">
                <dl>
                    <dt>关于学成网</li>
                    <dd><a href="#">关于</a></dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作计划</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </ul>
            </div>
            <div class="right">
                <dl>
                    <dt>新手指南</dt>
                    <dd><a href="#">如何注册</a></dd>
                    <dd><a href="#">如何选课</a></dd>
                    <dd><a href="#">如何拿到毕业证</a></dd>
                    <dd><a href="#">学分是什么</a></dd>
                    <dd><a href="#">考试未通过怎么办</a></dd>
                </dl>
            </div>
            <div class="right">
                <dl>
                    <dt>合作伙伴</dt>
                    <dd><a href="#">合作机构</a></dd>
                    <dd><a href="#">合作导师</a></dd>
                </dl>
            </div>
        </div>
    </div>
</body>
</html>

②CSS代码

/*清除内外边距*/
* {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
body {
    background-color: #f5f3f7;
}
/*设置版心*/
.w {
    width: 1200px;
    margin:auto;
}
.header {
    height: 42px;
    margin: 30px auto;
}
.logo {
    float: left;
}
.nav {
    float: left; 
    margin-left: 60px;
}
.nav ul li {
    float: left;
    margin: 0 15px;
}
.nav ul li a {
    display: block;
    height: 42px;
    padding: 0 10px;
    line-height: 42px;
    font-size: 18px;
    color: #050505;
}
.nav ul li a:hover {
    border-bottom: 2px solid #00a4ff;
}
.search input {
    float: left;
    width: 345px;
    height: 40px;
    margin-left: 50px;
    border: 1px solid #00a4ff;
    border-right: 0;
    color:#bfbfbf;
    font-size: 14px;
    padding-left: 15px;
}
.search button {
    float: left;
    width: 50px;
    height: 42px;
    border: 0;
    background: url(images/search.png);
}
.user {
    float: left;
    line-height: 42px;
    margin-left: 60px;
    font-size: 14px;
    color: #666;
}
.banner {
    background-color: #1c036c;
    height: 421px;
}
.banner .w {
    height: 421px;
    background: url(images/banner.png);
}
.subnav {
    float: left;
    width: 190px;
    height: 421px;
    background: rgba(0,0,0,0.3);
}
.subnav ul li {
    height: 45px;
    line-height: 45px;
    padding: 0 20px;
}
.subnav ul li a {
    font-size: 14px;
    color: #fff;
}
.subnav ul li a:hover {
    color: #00b4ff;
}
.subnav ul li a span {
    float: right;
}
.course {
    float: right;
    width: 230px;
    height: 300px;
    background-color: #ffffff;
    margin: 50px 0;
}
.course h2 {
    height: 48px;
    background-color: #9bceea;
    color: #fff;
    text-align: center;
    font-size: 18px;
    line-height: 48px;
}
.bd {
    padding: 0 20px;
}
.bd li {
    padding: 14px 0;
    border-bottom: 1px solid #ccc;
}
.bd li h4 {
    font-size: 16px;
    color: #4e4e4e;
}
.bd li p {
    font-size: 12px; 
    color: #a5a5a5;
}
.bd a {
    display: block;
    height: 38px;
    border: 1px solid #22b0ff;
    margin-top: 5px;
    text-align: center;
    font-size: 16px;
    line-height: 38px;
    color: #22b0ff;
    font-weight: 700;
}
.goods {
    height: 60px;
    margin-top: 10px;
    line-height: 60px;
    background-color: #fff;
    box-shadow: 0 2px 3px 3px rgba(0,0,0,0.1);
}
.goods h3 {
    float: left;
    font-size: 16px;
    color: #00a4ff;
    padding: 0 30px;
}
.goods ul {
    float: left;
}
.goods li {
    float: left;
}
.goods ul li a {
    font-size: 16px;
    color: #4e4e4e;
    padding: 0 30px;
    border-left: 1px solid #bfbfbf;
}
.mod {
    float: right;
    font-size: 14px;
    color: #00a4ff;
    padding: 0 30px;
}
.box {
    margin-top: 30px;
    overflow: hidden;
}
.box-hd {
    height: 45px;
}
.box-hd h3 {
    float: left;
    font-size: 20px;
    color: #494949;
    margin-right: 355px;
}
.box-hd a {
    float: right;
    font-size: 12px;
    color: #a5a5a5;
    margin-top: 10px;
    margin-right: 30px;
}
.box-bd ul {
    width: 1225px;
}
.box-bd ul li {
    float: left;
    position: relative;
    width: 228px;
    height: 270px;
    margin-right: 15px;
    margin-bottom: 15px;
    background-color: #fff;
}
.box-bd ul li > img {
    width: 100%;
}
.box-bd .hot {
    position: absolute;
    top: 4px;
    right: -4px;
}
.box-bd ul li p {
    margin: 20px 20px 20px 25px;
    font-size: 14px;
    color: #050505;
}
.box-bd .info {
    margin: 0 20px 0 25px;
    font-size: 12px;
    color: #999;
}
.box-bd .info2 {
    margin: 37px 20px 0 25px;
    font-size: 12px;
    color: #999;
}
.box-bd span {
    color: #ff7c2d;
}
.box-hd .as {
    float: left;
    font-size: 12px;
    color: #a5a5a5;
    margin-top: 10px;
    margin-right: 75px;
}
.box-hd .as:hover {
    color: #00a4ff;
}
.box-bd .php {
    float: left;
}
.box-bd .plogo {
    float: right;
}
.box-bd .pli {
    margin: 15px 0 0 15px;
}
.footer {
    height: 420px;
    margin-top: 25px;
    background-color: #fff;
}
.footer .left {
    float: left;
    margin-left: 20px;
    margin-top: 30px;
    margin-right: 220px;
}
.footer p {
    font-size: 12px;
    margin-top: 25px;
    color: #666666;
}
.footer .left a {
    display: block;
    width: 120px;
    height: 35px;
    color: #22b0ff;
    margin-top: 20px;
    line-height: 35px;
    text-align: center;
    border: 1px solid #22b0ff;
}
.footer .right {
    float: left;
}
.footer dl {
    margin-right: 95px;
}
.footer dl dd {
    margin-bottom: 5px;
}
.footer dl dd a {
    font-size: 12px;
    color: #333;
}
.footer .right dt {
    margin: 35px 0 15px 0;
    font-size: 16px;
    color: #999;
    font-weight: normal;
}

三、说明

这个首页是根据Pink老师的讲解以及学成在线PSD文件制作完成，相关图片素材、PSD文件及源码在下面这个链接里：

链接：https://pan.baidu.com/s/16wYplk6SwNEXOcIRbWnDyg 
提取码：xob7

我超爱敲代码耶（才怪
关注
  • 5
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学成在线静态网站源代码以及素材
08-03
内含CSS代码+HTML代码+所用图片素材；代码注释简单易懂，代码结构清晰明了。
黑马案例学成在线网页的实现
gemgod的博客
07-12 6154
黑马案例学成在线网页的实现 成品:
学成在线首页——静态页面（html+css）素材链接放在文章结尾了
ttxwwdn的博客
10-28 1万+
这是我第一次做一个完整的静态页面，是照着PSD图做的。有做的不对或者不好的地方，欢迎批评指正。 效果图： html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>学成
CSS基础学习——学成在线首页案例
weixin_61920612的博客
01-30 1001
CSS基础学习——学成在线首页案例
HTML5期末大作业：饮食食品主题设计——绿色简洁生鲜超市网站设计(5页) HTML+CSS+JavaScript web前端大二实训大作业
qq_365392777
09-26 1万+
HTML5期末大作业：饮食食品主题设计——绿色简洁生鲜超市网站设计(5页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平
HTML-CSS学成在线案例 | pink老师讲解思路 | 完整源代码
m0_67495444的博客
09-30 2214
实际开发中，我们不会直接用链接a而是用li包含链接（li+a）的做法；一个search大盒子里面包含2个表单。
html+css学成在线静态页面
最新发布
03-23
总的来说，"html+css学成在线静态页面"教程将涵盖这些基础知识，帮助初学者理解如何使用HTML构建网页结构，以及如何用CSS美化和布局页面。通过实际操作和练习，你可以逐步熟悉并掌握这两门技术，从而创建出富有吸引...
小米官网纯静态页面 html+css
11-26
【小米官网纯静态页面 html+css】项目是一个学习和实践HTML与CSS技术的实例，它旨在重现小米官网的布局和设计，但不包括商品详情页面。这个项目适合作为初学者提升网页制作技能的期末作业，因为它涵盖了基本的网页...
【HTML+CSS练习二】学成在线首页
03-06
【HTML+CSS练习二】学成在线首页是一个学习HTML和CSS基础的实践项目，旨在帮助初学者通过实际操作理解这两种语言的基本用法。这个练习包含了HTML结构和CSS样式设计，以及部分图片素材的使用，使得页面看起来更加生动...
学成在线前端练手项目html+css
03-19
本项目“学成在线前端练手项目html+css”是专为学习和提升前端技能设计的一系列练习，它聚焦于HTML（超文本标记语言）和CSS（层叠样式表）两大核心技术。下面将详细阐述这两个知识点及其在实际项目中的应用。 HTML...
学成在线网站首页制作
07-31
使用HTML和CSS完成的学成在线网站首页案例，压缩包中附有完成制作所需要的图片素材，代码大概1000多行，适合初学者练手。
学成在线首页制作的源代码
12-05
这是一个关于学成在线首页制作的源代码
学成在线静态网页html&css
04-02
在本课程“学成在线静态网页html&css”中，我们将会深入学习HTML（超文本标记语言）和CSS（层叠样式表）这两门核心技术，它们是构建互联网上每一个页面的基础。通过黑马程序员pink老师的指导，我们将一步步掌握如何...
案例：学成在线案例（html+css）
a_xia_o的博客
01-29 2656
典型的企业级网站案例：附加HTML代码和CSS样式，适合新手练手
Web项目————学成在线
qq_60654083的博客
09-22 1074
前端项目————学成在线
学成在线网页制作（详细）
热门推荐
egg_er的博客
10-25 2万+
项目分析 如图： 分为四个模块： header头部模块 精品推荐模块 编程入门模块 数据分析师模块 机器学习模块 前端工程师开发模块 footer模块 如果仔细观察的话，第2，5，6属于一个模块，样式结构相同。同样的3，4模块相同，这样只要做出一个另外一个复制黏贴即可。 详细制作 先确定版心，版心的宽度，然后给他封装成类，这样方便后面每个模块的父盒子调用。 初始化一些值： * { margin: 0; padding: 0; } .ul { list-style: none;
前端：【学成在线项目】HTML+CSS详细制作过程（代码只做参考）
weixin_49555741的博客
03-20 8311
1. 案例准备工作 1.1 准备素材和工具 （素材在最后有链接哦） 学成在线PSD源文件 开发工具：Photoshop（切图）/cutterman插件+vscode（写代码）+chrome（测试） 1.2 vscode案例准备 创建目录LearnOnline文件夹，存放页面的相关材料。 用vscode打开文件夹。 在LearnOnline文件夹里新建images文件夹来保存图片。 新建首页文件index.html（首页网站统一命令index.html）。 新建style.css样式
【黑马程序员】5、学成在线网页制作_2023新版前端Web开发HTML5+CSS3+移动Web视频教程_笔记
qq_37581764的博客
07-15 3078
网站根目录：存档网站的第一层文件夹，内部包含当前网站的所有素材。
学成在线案例（完整代码）
记录学编程后遇到的问题，注意点以及相关知识
11-14 2万+
首先同一目录下放置三个文件夹（images xxx.html style.css） 图片： 头部区域 分四个模块： logo（图片） 导航栏（无序列表） 搜索（文本输入框、button按钮） 用户（图片） <div class="header w"> <!-- logo部分 --> <div class="logo"> <!-- alt显示未加载时，所提示的文字，title显示鼠标放上时，所提示的文件
HTML5+CSS3企业网站实战教程
在构建基于HTML5和CSS3的企业网站时，我们可以看到这个PPT课程的主要目标是教会学员如何创建一个界面美观、风格统一、结构完整且内容丰富的静态商业网站。课程由高小梅在2018年07月24日讲解，主要涉及的技术包括...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值