HTML与CSS基础（九）—— 综合项目（CSS样式补充、项目前置认知、项目结构搭建）

news2025/1/15 23:40:16

目标

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

一、项目样式补充

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

1. 精灵图

场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
优点： 减少服务器发送次数，减轻服务器的压力，提高页面加载速度
例如：需要在网页中展示8张小图片
• 8张小图片分别发送 → 发送8次
• 合成一张精灵图发送 → 发送1次

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

2. 背景图片大小

作用：设置背景图片的大小，
语法： background-size：宽度 高度；
取值：

background连写

完整连写： background: color image repeat positionn/size;
注意点：
• background-size和background连写同时设置时，需要 注意覆盖问题
解决：
1. 要么单独的样式写 连写的下面
2. 要么单独的样式写在 连写的里面

3. 文字阴影

作用：给文字添加阴影效果，吸引用户注意
属性名： text-shadow
取值：
拓展：
• 阴影可以叠加设置，每组阴影取值之间以逗号隔开

4. 盒子阴影

作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节
属性名： box-shadow
取值：

5. 过渡

作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
属性名： transition
常见取值：
注意点：
1. 过渡需要：默认状态 和 hover状态样式不同，才能有过渡效果
2. transition属性给需要过渡的元素 本身加
3. transition属性设置在不同状态中，效果不同的
① 给默认状态设置，鼠标移入移出都有过渡效果
② 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果

二、项目前置认知

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

1. 网页与网站的关系

网页：网站中的每一“页” 。例如：淘宝的主页、淘宝的登录页、淘宝的商品页等。
网站：提供特定服务的 一组网页集合。例如：百度、淘宝、京东、拼多多等；

2. 骨架结构标签

2.1 DOCTYPE文档说明

<!DOCTYPE html>文档类型声明，告诉浏览器该网页的 HTML版本
注意点：DOCTYPE需要写在页面的 第一行，不属于HTML标签

2.2 网页语言

<html lang=''en''> 网页 使用的 语言
作用：搜索引擎归类 + 浏览器翻译
常见语言： zh-CN 简体中文 / en 英文

2.3 字符编码

<meta charset="UTF-8"> 网页 使用的字符编码
作用：保存和打开的字符编码需要统一设置，否则可能会出现 乱码 常见字符编码：
1. UTF-8：万国码，国际化的字符编码，收录了全球语言的文字
2. GB2312：6000+ 汉字
3. GBK：20000+ 汉字
注意点：开发中 统一使用 UTF-8 字符编码 即可

3. SEO三大标签

3.1 SEO简介

SEO（Search Engine Optimization）： 搜索引擎优化
作用：让网站在搜索引擎上的排名靠前
提升SEO的常见方法：
1. 竞价排名
2. 将网页制作成html后缀
3. 标签语义化（在合适的地方使用合适的标签）

3.2 SEO三大标签

1. title：网页标题标签
2. description：网页描述标签
3. keywords：网页关键词标签

3.3 有语义的布局标签

场景：在HTML5新版本中，推出了一些有语义的布局标签，可以增强网页的语义化
标签：
• header：网页头部
• nav：网页导航
• footer：网页底部
• aside：网页侧边栏
• section：网页区块
• article：网页文章
注意点：
• 以上标签显示特点和div一致，但是比div多了不同的语义

4. ico图标设置

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

在线制作icon图标：GO

5. 版心

场景：把页面的主体内容约束在网页中间
作用：让不同大小的屏幕都能看到页面的主体内容
注意点：
• 版心类名常用： container、wrapper、w 等 
/* 版心 */
.container {
    width: 1240px;
    margin: 0 auto;
}

6. 拓展：CSS书写顺序

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

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

注意点：

• 开发中推荐多用类 + 后代，但不是层级越多越好，一个选择器中的类选择器的个数推荐 不要超过 3 个

三、项目结构搭建

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

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：首页样式

2. 基础公共样式

场景：一般项目开始前，首先会 去除掉浏览器默认样式，设置为 当前项目需要的初始化样式
作用：防止不同浏览器中标签默认样式不同的影响， 统一不同浏览器的默认显示效果，方便后续项目开发
要求：
• 已经准备好 base.css代码，项目中可以直接引入使用
推荐：
http://necolas.github.io/normalize.css/
https://github.com/necolas/normalize.css 
* 清除默认样式的代码 */
/* 去除常见标签默认的 margin 和 padding */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
input {
  margin: 0;
  padding: 0;
}

/* 內减模式 */
* {
    box-sizing: border-box;
}

/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
  font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
    "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  color: #333;
}

/* 去除列表默认样式 */
ul,
ol {
  list-style: none;
}

/* 去除默认的倾斜效果 */
em,
i {
  font-style: normal;
}

/* 去除a标签默认下划线，并设置默认文字颜色 */
a {
  text-decoration: none;
  color: #333;
}

/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
img {
  vertical-align: middle;
}

/* 去除input默认样式 */
input {
  border: none;
  outline: none;
  color: #333;
}

/* 左浮动 */
.fl {
  float: left;
}

/* 右浮动 */
.fr {
  float: right;
}

/* 双伪元素清除法 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}

3. index页面骨架

<!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">
    <!-- meta:desc -->
    <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台">
    <!-- meta:kw -->
    <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
    <title>小兔鲜儿-新鲜、惠民、快捷！</title>
    <!-- link:favicon -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 按顺序引入: 外链式样式表后写的生效 -->
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/148905.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

URL中绝对路径与相对路径拼接问题总结

URL中绝对路径与相对路径拼接问题总结

URL中绝对路径与相对路径拼接问题总结1. 基础环境2. 测试2.1 总结2.2 本地文件url1. 基础环境 这里用nginx的docker镜像构建了一个服务&#xff0c;步骤如下&#xff1a; sudo docker pull nginxsudo docker run -d --name nginx01 -p 8083:80 nginx nginx发布的根目录是/us…
阅读更多...
Redis安装及常用数据类型介绍

Redis安装及常用数据类型介绍

1、redis介绍1.1、redis是一个开源的key-value存储系统1.2、和Memcached类似&#xff0c;它支持存储的value类型相对很多&#xff0c;包括String、list、set、zset以及hash类型。1.3、这些数据类型都支持push/pop、add/remove及取交集并集及更丰富的操作&#xff0c;而且这些操…
阅读更多...
LeetCode[264]丑数II

LeetCode[264]丑数II

难度&#xff1a;中等题目&#xff1a;给你一个整数 n&#xff0c;请你找出并返回第 n个 丑数 。丑数 就是只包含质因数 2、3和/或 5的正整数。示例 1&#xff1a;输入&#xff1a;n 10输出&#xff1a;12解释&#xff1a;[1, 2, 3, 4, 5, 6, 8, 9, 10, 12] 是由前 10 个丑数组…
阅读更多...
【NKOJ三校 初中新年大联欢DIV2】考试游记

【NKOJ三校 初中新年大联欢DIV2】考试游记

目录 看不见的手ljj的方块零它来了宝石转换ljj的距离零它走了彩蛋 题目 【A NKOJ-P8629】 看不见的手 40pts 考试思路&#xff1a; 这道题一看数据范围就知道是O(n)O(n)O(n)的结论题&#xff0c;考试的时候脑子抽筋偏分输出1得了40pts&#xff1b; 正解&#xff1a; 他说…
阅读更多...
VISTA -MIT开源基于数据驱动的自动驾驶仿真引擎

VISTA -MIT开源基于数据驱动的自动驾驶仿真引擎

引言 VISTA 是MIT开源的一个基于数据驱动的用于自动驾驶感知和控制的仿真引擎。VISTA API提供了一个接口&#xff0c;用于将真实世界的数据集转换为具有dynamic agents、sensor suites、task objectives的虚拟环境。 用过 Unreal Engine 或者 Gazebo的仿真引擎的同学都知道&…
阅读更多...
【Kafka】八股文梳理

【Kafka】八股文梳理

什么是消息中间件&#xff1f; 消息中间件是基于队列与消息传递技术&#xff0c;在网络环境中为应用系统提供同步或异步、可靠的消息传输的支撑性软件系统。 消息中间件利用高效可靠的消息传递机制进行平台无关的数据交流&#xff0c;并基于数据通信来进行分布式系统的集成。…
阅读更多...
Android Native开发系列之C/C++代码调试

Android Native开发系列之C/C++代码调试

Android Native开发系列之C/C代码调试 引言 在做Android native层开发的时候&#xff0c;需要经常调试C/C代码&#xff0c;相较而言通过打日志的方式太不方便了。有两种方式可以进行底层代码的调试。 利用Android studio自带的Debugger进行调试。利用LLDB VSCode进行代码调试…
阅读更多...
SAP灵活工作流条件增强

SAP灵活工作流条件增强

前置 灵活工作流模板中可以设置条件&#xff0c;用来在场景配置中判断是否启动流程或者是否执行该节点 除了流程模板中设置&#xff0c;也可以通过增强设置更为灵活的条件判断,对应增强点SWF_PROCESS_WORKFLOW_CONDITION 增强实施步骤参考 创建增强点实施 复制示例类 为增强设…
阅读更多...
深入聊一聊vue3中的reactive()

深入聊一聊vue3中的reactive()

在vue3的开发中&#xff0c;reactive是提供实现响应式数据的方法。日常开发这个是使用频率很高的api。这篇文章笔者就来探索其内部运行机制。小白一枚&#xff0c;写得不好请多多见谅。 调试版本为3.2.45 什么是reactive? reactive是Vue3中提供实现响应式数据的方法. 在Vue2中…
阅读更多...
【Dash搭建可视化网站】项目9：智能选股器（结合行业、换手率、量比与60日k线图选择目标股票）制作步骤详解

【Dash搭建可视化网站】项目9：智能选股器（结合行业、换手率、量比与60日k线图选择目标股票）制作步骤详解

【Dash搭建可视化网站】项目9&#xff1a;智能选股器&#xff08;结合行业、换手率、量比与60日k线图选择目标股票&#xff09;1 项目效果图2 项目架构3 文件介绍和功能完善3.1 assets文件夹介绍3.2 app.py和index.py文件完善3.3 layoutleft.py文件完善3.4 api.py和api.ipynb文…
阅读更多...
【数据结构趣味多】栈和队列（详细解析）

【数据结构趣味多】栈和队列（详细解析）

目录 1.1 栈的定义 1.2 栈的模拟实现&#xff08;顺序栈&#xff09; push()方法 pop()方法 peek()方法 size()方法 栈模拟实现的全代码 1.3顺序栈和链栈的对比 2.队列 2.1队列的定义 2.1队列的模拟实现&#xff08;单链表&#xff09; offer()函数 poll()函数 p…
阅读更多...
ABB AC500 PLC 与西门子 S7-300 CPU DP 通讯

ABB AC500 PLC 与西门子 S7-300 CPU DP 通讯

硬件连接 将一个 AC500 CPU&#xff08;本例 PM583&#xff09; 左侧插入以 DP 通讯扩展模块 CM572&#xff0c;使用 DP 通讯电缆连接 CM572 与 314-2DP CPU 的 DP 通讯口。连接示意图如下&#xff1a; AC500 DP 主站配置 安装 DP 从站设备描述文件 从西门子官方网站下载 CP…
阅读更多...
认识二叉树

认识二叉树

hi&#xff0c;代噶候。今天带大家认识一下二叉树&#xff0c;这个二叉树在我看来确实很有难度&#xff0c;但是不要怕&#xff0c;&#xff0c;鲁迅先生曾经说过&#xff0c;真正的勇士敢于面对惨淡的人生&#xff0c;敢于正视淋漓 的鲜血&#xff0c;下面让我们开始吧&#x…
阅读更多...
线程池的内部结构与原理解析

线程池的内部结构与原理解析

线程池的内部结构 使⽤线程池的原因&#xff1a; 1、降低资源消耗 2、控制并发的数量。并发数量过多&#xff0c;可能会导致资源消耗过多&#xff0c;从⽽造成服务器崩溃 3、提高线程的可管理性 1、线程是稀缺资源&#xff0c;如果无限制地创建&#xff0c;不仅会消耗系统资源&…
阅读更多...
Global Illumination_SDF Generate Visualize Shadow

Global Illumination_SDF Generate Visualize Shadow

Signed Distance Field(有向距离场)&#xff0c;简称SDF&#xff0c;这其实是图形学中非常常用的数学概念。数学上来说&#xff0c;是定义在空间中的一个标量场&#xff0c;标量值为空间一点到曲面的距离。曲面外的点为正值&#xff0c;曲面上的点为0&#xff0c;曲面内的点为负…
阅读更多...
通用vue组件化展示列表数据

通用vue组件化展示列表数据

一、数据的简单展示 1.首先先确定要展示的表格列名以及拿到所需要展示的数组数据 2.然后建立一个专门放el-table遍历的文件 3.在父组件中将数据列表数据存放在listData里面&#xff0c;然后传给子组件&#xff0c;子组件定义一个动态的列&#xff0c;通过遍历propList得到列名…
阅读更多...
SpringCloud从入门到精通（八）

SpringCloud从入门到精通（八）

config config-概述 • Spring Cloud Config 解决了在分布式场景下多环境配置文件的管理和维护。 • 好处&#xff1a; 集中管理配置文件 不同环境不同配置&#xff0c;动态化的配置更新 配置信息改变时&#xff0c;不需要重启即可更新配置信息到服务config-快速入门 gitee搭…
阅读更多...
一文告别结合Nacos后，Springboot的配置文件看不懂的痛苦

一文告别结合Nacos后，Springboot的配置文件看不懂的痛苦

一、背景 后端基于SpringCloud项目架构的话&#xff0c;默认会使用Nacos来做配置中心&#xff0c;但是这对从来没接触过Nacos配置中心的小伙伴&#xff0c;肯定就不知道怎么回事了&#xff0c;于是便有了这一篇指引。 二、Nacos配置中心是如何引入SpringCloud项目中的呢&…
阅读更多...
操作系统实验8：proc文件的实现

操作系统实验8：proc文件的实现

实验目的 掌握虚拟文件系统的实现原理实践文件、目录、索引节点等概念 实验内容 在Linux 0.11上实现procfs&#xff08;proc文件系统&#xff09;内的psinfo结点。当读取此结点的内容时&#xff0c;可得到系统当前所有进程的状态信息。例如&#xff0c;用cat命令显示/proc/p…
阅读更多...
有限状态机

有限状态机

文章目录1.概念2.什么是计算3.什么是有限状态机3.1特性3.2为什么要用状态机4.实战4.1字符串转换整数4.2用有限状态机实现4.3源码1.概念 有限状态机&#xff08;英语&#xff1a;finite-state machine&#xff0c;缩写&#xff1a;FSM&#xff09;又称有限状态自动机&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023