前端：【学成在线项目】HTML+CSS详细制作过程（代码只做参考）
目录
1. 案例准备工作
1.1 准备素材和工具
1.2 vscode案例准备
2. 页面布局整体思路
3. 正式制作网页
3.1 确定版心
3.2 确定行，按顺序写列
3.2.1 页面头部制作
3.2.3 精品推荐模块
3.2.4 精品推荐模块
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链接，设左浮动、无序列表
- 里面放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代码
学成在线网页首页
qq-leishui
精品推荐
查看全部
-
Think PHP 5.0 博客系统实战项目演练
高级
• 1125人在学习
-
Android 网络图片加载框架详解
高级
• 1125人在学习
-
Angular 2 最新框架+主流技术+项目实战
高级
• 1125人在学习
-
Android Hybrid APP开发实战 H5+原生！
高级
• 1125人在学习
-
Android Hybrid APP开发实战 H5+原生！
高级
• 1125人在学习
-
Think PHP 5.0 博客系统实战项目演练
高级
• 1125人在学习
-
Android 网络图片加载框架详解
高级
• 1125人在学习
-
Angular 2 最新框架+主流技术+项目实战
高级
• 1125人在学习
-
Android Hybrid APP开发实战 H5+原生！
高级
• 1125人在学习
-
Android Hybrid APP开发实战 H5+原生！
高级
• 1125人在学习
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，操作更方便哦