[附相应图片]HTML+CSS学成网首页制作基础案例

这是一个比较基础的html和css基础案例实战，适合刚学习完各种html控件和css标签的应用。

实现效果图如下：（3张图片为同一个页面）

html编码部分：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body><!-- 页面头部部分 --><header><nav><!-- logo部分 --><div class="logo"><img src="data:images/logo_03.png"></div><!-- 导航栏部分 --><div class="navbar"><ul><li><a href="#">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业规划</a></li></ul></div><!-- 个人中心部分 --><div class="personal"><a href="#">个人中心<img src="data:images/ling_03.png"></a><a href="#"><img src="data:images/tou_03.png">qq-leishui</a></div><!-- 搜索框部分 --><div class="search"><form action=""><input type="text" placeholder="请输入关键词" ><!-- placeholder 占位符 内容输入自动清除默认值 --><input type="submit" value="" ></form></div></nav></header><!-- bannar部分 --><div class="bannar"><div class="bannar-in container"><!-- 左侧导航栏 --><div class="slidebar"><ul><li><a href="#">前端开发 <span>></span> </a></li><li><a href="#">后端开发 <span>></span> </a></li><li><a href="#">移动开发 <span>></span> </a></li><li><a href="#">人工智能 <span>></span> </a></li><li><a href="#">商业预测 <span>></span> </a></li><li><a href="#">云计算&大数据 <span>></span> </a></li><li><a href="#">运维&从测试 <span>></span> </a></li><li><a href="#">UI设计 <span>></span> </a></li><li><a href="#">产品 <span>></span> </a></li></ul></div><!-- 小课表部分 --><dl class="timetable"><dt>我的课程表</dt><dd>继续学习 程序语言设计<p>正在学习-使用对象</p></dd><dd>继续学习 程序语言设计<p>正在学习-使用对象</p></dd><dd>继续学习 程序语言设计<p>正在学习-使用对象</p></dd><dd><a href="#">全部课程</a></dd></dl><ul class="circle"><li class="current"></li>  <!-- 当前的li --><li></li><li></li><li></li><li></li><li></li></ul></div></div><!-- 精品推荐 --><div class="recommend container"><a href="#">精品推荐</a><a href="#">Jquery</a><a href="#">Spart</a><a href="#">MySql</a><a href="#">JavaWeb</a><a href="#">Mysql</a><a href="#">JavaWeb</a><a href="#">修改兴趣</a></div><!-- 精品推荐大模块 --><div class="recom-products container"><div class="recom-hd">  <!-- 头部 --><h4>精品推荐</h4><a href="#">查看全部</a></div><div class="recom-bd clearfix">  <!-- 精品推荐主体部分 --><ul><li><img src="data:images/icon1.png"><h5>Think PHP 5.0 博客系统实战项目演练 </h5><p><span>高级</span>  •  1125人在学习</p></li><li><img src="data:images/icon2.png"><h5>Think PHP 5.0 博客系统实战项目演练 </h5><p><span>高级</span>  •  1125人在学习</p></li><li><img src="data:images/icon3.png"><h5>Think PHP 5.0 博客系统实战项目演练 </h5><p><span>高级</span>  •  1125人在学习</p></li><li><img src="data:images/icon4.png"><h5>Think PHP 5.0 博客系统实战项目演练 </h5><p><span>高级</span>  •  1125人在学习</p></li><li><img src="data:images/icon4.png"><h5>Think PHP 5.0 博客系统实战项目演练 </h5><p><span>高级</span>  •  1125人在学习</p></li><li><img src="data:images/icon1.png"><h5>Think PHP 5.0 博客系统实战项目演练 </h5><p><span>高级</span>  •  1125人在学习</p></li><li><img src="data:images/icon2.png"><h5>Think PHP 5.0 博客系统实战项目演练 </h5><p><span>高级</span>  •  1125人在学习</p></li><li><img src="data:images/icon3.png"><h5>Think PHP 5.0 博客系统实战项目演练 </h5><p><span>高级</span>  •  1125人在学习</p></li><li><img src="data:images/icon4.png"><h5>Think PHP 5.0 博客系统实战项目演练 </h5><p><span>高级</span>  •  1125人在学习</p></li><li><img src="data:images/icon4.png"><h5>Think PHP 5.0 博客系统实战项目演练 </h5><p><span>高级</span>  •  1125人在学习</p></li></ul></div></div><!-- 页面底部部分 --><footer><div class="container footer-in"><div class="footer-l"><img src="data:images/logo2_03.png"><p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br />© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p><a href="#">下载中心</a></div><div class="footer-r"><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>                </dl></div></div></footer>
</body>
</html>

css样式编码部分：

/*css初始化*/* {margin: 0;padding: 0;   /*清除内外边距*/}ul {list-style: none;    /*去掉列表样式小点*/}.clearfix:before, .clearfix:after { /*清除浮动*/display: table;content: "";}.clearfix:after {clear: both;}.clearfix {*zoom: 1;}a {color: #050505;text-decoration: none; /*取消下划线*/}input {border: 0;  /*所有表单边框为0*/box-sizing: border-box; /*css3盒子模型 border 和 padding 都包含在 width 里 */}.container {            /*版心宽度1200 居中对齐 声明一个公共类*/width: 1200px;margin: 0 auto;}/*css初始化结束*//*页面头部部分*/body {background-color: #f3f5f7;   /*整个页面的背景色*/}header {height: 100px;/*background-color: pink;*/overflow: hidden;  /*防止外边距合并的问题*/}nav {width: 1366px;height: 42px;/*background-color: purple;*/margin: 26px auto; /*盒子居中对齐*/}.logo {float: left;}.navbar {float: left;height: 42px;line-height: 42px; /*这个行高给父亲，行高会继承*/margin-left: 50px;}.navbar li {float: left; /*让首页 课程 职业规划 一行显示*/}.navbar li a {padding: 0 8px;  /*上下 0 左右 8像素*/display: block;      /*a是行内元素，给高需要装换块级*/height: 42px;}.navbar li a:hover {border-bottom: 2px solid #00a4ff; /*鼠标放入底边框*/}/*搜索框部分*/.search {width: 410px;   /*360 50 */height: 38px;border: 1px solid #00a4ff;float: right;}.search input[type=text] { /*属性选择器 type为text文本框*/width: 360px;height: 38px;padding-left: 20px;float: left;}.search input[type=submit] { /*属性选择器 type为submit文本框*/width: 50px;height: 38px;float: left;background: #00a4ff url(images/search_07.png) center center no-repeat;}/*搜索框部分结束*//*个人中心开始*/.personal {float: right;height: 42px;line-height: 42px; /*这个行高给父亲，行高会继承*/margin: 0 15px 0 35px; /*上 0  右 15  下 0 左 35*/}.personal img {margin: 0 8px;}/*bannar部分开始*/.bannar {height: 420px;background-color: #1c036c;}.bannar-in {height: 420px;background: url(images/bannar_03.png) 0 0 no-repeat;position: relative;  /*子绝父相*/}.slidebar {height: 420px;width: 190px;background: rgba(0 , 0 , 0 , 0.3);  /*盒子背景半透明*/float: left;}.slidebar ul a {color: #fff;font-size: 14px;padding: 0 20px;/*a是行内元素，没有大小 需要转换*/display: block;height: 45px;line-height: 45px;}.slidebar li a span {float: right;font-family: arial; /*一般情况我们的符号都用这个字体*/}.slidebar ul a:hover {color: #00a4ff;}.timetable {float: right;width: 230px;height: 300px;background-color: #fff; margin-top: 50px;}.timetable dt {height: 50px;background-color: #9bceea;text-align: center;     /*文字水平居中*/line-height: 50px;color: #fff;font-weight: 700;   /*文字加粗*/letter-spacing: 2px;  /*文字间距*/margin-bottom: 5px;}.timetable dd {width: 193px;height: 60px;margin: 0 auto;border-bottom: 1px solid #ccc;padding-top: 12px;box-sizing: border-box;}.timetable dd h4 {font-size: 16px;font-weight: normal;  /* 让粗体不变粗*/color: #4e4e4e;}.timetable dd p {color:#a5a5a5;font-size: 14px;}.timetable dd:last-child {     /*结构伪类选择器，选择最后一个孩子*/border: 0;}.timetable dd a {height: 38px;border: 1px solid #00a4ff;display: block;text-align: center;line-height: 38px;color: #00a4ff;font-weight: 700; /*文字加粗*/}.timetable dd a:hover {background-color: #00a4ff;color: #fff;}/*小圆点模块*/.circle {width: 180px;height: 22px;position: absolute;bottom: 10px;left: 50%;margin-left: -90px; }.circle li {float: left;width: 12px;height: 12px;margin: 6px 8px;background-color: rgba(255, 255, 255, 0.4);border-radius: 50%;}.circle .current {width: 19px;border-radius: 5px;background-color: #fff;}/*banner 结束*//*精品推荐开始*/ .recommend {height: 60px;line-height: 60px;background-color: #fff;margin-top: 8px;box-shadow: 0 2px 2px rgba(0 , 0 , 0 , 0.2); /*盒子阴影 水平位置 垂直位置 模糊距离 影子颜色 */}.recommend a {padding: 0 30px;border-right: 1px solid #ccc;}.recommend a:hover {color: #00a4ff;}.recommend a:first-child {color: #00a4ff;font-weight: 700;}.recommend a:nth-child(7) {border-right: 0;}.recommend a:last-child {color: #00a4ff;border-right: 0;float: right;font-size: 14px; }.recom-products {margin-top: 35px;}.recom-hd {height: 40px;}.recom-hd h4 {float: left;color: #494949;}.recom-hd a {float: right;margin-top: 10px;margin-right: 30px;font-size: 14px;color: #a5a5a5;}.recom-hd a:hover {color: #00a4ff;}.recom-bd ul li {width: 228px;height: 270px;background-color: #fff;overflow: hidden;box-shadow: 0 4px 5px rgba(0 , 0 , 0 , 0.2);float: left;margin-right: 15px;margin-top: 15px;}.recom-bd ul li:nth-child(5n) {   /*n从0开始*/margin-right: 0;}.recom-bd li h5,.recom-bd li p {padding: 0 20px 0 24px;margin-top: 12px;}.recom-bd li h5 {font-size: 14px;line-height: 22px;font-weight: normal;}.recom-bd li p {font-size: 12px;color: #999999;}.recom-bd p span {color: #ff7c2d;}/*页面底部部分*/footer {height: 270px;background-color: #fff;margin-top: 100px;}.footer-in {padding-top: 30px;}.footer-l p {font-size: 12px;color: #666666;margin-top: 30px;}.footer-l a {display: block;width: 118px;height: 33px;border: 1px solid #00a4ff;font-size: 16px;color: #00a4ff;text-align: center;line-height: 33px;margin-top: 15px;}.footer-l {float: left;}.footer-r {float: right;margin-left: 210px;}.footer-r dl {float: left;width: 225px;}.footer-r dl:last-child {width: 80px;s}.footer-r dt {font-size: 16px;height: 30px;}.footer-r dd {font-size: 12px;height: 20px;}.footer-r dd a:hover {color: #00a4ff;text-decoration: underline;  /*添加下划线*/}

以上为html和css的参考代码，有兴趣的话也可以自己修改代码和样式。

注：（有需自取）
1.案例所需图片百度云链接（永久有效）：
链接: https://pan.baidu.com/s/1mPNmgpfiPRCRDf8MyK9w0w.
提取码：g2le
2.案例所需学成网首页PSD文件百度云链接（永久有效）：
链接: https://pan.baidu.com/s/1HWDEp7mMWlzJaqNHhudA4g.
提取码：pfh0

实例心得：
学成网案例已经是一个比较老的实战案例，网上搜索案例也挺多的，大部分是照着视频或者网上一些案例完成的，差异不是很大，在学习的过程中可以参考和学习他们的思路和想法，进而归纳成自己的东西，例如命名方式，书写规范等。

[附相应图片]HTML+CSS学成网首页制作基础案例相关推荐

Web前端案例——学成网首页制作
简易的学成网网站制作.代码均有注释,可以说十分新手向了. 相关知识:html+css,主要学习的是css的浮动布局.下一篇文章会在这个网页的基础上添加定位盒子. 运行效果图: html部分: < ...
CSS 学成网（二）
学成网小圆点 /* 小圆点模块 */.circle {width: 180px;height: 22px;/* background-color: pink; */position: absolute ...
css实操：学成网综合案例
css实操:学成网综合案例页面效果: 易错点很多,需要注意的地方都有注释.常看! HBuilder X > css > 学成网首页.html <!DOCTYPE html> ...
7.（css）使用浮动布局学成网案例
文章目录 1. 页面制作重点提炼 2. 前期准备素材 3. 前期准备工作 4. CSS属性书写顺序(重点) 5. 布局流程 6. 页面制作 6.1 1) 头部制作 6.2 2)banner制作 6.3 ...
＜CSS练习＞综合案例-学成网含素材静态网页
效果图浏览器缩放缩小之后的正常打开的: 这个案例综合了html css很多知识点盒子的使用伪链接选择器定位position 浮动float ul li的用法以及外边距margin 边框bo ...
学成在线首页——静态页面基础项目（HTML+CSS）【学习笔记】
来源:黑马前端难度:⭐(简单)--适合刚学习html和css的新手小白源码和素材:链接: https://pan.baidu.com/s/1Qf6OuMNyFDswJOcB93NCrw 提取码: ...
html制作课程导航页面,学成在线页面制作（HTML+CSS部分）（顶部+轮播图部分）...
学成在线页面制作(HTML+CSS部分)(顶部+轮播图部分) 成品截图前期准备素材一.项目页面PSD源文件二.前期准备工作三.CSS属性书写顺序四.布局分析五.布局流程开始页面制作头部 ...
黑马程序员前端-CSS练手之学成在线页面制作
前端学习笔记教程不定期更新中,传送门: 前端HTML第一天:什么是网页?什么是HTML?网页怎么形成? 黑马程序员前端-CSS入门总结黑马程序员前端-CSS之emmet语法黑马程序员前端-CSS的 ...
综合案例之学成在线首页
综合案例之学成在线首页 1 准备素材和工具 2 案例准备工作 3 CSS属性书写属性 4 页面布局整体思路 5 确定版心 6 头部制作 7 banner制作 8 精品推荐小模块 9 精品推荐大模块 1 ...

[附相应图片]HTML+CSS学成网首页制作基础案例

这是一个比较基础的html和css基础案例实战，适合刚学习完各种html控件和css标签的应用。

html编码部分：

css样式编码部分：

[附相应图片]HTML+CSS学成网首页制作基础案例相关推荐

最新文章

热门文章