网页制作流程--（项目案例）学成在线

一、根目录

目标：能根据项目需求创建根目录

根目录：网站的第一级文件夹

1.图片文件夹：images

2.样式文件夹

3.首页：index.html

二、布局流程

目标: 掌握网页布局基本步骤

从外到内, 从上到下

CSS美化

宽度,高度,背景色 → 调整位置

放内容 → 调整内容位置 → 调整细节(文字样式等等)

1.准备工作

html：

<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><link rel="stylesheet" href="./css_/index.css">
</head>
<body><!-- 网站首页，所有网站的首页都叫index.html,因为服务器找首页都是找index.html --><!-- 布局：从外到内，从上到下，从做右 --><!-- css：浮动/display;盒子模型；文字样式 --><div class="header wrapper"></div>
</body>

css：

/* index.css是用来美化首页的 */
body{background-color: pink;
}

2.版心和清除浮动

效果图：


*{margin: 0;padding: 0;/* 内减模式 */box-sizing: border-box;
}li{list-style: none;
}a{text-decoration: none;
}.clearfix::before,
.clearfix::after{content: '';display: table;
}
.clearfix::after{clear: both;
}body{background: color #f3f5f7;;
}/* 版心 */
.wrapper{width: 1200px;margin: 0 auto;
}

03-header布局

.header{height: 42px;background-color: pink;/* margin-top: 30PX;margin-bottom: 30px; */margin: 30px auto;
}

04-logo和nav布局、05-nav完成

效果图：

html：

<body><!-- 网站首页，所有网站的首页都叫index.html,因为服务器找首页都是找index.html --><!-- 布局：从外到内，从上到下，从做右 --><!-- css：浮动/display;盒子模型；文字样式 --><!-- 头部 header:负责头部区域的样式，wrapper只负责版心居中--><div class="header wrapper"><h1><a href="#"><img src="#" alt=""></a></h1><!-- 导航 --><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">导航</a></li><li><a href="#">职业规划</a></li></ul></div></div>
</body>

css：

h1{float: left;
}/* 导航 */
.nav{height: 42px;/* background-color: green; */float: left;margin-left: 70px;
}.nav li{float: left;margin-right: 26px;
}.nav li a{/* a是行内 宽高不生效 */display: block;padding: 0 9px;height: 42px;line-height: 42px;font-size: 18px;color:#050505;
}.nav li a:hover{border-bottom: 2px solid skyblue;
}

06-搜索-布局和文本框

效果图：

html：

  <div class="header wrapper"><h1><a href="#"><img src="./images/logo.png" alt=""></a></h1><!-- 导航 --><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" placeholder="输入关键字"><button></button></div></div>

css：

/* 搜索 */
.search{float: left;margin-left: 59px;width: 412px;height: 40px;border: 1px solid #00a4ff;}
.search input{width: 362px;height: 38px;border: 0;padding-left: 20px;
}
/* 控制placeholder的样式 */
.search input::placeholder{font-size: 14px;color: #bfbfbf;
}

07-搜索-按钮

效果图：

html：

       <!-- 搜索 --><div class="search"><input type="text" placeholder="输入关键字"><button></button></div>

CSS：

/* 搜索 */
.search{float: left;margin-left: 59px;width: 412px;height: 40px;border: 1px solid #00a4ff;}
.search input{float: left;width: 360px;height: 38px;border: 0;padding-left: 20px;
}/* 控制placeholder的样式 */
.search input::placeholder{font-size: 14px;color: #bfbfbf;
}.search button{width: 50px;height: 40px;background-image: url(../images/btn.png);border: 0;float: left;
}

08-用户区域

效果图：

html：

   <div class="user"><img src="./images/user.png" alt=""><span>lilei</span></div>

css：

.user{float: right;margin-right: 35px;height: 42px;line-height: 42px;
}.user img{/* 调节图片垂直对齐方式，middle:居中 */vertical-align: middle;
}

09-banner布局

效果图：

html：

  <!-- 轮播图banner  --><div class="banner"><div class="wrapper"><div class="left"></div><div class="right"></div></div></div>

css：

/* 轮播图 */
.banner{height: 420px;background-color: #1c036c;
}.banner .wrapper{height: 420px;background-image: url(../images/banner2.png);
}.banner .left{float: left;width: 190px;height: 420px;background-color: rgb(0,0,0,0.3);
}.banner .right{float: right;margin-top: 50px;width: 228px;height: 300px;background-color: #fff;
}

10-banner-left完成

效果图：

html：

  <!-- 轮播图banner  --><div class="banner"><div class="wrapper"><div class="left"><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="#">前端开放 <span>></span></a></li><li><a href="#">前端开放 <span>></span></a></li></ul></div><div class="right"></div></div></div>

css：

.banner .left{float: left;padding: 0 20px;width: 190px;height: 420px;background-color: rgb(0,0,0,0.3);/* 行高属于控制文字的属性，能继承 */line-height: 44px;
}.banner .left span{float: right;
}.banner .left a{font-size: 14px;color: #fff;
}.banner .left a:hover{color: #00b4ff;
}

11-banner-right-标题

效果图：

html：

   <div class="right"><h2>我的课程表</h2></div>

css:

.banner .right{float: right;margin-top: 50px;width: 228px;height: 300px;background-color: #fff;}.banner .right h2{height: 42px;background-color: #9bceea;text-align: center;line-height: 42px;font-size: 18px;color: #fff;
}

12-banner-right-内容

效果图：

html:

<div class="right"><h2>我的课程表</h2><div class="content"><dl><dt>继续学习 程序语言设计</dt><dd>正在学习-使用对象</dd></dl> <dl><dt>继续学习 程序语言设计</dt><dd>正在学习-使用对象</dd></dl> <dl><dt>继续学习 程序语言设计</dt><dd>正在学习-使用对象</dd></dl></div></div>

css：

.banner .right .content{padding: 0 18px;
}.banner .right .content dl{padding: 12px 0;border-bottom: 2px solid #e5e5e5;
}.banner .right .content dt{font-size: 16px;color: #4e4e4e;
}.banner .right .centent dd{font-size: 14px;color: #4e4e4e ;
}

13-banner-right-全部内容

效果图：

html：

 <div class="right"><h2>我的课程表</h2><div class="content"><dl><dt>继续学习 程序语言设计</dt><dd>正在学习-使用对象</dd></dl> <dl><dt>继续学习 程序语言设计</dt><dd>正在学习-使用对象</dd></dl> <dl><dt>继续学习 程序语言设计</dt><dd>正在学习-使用对象</dd></dl></div><a href="#" class="more">全部课程</a></div>

css：

.banner .right .more{display: block;/* margin: 4px 14px 0; */margin: 4px auto 0;width: 200px;height: 40px;border: 1px solid #00a4ff;font-size: 16px;color: #00a4ff;font-weight: 700;text-align: center;line-height: 40px;
}

14-精品推荐

效果图：

html：

    <!-- 精品推荐 --><div class="goods wrapper"><h2>精品推荐</h2><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="xingqu">修改兴趣</a></div>

css：

/* 精品推荐 */
.goods{margin-top: 8px;padding-left: 34px;padding-right: 26px;height: 60px;background-color: white;box-shadow: 0px 2px 3px 0px rgb(118,118,118,0.2);line-height: 60px;
}.goods h2{float: left;font-size: 16px;color: #00a4ff;font-weight: 700px;
}.goods ul{float: left;margin-left: 30px;
}.goods ul li{float: left;
}.goods li a{border-left: 1px solid #bfbfbf;padding: 0 30px;font-size: 16px;color: #050505;
}.goods .xingqu{float: right;font-size: 14px;color: #00a4ff;
}

15-精品推荐-标题

效果图:

html:

   <!-- 精品推荐课程 --><div class="box wrapper"><div class="title"><h2>精品推荐</h2><a href="#">查看全部</a></div></div>

css:

/* 精品课程 */
.box{margin-top: 35px;
}.box .title{height: 40px;background-color: pink;
}.box .title h2{float: left;font-size: 20px;content: #494949;font-weight: 400;
}.box .title a{margin-right: 30px;float: right;font-size: 12px;color: #a5a5a5;
}

16-精品课程内容

效果图：

html：

<div class="content clearfix"><ul><li><a href="#"><img src="./images/course07.png" alt=""><h3>THink PHP 5.0 博客实战项目演练</h3><p><span>高级</span> -  1125人在学习</p></a></li><li><a href="#"><img src="./images/course07.png" alt=""><h3>THink PHP 5.0 博客实战项目演练</h3><p><span>高级</span> -  1125人在学习</p></a></li> <li><a href="#"><img src="./images/course07.png" alt=""><h3>THink PHP 5.0 博客实战项目演练</h3><p><span>高级</span> -  1125人在学习</p></a></li> <li><a href="#"><img src="./images/course07.png" alt=""><h3>THink PHP 5.0 博客实战项目演练</h3><p><span>高级</span> -  1125人在学习</p></a></li> <li><a href="#"><img src="./images/course07.png" alt=""><h3>THink PHP 5.0 博客实战项目演练</h3><p><span>高级</span> -  1125人在学习</p></a></li> <li><a href="#"><img src="./images/course07.png" alt=""><h3>THink PHP 5.0 博客实战项目演练</h3><p><span>高级</span> -  1125人在学习</p></a></li> <li><a href="#"><img src="./images/course07.png" alt=""><h3>THink PHP 5.0 博客实战项目演练</h3><p><span>高级</span> -  1125人在学习</p></a></li> <li><a href="#"><img src="./images/course07.png" alt=""><h3>THink PHP 5.0 博客实战项目演练</h3><p><span>高级</span> -  1125人在学习</p></a></li><li><a href="#"><img src="./images/course07.png" alt=""><h3>THink PHP 5.0 博客实战项目演练</h3><p><span>高级</span> -  1125人在学习</p></a></li> <li><a href="#"><img src="./images/course07.png" alt=""><h3>THink PHP 5.0 博客实战项目演练</h3><p><span>高级</span> -  1125人在学习</p></a></li></ul></div>

css：

.box .content li{float: left;margin-right: 15px;margin-bottom: 15px;width: 228px;height: 270px;background-color: pink;
}.box .content li:nth-child(5n){margin-right: 0;
}.box .content li h3{padding: 20px;font-size: 14px;color: #050505;font-weight: 400;
}.box .content li p{padding: 0 20px;font-size: 12px;color: #999;
}.box .content li span{color: #ff7c2d;
}

17-版权区域-布局

效果图：

html：

    <!-- 版权 :注意要清除浮动的影响，课程li 的父级 --><!-- li都浮动了，脱标，撑不开父级的高度 --><div class="footer"><div class="wrapper"><div class="left">1</div><div class="right">2</div></div></div>

css：

.footer{margin-top: 40pxs;height: 417px;background-color: #fff;
}.footer .left{float: left;
}.footer .right{float: right;
}

18-版权区域-内容

效果图：

html：

 <div class="right"><dl><dt>合作伙伴</dt><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><dt>合作伙伴</dt><dd><a href="#">合作机构</a></dd><dd><a href="#"></a>合作导师</dd></dl></div>

css：

.footer .right{float: right;
}.footer .right dl{float: left;margin-left: 120px;
}

网页制作流程--（项目案例）学成在线相关推荐

html制作课程导航页面,学成在线页面制作（HTML+CSS部分）（顶部+轮播图部分）...
学成在线页面制作(HTML+CSS部分)(顶部+轮播图部分) 成品截图前期准备素材一.项目页面PSD源文件二.前期准备工作三.CSS属性书写顺序四.布局分析五.布局流程开始页面制作头部 ...
【前端初级项目】学成在线网站首页，HTML+CSS，附PSD设计稿！！
技术栈及工具 HTML CSS 切图/测量工具:Photoshop 编辑器:VSCode 效果预览学成在线网站首页,只有一张首页,适合刚学HTML,CSS的同学练手,虽然只有一张静态页面,但是总体上 ...
使用html和css进行红米案例、学成在线开发
目录红米个人案例学成在线案例红米个人案例 HTML5的学习及练习红米个人案例 <!DOCTYPE html> <html lang="en"> &l ...
2023年最新黑马程序员Java微服务项目--学成在线
正式上线Java微服务项目<学成在线> 项目对程序员的重要性不用播妞多说了吧更重要的是这次是完整!实战!企业级!项目! 划重点:全新发布!正式上线! <学成在线>项目以在 ...
学成在线项目开发技巧整理---第一部分
学成在线项目开发技巧整理---第一部分 1.数据字典 2.http-client远程测试插件,可以保存测试数据 3.三种跨域解决 4.具有多层级数据查询思路 5.Mybaits分页插件原理 6.根据文 ...
HTML+CSS-项目：学成在线
项目:学成在线 Date: September 9, 2022 Summary: 创建根目录.创建网页布局 0. 项目预览: 1. 创建根目录: 目标:创建项目根目录根目录:网站的第一级文件夹根目 ...
前端网页项目-学成在线案例
典型的企业级网站目的是为了整体感知企业级网站布局流程,复习以前知识准备素材和工具: 学成在线PSD源文件开发工具=PS(切图)/cutterman插件+vscode(代码)+chrome(测试) ...
【前端】学成在线网页项目练习制作
目录 html代码 css代码 Hello我是Leo,最近开始学习前端,学习的差不多了开始做简单的项目. 这是我学习前端路上的一个练习,跟着billbill黑马程序员pink老师做的,语法有不规范的地 ...
html学习（06）-网页制作【学成在线】
文章目录一网页制作流程 1.1 根据项目需求创建根目录 1.2 从掌握网页布局基本步骤 1.3 效果 1.4 代码 1.4.1 HTML代码 1.4.2 CSS代码一网页制作流程 1.1 根据 ...

网页制作流程--（项目案例）学成在线

网页制作流程--（项目案例）学成在线相关推荐

最新文章

热门文章