综合学成网

最新推荐文章于 2022-06-16 09:56:29 发布
最新推荐文章于 2022-06-16 09:56:29 发布
阅读量346 收藏
点赞数 1
文章标签： html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39062988/article/details/118380329
版权

ps切图
在这里插入图片描述
css书写顺序
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
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" 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><img src="images/btn.png"></button>
        </div>
        <div class="user">
            <img src="images/user.png">qq-lilei
        </div>
    </div>
    <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>
                    </ul>
                    <a href="#" class="more">全部课程</a>
                </div>

            </div>

        </div>
    </div>
    <div class="goods w">
        <h3> 精品推荐</h3>
        <ul>
            <li><a href="#">jqery</a></li>
            <li><a href="#">jqery</a></li>
            <li><a href="#">jqery</a></li>
            <li><a href="#">jqery</a></li>
            <li><a href="#">jqery</a></li>
        </ul>
        <a href="#" class="mod">修改兴趣</a>


    </div>
    <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>项目演练</h4>
                    <div class="info">
                        <span>高级</span> * 1125人在学习
                    </div>
                </li>
                <li><img src="images/pic.png" alt="">
                    <h4>项目演练</h4>
                    <div class="info">
                        <span>高级</span> * 1125人在学习
                    </div>
                </li>
                <li><img src="images/pic.png" alt="">
                    <h4>项目演练</h4>
                    <div class="info">
                        <span>高级</span> * 1125人在学习
                    </div>
                </li>
                <li><img src="images/pic.png" alt="">
                    <h4>项目演练</h4>
                    <div class="info">
                        <span>高级</span> * 1125人在学习
                    </div>
                </li>
                <li><img src="images/pic.png" alt="">
                    <h4>项目演练</h4>
                    <div class="info">
                        <span>高级</span> * 1125人在学习
                    </div>
                </li>
                <li><img src="images/pic.png" alt="">
                    <h4>项目演练</h4>
                    <div class="info">
                        <span>高级</span> * 1125人在学习
                    </div>
                </li>
                <li><img src="images/pic.png" alt="">
                    <h4>项目演练</h4>
                    <div class="info">
                        <span>高级</span> * 1125人在学习
                    </div>
                </li>
                <li><img src="images/pic.png" alt="">
                    <h4>项目演练</h4>
                    <div class="info">
                        <span>高级</span> * 1125人在学习
                    </div>
                </li>
                <li><img src="images/pic.png" alt="">
                    <h4>项目演练</h4>
                    <div class="info">
                        <span>高级</span> * 1125人在学习
                    </div>
                </li>
                <li><img src="images/pic.png" alt="">
                    <h4>项目演练</h4>
                    <div class="info">
                        <span>高级</span> * 1125人在学习
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="footer">
        <div class="w">
            <div class="copyright">
                <img src="images/logo.png" alt="">
                <p>12144125436456asda </p>
                <a href="#" class="app"> 下载app</a>
            </div>
            <div class="links">
                <dl>
                    <dt>关于学成网</dt>
                    <dd><a href="#">关于</dd>
                    <dd><a href="#">关于</dd>
                    <dd><a href="#">关于</dd>
                    <dd><a href="#">关于</dd>
                    <dd><a href="#">关于</dd>


                </dl>
                <dl>
                    <dt>关于学成网</dt>
                    <dd><a href="#">关于</dd>
                    <dd><a href="#">关于</dd>
                    <dd><a href="#">关于</dd>
                    <dd><a href="#">关于</dd>
                    <dd><a href="#">关于</dd>


                </dl>
                <dl>
                    <dt>关于学成网</dt>
                    <dd><a href="#">关于</dd>
                    <dd><a href="#">关于</dd>
                    <dd><a href="#">关于</dd>
                    <dd><a href="#">关于</dd>
                    <dd><a href="#">关于</dd>


                </dl>
            </div>
        </div>
    </div>
</body>

</html>

css

    * {
        margin: 0;
        padding: 0;
    }
    
    .w {
        width: 1200px;
        margin: auto;
    }
    
    body {
        height: 5000px;
    }
    
    li {
        list-style: none;
    }
    
    a {
        text-decoration: none;
    }
    
    .clearfix:before,
    .clearfix:after {
        content: "";
        display: table;
    }
    
    .clearfix:after {
        clear: both;
    }
    
    .clearfix {
        *zoom: 1;
    }
    
    .header {
        height: 42px;
        background-color: grey;
        margin: 30px auto;
    }
    
    .logo {
        float: left;
        width: 198px;
        height: 42px;
        background-color: gray;
    }
    
    .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;
        color: black;
    }
    
    .nav ul li a:hover {
        border-bottom: 2px solid #00a4ff;
        color: #00a4ff;
    }
    
    .search {
        float: left;
        width: 412px;
        height: 42px;
        background-color: skyblue;
        margin-left: 50px;
    }
    
    .search input {
        float: left;
        width: 345px;
        height: 40px;
        border: 1px solid #00a4ff;
        color: grey;
        font-size: 14px;
        padding-left: 15px;
    }
    
    .search button {
        float: left;
        width: 50px;
        height: 42px;
        border: 0;
    }
    
    .user {
        float: right;
        line-height: 42px;
        margin-right: 30px;
    }
    
    .banner {
        height: 421px;
        background-color: blue;
    }
    
    .banner .w {
        height: 421px;
        background: url(images/banner2_20190819_210028.png) no-repeat top center;
        margin: auto;
    }
    
    .subnav {
        float: left;
        height: 421px;
        width: 190px;
        background: rgba( 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 span {
        float: right;
    }
    
    .subnav ul li a:hover {
        color: #00a4ff;
    }
    
    .course {
        float: right;
        width: 230px;
        height: 300px;
        background-color: pink;
        margin-top: 50px;
    }
    
    .course h2 {
        height: 48px;
        background-color: #00a4ff;
        text-align: center;
        /* 垂直居中 */
        line-height: 48px;
        font-size: 18px;
        color: #fff;
    }
    
    .bd {
        padding: 0 20px;
    }
    
    .bd ul li {
        padding: 15px 0;
        border-bottom: 1px solid #ccc;
    }
    
    .bd ul li h4 {
        font-size: 16px;
        color: grey;
    }
    
    .bd ul li p {
        font-size: 12px;
        color: grey;
    }
    
    .bd .more {
        display: block;
        height: 38px;
        border: 1px solid #00a4ff;
        text-align: center;
        line-height: 38px;
        color: #00a4ff;
        font-size: 16px;
        font-weight: 700px;
    }
    
    .goods {
        height: 60px;
        background-color: powderblue;
        margin-top: 10px;
        box-shadow: 0 2px 3px 3px rgba(0, 0, 0, .3);
        line-height: 60px;
    }
    
    .goods h3 {
        float: left;
        margin-left: 30px;
        font-size: 16px;
        color: #000;
    }
    
    .goods ul {
        float: left;
        margin-left: 30px;
    }
    
    .goods ul li a {
        padding: 0 30px;
        font-size: 16px;
        color: #000;
        border-left: 1px solid #ccc;
    }
    
    .goods ul li {
        float: left;
    }
    
    .mod {
        float: right;
        margin-right: 30px;
    }
    
    .box {
        margin-top: 30px;
    }
    
    .box-hd {
        height: 45px;
    }
    
    .box-hd h3 {
        float: left;
        font-size: 20px;
        color: #494949;
    }
    
    .box-hd a {
        float: right;
        font-size: 12px;
        color: #a5a5a5;
        margin-right: 30px;
    }
    
    .box-bd ul {
        width: 1225px;
    }
    
    .box-bd ul li {
        float: left;
        width: 230px;
        height: 270px;
        background-color: gray;
        margin-right: 15px;
        margin-bottom: 15px;
    }
    
    .box-bd ul li img {
        width: 100%;
    }
    
    .box-bd ul li h4 {
        margin: 20px 20px 20px 25px;
        font-size: 14px;
        color: #050505;
        font-weight: 400px;
    }
    
    .box-bd .info {
        margin: 0 20px 0 20px;
        font-size: 12px;
        color: #999;
    }
    
    .box-bd .info span {
        color: salmon;
    }
    
    .footer {
        height: 415px;
        background-color: salmon;
    }
    
    .footer .w {
        padding-top: 35px;
    }
    
    .copyright {
        float: left;
    }
    
    .copyright p {
        font-size: 12px;
        color: #000;
        margin: 20px 0 15px 0;
    }
    
    .copyright .app {
        display: block;
        height: 33px;
        width: 118px;
        border: 1px solid #00a4ff;
        text-align: center;
        line-height: 33px;
        color: #00a4ff;
        font-size: 16px;
    }
    
    .links {
        float: right;
    }
    
    .links dl {
        float: left;
        margin-left: 16px;
    }
    
    .links dl dt {
        font-size: 16px;
        color: #333;
        margin-bottom: 15px;
    }
    
    .links dl dd a {
        font-size: 12px;
        color: #333;
    }
凑数的日子
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
学成在线项目实训内容
qq_50651123的博客
06-09 307
学成在线项目实训内容 效果图： 使用的工具是HBuilder X 左边的目录 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-
学成在线官网（含PSD源文件）
qq_62185873的博客
05-16 730
给大家推荐一个软件——像素大师，有帮助！！！
学成在线首页——静态页面基础项目（HTML+CSS）【学习笔记】
lilien的博客
11-21 5450
来源：黑马前端 难度：⭐（简单）——适合刚学习html和css的新手小白 源码和素材：链接: https://pan.baidu.com/s/1Qf6OuMNyFDswJOcB93NCrw 提取码: fsih 效果图： 1 CSS属性书写顺序(重点) 建议遵循以下顺序： 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式） 自身属性：width / height / margi
学成在线首页
qq_43987112的博客
06-16 281
学成在线首页
学成在线网站首页
笨笨的博客
12-16 2672
HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学成在线-不是所有的网站都叫学成在线</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- header头部模块开始 --> &...
网络药理学、代谢组学的应用
最新发布
03-28
- **创新性**：通过综合运用网络药理学和代谢组学等现代生物信息学技术，深入探讨淫羊藿苷在骨质疏松治疗中的作用机制，有望为骨质疏松的临床治疗提供新的思路和方法。 综上所述，本课题旨在通过网络药理学和代谢组...
网络应用和网络综合技术PPT学习教案.pptx
10-01
8. **网络传输技术**：网络传输技术包括了多种传输系统，如传输布线系统、同步数字体系（SDH）、准同步数字体系（PDH）、数字微波传输、卫星通信和有线电视网。每种传输技术都有其适用的场景和优缺点，如光纤通信以...
学成在线PSD源文件下载
09-20
1. 学成网首页.psd - 这是学成在线网站主页的设计源文件，设计师可以查看其分层结构，理解每个元素是如何构建的，包括颜色、字体、图片等。 2. Cutterman_panel_3.5.0_201711141423.zip - 这可能是一个切图工具的...
学成在线网站首页制作
07-31
使用HTML和CSS完成的学成在线网站首页案例，压缩包中附有完成制作所需要的图片素材，代码大概1000多行，适合初学者练手。
综合网网址导航源码程序v20130818
04-02
综合网网址导航源码程序v20130818，综合网网址导航源码程序最大特点改变了以往网址站一成不变的模式，采用谁对我站贡献大，我站也给予他最大的宣传和展示的机会；只要您在本系统注册登记您的网址，然后在你网站做好我站连接，只要平常连接即可，每次从您网站有用户到我站，那么你的网站将在最近入站以及你网站所在分类的第一位置！连接双方公正平等。 系统前台简介： 1.采用ASP+ACCESS架构，安全稳定 2.防注入功能 3.支持无限级分类，方便自由 4.包含全站数据，拥有上千条网站网址； 5.数据库经过防下载等安全处理，后台可超强命名，随意改动； 6.每来访一个IP，来访网站就会自动排到第一，当天来路不同，显示颜色也不同，鼓励点入（特色） 7.前台统计数据调用，排行数据调用，最新加入网站调用，未审核网站调用等； 8.申请加入免收录网站友情链接网的网站按最后点进的时间排序首页和分类显示链接， 9.分类以昨日点入时间为准，每晚十二点后生成静态。 10.每来访一个IP，就会自动排到第一，当天来路次数不同，显示颜色也不同：有1次即显示，10次即套蓝色，30次即套红色加粗 11.酷站大全里的分类及收录的网站，可后台修改推荐到首页，按推荐级别排行顺序（新） 12.首页白天3分钟，晚上5分钟自动更新一次，全站24小时手动更新一次。 13.站内搜索功能，方便用户找到自己想要的网址 14.网址库中分离出的“名站导航”、“实用工具”、“友情链接” 15.程序全面优化和升级，增强对搜索引擎的收录功能； 16.新闻文章发布功能。 17.网站公告发布功能。 系统后台功能： 1.设置网站的基本信息。 2.管理员帐号/密码更改。 3.添加、修改、删除网站分类。 4.分类、酷站可修改可设置首页是否显示。 5.添加删除修改网址内容，是否推荐，是否审核 6.一健清除网站数据功能，方便重新分类和做行业网站 7.后台网站黑名单功能，让黑名单网站不能显示 8.网站点入点出：清除10分钟数据，清除今天点入数据，清除总点出数据 9.网址库中分离出“名站导航”、“实用工具”、“友情链接”单独管理 10.“名站导航”、“实用工具”可由快速通道添加。 11.“友情链接”从网址列表中设置。 12.站内搜索功能。 13.生成htm分类页面，生成htm主页及其它页面。 14.后台全模板管理与修改，方便你秀出自己的风格；可修改主页，分类及其它页面模板。 15.具有数据在线“备份”、“压缩”、“恢复”功能，让你高枕无忧 16.具有在线广告管理功能，后台广告位标注，全站广告后台控制，轻松更换自己的广告信息；赚钱更容易！ 17.新闻文章和公告后台新增和发布功能 18.后台网址管理增加：总出倒序、总入倒序、天入倒序、十入倒序、点入时间倒序、推荐级别倒序、推荐级别正序、按类型（分类）选择这些选项查看网址，更方便大家管理网址 19.后台功能修改为：查看所有的网址、站长加入的网址、用户加入已审核、用户加入未审核、有来路入未审核、被隐藏网站名单、总来路小于五次 V2013.0818版本更新说明 对网址进行添加和删除部分无效的网址 对广告位进行部分修改 安装使用方法 1.解开本程序包，上传到支持ASP的服务器上。 2.数据库文件在data目录，已经做了防下载处理。 3.后台登录地址在admin/index.asp，默认管理员账号:admin，密码:admin，默认的后台安全码是zonghe.com。安全码更改:admin文件夹里的psd.asp文件，把"zonghe.com"这个改成你想要的后台安全验证码。 4.进入后台根据提示设置你网站的基本信息。 5.生成全站及分类一次。 6.为了安全起见,请在后台将管理员帐号和密码全部修改成你自己的。
学成在线项目
08-26
学成在线服务端基于Spring Boot构建，采用Spring Cloud微服务框架。 持久层：MySQL、MongoDB、Redis、ElasticSearch 数据访问层：使用Spring Data JPA 、Mybatis、Spring Data Mongodb等 业务层：Spring IOC、Aop事务控制、Spring Task任务调度、Feign、Ribbon、Spring AMQP、Spring Data Redis 等。 控制层：Spring MVC、FastJSON、RestTemplate、Spring Security Oauth2+JWT等 微服务治理：Eureka、Zuul、Hystrix、Spring Cloud Config等
学成在线项目实例web前端
11-29
学成在线项目源码，素材。
学成在线简易小网站
qq_45495031的博客
04-04 2万+
学成在线案例 必备知识：html和css基础知识 具体代码如下： html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-...
学成在线官网首页完整版（含psd源文件）
热门推荐
weixin_53446914的博客
08-11 3万+
文章目录 前言 一，案例展示 1.源代码 总结 前言 按照psd图片一点点代码敲出来的，开始的时候是跟着老师做的后来就是自己自由发挥了。 psd的文件可以去直接下载这位老师的，源代码和照片都放在这里可以去查看，希望对你有用。 一、案例展示 1.源代码 html代码： ​ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> ...
学成在线教育平台
王小二的博客
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>学成在线&...
学成在线首页完整版
GoldenaArcher的博客
04-21 3578
跟着 PSD 切图做完了，把 promo-nav，左边浮动的边框等都补充完成了。当然，值目前都是写死的，移动端还没适配——书和视频都还没看到那里。 第一版跟着视频做的，也写了步骤分解，详情可以看这个：学成在线 制作分解版。 源码在 github 上，新写完的在 v2 文件夹里。 PSD与完成版与第一版之间的对比： PSD 完成版 第一版 具体的变化如下： 头部改用 flex 完成……本来想用 position + float 写的，后面折腾了很久没有折腾出来，就干脆偷懒
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值