学成在线-网站搭建

于 2023-09-10 22:13:16 发布
阅读量208 收藏
点赞数
分类专栏： 网站 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_72050316/article/details/132796587
版权
本文详细介绍了如何使用CSS进行网站搭建，从基础选择器到布局技巧，涵盖浮动、定位、Flexbox和Grid系统，助你构建响应式网页。
摘要由CSDN通过智能技术生成

文章目录


代码素材来自b站pink老师 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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" alt="">
        </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" alt="">
            qq12345
        </div>
    </div>
    <!-- 头部区域结束 -->
    <!-- banner部分开始 -->
    <div class="banner">
        <!-- 版心 -->
        <div class="w">
            <div class="subnav">
                <ul>
                    <li><a href="#">前端开发 <span>&gt;</span></a></li>
                    <li><a href="#">前端开发<span>&gt;</span</a></li>
                    <li><a href="#">前端开发<span>&gt;</span</a></li>
                    <li><a href="#">前端开发<span>&gt;</span</a></li>
                    <li><a href="#">前端开发<span>&gt;</span</a></li>
                    <li><a href="#">前端开发<span>&gt;</span</a></li>
                    <li><a href="#">前端开发<span>&gt;</span</a></li>
                    <li><a href="#">前端开发<span>&gt;</span</a></li>
                    <li><a href="#">前端开发<span>&gt;</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>
                        <a href="#" class="more">全部课程</a>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- banner部分结束 -->
    <!-- 精品推荐模块开始 -->
    <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="#">MySQL</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 class="clearfix">
                <li>
                    <img src="images/pic.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练 
                    </h4>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/microsoft.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练 
                    </h4>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>                <li>
                    <img src="images/kami2.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练 
                    </h4>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>                <li>
                    <img src="images/cocospng.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练 
                    </h4>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>                <li>
                    <img src="images/ugui.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练 
                    </h4>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>                <li>
                    <img src="images/unity.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练 
                    </h4>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>                <li>
                    <img src="images/pic.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练 
                    </h4>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>                <li>
                    <img src="images/microsoft.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练 
                    </h4>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>                <li>
                    <img src="images/cocospng.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练 
                    </h4>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>                <li>
                    <img src="images/unity.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练 
                    </h4>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>

            </ul>
        </div>
    </div>
    <!-- box核心区域结束 -->
    <!-- 编程入门模块开始 -->
    <div class="box1 w">
        <div class="box1-hd">
            <h3>编程入门</h3>
            <ul>
                <li><a href="#">热门</a></li>
                <li><a href="#">初级</a></li>
                <li><a href="#">中级</a></li>
                <li><a href="#">高级</a></li>
            </ul>
            <a href="#">查看全部</a>
        </div>
    </div>
    <!-- 编程入门模块结束 -->
    <!-- 编程入门核心区域开始 -->
    <div class="box1_main w">
        <div class="left" class="clearfix">
            <h3>PHP入门：<br>
                <br>
                基础语法到实际运用</h3>
            <h5>    零基础入门：语法与界</h5>
            <h5>    进阶：网络与数据缓存</h5>
            <h5>    界面到数据存储</h5>
        </div>
        <div class="right_top" class="clearfix">
        
        </div>
        <div class="right">
            <ul class="clearfix">
                <li>
                    <img src="images/ugui.png" alt="">
                    <h4>Android Hybrid APP开发实<br>战 H5+原生！</h4>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
            </ul>
            <ul class="clearfix">
                <li>
                    <img src="images/cocospng.png" alt="">
                    <h4>Android Hybrid APP开发实<br>战 H5+原生！</h4>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
            </ul>
            <ul class="clearfix">
                <li>
                    <img src="images/kami2.png" alt="">
                    <h4>Android Hybrid APP开发实<br>战 H5+原生！</h4>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
            </ul>
            <ul class="clearfix"> 
                <li>
                    <img src="images/unity.png" alt="">
                    <h4>Android Hybrid APP开发实<br>战 H5+原生！</h4>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 编程入门核心区域结束 -->
    <!-- 数据分析师开始 -->
    <div class="box1 w">
        <div class="box1-hd">
            <h3>数据分析师</h3>
            <ul>
                <li><a href="#">热门</a></li>
                <li><a href="#">初级</a></li>
                <li><a href="#">中级</a></li>
                <li><a href="#">高级</a></li>
            </ul>
            <a href="#">查看全部</a>
        </div>
    </div>
    <!-- 数据分析师结束 -->
    <!-- 数据分析核心区域开始 -->
    <div class="box2_main w" >
        <div class="left" class="clearfix">
            <h3>PHP入门：<br>
                <br>
                基础语法到实际运用</h3>
            <h5>    零基础入门：语法与界</h5>
            <h5>    进阶：网络与数据缓存</h5>
            <h5>    界面到数据存储</h5>
        </div>
        <div class="right_top" class="clearfix">
            <h3><span>python+人工智能</span>   打造您不一样的技术职场旅游</h3>
        </div>
        <div class="right">
            <ul class="clearfix">
                <li>
                    <img src="images/kami2.png" alt="">
                    <h4>Android Hybrid APP开发实<br>战 H5+原生！</h4>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
            </ul>
            <ul class="clearfix">
                <li>
                    <img src="images/kami2.png" alt="">
                    <h4>Android Hybrid APP开发实<br>战 H5+原生！</h4>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
            </ul>
            <ul class="clearfix">
                <li>
                    <img src="images/ugui.png" alt="">
                    <h4>Android Hybrid APP开发实<br>战 H5+原生！</h4>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
            </ul>
            <ul class="clearfix">
                <li>
                    <img src="images/ugui.png" alt="">
                    <h4>Android Hybrid APP开发实<br>战 H5+原生！</h4>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 数据分析核心区域结束 -->

    <!-- 机器学习工程师模块开始 -->
    <div class="box1 w">
        <div class="box1-hd">
            <h3>机器学习工程师</h3>
            <ul>
                <li><a href="#">热门</a></li>
                <li><a href="#">初级</a></li>
                <li><a href="#">中级</a></li>
                <li><a href="#">高级</a></li>
            </ul>
            <a href="#">查看全部</a>
        </div>
    </div>
    <!-- 机器学习工程师模块结束 -->

    <!-- 机器学习核心区域开始 -->
    <div class="box3_main w">
        <div class="right" >
            <ul class="clearfix">
                <li>
                    <img src="images/microsoft.png" alt="">
                    <h4>Android Hybrid APP开发实<br>战 H5+原生！</h4>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>

                <li>
                    <img src="images/ugui.png" alt="">
                    <h4>Android Hybrid APP开发实<br>战 H5+原生！</h4>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>

                <li>
                    <img src="images/cocospng.png" alt="">
                    <h4>Android Hybrid APP开发实<br>战 H5+原生！</h4>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>

                <li>
                    <img src="images/unity.png" alt="">
                    <h4>Android Hybrid APP开发实<br>战 H5+原生！</h4>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>

                <li>
                    <img src="images/kami2.png" alt="">
                    <h4>Android Hybrid APP开发实<br>战 H5+原生！</h4>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 机器学习核心区域结束 -->

    <!-- 前端开发工程师开始 -->
    <div class="box1 w">
        <div class="box1-hd">
            <h3>前端开发工程师</h3>
            <ul>
                <li><a href="#">热门</a></li>
                <li><a href="#">初级</a></li>
                <li><a href="#">中级</a></li>
                <li><a href="#">高级</a></li>
            </ul>
            <a href="#">查看全部</a>
        </div>
    </div>
    <!-- 前端开发工程师结束 -->

    <!-- 前端核心开始 -->
    <div class="box3_main w">
        <div class="right" >
            <ul class="clearfix">
                <li>
                    <img src="images/microsoft.png" alt="">
                    <h4>Android Hybrid APP开发实<br>战 H5+原生！</h4>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/ugui.png" alt="">
                    <h4>Android Hybrid APP开发实<br>战 H5+原生！</h4>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/cocospng.png" alt="">
                    <h4>Android Hybrid APP开发实<br>战 H5+原生！</h4>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/unity.png" alt="">
                    <h4>Android Hybrid APP开发实<br>战 H5+原生！</h4>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/kami2.png" alt="">
                    <h4>Android Hybrid APP开发实<br>战 H5+原生！</h4>
                    <div class="info">
                        <span>高级</span>  •  1125人在学习
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 前端核心结束 -->
    <!-- footer模块开始 -->
    <div class="footer">
        <div class="w">
            <div class="copyright">
                <img src="images/logo.png" alt="">
                <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
                © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号
                </p>
                <a href="#" class="app">下载App</a>
            </div>
            <div class="links">
                <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>
                <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>
                <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>
    </div>
    <!-- footer模块结束 -->
</body>
</html>

在这里插入图片描述
在这里插入图片描述

vsropy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
学成网首页
qq_61686950的博客
12-02 580
/*css 初始化代码 css reset*/ /*清除元素默认的内外边距*/ * { margin: 0; padding: 0; } /*清除列表样式*/ li { list-style: none; } /*去掉button 默认自带的边框*/ button { border: none; } body { background-color: #f3f5f7; /*方便写代码 一会别忘了删除*/ /*height: 3000px;*/ } a { text-decoration: n.
CSS-学成网
林彬的专栏
05-28 1245
CSS-学成网 黑马前端 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学成网</title> <style> /* 样式 */ /* css初始化 */ * { /* 清除内外边距 */ margin:...
学成在线教育平台
王小二的博客
03-22 1050
HTML： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>学成在线&...
学成在线网站知识分享
DS153的博客
08-10 2582
学成在线网站首页布局 学成在线网站是一个比较基础的网页布局，让刚刚学习前端的人通过使用工具测量大小，裁剪图片，使用盒子定位布局，利用浮动放置浮动盒子等各种知识点都会使用到。各大教学网站也会使用这个案例来教学基础的布局，接下来让我们来看看学成在线网站的网页布局吧 提示：本篇只提供思路和部分代码注意情况，数据请使用PS等工具实地采样 目录学成在线网站首页布局前言一、整体布局的查看二、需要注意的问题1.logo的截取2.盒子的宽高和边距3.精品模块的宽度3.浮动的问题三、总结学习目标：学习内容：学习时间：学习产
学成网PSD.rar
07-02
前端css切图练习素材包，包含4个psd文件（学成网职业规划.psd 学成网首页.psd 学成网课程列表页.psd 学成网课程介绍页.psd）
学成在线-微服务项目Day1.zip
07-08
在“学成在线-微服务项目Day1.zip”这个压缩包中，我们即将开启一场深入的Java微服务项目实战之旅。微服务架构是现代软件开发领域中的一项重要技术，它将大型应用拆分为一系列小而独立的服务，每个服务都能独立部署...
2020年最新学成在线项目
10-13
这个"2020年最新学成在线项目"显然涉及到对SSM框架的深入学习和实践。 1. **Spring框架**：Spring是一个全面的后端开发框架，它提供了依赖注入（DI）和面向切面编程（AOP）等核心特性，有助于简化Java应用程序的...
前端学习项目，学成在线
10-11
【前端学习项目，学成在线】是一个专门为前端开发者设计的学习资源集合，旨在帮助初学者或有一定基础的人深入理解和掌握前端开发技术。这个项目涵盖了前端开发的各个方面，通过一系列的实践项目，让学习者能够理论...
学成在线教育系统-讲义.rar
11-05
【学成在线教育系统-讲义.rar】是一个包含关于微服务架构、SpringBoot、SpringCloud以及前后端分离技术在大型项目实战中的应用的压缩包文件。这个教育系统旨在提供一个全面的学习平台，让学生和教师能够有效地进行...
学成在线-第13天-讲义-在线学习 HLS v1.21
08-03
在学成在线的点播方案中，选择了HLS协议，因为它既能实现边下载边播放，又能支持快进和快退，而且无需搭建昂贵的流媒体服务器。这样，学生就可以在不同章节间自由切换，享受流畅的学习体验。 综上所述，HLS v1.21...
学成网PSD.zip
08-08
学成网素材包，包含4个psd文件（学成网职业规划.psd 学成网首页.psd 学成网课程列表页.psd 学成网课程介绍页.psd）
学成在线电商项目 齐全资料视频、代码文档
04-22
分布式电商项目、培训课程网站、一共20天课程全的，视频+代码文档齐全资料视频、代码文档，跟着这个学下来就可以拥有真实的项目奖经验
学成在线网站首页制作
07-31
使用HTML和CSS完成的学成在线网站首页案例，压缩包中附有完成制作所需要的图片素材，代码大概1000多行，适合初学者练手。
学成在线最新全套练习 代码+psd文件
08-03
本素材是学成在线的PSd图，加上我完成的效果图，里面有我按照pink老师写出的代码，后面又按照老师之后的课程在此基础上增加了遮罩的效果，还有固定定位的效果，但是作为跟大家差不多，自己也是一个初学者，代码有的繁杂，固定定位的位置，按照老师的效果图来说一个在左边，但是自己只能调到右边，不知道咋回事，希望各位也可以提一下宝贵的建议。还有这老师的pds文件，最好要高版本的ps完成O(∩_∩)O
HTML+CSS基础案例（学成网）
热门推荐
CrazyQiQi的博客
12-07 1万+
自己跟着视频做了第一个静态网页案例： HTML代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;学成网&lt;/title&gt; &lt;link rel="
学成网在线项目
WangZhang_521的博客
12-31 376
学成网在线项目 <!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"> <tit
CSS 学成网（二）
林彬的专栏
06-01 6219
学成网小圆点 /* 小圆点模块 */ .circle { width: 180px; height: 22px; /* background-color: pink; */ position: absolute; bottom: 10px; left: 50%; margin-left: -90px; } .circle li { float: left; ...
学成网html+css案例
倒霉娃不要倒霉的博客
08-08 2093
这是跟着pink老师敲的第一个html+css的静态页面： html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学成网</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 页
学成在线网站首页_分享一些好用的网站
weixin_39616880的博客
12-04 1172
前言这两年收藏了不少网站，特地整理一下，把一些大家都可能用得上的分享出来，希望能对你有用。考虑到有一些网站大多数人都知道，所以我就不列出来了。我把这些网站分为了几大类：工具类素材类社区类工具类1、http://start.me（收藏工具）它不仅仅是一个网址收藏管理器，它还可以：推送、嵌入任何东西、集成、自定义、分享你的收藏夹、浏览器扩展。很明显本文所分享的网站就是靠它来保存的，用它的理由两个就够了...
学成在线项目案例代码
最新发布
06-15
学成在线项目案例代码通常指的是在学习过程中，为了解决实际问题或实践特定技术，学员们会在网上找到的示例代码或项目实例。这些代码可以涵盖各种编程语言和技术领域，比如Web开发（HTML、CSS、JavaScript、Node.js）、数据科学（Python、R、机器学习库）、移动应用开发（Android、iOS）、后端开发（Java、Python、Django）、数据库操作等。 在学成在线项目中，常见的代码案例可能包括： - 前后端分离的网站开发，如使用React.js和Node.js搭建RESTful API； - 数据可视化应用，使用matplotlib或D3.js； - 机器学习项目，如使用TensorFlow或PyTorch实现图像分类或情感分析； - 微服务架构，使用Spring Boot或Docker部署服务； - 移动应用开发，比如使用Kotlin或Swift构建Android或iOS应用。 如果你对某个特定的项目案例感兴趣，例如你正在学习Web开发或者想了解某个技术如何应用，可以提供更具体的信息，这样我可以给你更详细的解释和相关的代码片段。此外，一些知名的在线学习平台，如GitHub、LeetCode、Codecademy等，都有丰富的项目代码供学习者参考和实践。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

vsropy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值