15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > html+css 网页制作如何实现?

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+前端项目视频教程

先来看看学习目标

  1. 能够在网页中使用 精灵图
  2. 能够使用 背景大小属性 ,设置背景图片的大小
  3. 能够认识 CSS书写顺序,提高代码专业性和浏览器渲染性能
  4. 能够使用的专业方式完成 项目结构搭建 和 基础公共样式
  5. 能够应用已学技术知识 完成小兔鲜儿项目

一、CSS样式补充

目标:能够使用精灵图给元素添加阴影效果,能够让元素完成过渡效果

学习路径:

1.1 精灵图

场景:项目中将多张小图片,合并成一张大图片,这张大图片称之为精灵图

优点:减少服务器发送次数,减轻服务器的压力,提高页面加载速度

例如:需要在网页中展示8张小图片

• 8张小图片分别发送 → 发送8次 • 合成一张精灵图发送 → 发送1次

总结:精灵图的有点是:减少服务器发送次数,减轻服务器的压力,提高页面的加载速度。

1.2 精灵图的使用步骤

  1. 创建一个盒子
  2. 通过PxCook量取小图片大小,将小图片的宽高设置给盒子
  3. 将精灵图设置为盒子的背景图片
  4. 通过PxCook测量小图片左上角坐标,分别取负值设置给盒子的background-position:x y

1.3 小结

Ø 使用精灵图的步骤是什么?

二、背景图片大小

作用:设置背景图片的大小,

语法:background-size:宽度 高度;

取值

background-size:宽度 高度;

2.1 background 连写拓展

完整连写:

注意点:

background-size和background连写同时设置时,需要注意覆盖问题

解决

1. 要么单独的样式写连写的下面

2. 要么单独的样式写在连写的里面

三、文字阴影

作用:给文字添加阴影效果,吸引用户注意

属性名:text-shadow

取值:

拓展:阴影可以叠加设置,每组阴影取值之间以逗号隔开

四、盒子阴影

作用:给盒子添加阴影效果,吸引用户注意,体现页面的制作细节

属性名:box-shadow

取值:

五、过渡

作用:让元素的样式慢慢的变化,常配合hover使用,增强网页交互体验

属性名:transition

常见取值:

注意点:

过渡需要:默认状态和hover状态样式不同,才能有过渡效果

transition属性给需要过渡的元素本身加

transition属性设置在不同状态中,效果不同的 给默认状态设置,鼠标移入移出都有过渡效果 给hover状态设置,鼠标移入有过渡效果,移出没有过渡效果

六、项目前置认知

目标:能够知道SEO三大标签,能够设置网页的ico图标,能够书写版心公共类代码

学习途径:

  1. 网页与网站的关系
  2. 骨架结构标签
  3. SEO三大标签 ico图标设置
  4. 版心

6.1 生活当中的例子

网页:相当于每页纸

网站:相当于一本书籍 -用户翻阅的时候,看的是每页纸上的内容 -由多页纸整合在一起,就是完整的一本书籍了

6.2 网页与网站的关系

在互联网中,网站类似于是一本书,网页就是这本书的每一页

比如:淘宝、京东、黑马程序员等就是一个网站,类似于是一本书

这些网站中的每一个网页,如:主页、登录页面、商品页面就是每一个单独的页面,类似于每一页纸

多个同主题网页整合在一起,就称之为网站

6.3 网页与网站的概念

网页:网站中的每一“页” 。例如:淘宝的主页、淘宝的登录页、淘宝的商品页等

网站:提供特定服务的一组网页集合。例如:百度、淘宝、京东、黑马程序员等;

七、骨架结构标签

7.1 DOCTYPE文档说明

<!DOCTYPE html>文档类型声明,告诉浏览器该网页的 HTML版本

注意点:DOCTYPE需要写在页面的第一行,不属于HTML标签

7.2 网页语言

识 网页 使用的 语言

作用:搜索引擎归类 + 浏览器翻译

常见语言:zh-CN 简体中文 / en 英文

7.3 字符编码(了解)

识 网页 使用的字符编码

作用:保存和打开的字符编码需要统一设置,否则可能会出现 乱码

常见字符编码:

八、SEO简介

SEO(Search Engine Optimization):搜索引擎优化

作用:让网站在搜索引擎上的排名靠前

提升SEO的常见方法:

8.1 SEO三大标签

title:网页标题标签

description:网页描述标签

keywords:网页关键词标签

(拓展补充) 有语义的布局标签

场景:在HTML5新版本中,推出了一些有语义的布局标签,可以增强网页的语义化

标签:

注意点:以上标签显示特点和div一致,但是比div多了不同的语义

九、ico图标设置

场景:显示在标签页标题左侧的小图标,习惯使用.ico格式的图标

常见代码:

给网页设置ico图标需要使用什么标签?

十、版心

场景:把页面的主体内容约束在网页中间

作用:让不同大小的屏幕都能看到页面的主体内容

代码:

注意点:版心类名常用:container、wrapper、w 等

(拓展补充) CSS书写顺序

衡量程序员的能力,除了要看实现业务需求的能力,还要看平时书写代码的规范(专业性)

不同的CSS书写顺序会影响浏览器的渲染性能,推荐前端工程师使用专业的书写顺序习惯

注意点:开发中推荐多用类+后代,但不是层级越多越好,一个选择器中的类选择器的个数推荐不要超过3个。

十一、项目结构搭建

目标:能够使用专业方式完成 项目结构搭建 基础公共样式

学习路径:

11.1 文件和目录准备

1. 新建项目文件夹 xtx-pc-client,在VScode中打开

2. 复制 favicon.ico 到 xtx-pc-client 目录

• 一般习惯将ico图标放在项目根目录

3. 复制 images 和 uploads 目录到 xtx-pc-client 目录中

4. 新建 index.html 在根目录

5. 新建 css 文件夹保存网站的样式,并新建以下CSS文件:

11.2 完成后的目录以及文件结构

十二、基础公共样式

场景:一般项目开始前,首先会 去除掉浏览器默认样式,设置为 当前项目需要的初始化样式

作用:防止不同浏览器中标签默认样式不同的影响,统一不同浏览器的默认显示效果,方便后续项目开发

要求:

已经准备好base.css代码,同学们需要认识,项目中可以直接引入使用

十三、index页面骨架

不知道有没有人耐心看到最后了,如果你们看到最后觉得自己可以的话,还想继续深入学习后面内容的话,请评论。我会追更,如果大家觉得自己还不能独立完成项目的话,先把前面该学习的内容补上

更多HTML+CSS学习笔记如下(已完结):

HTML+CSS项目《品优购》完整笔记+源码(万字版可复制):

移动开发笔记(更新中)

JavaScript基础笔记更新中:

JavaScript最全拔高(更新中)

JavaScript面向对象开发相关模式 / JavaScript创建对象简单方式到优化 / JavaScript面向对象游戏案例:贪吃蛇

前端简易版路线图以及课程资源:

HTML+CSS-->移动web->JavaScript基础-->Web APIs->数据交互&异步编程-->Node.js-->Vue2+Vue3-->React核心技术-->微信小程序

如果大家觉得以上内容有用,希望你们动动小手支持黑马程序员前端学科。并且有任何学习前端的问题都可以联系我们,免费答疑,有问必答!

关键词:实现

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭