这是我第一次做一个完整的静态页面，是照着PSD图做的。有做的不对或者不好的地方，欢迎批评指正。

效果图：



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"><div class="logo"></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="输入关键词" class="text"><input type="button" class="btn"></div><div class="user"><a href="#"></a><span>qq-Starry</span></div></div><div class="banner"><div class=" center 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="#">云计算&amp大数据<span>&gt;</span></a></li><li><a href="#">运维&amp测试<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"><h2>我的课程表</h2><div class="line1"><div><a href="#" class="continue">继续学习</a><a href="#" class="subject">程序语言设计</a></div><a href="#" class="schedule">正在学习-使用对象</a></div><div class="line2"><div><a href="#" class="continue">继续学习</a><a href="#" class="subject">程序语言设计</a></div><a href="#" class="schedule">正在学习-使用对象</a></div><div class="line2"><div><a href="#" class="continue">继续学习</a><a href="#" class="subject">程序语言设计</a></div><a href="#" class="schedule">正在学习-使用对象</a></div><div class="line3"><a href="#">全部课程</a></div></div></div></div><div class="goods w"><h3>精品推荐</h3><ul class="goods-item"><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><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><ul class="box-bd"><li class="small-box first"><img src="data:images/1.png" alt="1"><a href="#">Think PHP 5.0 博客系统实战项目演练</a><div><span>高级 </span>· 1125人在学习</div></li><li class="small-box"><img src="data:images/2.png" alt="2"><a href="#">Android 网络图片加载框架详解</a><div><span>高级 </span>· 1125人在学习</div></li><li class="small-box"><img src="data:images/3.png" alt="3"><a href="#">Angular 2 最新框架+主流技术+项目实战</a><div><span>高级 </span>· 1125人在学习</div></li><li class="small-box"><img src="data:images/4.png" alt="4"><a href="#">Android Hybrid APP开发实战 H5+原生！</a><div><span>高级 </span>· 1125人在学习</div></li><li class="small-box"><img src="data:images/4.png" alt="5"><a href="#">Android Hybrid APP开发实战 H5+原生！</a><div><span>高级 </span>· 1125人在学习</div></li><li class="small-box first"><img src="data:images/1.png" alt="1"><a href="#">Think PHP 5.0 博客系统实战项目演练</a><div><span>高级 </span>· 1125人在学习</div></li><li class="small-box"><img src="data:images/2.png" alt="2"><a href="#">Android 网络图片加载框架详解</a><div><span>高级 </span>· 1125人在学习</div></li><li class="small-box"><img src="data:images/3.png" alt="3"><a href="#">Angular 2 最新框架+主流技术+项目实战</a><div><span>高级 </span>· 1125人在学习</div></li><li class="small-box"><img src="data:images/4.png" alt="4"><a href="#">Android Hybrid APP开发实战 H5+原生！</a><div><span>高级 </span>· 1125人在学习</div></li><li class="small-box"><img src="data:images/4.png" alt="5"><a href="#">Android Hybrid APP开发实战 H5+原生！</a><div><span>高级 </span>· 1125人在学习</div></li></ul></div><div class="box1 w"><div class="box-hd"><h3>编程入门</h3><ul class="box-nav"><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 class="box1-bd"><div class="left"><img src="data:images/pic1.png" alt=""></div><div class="right"><div><img src="data:images/pic2.png" alt=""></div><ul class="clearfix"><li class="small-box"><img src="data:images/pic3.png" alt=""><a href="#">Android Hybrid APP开发实战 H5+原生！</a><div><span>高级 </span>· 1125人在学习</div></li><li class="small-box"><img src="data:images/pic4.png" alt=""><a href="#">Kami2首页界面切换效果</a><div><span>高级 </span>· 1125人在学习</div></li><li class="small-box"><img src="data:images/pic5.png" alt=""><a href="#">Unity Profiler入门</a><div><span>高级 </span>· 1125人在学习</div></li><li class="small-box"><img src="data:images/pic6.png" alt=""><a href="#">Cocos2d-x 引擎源码中的纹理优化</a><div><span>高级 </span>· 1125人在学习</div></li></ul></div></div></div><div class="box1 w"><div class="box-hd"><h3>数据分析师</h3><ul class="box-nav"><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 class="box1-bd"><div class="left"><img src="data:images/pic7.png" alt=""></div><div class="right"><div><img src="data:images/pic8.png" alt=""></div><ul class="clearfix"><li class="small-box"><img src="data:images/pic3.png" alt=""><a href="#">Android Hybrid APP开发实战 H5+原生！</a><div><span>高级 </span>· 1125人在学习</div></li><li class="small-box"><img src="data:images/pic4.png" alt=""><a href="#">Kami2首页界面切换效果</a><div><span>高级 </span>· 1125人在学习</div></li><li class="small-box"><img src="data:images/pic5.png" alt=""><a href="#">Unity Profiler入门</a><div><span>高级 </span>· 1125人在学习</div></li><li class="small-box"><img src="data:images/pic6.png" alt=""><a href="#">Cocos2d-x 引擎源码中的纹理优化</a><div><span>高级 </span>· 1125人在学习</div></li></ul></div></div></div><div class="footer"><div class="w"><div class="copyright"><div></div><p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。 © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p><a href="#">下载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 class="center"><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></dl></dl></div></div></div>
</body></html>

CSS代码：

*{padding: 0;margin: 0;
}
.clearfix:before,
.clearfix:after {content: "";display: table;
}.clearfix:after {clear: both;
}.clearfix {*zoom: 1
}body {background-color:#f3f5f7;
}
.w{width: 1200px;margin: auto;
}
li {list-style: none;
}
a {text-decoration: none;
}
.header {height: 42px;background-color: #f3f5f7;margin: 30px auto;
}
.header .logo {float: left;height: 42px;width: 195px;margin-right: 35px;background-image: url(images/logo.png);background-repeat: no-repeat;
}
.nav {float: left;height: 42px;margin: 0 20px;
}
.nav li {float: left;list-style: none;margin: 0 15px;
}
.nav li a {display: block;height: 42px;padding: 0 10px;font-size: 16px;line-height: 42px;text-decoration: none;color: #050505;
}
.nav ul li a:hover {border-bottom: 2px solid #00a4ff;
}
.search{float: left;height: 42px;width: 411px;margin: 0 32px;
}
.search .text {float: left;width: 345px;height: 40px;border: 1px solid #00a4ff;border-right: none;color: #727272;padding-left: 15px;}
.search .btn {float: left;width: 50px;height: 42px;border: none;background-image: url(images/fa-search.png);background-repeat: no-repeat;background-position: center;background-color:  #00a4ff;
}
.user {float: left;height: 42px;line-height: 42px;
}
.user a {float: left;display: block;width: 42px;height: 42px;background-image: url(images/头像.png);background-repeat: no-repeat;background-position: center left;
}
.user span {float: left;display: block;line-height: 42px;font-size: 14px;color: #666666;
}.banner {height: 421px;background-color: #1c036c;
}
.banner .center {height: 421px;background-repeat: no-repeat;background-image: url(images/banner2.png);background-position: top center;
}
.banner .center .subnav {float: left;height: 397px;width: 155px;background: rgba(0, 0, 0, .3);padding: 12px 20px;
}
.banner .center .subnav ul li {list-style: none;height: 44px;
}.banner .center .subnav ul li a {display: inline-block;width: 155px;height: 44px;line-height: 44px;font-size: 14px;text-decoration: none;color: white;
}
.banner .center .subnav ul li a span {float: right;display: block;height: 44px;line-height: 44px;
}.banner .center .subnav ul li a:hover {color: #00b4ff;
}.course {float: right;width: 231px;height: 300px;margin-top: 50px;background-color: white;
}
.course h2 {height: 48px;line-height: 48px;text-align: center;background-color: #9bceea;font-size: 18px;color: white;
}.course .line1 {height: 32px;margin: 0 18px;padding: 20px 0;border-bottom: 1px solid #efefef;
}.course .line2 {height: 32px;padding: 14px 0;margin: 0 18px;border-bottom: 1px solid #efefef;}
.course .line3 {border: 1px solid #00a4ff;height: 38px;margin: 6px 18px 12px;line-height: 38px;text-align: center;
}
.course .line3 a {color: #00a4ff;font-size: 16px;
}.course .continue {font-size: 16px;color: #4e4e4e;
}.course .subject {font-size: 14px;font-weight: 500;color: #4e4e4e;
}.course .schedule {font-size: 12px;font-weight: 500;color: #a5a5a5;
}.goods {height: 60px;background-color: #ffffff;margin-top: 8px;margin-bottom: 8px;line-height: 60px;box-shadow: 0px 2px 3px rgba( 0, 0, 0, .2);
}
.goods h3 {float: left;color: #00a4ff;margin: 0 34px;
}
.goods ul {float: left;list-style: none;
}
.goods ul li {float: left;
}
.goods ul li a {padding: 0 34px;border-left: 1px solid #bfbfbf;color: #050505;font-size: 16px;
}
.goods .mod {display: block;float: right;margin: 0 24px;font-size: 14px;color: #00a4ff;
}
.box-hd {height: 60px;line-height: 60px;
}
.box-hd h3 {float: left;font-size: 20px;font-weight: 400;color: #000000;
}
.box-hd a {float: right;font-size: 12px;margin: 0 27px;color: #a5a5a5;
}
.box .box-bd {float: left;width: 1200px;height: 568px;list-style: none;
}
.small-box {float: left;width: 228px;height: 271px;margin-left: 14px;margin-bottom: 13px;background-color: #fff;
}
.box .box-bd .first {margin-left: 0;
}
.small-box img {width: 100%;
}.small-box a {display: block;margin: 20px 25px 10px;width: 181px;height: 37px;font-size: 13px;color: #000000;
}
.small-box div {margin: 10px 25px 20px;width: 228px;font-size: 10px;color: #999999;
}
.small-box span{color: #ff7c2d;
}
.box1 .box-hd .box-nav {float: left;height: 60px;width: 373px;padding: 0 300px;
}.box1 .box-hd .box-nav li{float: left;
}
.box1 .box-hd .box-nav li a{font-size: 16px;margin: 0 30px;
}
.box1 .box-hd .box-nav li a:hover {color: #00a4ff;
}.box1 .box1-bd {width: 1200px;margin-bottom: 8px;
}
.box1 .box1-bd .left {float: left;width: 229px;height: 392px;
}
.box1 .box1-bd .left img {width: 100%;height: 100%;
}
.box1 .box1-bd .right>div {float: right;height: 100px;width: 956px;
}
.box1 .box1-bd .right>div img {width: 100%;height: 100%;
}
.box1 .small-box {margin-top: 22px;margin-left: 14.5px;
}
.footer {height: 418px;background-color: #fff;margin-top: 50px;
}
.footer>div {height: 200px;
}
.footer .copyright {float: left;width: 470px;height: 200px;
}
.footer .copyright div {width: 229px;height: 100px;background-image: url(images/logo.png);background-repeat: no-repeat;background-position: center;
}
.footer .copyright p {margin: 0 15px;font-size: 14px;color: #666666;
}
.footer .copyright a {display: block;width: 108px;height: 24px;margin: 20px 15px 20px;border: 1px solid #00a4ff;text-align: center;color: #00a4ff;
}
.footer .links {float: right;width: 570px;height: 200px;margin: 0 20px;
}
.footer .links dl {float: left;
}
.footer .links dl dt {font-size: 16px;font-weight: 700;color: #7d7d7d;margin: 20px 0;
}
.footer .links a {font-size: 12px;font-weight: 400;color: #333333;
}
.footer .links .center {margin: 0 160px;
}

素材在这里====》https://gitee.com/xiaoqiang001/html_css_material

学成在线首页——静态页面（html+css）素材链接放在文章结尾了相关推荐

  1. 学成在线首页——静态页面基础项目（HTML+CSS）【学习笔记】

    来源:黑马前端 难度:⭐(简单)--适合刚学习html和css的新手小白 源码和素材:链接: https://pan.baidu.com/s/1Qf6OuMNyFDswJOcB93NCrw 提取码: ...

  2. 学成在线首页pnf素材

    学成在线首页已整理的图片素材,供大家学习. 阿里云盘链接:阿里云盘分享 提取码:4h3u

  3. 综合案例之学成在线首页

    综合案例之学成在线首页 1 准备素材和工具 2 案例准备工作 3 CSS属性书写属性 4 页面布局整体思路 5 确定版心 6 头部制作 7 banner制作 8 精品推荐小模块 9 精品推荐大模块 1 ...

  4. 学成在线 职业规划 页面

    学成在线 职业规划 页面 为什么这么赶呢,主要是PS白嫖期快过了1/3了,总得赶在试用期之前做完嘛-- 之前的进度 第一版跟着视频做的,也写了步骤分解,详情可以看这个:学成在线 制作分解版. 完整的页 ...

  5. 学成在线首页【前端知识】

    写在前面的话: 本章内容:学成在线首页 所利用的知识:CSS基本知识,盒子模型,CSS综合 参考视频:黑马程序员pink老师前端入门教学 点击链接,看视频学习https://www.bilibili. ...

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

    首页index.html 代码 <!DOCTYPE html> <html><head><meta charset="utf-8"> ...

  7. 学成在线 课程列表 页面

    学成在线 课程列表 页面 在美好的礼拜天,正好我们不调休,把最后一个页面给完成了. 和其他用浮动座位布局方式比起来,课程类表页面最终还是使用了flexbox去布局,一来主要内容最下面的 分页 部分用浮 ...

  8. 学成在线--7.CMS页面管理开发（异常处理）

    文章目录 1.异常处理的问题分析 2.异常处理流程 3.可预知异常处理 1.自定义异常类 2.异常抛出类 3.异常捕获类 4.异常处理测试 1)定义错误代码 2)异常处理测试 4.不可预知异常处理 1 ...

  9. 学成在线--5.CMS页面管理开发（修改页面）

    文章目录 1.修改页面流程 1)前端逻辑 2)后端逻辑 2.修改页面接口定义 3.后端开发--Dao 4.后端开发--Service 5.后端开发--Controller 1)根据id查询页面 2)保 ...

  10. 学成在线--4.CMS页面管理开发（新增页面）

    文章目录 1.定义新增页面接口 1)在model工程中定义响应模型 2)在api工程中添加接口 2.新增页面服务端开发 1)Dao 2)Service 3)Controller 3.新增页面前端开发 ...

最新文章

  1. Vue开发中遇到的问题及解决方案
  2. python输出所有组合数_python – GridSearchCV是否存储了所有参数组合的所有分数？...
  3. 跨境电商独立站门槛高，为什么还有无数人挤破头想入坑！
  4. python内置模块大全_python知识汇总(异常、内置模块和打包)
  5. [Swift]LeetCode1044. 最长重复子串 | Longest Duplicate Substring
  6. 就地链表反转_数据结构与算法系列之链表操作全集（二）（GO）
  7. 36. BOM (2)
  8. atoi函数_linux网络编程之POSIX 消息队列 和 系列函数
  9. Authorware 函数说明
  10. 杭州市建筑物矢量数据（Shp格式+带高度）
  11. ispostback的坑
  12. WINDOWS CMAKE与NMAKE
  13. 查看电脑安装的Office是32位还是64位的
  14. linux shell 统计词频,shell之词频统计
  15. 音频格式处理--SOX
  16. 时序分析 42 -- 时序数据转为空间数据 (一) 格拉姆角场
  17. linux内核协议栈 TCP数据发送之发送窗口
  18. 基于SSH+MySQL+Bootstrap的高校实验室预约管理系统
  19. Android 蓝牙传导和耦合测试介绍
  20. 基于Python+Django的项目申报审核平台系统

热门文章

  1. java系列视频教程下载
  2. WebService 教程
  3. C语言获取USB设备协议版本,用CBI协议的USB软驱读取绣花机花版文件
  4. 游戏编程入门步骤，想不到吧.
  5. ActivityGroup基本菜单
  6. 易语言教程_v20200926
  7. 虚拟化与瑞友天翼应用——“瑞友杯”虚拟化征文
  8. 熊猫烧香病毒作者再被捕 开网络赌场敛财
  9. 硬盘检测工具哪个好？5款硬盘工具对比测试
  10. redis设计与实现读书笔记(一)