web前端开发学成在线首页案例+源码

首页index.html 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>学成在线首页</title><link rel="stylesheet" href="style.css"></head><body><!-- 1 头部区域start --><div class="header w"><!-- logo部分 --><div class="logo"><img src="data:images/logo.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><!-- 搜索框search部分 --><div class="search"><input type="text" value="请输入关键词"><button></button></div><!-- 用户user部分 --><div class="user"><img src="data:images/user.png" alt="">fsklzmy</div></div><!-- 2 banner部分start --><div class="banner"><!-- 版心部分 --><div class="w"><!-- 侧边栏部分 --><div class="subnav"><ul><li><a href="#">前端开发 <span id="">></span></a></li><li><a href="#">后端开发 <span id="">></span></a></li><li><a href="#">移动开发 <span id="">></span></a></li><li><a href="#">人工智能 <span id="">></span></a></li><li><a href="#">商业预测 <span id="">></span></a></li><li><a href="#">云计算&大数据 <span id="">></span></a></li><li><a href="#">运维&测试 <span id="">></span></a></li><li><a href="#">UI设计 <span id="">></span></a></li><li><a href="#">产品 <span id="">></span></a></li></ul></div><!-- 课程部分 --><div class="course"><div class="title">  <!-- 也可以直接用标题h2 -->我的课程表</div><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="all-course">全部课程</a></div></div></div>  </div><!-- 3 精品推荐模块start --><div class="goods w"><h3>精品推荐</h3><ul><li><a href="#">JQuery</a></li><li><a href="#">JQuery</a></li><li><a href="#">JQuery</a></li><li><a href="#">JQuery</a></li><li><a href="#">JQuery</a></li><li><a href="#">JQuery</a></li></ul><a href="#" class="mod">修改兴趣</a></div><!-- 4.box核心剩余部分 --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><div class="box-bd"><ul class="clearfix"><li><em><img src="data:images/new .png" alt=""></em><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练  </h4><div class="info"><span>高级</span>  •  1125人在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练  </h4><div class="info"><span>高级</span>  •  1125人在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练  </h4><div class="info"><span>高级</span>  •  1125人在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练  </h4><div class="info"><span>高级</span>  •  1125人在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练  </h4><div class="info"><span>高级</span>  •  1125人在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练  </h4><div class="info"><span>高级</span>  •  1125人在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练  </h4><div class="info"><span>高级</span>  •  1125人在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练  </h4><div class="info"><span>高级</span>  •  1125人在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练  </h4><div class="info"><span>高级</span>  •  1125人在学习</div></li><li><img src="data:images/pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练  </h4><div class="info"><span>高级</span>  •  1125人在学习</div></li></ul></div></div><!-- 5.编程begin入门部分开始 --><div class="begin w"><div class="begin-title"><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="#" class="all">查看全部</a></div><div class="begin-body"><div class="php"><h4><span class="my">PHP入门：</span> <br><br>基础语法到实际运用</h4><ul><li>零基础入门：语法与界</li><li>进阶：网络与数据缓存</li><li>界面到数据存储</li></ul></div><div class="content"><img src="data:images/happy.png" alt=""><ul><li><a href="#" ><img src="data:images/pic2.png" alt=""></a><h4>Android Hybrid APP开发实战 H5+原生！</h4><p><span>高级 </span> •  1125人在学习</p></li><li><a href="#" ><img src="data:images/pic2.png" alt=""></a><h4>Android Hybrid APP开发实战 H5+原生！</h4><p><span>高级 </span> •  1125人在学习</p></li><li><a href="#" ><img src="data:images/pic2.png" alt=""></a><h4>Android Hybrid APP开发实战 H5+原生！</h4><p><span>高级 </span> •  1125人在学习</p></li><li><a href="#" ><img src="data:images/pic2.png" alt=""></a><h4>Android Hybrid APP开发实战 H5+原生！</h4><p><span>高级 </span> •  1125人在学习</p></li></ul></div></div></div><!-- 尾部footer部分 --><div class="footer"><div class="w"><div class="copyright"><img src="data:images/logo.png" alt=""><p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br />© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p><a href="#" class="app">下载App</a></div><div class="links"><!-- 使用自定义列表dl>dt+dd --><dl class="about"><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></dl><dl><dt>合作伙伴</dt><dd><a href="#">合作机构</a></dd><dd><a href="#">合作导师</a></dd></dl></div></div></div> </body>
</html>

css代码

*{margin: 0;padding: 0;
}
/* 版心,使用时可调用 */
.w{width: 1200px;margin:0 auto;
}
body{background-color: #f3f5f7;
}
li{list-style: none;
}
a{text-decoration: none;
}
/* 清除浮动 */
.clearfix:before, .clearfix::after{content: "";display: table;
}
.clearfix:after{clear: both;
}
.clearfix{*zoom: 1;
}
/* header头部部分 */
.header{height: 42px;/* 会层叠w里面的margin,所以设置为auto */margin: 30px auto;
}
.logo{width: 198px;height: 42px;/* background-color: purple; */float: left;/* vertical-align: middle; */
}
.nav{float: left;margin:0 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{float: left;height: 42px;width: 412px;margin-left: 10px;
}
.search input{width: 345px;height: 40px;border: 1px solid #00a4ff;border-right: 0;font-size: 14px;color: #bfbfbf;padding-left: 15px;float: left;
}
.search button{float: left;width: 50px;height: 42px;border: 0;background: url(images/search.png);
}
.user{float: right;line-height: 42px;margin-right: 30px;font-size: 14px;color: #666666;}
.user img{vertical-align: middle;
}
/* banner模块部分 */
.banner{background-color: #1c036c;height: 421px;
}
.banner .w{height: 421px;background-color: pink;background: url(images/banner2.png) no-repeat top center;
}
.banner .w .subnav{float: left;height: 421px;width: 191px;background:rgba(0, 0, 0, 0.3);}
.subnav ul li a{color:#ffffff;font-size: 14px;/* line-height: 45px; a是行内元素,不能添加高度,得给li添加 */}
.subnav ul li{line-height: 45px;padding: 0 20px;
}
.subnav ul li a:hover{color: #00b4ff;
}
.subnav ul li a span{float: right;
}
.course{float: right;width: 230px;height: 300px;background-color: white;/* 浮动的盒子不会有外边距塌陷问题 */margin-top: 50px;
}
.course .title{background-color: #9bceea;height: 48px;line-height: 48px;font-size: 18px;font-weight: 700;color: #ffffff;text-align: center; /* 文字水平居中 */
}
.course .bd{padding: 0 20px;
}
.course .bd ul li h4{font-size: 16px;color: #6f6f6f;
}
.course .bd ul li p{font-size: 12px;color: #bfbfbf;
}
.course .bd ul li{padding: 14px 0;border-bottom: 1px solid #efefef;
}
.course .bd .all-course{/* a 是行内元素,必须要转化成行内块元素 */display: block;border: 1px solid #00a4ff;margin-top: 5px;height: 38px;color: #00a4ff;font-size: 16px;font-weight: 700;text-align: center;line-height: 38px;
}
/* 推荐模块 */
.goods{margin-top: 8px;background-color: #fff;height: 60px;box-shadow: 0 2px 1px 1px rgba(0, 0,0, 0.1);/* 子元素可继承 */line-height: 60px;
}
.goods h3{display: block;float: left;font-size: 16px;color: #00a4ff;width: 70px;margin-left: 30px;
}
.goods ul{float: left;margin-left: 35px;
}
.goods ul li{float: left;
}
.goods ul li a{padding: 0 30px;  /* 字数不一定padding撑开盒子即可 */font-size:16px;color: #050505;border-left: 1px solid #bfbfbf;
}
.goods .mod{float: right;font-size: 14px;color: #00a4ff;margin-right: 30px;
}
/* 推荐剩余模块 */
.box{margin-top: 30px;
}
.box .box-hd{height: 45px;
}
.box .box-hd h3{float: left;font-size: 20px;color: #494949;
}
.box .box-hd a{float: right;font-size: 12px;color: #a5a5a5;margin-top: 10px;margin-right: 32px;
}
/* 给每个小li设置右边距后盛不下,必有盒子挤下去;给父元素ul设置足够大的宽度即可 */
.box-bd ul{width: 1225px;
}
.box-bd ul li{/* 子绝父相 */position: relative;float: left;width: 228px;height: 270px;background-color: #ffffff;margin-right: 15px;margin-bottom: 15px;
}
.box-bd ul li em{position: absolute;right: -4px;top: 10px;
}
.box-bd ul li > img{width: 100%;
}
.box-bd ul li h4{font-size: 14px;color: #050505;font-weight: 400;margin: 25px 20px 20px 24px;
}
.box-bd ul .info{font-size: 12px;color: #999999;margin: 0 20px 0 24px;
}
.box-bd ul .info span{color: #ff7c2d;
}
/* 编程入门部分 */.begin .begin-title{height: 60px;/* background-color: pink; */line-height: 60px;
}
.begin .begin-title h3{float: left;font-size: 20px;color: #494949;
}
.begin-title ul{float: left;/* margin: 0 auto; *//* text-align: center; */padding: 0 310px;
}
.begin-title ul li{/* float: left; */display: inline-block;padding-right: 70px;
}
.begin-title ul li a{font-size: 16px;color: #868686;
}
.begin-title ul li a:hover{color: #00a4ff;
}
.begin .begin-title .all{float: right;margin-right: 28px;font-size: 12px;color: #a5a5a5;
}
.begin-body{height: 390px;magin-bottom: 10px;/* background-color: pink; */}
.begin-body .php{float: left;width: 229px;height: 390px;background-color: purple;background-image: url(images/php.png);
}
.begin-body .php h4{/* float: left; */font-size: 18px;color: #fff;margin-top: 47px;margin-left: 35px;
}
.begin-body .php h4 .my{margin-bottom: 40px;
}
.begin-body .php ul li{font-size: 14px;color: #fff;font-weight: 700;margin-top: 50px;margin-left: 35px;
}
.begin-body .content{float: right;margin-left: 0 5px;float: right;width: 960px;height: 390px;
}
.begin-body .content ul{float: left;/* width: 330px; */height: 270px;margin-top: 22px;margin-right: 5px;
}
.begin-body .content ul img{height: 100%;width: 100%;
}
.begin-body .content ul li{display: inline-block;width: 227px;margin-right: 8px;
}
.begin-body .content ul li h4{font-size: 14px;color: #050505;margin: 20px 0 20px 20px;font-weight: 400;
}
.begin-body .content ul li p{font-size: 12px;color: #999999;margin-left: 20px;
}
.begin-body .content ul li p span{color: #ff7c2d;
}
/* 底部部分 */
.footer{width: 100%;height: 418px;background-color: #ffffff;
}
.footer .w{padding-top: 35px;
}
.copyright{float: left;
}
.copyright p{margin-top: 25px;margin-bottom: 18px;font-size: 12px;color: #666666;
}
.copyright .app{display: block;width: 118px;height: 34px;border: 1px solid #00a4ff;/* background-color: #ffffff; */color: #00a4ff;text-align: center;line-height: 34px;font-size: 16px;
}
.links{float: right;
}
.links dl{float: left;margin-left: 150px;
}
.links dl dt{font-size: 16px;color: #333333;margin-bottom: 5px;
}
.links dl dd a{font-size: 12px;color:#333333;
}

web前端开发学成在线首页案例+源码相关推荐

web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）
文章目录传统网页布局的三种方式标准流(普通流.文档流) 浮动(为什么需要浮动?) 浮动特性浮动元素会脱离标准流,可以与普通流的元素相重叠如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并 ...
综合案例之学成在线首页
综合案例之学成在线首页 1 准备素材和工具 2 案例准备工作 3 CSS属性书写属性 4 页面布局整体思路 5 确定版心 6 头部制作 7 banner制作 8 精品推荐小模块 9 精品推荐大模块 1 ...
学成在线首页【前端知识】
写在前面的话: 本章内容:学成在线首页所利用的知识:CSS基本知识,盒子模型,CSS综合参考视频:黑马程序员pink老师前端入门教学点击链接,看视频学习https://www.bilibili. ...
学成在线首页pnf素材
学成在线首页已整理的图片素材,供大家学习. 阿里云盘链接:阿里云盘分享提取码:4h3u
java flexpaper_java web word文件 pdf文件在线预览源码(flexpaper)
[实例简介]java web word文件 pdf文件在线预览源码经过测试 [实例截图] [核心代码] BrowsenOnline html, body{ height:100%; } body { ...
学成在线首页——静态页面基础项目（HTML+CSS）【学习笔记】
来源:黑马前端难度:⭐(简单)--适合刚学习html和css的新手小白源码和素材:链接: https://pan.baidu.com/s/1Qf6OuMNyFDswJOcB93NCrw 提取码: ...
【前端】学成在线网页项目练习制作
目录 html代码 css代码 Hello我是Leo,最近开始学习前端,学习的差不多了开始做简单的项目. 这是我学习前端路上的一个练习,跟着billbill黑马程序员pink老师做的,语法有不规范的地 ...
Web前端：Web前端开发工程师工作内容网页案例设计
题目要求参考代码 <!DOCTYPE html> <html><head><meta charset="utf-8"><ti ...
个人设计web前端大作业~响应式游戏网站源码(HTML+CSS+Bootstrap)
HTML期末大作业课程设计游戏主题html5网页~响应式游戏网站(HTML+CSS+Bootstrap) ~个人设计web前端大作业临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头 ...

web前端开发学成在线首页案例+源码

首页index.html 代码

css代码

web前端开发学成在线首页案例+源码相关推荐

最新文章

热门文章

web前端开发 学成在线首页案例+源码

首页index.html 代码

css代码

web前端开发 学成在线首页案例+源码相关推荐

最新文章

热门文章

web前端开发学成在线首页案例+源码

web前端开发学成在线首页案例+源码相关推荐