学成在线首页

最新推荐文章于 2024-09-11 14:09:02 发布
最新推荐文章于 2024-09-11 14:09:02 发布
阅读量89 收藏
点赞数
文章标签： html 前端 css vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yujianhxy/article/details/131929446
版权

本网页源代码分为两部分

html和css

html部分如下：

<!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>
        <!-- search -->
        <div class="search">
            <input type="text" value="输入关键词">
            <button></button>
        </div>
        <!-- user -->
        <div class="user">
            <img src="images/user.png" alt="">
            fairy
        </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="#">UI设计<span>&gt;</span></a></li>
                    <li><a href="#">产品<span>&gt;</span></a></li>
                </ul>
            </div>
            <div class="course">
                <h3>我的课程表</h3>
                <div class="bd">
                    <ul>
                        <li>
                            <h5>继续学习 程序语言设计</h5>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h5>继续学习 程序语言设计</h5>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h5>继续学习 程序语言设计</h5>
                            <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="#">PHP</a></li>
            <li><a href="#">mySql</a></li>
            <li><a href="#">bootStrap</a></li>
            <li><a href="#">Vue</a></li>
        </ul>
        <a class="xg" href="#">修改兴趣</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>
                    <div class="xbd">Think PHP5.0博客系统实战项目演练 </div>
                    <div class="zbd">
                        <span>高级</span>
                        *1125人在学习
                    </div>
                </li>
                <li>
                    <div class="xbd">Think PHP5.0博客系统实战项目演练 </div>
                    <div class="zbd">
                        <span>高级</span>
                        *1125人在学习
                    </div>
                </li>
                <li>
                    <div class="xbd">Think PHP5.0博客系统实战项目演练 </div>
                    <div class="zbd">
                        <span>高级</span>
                        *1125人在学习
                    </div>
                </li>
                <li>
                    <div class="xbd">Think PHP5.0博客系统实战项目演练 </div>
                    <div class="zbd">
                        <span>高级</span>
                        *1125人在学习
                    </div>
                </li>
                <li class="you">
                    <div class="xbd">Think PHP5.0博客系统实战项目演练 </div>
                    <div class="zbd">
                        <span>高级</span>
                        *1125人在学习
                    </div>
                </li>
                <li>
                    <div class="xbd">Think PHP5.0博客系统实战项目演练 </div>
                    <div class="zbd">
                        <span>高级</span>
                        *1125人在学习
                    </div>
                </li>
                <li>
                    <div class="xbd">Think PHP5.0博客系统实战项目演练 </div>
                    <div class="zbd">
                        <span>高级</span>
                        *1125人在学习
                    </div>
                </li>
                <li>
                    <div class="xbd">Think PHP5.0博客系统实战项目演练 </div>
                    <div class="zbd">
                        <span>高级</span>
                        *1125人在学习
                    </div>
                </li>
                <li>
                    <div class="xbd">Think PHP5.0博客系统实战项目演练 </div>
                    <div class="zbd">
                        <span>高级</span>
                        *1125人在学习
                    </div>
                </li>
                <li class="you">
                    <div class="xbd">Think PHP5.0博客系统实战项目演练 </div>
                    <div class="zbd">
                        <span>高级</span>
                        *1125人在学习
                    </div>
                </li>

            </ul>
        </div>
    </div>
    <!-- footer -->
    <div class="footer">
        <div class="z w">
            <div class="xczx"><img src="images/logo.png"></div>
            <p>内蒙古亚资网络科技有限公司<a href="#">蒙ICP备19005196</a></p>
            <div class="app"><button>下载APP</button></div>
        </div>
        <div class="y">
            <div class="xcoo">
                <h5>关于学成网</h5>
                <p><a href="#">关于</a></p>
                <p><a href="#">管理团队</a></p>
                <p><a href="#">工作机会</a></p>
                <p><a href="#">客服帮助</a></p>
                <p><a href="#">支持</a></p>
            </div>
            <div class="xcoo">
                <h5>关于学成网</h5>
                <p><a href="#">关于</a></p>
                <p><a href="#">管理团队</a></p>
                <p><a href="#">工作机会</a></p>
                <p><a href="#">客服帮助</a></p>
                <p><a href="#">支持</a></p>
            </div>
            <div class="xcoo">
                <h5>关于学成网</h5>
                <p><a href="#">关于</a></p>
                <p><a href="#">管理团队</a></p>
                <p><a href="#">工作机会</a></p>
                <p><a href="#">客服帮助</a></p>
                <p><a href="#">支持</a></p>
            </div>
        </div>

    </div>
</body>

</html>

 css如下：

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #f3f5f7;
}


.w {
    width: 1200px;
    margin: auto;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.clearfix:before,
.clearfic:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom : 1;
}

.header {
    height: 42px;
    margin: 30px auto;
}

.logo {
    width: 195px;
    height: 42px;
    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: black;
}

.nav ul li a:hover {
    border-bottom: 2px solid rgb(116, 206, 248);
}

.search {
    width: 412px;
    height: 42px;
    float: left;
    margin-left: 70px;
}

.search input {
    width: 360px;
    height: 40px;
    border: 1px solid rgb(116, 206, 248);
    border-right: 0;
    color: rgb(196, 191, 191);
    font-size: 14px;
    text-indent: 1.5em;
    float: left;
}

.search button {
    width: 50px;
    height: 42px;
    border: 0;
    background: #1ca6fc url(images/search.png) no-repeat center;
    float: left;
}

.user {
    float: right;
    padding-right: 30px;
    height: 42px;
    font-size: 14px;
}

.banner {
    height: 420px;
    background-color: #1c036c;
}

.banner .w {
    height: 420px;
    background: url(images/banner.png);
}

.subnav {
    width: 190px;
    height: 420px;
    background: rgba(0, 0, 0, 0.3);
    float: left
}

.subnav ul li {
    height: 45px;
    line-height: 45px;
    padding-top: 6px;
    text-indent: 2em;
}

.subnav ul li a {
    font-size: 14px;
    color: white;
}

.subnav ul li a span {
    float: right;
    padding-right: 20px;
}

.subnav ul li a:hover {
    color: #1ca6fc;
}

.course {
    width: 230px;
    height: 300px;
    background-color: #ffffff;
    float: right;
    margin-top: 50px;
}

.course h3 {
    color: white;
    height: 50px;
    background-color: #9bceea;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
}

.bd {
    padding: 0 20px;
}

.bd ul li {
    height: 50px;
    padding: 13px 0 0;
    border-bottom: 1px solid rgb(157, 154, 154);
}

.bd ul li h5 {
    font-size: 15px;

}

.bd ul li p {
    font-size: 13px;
    color: rgb(155, 152, 152);
}

.bd a {
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #1ca6fc;
    font-size: 18px;
    border: 2px solid #1ca6fc;
    margin-top: 7px;
}

.goods {
    height: 60px;
    line-height: 60px;
    background-color: #fff;
    margin-top: 10px;
    box-shadow: 0 3px 3px 3px rgba(0, 0, 0, 0.1);
}

.goods h3 {
    float: left;
    padding: 0 30px;
}

.goods ul li {
    float: left;
}

.goods ul li a:hover {
    color: #1ca6fc;
}

.goods ul li a {
    padding: 0 30px;
    border-left: 1px solid #a4a1a1;
}

.goods .xg {
    float: right;
    color: #1ca6fc;
    padding-right: 30px;
}

.box {
    margin-top: 30px;
}

.box .box-hd {
    height: 45px;
}

.box .box-hd h3 {
    float: left;
}

.box .box-hd a {
    float: right;
    font-size: 14px;
    color: black;
}

.box-bd ul li {
    display: inline-block;
    width: 220px;
    height: 260px;
    background-color: white;
    margin-right: 20px;
    margin-bottom: 25px;
}

.box-bd ul .you {
    margin-right: 0;
}


.box-bd ul li .xbd {
    margin: 30px 10px 0px 10px;
}

.zbd {
    margin: 10px;
    color: #a4a1a1;
    font-size: 12px;
}

.zbd span {
    color: red;
}

.box-bd ul li:hover {
    box-shadow: 2px 3px 3px 2px rgb(188, 183, 183);
}

.footer {
    height: 380px;
    background-color: white;
}

.z {
    width: 470px;
    float: left;
    margin-left: 180px;
}

.z p {
    color: #a4a1a1;
    font-size: 8px;
}

.z p a {
    color: #1ca6fc;
}

.xczx {
    padding: 30px 0;
}

.z button {
    width: 120px;
    height: 30px;
    font-size: 15px;
    background-color: white;

}

.z button:hover {
    color: #1ca6fc;
}

.app {
    margin: 20px 0;
}

.y {
    margin-top: 30px;
    float: left;
}

.y h5 {
    font-size: 20px;
}

.y p a {
    color: black;
}

.y p {
    margin-top: 5px;
}

.y p a:hover {
    color: #1ca6fc;
    text-decoration: underline;
}

.xcoo {
    display: inline-block;
    width: 245px;
}

 

yujianhxy
关注
学成在线首页网站
m0_60869584的博客
02-27 1154
<head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" conte...
web前端开发 学成在线首页案例+源码
phoebemeng的博客
07-03 3120
学成在线首页HTML+css 源代码;
学成在线首页pnf素材
Cc_Layman的博客
07-02 850
学成在线首页已整理的图片素材，供大家学习。阿里云盘链接：阿里云盘分享提取码：4h3u
学成在线首页静态页面（HTML+CSS）
m0_68259809的博客
07-11 2712
本文主要介绍学成在线首页静态页面的制作。
学成在线网站首页
笨笨的博客
12-16 2698
HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学成在线-不是所有的网站都叫学成在线</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- header头部模块开始 --> &...
学成在线首页制作——学习记录18
weixin_45019830的博客
08-05 1147
1. 最终效果 2. 全部代码 次采取结构与样式相分离思想： style.css文件： * { margin: 0; padding: 0; } body { background-color: #f3f5f7; } li { list-style:none; } .w { width: 120
前端第二篇-学成在线首页（作品）
DVchengxuyuan的博客
10-13 1346
学成在线页面制作 页面展示： 学成在线，是典型的企业级网站。 学习学成网的目的，是为了整体感知企业级网站布局流程，带着大家复习以前的知识 1.前期准备素材 学成在线PSD源文件 开发工具 = PS（切图） + sublime（代码） + chrome（测试） 2.前期准备工作 先把我们的前期准备工作做好， 我们本次采取结构与样式相分离思想。 创建 study 目录文件夹 (用于存放我们这个页面的相关内容)。 用vscode打开study目录文件夹. study 目
学成在线首页——静态页面（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>学成
学成在线首页完整版
GoldenaArcher的博客
04-21 3586
跟着 PSD 切图做完了，把 promo-nav，左边浮动的边框等都补充完成了。当然，值目前都是写死的，移动端还没适配——书和视频都还没看到那里。 第一版跟着视频做的，也写了步骤分解，详情可以看这个：学成在线 制作分解版。 源码在 github 上，新写完的在 v2 文件夹里。 PSD与完成版与第一版之间的对比： PSD 完成版 第一版 具体的变化如下： 头部改用 flex 完成……本来想用 position + float 写的，后面折腾了很久没有折腾出来，就干脆偷懒
学成在线页面制作
Sweat_candy的博客
04-04 1428
页面展示： 学成在线，是典型的企业级网站。 学习学成网的目的，是为了整体感知企业级网站布局流程 一、前期准备素材 - 学成在线PSD源文件 - 开发工具 = PS（切图） + sublime（代码） + chrome（测试） 二、 前期准备工作 先把前期准备工作做好， 采取结构与样式相分离思想。 1. 创建 study 目录文件夹 (用于存放我们这个页面的相关内容)。 2. 用vscode打开study目录文件夹. 3. study 目录内新建 images 文件夹，用于...
学成在线首页项目(含psd文件)
04-05
【标题】"学成在线首页项目(含psd文件)"是一个关于HTML和CSS的应用实例，主要涉及的是构建一个在线学习平台的首页。这个项目不仅包含了完成的HTML和CSS代码，还附带了PSD设计文件，这对于理解网页设计流程以及前端...
学成在线首页制作的源代码
12-05
【学成在线首页制作的源代码详解】 在网页设计与开发中，源代码是构建网站的基础，它由HTML、CSS和JavaScript等语言组成。在这个"学成在线首页制作的源代码"项目中，我们将深入探讨如何利用这些技术来创建一个功能...
学成在线首页网站资源图片
02-27
在这个项目中，"img"可能是一个文件夹，包含所有用于学成在线首页的图片资源。每个图片文件应通过其相对路径或绝对路径链接到`src`属性。 2. `alt`属性：这是一个非常重要的属性，当图片无法显示或者用户使用屏幕...
学成在线首页.psd格式 加上对应项目制作讲解的视频资源教程
07-11
有项目的视频资源，由于教学视频文件较大无法上传。自学前端练手必备3177715382,需要的直接来拿。
前端学成在线首页素材及代码study.zip
11-30
【前端学成在线首页素材及代码study.zip】这个压缩包包含了一套用于构建前端学成在线首页的资源和代码，适合前端开发者学习和参考。它提供了实现一个网站前端页面所需的HTML5、CSS、JavaScript等技术的实践应用示例...
前端用html写excel文件直接打开
全易
09-10 576
html文件直接用excel打开
水平垂直居中的几种方法（总结）
致未来的你。的博客
09-11 1105
水平垂直居中的几种方法（总结）
HTML + CSS - 网页布局之一般布局&浮动布局
qq_51222843的博客
09-11 1089
讲解CSS中的一般布局以及浮动布局
HTML中的文字与分区标记
最新发布
qq_74861982的博客
09-11 437
HTML中的文字与分区标记
基于vue.js技术的少儿编程在线学习系统系统分析怎么写
07-02
4.系统模块：将系统拆分成若干个模块，对每个模块进行详细的功能描述，例如首页模块、课程浏览模块、编程任务模块、在线交流模块等。 5.系统流程：描述用户在系统中的主要操作流程，可以使用流程图或时序图来展示...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值