前端：【学成在线项目】HTML+CSS详细制作过程（代码只做参考）
2024-05-05 06:20:59
目录
1. 案例准备工作
1.1 准备素材和工具
1.2 vscode案例准备
2. 页面布局整体思路
3. 正式制作网页
3.1 确定版心
3.2 确定行，按顺序写列
3.2.1 页面头部制作
3.2.2 banner模块制作
3.2.3 精品推荐模块
3.2.4 精品推荐模块
3.2.5 footer尾部模块
4. 参考
4.1 HTML代码
4.2 css代码
4.3 效果图
1. 案例准备工作
1.1 准备素材和工具
（素材在最后有链接哦~）
- 学成在线PSD源 文件
- 开发工具：Photoshop（切图）/cutterman插件+vscode（写代码）+chrome（测试）
1.2 vscode案例准备
- 创建目录LearnOnline文件夹，存放页面的相关材料。
- 用vscode打开文件夹。
- 在LearnOnline文件夹里新建images文件夹来保存图片。
- 新建首页文件index.html（首页网站统一命令index.html）。
- 新建style.css样式（外链接样式表）文件。
- css样式表引入html文件
- style.css样式表写入清除默认的内外边距的样式（* {margin: 0;padding0;}），检测样式表是否引入成功。
2. 页面布局整体思路
测量确定页面的版心（可视部分）。
根据页面布局第一准则，分析页面行（标准流）和列（浮动）模块。
根据页面布局第二准则，先确定列的大小，后确定列的位置。
制做html结构。遵循先有结构，后有样式原则，结构是永远最重要的
总结：先要清除结构布局，后写代码，平时要多写多积累才行哦！
注意：建议要规范书写css属性规范，这是我们专业性的体现噢。需要的小伙伴可以在上一篇文章查阅哦~
3. 正式制作网页
3.1 确定版心
我们用PS测量页面版心是1200px，并水平居中，然后写入css文件。
.w {width: 1200px;height: auto;
}3.2 确定行，按顺序写列
3.2.1 页面头部制作
- 1号版心盒子header1200*42，水平居中，给定上下margin值
- header盒子包括2号logo盒子、3号nav导航栏、4号search搜索栏和5号user个人信息
- 注意：要求4号盒子是浮动的。
- 1号header盒子设置大小1200*42，水平居中
- 2号logo盒子设置大小，然后再放进一个div盒子里，左浮动
- 3号nav导航栏盒子，左浮动，里面放无序列表ul和li，li里面放a链接标签
- 4号search搜索栏盒子左浮动，水平居中，包含2个form表单（input和button）
- 5号user盒子右浮动，居中对齐，分为头像和用户名两部分
- 最后设置3号a的hover属性，让鼠标经过时出现图示的效果。
- 注意点：
- 实际的开发中，不会直接用链接a而且是用li包含链接（li+a）的做法。
- 一个盒子浮动，其他盒子都要浮动（一浮全浮）。
- 因为li是块级元素，需要一行显示，所以li要加浮动。
- 导航栏是不用给宽度的，为以后可以添加其余的文字
- 导航栏的文字长度不一样，最好不要给a设置宽度，给a设置padding值就好啦
button按钮默认有个边框，需要去除边框，border: 0;
input和button两个行内块元素之间有缝隙，这里我们用浮动去除缝隙。
3.2.2 banner模块制作
- 1号banner大盒子不设宽度，设背景色、居中对齐
- 2号版心盒子水平居中，设背景图（盒子有宽度时设置水平居中：margin {0 auto;}）
- 3号subnav侧导航栏左浮动，设背景，包含ul无序列表，subnav设左对齐
- 4号course盒子包含theme盒子、无序列表ul、a标签，右浮动
- 最后使用hover伪元素，让鼠标经过时字体变色
- 注意：
- 设置边距时，使用padding后一定要将weight/height减去padding值，这样才不会撑大盒子；使用margin不会影响盒子大小
- 不用给span设置颜色，他会继承a里面的颜色，如果设置了颜色，hover里面就不会变色了
- 浮动的盒子不会有外边距合并的问题
- a是行内元素无法改变大小，需要用display改为块级元素改变大小
3.2.3 精品推荐模块
- 1号goods精品大盒子居中对齐，注意还有个阴影
- 2号标题H3盒子设置左浮动、居中对齐
- 2号盒子放a链接，设左浮动、无序列表<ul><li>里面放a标签）
- 4号盒子放a链接，设右浮动
3.2.4 精品推荐模块
- 1号box大盒子居中对齐
- 2号box-hd盒子设左浮动，它包含p标签和a标签
- 2号box-bd盒子设置左浮动，它包含ul和10个li标签，li标签里面放a标签、h标签、span标签、div标签，a标签放img标签
- 最后还要给li加hover伪元素，达到鼠标经过出现阴影的效果
注意：当一行装不下元素时，把父级元素修改为合适的宽度即可（例如：3号盒子li）
在做这个板块时需要清除浮动，这样后面可以放下更多的盒子。
3.2.5 footer尾部模块
- 1号footer盒子设置高度宽度、背景色（白色）
- 2号w版心盒子模块居中对齐
- 3号copyright版权盒子，左浮动
- 4号links链接盒子，右浮动
4. 参考
4.1 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><!-- 引入css文件 --><link rel="stylesheet" href="style.css">
</head><body><!-- 一、网页头部 --><div class="header w"><!-- 网页logo --><div class="logo"><img src="data:images/logo.png"></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"><form action="#"><input type="text" value="请输入关键字"><button></button></form></div><!-- user登录注册区 --><div class="user"><img src="data:images/user.png">qq-leishui</div></div><!-- 二、网页banner模块 --><div class="banner"><!-- 版心 --><div class="w"><!-- 侧导航栏 --><div class="subnav"><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="#">ul设计<span>></span></a></li><li><a href="#">产品<span>></span></a></li></ul></div><!-- course区域 --><div class="course"><div class="theme">我的课程表</div><ul><li> 继续学习 <span>程序语言设计</span><div>正在学习-使用对象</div></li><li> 继续学习 <span>程序语言设计</span><div>正在学习-使用对象</div></li><li> 继续学习 <span>程序语言设计</span><div>正在学习-使用对象</div></li></ul><a href="#">全部课程</a></div></div></div><!-- 三、精品推荐模块 --><div class="goods w"><h3>精品推荐</h3><div class="list"><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="#">MySQL</a></li><li><a href="#">JavaWeb</a></li></ul></div><span> <a href="#" class="mod">修改兴趣</a></span></div><!-- 四、精品推荐模块 --><div class="box w"><div class="box-hd"><p>精品推荐</p><a href="#">查看全部</a></div><div class="box-bd"><ul class="clearfix"><li><a href="#"><img src="data:images/good1.png"></a><a href="#" class="h">Think PHP 5.0 博客系统实战项目演练</a><span class="orange">高级</span><div>• 1125人在学习</div></li><li><a href="#"><img src="data:images/good2.png"></a><a href="#" class="h">Android 网络图片加载框架详解</a><span class="orange">高级</span><div>• 1125人在学习</div></li><li><a href="#"><img src="data:images/good3.png"></a><a href="#" class="h">Angular 2 最新框架+主流技术+项目实战</a><span class="orange">高级</span><div>• 1125人在学习</div></li><li><a href="#"><img src="data:images/good5.png"></a><a href="#" class="h">Android Hybrid APP开发实战 H5+原生！</a><span class="orange">高级</span><div>• 1125人在学习</div></li><li><a href="#"><img src="data:images/good5.png"></a><a href="#" class="h">Android Hybrid APP开发实战 H5+原生！</a><span class="orange">高级</span><div>• 1125人在学习</div></li><li><a href="#"><img src="data:images/good1.png"></a><a href="#" class="h">Think PHP 5.0 博客系统实战项目演练</a><span class="orange">高级</span><div>• 1125人在学习</div></li><li><a href="#"><img src="data:images/good2.png"></a><a href="#" class="h">Android 网络图片加载框架详解</a><span class="orange">高级</span><div>• 1125人在学习</div></li><li><a href="#"><img src="data:images/good3.png"></a><a href="#" class="h">Angular 2 最新框架+主流技术+项目实战</a><span class="orange">高级</span><div>• 1125人在学习</div></li><li><a href="#"><img src="data:images/good5.png"></a><a href="#" class="h">Android Hybrid APP开发实战 H5+原生！</a><span class="orange">高级</span><div>• 1125人在学习</div></li><li><a href="#"><img src="data:images/good5.png"></a><a href="#" class="h">Android Hybrid APP开发实战 H5+原生！</a><span class="orange">高级</span><div>• 1125人在学习</div></li></ul></div></div><!-- 五、footer模块 --><div class="footer"><div class="w"><div class="copyright"><img src="data:images/logo.png"><p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p><a href="#"><button>下载APP</button></a></div><div class="links"><dl><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></dt></dl><dl><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></dt></dl><dl><dt>合作伙伴<dd><a href="#">合作机构</a></dd><dd><a href="#">合作导师</a></dd></dt></dl></div></div></div>
</body></html>4.2 css代码
*{padding: 0px;margin: 0px;
}
body {background-color: #f3f5f7;
}.w {width: 1200px;height: auto;
}li {list-style: none;
}a {text-decoration: none;
}
/* 清除浮动，可以放更多的盒子 */
.claearfix:before,.claearfix:after {content: "";display: table;}.claearfix:after {clear: both;}.clearfix {*zoom: 1;
}/* 一、header头部样式 */
.header {height: 42px;margin: 30px auto;/* 注意这里的margin会层叠.w里面的margin */
}.logo {float: left;width: 198px;height: 42px;margin-right: 70px;
}.nav {float: left;height: 42px;
}.nav ul li {float: left;margin: 0px 10px;
}.nav ul li a {display: block;height: 42px;padding: 0 10px;line-height: 42px;font-size: 18px;
}.nav ul li a:hover {border-bottom: 2px solid #00a4ff;color: #00a4ff;
}.search {float: left;width: 412px;height: 42px;margin-left: 50px;
}
.search input {float: left;width: 345px;height: 40px;line-height: 42px;border: 1px solid #00a4ff;background: #f3f5f7;border-right: 0px;color: #bfbfbf;font-size: 14px;padding-left: 15px;
}
.search button {float: left;width: 50px;height: 42px;/* 去除按钮默认边框 */border: 0;background: url(images/btn.png);
}
.user {float: right;line-height: 42px;margin-right: 30px;font-size: 14px;color: #666666;
}/*二、banner区域样式 */
.banner {height: 420px;background-color: #1c036c;
}
.banner .w {height: 420px;margin: 0 auto;background: url(images/banner.png);
}
.subnav {float: left;background: url(images/sub.png);}
.subnav ul {height: 400px;
}
.subnav ul li {width: 150px;height: 42px;padding:0px 20px;line-height: 42px;
}
.subnav ul li a{font-size: 14px;color: #ffffff;
}
.subnav ul li a span {float: right;
}.subnav ul li a:hover { color: #00b4ff;
}.course {float: right;width: 230px;height: 300px;background-color: #fff;margin-top: 50px;
}
.course .theme { width: 230px;height: 48px;background-color: #9bceea;font-size: 18px;font-weight: 700;line-height: 48px;text-align: center;color: #ffffff;
}
.course ul {width: 190px;height: 183px;padding : 10px 20px 0px 20px;
}
.course ul li {height: 50px;font-size: 16px;color: #5a5a5a;border-bottom: 1px solid #a5a5a5;padding-top: 10px;}
.course ul li span {font-size: 14px;color: #4e4e4e;}
.course ul li div { font-size: 12px;color: #a5a5a5;}
.course a {display: inline-block;height: 38px;width: 200px;border: 1px solid #00b4ff;line-height: 38px;text-align: center;color: #00a4ff;font-size: 14px;margin: 7px 15px 10px 15px;
}
/* 三、精品推荐模块 */
.goods {height: 60px;margin: 10px auto;background-color: #fff;box-shadow: 2px 5px 2px 0px rgba(0, 0, 0, 0.07);
}
.goods h3 {float: left;width: 130px;margin-top: 23px;text-align: center;color: #00a4ff;font-size: 16px;
}
.goods .list ul li a {float: left;width: 125px;height: 18px;margin-top: 23px;border-left: 1px solid #bfbfbf;color: #050505;font-size: 16px;text-align: center;
}
.goods span .mod {float: right;height: 58px;margin-top: 23px;margin-right: 25px;color: #00a4ff;font-size: 14px;}
/* 四、精品推荐模块 */
.box {height: 600px;margin: 0 auto;margin-top: 33px;
}
.box-hd {float: left;width: 1200px;height: 50px;
}
.box-hd p {float: left;color: #494949;font-size: 20px;
}
.box-hd a {float: right;margin: 8px 30px 0px 0px;color: #a5a5a5;font-size: 12px;
}
.box-bd ul {float: left;width: 1200px;height: 560px;
}
.box-bd ul {width: 1225px;/* 为了使五个li盒子能在一行上 */
}
.box-bd ul li {float: left;width: 228px;height: 270px;margin-right: 15px;margin-bottom: 13px;background-color: #ffffff;
}
.box-bd ul li img {width: 100%;
}
.box-bd ul li .h {float: left;width: 185px;height: 35px;margin: 18px 20px 20px 24px;color: #050505;font-size: 14px;}
.box-bd ul li .orange {float: left;margin-left: 20px;color: #ff7c2d;font-size: 12px;
}
.box-bd ul li div {float: right;margin-right: 85px;color: #999999;font-size: 12px;
}
.box-bd ul li:hover {box-shadow: 3px 3px 3px 2px rgba(0, 0, 0, 0.1);
}
/* 五、footer模块 */
.footer {height: 415px;margin:0px auto;margin-top: 40px;background-color: #ffffff;
}
.footer .w {height: 415px;margin: 0px auto;
}
.copyright {float: left;width: 475px;height: 190px;margin:30px 0px 0px 10px;
}
.copyright p {margin: 25px 0px 15px 0px;color: #666666;font-size: 12px;
}
.copyright button {width: 120px;height: 35px;border: 1px solid #00a4ff;background-color: #fff;color: #00a4ff;
}
.links {float: right;}
.links dl {
float: left;
padding-left: 115px;
padding-top: 33px;
}
.links dl dt {padding-bottom: 14px;color: #333333;font-size: 16px;
}
dd {width: 100px;margin-bottom: 8px;font-size: 12px;
}
.links a {color: #333333;
}.links dd a:hover {color: #00a4ff;
}4.3 效果图
（ps 相同效果的网页制作方法有很多哦，小伙伴们也可以尝试其他的方法去完成这个效果滴~）
素材文件在下方链接提取哦~
链接: https://pan.baidu.com/s/1l2liO-E9_WzIbIB4Nl7Isw 提取码: i33d 复制这段内容后打开百度网盘手机App，操作更方便哦
前端：【学成在线项目】HTML+CSS详细制作过程（代码只做参考）相关推荐
- 黑马学成在线--项目环境搭建
完整版请移步至我的个人博客查看:https://cyborg2077.github.io/ 学成在线–项目环境搭建 学成在线–内容管理模块 学成在线–媒资管理模块 学成在线–课程发布模块 学成在线–认 ...
- 学成在线项目-轮播图banner
学成在线项目-轮播图banner 1.效果图如下 2.html代码如下: <!DOCTYPE html> <html lang="en"> <head ...
- 学成在线项目开发技巧整理---第一部分
学成在线项目开发技巧整理---第一部分 1.数据字典 2.http-client远程测试插件,可以保存测试数据 3.三种跨域解决 4.具有多层级数据查询思路 5.Mybaits分页插件原理 6.根据文 ...
- 学成在线项目（HTML+CSS）
去年在B站上跟着Pink老师学习的前端成果,衷心的感谢Pink老师! 效果图: HTML代码 <!DOCTYPE html> <html lang="en"> ...
- CSS学习笔记之学成在线项目（下） 3.3
1.1 机器学习工程师模块 本人思路:定义一个content大盒子,里面包含top和ugui上下两个小盒子,小盒子里的布局以及样式与前面的模块是一致的,这里不再赘述,可直接套用style样式. 结构代 ...
- HTML+CSS实战——学成在线项目（含源码、素材、psd文件）
文章目录 准备工作 版心和清除默认样式 header布局 logo和nav布局 搜索--布局和文本框 用户区域 banner布局 精品推荐 版权区域 项目源码--点击下载 准备工作 版心和清除默认样式 ...
- 黑马程序员HTML+CSS学成在线项目
/*美化首页*/ *{margin: 0;padding: 0;box-sizing: border-box; }li{list-style: none; } a{text-decoration: n ...
- 学成在线项目note
目录 一.index.html 1.头部header 2.轮播图banner 3.精品推荐 4.精品推荐课程 5.footer 二.index.css 1.重要的代码 一.index.html < ...
- 黑马学成在线-项目搭建
一.开发环境搭建 1.开发工具版本 开发工具 版本号 IntelliJ-IDEA 2021.x以上版本 Java JDK-1.8.x Maven 3.6.x以上版本 Mysql 8.x VMware- ...
- 跟着Pink老师学前端——学成在线
最近跟着pink老师学习html+css,做了一个学成在线页面,后边根据老师的框架更改了一些图片 代码部分: <!DOCTYPE html> <html lang="en ...
最新文章
- 生物医学大数据处理研究探讨
- HDU - 2389 Rain on your Parade(Hopcroft-Krap算法求二分图最大匹配)
- ubuntu安装vasp_用强大的GROMACS分析工具分析VASP的动力学结果
- 12、常见Conditional注解源码解析-ConditionalOnBean（写作中...）
- Web Worker——js的多线程，实现统计博客园总阅读量
- matplotlib中subplot的各参数的作用
- Java的System.out.println并不等于C的printf
- DB9串口定义及含义
- 解决Jetbarins Clion Ubuntu Fcitx 中文输入法光标跟随问题
- centos7 xmapp安装完报错：error while loading shared libraries: libc.so.6
- 浅谈什么是 云原生
- 如何从零构建对内网穿透的理解
- 大规模知识图谱数据存储实战解析
- 字节跳动-飞书视频-测试开发面试题
- 大话2口袋版不显示服务器,大话西游2新口袋版操作指引及常见问题说明
- 普速铁路中级工技能精选100题
- 梯度下降（GD）算法再学习
- bitwig编曲软件linux,Bitwig Studio下载
- android shell 定位 命令,【Adb shell】---玩转 Android系统 查询 应用包名 命令
- BUUCTF之misc 我爱Linux--zhecho的博客csdn