2021-03-07

最新推荐文章于 2024-09-10 12:43:55 发布
最新推荐文章于 2024-09-10 12:43:55 发布
阅读量88 收藏
点赞数
分类专栏： 随笔 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tongyangzhuanqu/article/details/114486822
版权

学成在线案例

<!-- 头部制作 -->
    <div class="header w">
        <div class="logo">
            <!-- logo部分 -->
            <img src="../学成在线案例/案列_files/下载.png" alt="">
        </div>

            <!-- 导航栏nav-->
         <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"  placeholder="输入关键词">
            <button></button>
        </div>
        <div class="user">
            <img src="../学成在线案例/用户图像.png" alt="">
            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>
                      <div class="bda">
                          <a href="#">全部课程</a>
                      </div>

                    </ul>
                </div>

            </div>
        </div>

    </div>
    <!-- 精品推荐 -->
    <div class="goods w">  
        <h4>精品推荐</h4>
       <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="#">JavaWeb</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/学成网首页_16.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info">
                        <span>高级</span> •  1125人在学习
                    </div>

                </li>
                <li>
                    <em><img src="../学成在线案例/images/学成网首页_19.jpg" alt=""></em>
                    <img src="../学成在线案例/精品推荐内容 拷贝 5.png" alt="">
                </li>
                <li>      <img src="../学成在线案例/images/学成网首页_16.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info">
                        <span>高级</span> •  1125人在学习
                    </div>
</li>
                <li>      <img src="../学成在线案例/images/学成网首页_16.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info">
                        <span>高级</span> •  1125人在学习
                    </div>
</li>
                <li>      <img src="../学成在线案例/images/学成网首页_16.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info">
                        <span>高级</span> •  1125人在学习
                    </div>
</li>
                <li>      <img src="../学成在线案例/images/学成网首页_16.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info">
                        <span>高级</span> •  1125人在学习
                    </div>
</li>
                <li>      <img src="../学成在线案例/images/学成网首页_16.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info">
                        <span>高级</span> •  1125人在学习
                    </div>
</li>
                <li>      <img src="../学成在线案例/images/学成网首页_16.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info">
                        <span>高级</span> •  1125人在学习
                    </div>
</li>
                <li>      <img src="../学成在线案例/images/学成网首页_16.jpg" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info">
                        <span>高级</span> •  1125人在学习
                    </div>
</li>


            </ul>
        </div>
    </div>
    <!-- footer -->
    <div class="footer">
        <div class="w">
            <div class="copyright">
                <img src="../学成在线案例/案列_files/下载.png" alt="">
                <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程</br>
                    © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
                 <a href="#">下载APP</a>

             </div>
         </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>

*{
    padding: 0;
    margin:0;
}
a{
    text-decoration: none;
}

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

}
.clearfix::before,.clearfix::after{
    content:"";
    display: table;
}
.clearfix::after{
    clear: both;
}
.clearfix{
    *zoom:1;

}
.header {
    height:42px;
    /* background-color: pink; */
    margin:30px auto;
}
.logo{
    width:198px;
    height:42px;
    /* background-color: purple; */
    float:left;
    
}
li{
    list-style: none;
}
.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:#050505;
    text-decoration: none;

}
.nav ul li a:hover{
    border-bottom: 2px solid #00a4ff;
    color:#00a4ff
}
.search{
    float:left;
    width:412px;
    height:42px;
    /* background-color: blue; */
    margin-left: 70px;
}
.search input{
    float:left;
    width:360px;
    height: 40px;
    border:1px solid #00a4ff;
    border-right:0px;



}
/* placeholder属性描述输入字段预期值的提示信息 */
input::placeholder{
    color:#cececf;
    padding-left: 15px;
}
.search button{
    float:left;
    width:50px;
    height:42px;
    background: url(../学成在线案例/images/images/123_06.jpg);
    /* button按钮自带一个边框 */
    border:0px;

}
.user{
    float:right;
    line-height:42px;
    margin-right:30px;
    font-size: 14px;
    color:#666;
}
body{
    background-color: #f3f5f7;

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

}
.banner .w{
    height:420px;
    /* 垂直靠上  水平居中 */
    background:url(../学成在线案例/banner2.png); no-repeat top center;
}
.subnav{
    height:420px;
    width:190px;
    /* rgba(0,0,0是黑色) */
    background:rgba(0,0,0,0.3);
    float:left;
}
.subnav ul li{
    height:45px;
    line-height:45px;
    padding:0 20px;
}
.subnav ul li a{
    font-size:14px;
    color:#fff;
    text-decoration: none;

}
.subnav ul li a span{
    float:right;
}
.subnav ul li a:hover{
    color:#00a4ff;

}
.course{
    float: right;
    width:230px;
    height:300px;
    background-color: #fff;
    /* 浮动的盒子不会有外边距合并的问题 */
    margin-top:50px;

}
.course h2{
    font-size:18px;
    height:48px;
    background-color: #9bceea;
    text-align:center;
    line-height:48px;
    color:#fff;
}
.bd ul li h4{
    font-size:16px;
    color:#4e4e4e;

}
.bd ul li{
    padding:15px 20px;
    border-bottom:1px solid #ccc;
}
.bd ul li p{
    font-size:12px;
    color:#5a5a5a;
}
.bda a{
    display: block;
    height:38px;
    width:198px;
    line-height: 38px;
    text-align: center;
    border:1px solid #00a4ff;
    color:#00a4ff;
    margin-top:5px;
    margin-left:16px;
    font-size:16px;
    font-weight: 700; 
    /* 文字加粗 */
}
.goods {
    background-color: #fff;
    height:60px;
    box-shadow: 0 2px 3px 3px rgba(0,0,0,0.1);
    line-height:60px;
    /* 行高会继承给孩子 */
}
.goods h4{
    float: left;
    margin-left:30px;
    font-size:16px;
    color:#00a4ff;
}
.goods ul li {
    float:left;
    /* padding-left:36px; */
}
.goods ul li a{
    border-left:#ccc solid 1px;
    color:#050505;
    padding-left:36px;
    margin-left:32px;
}
.mod{
    float:right;
    margin-right:30px;
    font-size:14px;
    color:#00a4ff;
}
.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-top:10px;
    margin-right:30px;
}
.box-bd ul{
    width:1225px;
}
/* 把li的父亲ul修改的足够宽，就能把li装开 */
.box-bd ul li{
    float:left;
    width:228px;
    height:270px;
    background-color:#fff;
    margin-right:15px;
    margin-bottom:15px;
    /* 子绝父相 */
    position: relative;
}
.box-bd ul li >img{
    /* li的亲儿子的img */
    width:100%;
}
.box-bd ul li em{
    position: absolute;
    top:4px;
    right:-6px;
}
.box-bd ul li h4{
    font-size:14px;
    color:#050505;
    margin:20px 20px 20px 25px;
    font-weight:400;
    /* 不加粗 */
}
.box-bd .info{
    margin:0 20px 0 25px;
    font-size: 12px;
    color:#999;
}
.box-bd .info span{
    color:#ffa57b;
}
.footer{
    height: 417px;
    background-color: #fff;

}
.footer .w{
    padding-top:35px;
}
.copyright{
    float:left;

}
.copyright p{
    font-size:12px;
    color:#666;
    margin:20px 0 15px 0;
}
.copyright a{
    display: block;
    width:118px;
    height:33px;
    border:1px solid #00a4ff;
    text-align: center;
    line-height: 33px;
    color:#00a4ff;
    font-size: 16px;
}
.links{
    float:right;
}
.links dl{
    float:left;
    margin-left: 90px;
}
.links dl dt{
    font-size:16px;
    color:#333;
    margin-bottom: 5px;
}
.links dl dd a{
    font-size:12px;
    color:#333;
}

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

痛仰-向生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用html和css进行红米案例、学成在线开发
前端小白在前进的博客
01-31 1288
HTML5的学习及练习 红米个人案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>redmi</title> </head> <body> <div class="father"> <img src="images/red.jpg" alt=""> &.
红米手机适配 H5适配 移动端适配问题
王敬辉的博客
05-21 791
这几天做个H5页面，采用的媒体查询+scss+rem的方式做的适配。 测试中遇到了一个问题，其他设备上布局都正常，唯独红米出现了bug(两侧有余白) 红米手机出问题图：正常显示图 应该是这个手机机型没有兼顾到，使用@media(媒体查询)没有包含在内。 就写了两句简单的代码：var w=window.screen.width; alert(w); 用红米note7pro手机打开这个页面，就能看到弹出的屏幕宽度393px，真是奇葩；
响应式和页面自适应自动适应屏幕大小开发精要
milijiangjun的博客
11-11 2739
1、首先在网页代码的头部，加入一行viewport标签 在网页的头部中增加以下这句话，可以让网页的宽度自动适应手机屏幕的宽度 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <!DOCTYPE html> <html> <head> <
静态：HTML+CSS（小米官网）
m0_70870089的博客
07-13 225
没什么好说的。
2021-07-03
w364767614的博客
07-03 282
上次基本上提到的动态范围调整的一些基本概念，模块图等，这次继续说它的原理。 如果简单的说一个DRC，应该很快就可以说完，但随着分析的深入，如果考虑 soft knee，attack time，release time，RMS peak detect 这些细节问题，DRC就变得一个较为复杂的事情了..... 不过相对于音频算法的其他模块，AEC，NR来讲，这个算是最简单模块了，因为至少它处理的还只是 线性...
2021-07-02
yuge1023的博客
07-02 2342
股指今天单边下跌。IF/IH都跌了2%以上。 贵金属、黑色系日线都横盘收敛了。 不知道什么原因，昨晚原油高开，豆粕也高开。 原油沥青PTA都是日线级别多头，指不定什么时候继续上涨，是不是应该做多隔夜，或者逢低买入。 纯碱尾盘收高了 豆粕增仓6万手。 棕榈最强。 郑棉增仓4万手，日线级别突破了。 鸡蛋今天单边下跌2.7%，生猪横盘震荡。 ...
2021-03-07.png
03-07
python数字求和
2021-03-07-
03-11
hou 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and ...
2021-03-07 (4).png
03-07
计算圆的面积
2021-03-07 (3).png
03-07
计算三角形的面积
2021-03-07 (2).png
03-07
python二次方程
数据结构-栈、队列-相关练习
2401_86587256的博客
09-05 1450
数据结构初阶部分，栈和队列的相关练习。
HTML转义字符对照表
云博客_资源宝分享
09-10 483
HTML转义字符对照表
深入解析`node-html-to-image`的`main.ts`源码：实现HTML到图片的转换
软考鸭
09-09 687
的主要功能是将HTML字符串或文件渲染为图片。它支持多种输出格式（如PNG、JPEG等），并提供了一系列配置选项，如图片质量、透明度等。该库利用Puppeteer（一个无头Chrome浏览器）来实现HTML的渲染和截图功能。Cluster：来自库，用于管理无头浏览器的并发执行。Screenshot：自定义的截图模型。：执行截图操作的函数。Options和：类型定义，用于确保传入参数的合法性。本文通过对的main.ts源码的深入解析，揭示了该库如何将HTML内容转换为图片的内部工作原理。
html备忘录
lulei5153的博客
09-05 1060
【代码】html备忘录。
(代码可运行)Bootstrap框架的HTML示例
最新发布
Keep trying, keep going
09-10 466
Bootstrap：一套流行的前端开发框架，基于HTML、CSS和JavaScript，适用于快速构建响应式Web应用。等类），可以快速构建一个美观且响应式的Web应用。请将这段代码复制到一个HTML文件中，并在浏览器中打开以查看效果。这个示例展示了一个简单的响应式布局，包括一个居中的标题和三个卡片组件。通过使用Bootstrap的栅格系统（以下是一个使用Bootstrap构建的。
HTML生日蛋糕
兔子王
09-07 1868
用HTML语言实现生日蛋糕效果的完整代码。
【HTML】可展开的顶层菜单栏
weixin_51649465的博客
09-07 331
【代码】【Html】可展开的顶层菜单栏。
前端：HTML、CSS、JS、Vue
云扬的博客
09-04 4003
本文主要介绍了HTML、CSS、JavaScript、Vue的基本语法和使用。供个人学习使用
.net判断"2021-03-07 21:25"是否是今天
05-25
DateTime dateTime = DateTime.ParseExact("2021-03-07 21:25", "yyyy-MM-dd HH:mm", CultureInfo.InvariantCulture); // 获取今天的日期 DateTime today = DateTime.Today; // 判断日期时间是否是今天 bool is...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值