html+css 网页制作如何实现？
时间：2024-01-28 01:40:01 | 来源：网站运营
时间：2024-01-28 01:40:01 来源：网站运营
html+css 网页制作如何实现？：只要学会了HTML+CSS的内容，就可以做一个综合项目了。下文分享黑马程序员小兔仙项目项目前置样式+项目搭建；（本文内容过长，可以复制粘贴到自己的笔记本学习！）
先来看看项目介绍：
黑马程序员小兔仙项目是基于Vue3.0 的Composition API 的高级前端项目课程。
大家可以在线体验：小兔鲜儿 - 新鲜 惠民 快捷！
电商行业，
功能数量10个，页面数量12个，接口数量100；解决方案17；完整的教学课程实际上是15天的。
看到这里不要担心，我们可以只掌握HTML+CSS后，来
使用的专业方式完成 项目结构搭建 和 基础公共样式 。
！！！！划重点！！！！！本文内分享的内容围绕着学习一个项目的逻辑顺序，能够用专业的方式完成项目结构的搭建和基础公共样式！具体的实现内容较少，如果你们需要请评论。我会追更后面的Header、Footer等等面板部分的开发内容！
看课程戳这里：web前端零基础html5 +css3+前端项目视频教程
先来看看学习目标
- 能够在网页中使用 精灵图
- 能够使用 背景大小属性 ，设置背景图片的大小
- 能够认识 CSS书写顺序，提高代码专业性和浏览器渲染性能
- 能够使用的专业方式完成 项目结构搭建 和 基础公共样式
- 能够应用已学技术知识 完成小兔鲜儿项目
一、CSS样式补充
目标：能够
使用精灵图，
给元素添加阴影效果，能够让
元素完成过渡效果。
学习路径：
1.1 精灵图
场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
例如：需要在网页中展示8张小图片
• 8张小图片分别发送 → 发送8次 • 合成一张精灵图发送 → 发送1次
总结：精灵图的有点是：减少服务器发送次数，减轻服务器的压力，提高页面的加载速度。
1.2 精灵图的使用步骤
- 创建一个盒子
- 通过PxCook量取小图片大小，将小图片的宽高设置给盒子
- 将精灵图设置为盒子的背景图片
- 通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y
1.3 小结
Ø 使用精灵图的步骤是什么？
- 创建一个盒子
- 设置盒子大小为小图片大小
- 设置精灵图为盒子的背景图片
- 将小图片左上角坐标 取负值，设置给盒子的background-position：x y
二、背景图片大小
作用：设置背景图片的大小，
语法：background-size：宽度 高度；
取值
background-size：宽度 高度；
2.1 background 连写拓展
完整连写：
注意点：
background-size和background连写同时设置时，需要注意覆盖问题解决
1. 要么单独的样式写连写的下面
2. 要么单独的样式写在连写的里面
三、文字阴影
作用：给文字添加阴影效果，吸引用户注意
属性名：text-shadow
取值：
拓展：阴影可以叠加设置，每组阴影取值之间以逗号隔开
四、盒子阴影
作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节
属性名：box-shadow
取值：
五、过渡
作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
属性名：transition
常见取值：注意点：过渡需要：默认状态和hover状态样式不同，才能有过渡效果
transition属性给需要过渡的元素本身加
transition属性设置在不同状态中，效果不同的 给默认状态设置，鼠标移入移出都有过渡效果 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果
六、项目前置认知
目标：能够知道SEO三大标签，能够设置网页的ico图标，能够书写版心公共类代码
学习途径：- 网页与网站的关系
- 骨架结构标签
- SEO三大标签 ico图标设置
- 版心
6.1 生活当中的例子
网页：相当于每页纸
网站：相当于一本书籍 -用户翻阅的时候，看的是每页纸上的内容 -由多页纸整合在一起，就是完整的一本书籍了
6.2 网页与网站的关系
在互联网中，网站类似于是一本书，网页就是这本书的每一页
比如：淘宝、京东、黑马程序员等就是一个网站，类似于是一本书
这些网站中的每一个网页，如：主页、登录页面、商品页面就是每一个单独的页面，类似于每一页纸
多个同主题网页整合在一起，就称之为网站
6.3 网页与网站的概念
网页：网站中的每一“页” 。例如：淘宝的主页、淘宝的登录页、淘宝的商品页等
网站：提供特定服务的一组网页集合。例如：百度、淘宝、京东、黑马程序员等；
七、骨架结构标签
7.1 DOCTYPE文档说明
<!DOCTYPE html>文档类型声明，告诉浏览器该网页的 HTML版本
注意点：DOCTYPE需要写在页面的第一行，不属于HTML标签
7.2 网页语言
识 网页 使用的 语言
作用：搜索引擎归类 + 浏览器翻译
常见语言：zh-CN 简体中文 / en 英文
7.3 字符编码（了解）
识 网页 使用的字符编码
作用：保存和打开的字符编码需要统一设置，否则可能会出现 乱码
常见字符编码：
- UTF-8：万国码，国际化的字符编码，收录了全球语言的文字
- GB2312：6000+ 汉字
- GBK：20000+ 汉字
- 注意点：开发中 统一使用 UTF-8 字符编码 即可
八、SEO简介
SEO（Search Engine Optimization）：搜索引擎优化
作用：让网站在搜索引擎上的排名靠前
提升SEO的常见方法：
- 1. 竞价排名
- 2. 将网页制作成html后缀
- 3. 标签语义化（在合适的地方使用合适的标签）
- 4. ……
8.1 SEO三大标签
title：网页标题标签
description：网页描述标签
keywords：网页关键词标签
（拓展补充） 有语义的布局标签
场景：在HTML5新版本中，推出了一些有语义的布局标签，可以增强网页的语义化
标签：
注意点：以上标签显示特点和div一致，但是比div多了不同的语义
九、ico图标设置
场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标
常见代码：
给网页设置ico图标需要使用什么标签？
十、版心
场景：把页面的主体内容约束在网页中间
作用：让不同大小的屏幕都能看到页面的主体内容
代码：
注意点：版心类名常用：container、wrapper、w 等
（拓展补充） CSS书写顺序
衡量程序员的能力，除了要看实现业务需求的能力，还要看平时书写代码的规范（专业性）
不同的CSS书写顺序会影响浏览器的渲染性能，推荐前端工程师使用专业的书写顺序习惯注意点：开发中推荐
多用类+后代，但不是层级越多越好，一个选择器中的类选择器的个数推荐
不要超过3个。十一、项目结构搭建
目标：能够使用专业方式完成
项目结构搭建 和
基础公共样式学习路径：- 1. 文件和目录准备
- 2. 基础公共样式
- 3. index页面骨架
11.1 文件和目录准备
1. 新建项目文件夹 xtx-pc-client，在VScode中打开 - • 在实际开发中，项目文件夹不建议使用中文
- • 所有项目相关文件都保存在 xtx-pc-client 目录中
2. 复制 favicon.ico 到 xtx-pc-client 目录 • 一般习惯将ico图标放在项目根目录
3. 复制 images 和 uploads 目录到 xtx-pc-client 目录中 - • images ：存放网站 固定使用 的图片素材，如：logo、样式修饰图片… 等
- • uploads：存放网站 非固定使用 的图片素材，如：商品图片、宣传图片…等
4. 新建 index.html 在根目录 5. 新建 css 文件夹保存网站的样式，并新建以下CSS文件： - • base.css：基础公共样式
- • common.css：该网站中多个网页相同模块的重复样式，如：头部、底部
- • index.css：首页样式
11.2 完成后的目录以及文件结构
十二、基础公共样式
场景：一般项目开始前，首先会 去除掉浏览器默认样式，设置为 当前项目需要的初始化样式
作用：防止不同浏览器中标签默认样式不同的影响，统一不同浏览器的默认显示效果，方便后续项目开发
要求：
已经准备好base.css代码，同学们需要认识，项目中可以直接引入使用
十三、index页面骨架
不知道有没有人耐心看到最后了，如果你们看到最后觉得自己可以的话，还想继续深入学习后面内容的话，请评论。我会追更，
如果大家觉得自己还不能独立完成项目的话，先把前面该学习的内容补上！
更多HTML+CSS学习笔记如下（已完结）：
- 认识网页 / HTML标签大全 / 表格 / 列表
- CSS入门笔记 / Css样式表 / emmet语法 / CSS的复合选择器 / 显示模式 /
- CSS背景 / CSS三大特性 / 盒子模型 / 圆角边框、盒子阴影、文字阴影
- 浮动知识点汇总 / PS切图 / CSS属性书写顺序（重点） / CSS练手之学成在线页面制作
- CSS定位的4种分类 / 学成在线模块添加 / HTML+CSS之定位（position）的应用
- 案例：淘宝轮播图 / 元素的显示与隐藏 / 土豆网鼠标经过显示遮罩 /
- 【重点】CSS之精灵图 / 字体图标 / 用户界面样式源码 / vertical-align 属性应用 /
- 溢出的文字省略号显示 / 常见布局技巧+案例 / CSS新增选择器 / 盒子模型和其他新特性
HTML+CSS项目《品优购》完整笔记+源码（万字版可复制）：
- HTML+CSS大项目1：品优购项目笔记+源码（万字！收藏）
- HTML+CSS大项目2：品优购项目笔记+源码（万字！收藏）
移动开发笔记（更新中）
- 移动WEB开发之入门&视口 / 二倍图 / 主流方案选择 / 携程网首页案例制作
- rem基础&媒体查询 / less基础 / rem实际开发适配方案 /
JavaScript基础笔记更新中：
- 认识JavaScript / JavaScript 注释以及输入输出语句 / 变量的使用、语法扩展、命名规范
- 数据类型简介以及简单的数据类型 / 获取变量数据类型 / 运算符&算数运算符
- 递增和递减运算符 / 比较运算符和逻辑运算符 / 赋值运算符以及运算符优先级
- JavaScript 流程控制-实际案例学习if语句 /三元表达式&分支流程控制 switch 语句
- JavaScript的for循环学不明白怎么办？ / 以案例学习JavaScript双重for循环 一文理解JavaScript中while以及do while循环
JavaScript最全拔高（更新中）
JavaScript面向对象开发相关模式 / JavaScript创建对象简单方式到优化 / JavaScript面向对象游戏案例：贪吃蛇
前端简易版路线图以及课程资源：
HTML+CSS-->移动web->JavaScript基础-->Web APIs->数据交互&异步编程-->Node.js-->Vue2+Vue3-->React核心技术-->微信小程序
如果大家觉得以上内容有用，希望你们动动小手支持黑马程序员前端学科。并且有任何学习前端的问题都可以联系我们，免费答疑，有问必答！
在线咨询
