项目骨架搭建

news2024/10/5 16:31:52

CSS样式补充

精灵图

CSS精灵图（CSS Sprites）是一种网页优化技术，通过将多个小图像合并成一个大图像，然后通过CSS的背景定位（background-position）属性来显示对应的图像部分。这种技术可以减少HTTP请求次数，提高网页的加载速度。

要使用CSS精灵图，你需要遵循以下步骤：

  1. 创建HTML盒子元素：
<div class="box icon"></div>
  1. 使用PxCook工具量取小图片的宽度和高度。假设小图片的宽度为50px，高度为50px。
  2. 在CSS中设置盒子的样式：
.box {
  display: inline-block;
}

.icon {
  background-image: url('sprites.png');
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
}
  1. 使用PxCook测量小图片在精灵图中的左上角坐标。例如，假设测量到的坐标为(10px, 20px)。在CSS中将这些坐标值取负值并设置给盒子的background-position属性：
.icon {
  background-image: url('sprites.png');
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
  background-position: -10px -20px;
}

浏览器将仅显示精灵图中相应位置和大小的小图片部分。

背景图片大小

background-size属性用于设置背景图片的大小。这个属性可以让你控制背景图片的缩放和拉伸，以适应元素的尺寸。

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

取值：

  1. 长度值：可以用像素（px）、百分比（%）等单位设置宽度和高度。
    例如：background-size: 200px 100px;

  2. 百分比：可以用百分比设置背景图片的宽度和高度，相对于元素的宽度和高度。例如：background-size: 50% 50%;

  3. auto：如果只设置宽度或高度的值，另一个值可以使用auto，这样背景图片将保持原始的宽高比进行缩放。例如：background-size: 100px auto;

  4. contain：保持背景图片的宽高比，将图片缩放到完全适应元素的大小，可能会留下空白区域。例如：background-size: contain;

  5. cover：保持背景图片的宽高比，将图片缩放到完全覆盖元素的大小，可能导致图片部分被裁剪。例如：background-size: cover;

注意：可以为一个元素设置多个背景图片，使用逗号分隔每个背景图片的background-size值。例如：

background-image: url('image1.png'), url('image2.png');
background-size: 200px 100px, 50% 50%;

background 连写拓展

完整连写：background: color image repeat position/size

注意点：

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

解决：

  • 将单独的background-size属性写在background连写属性下面：
.background-example {
  background: #f0f0f0 url('example.png') no-repeat center center;
  background-size: 100px 100px;
}
  • 在background连写属性中设置background-size属性，使用/将其与背景位置分隔开：
.background-example {
  background: #f0f0f0 url('example.png') no-repeat center center / 100px 100px;
}

第二种方法更简洁，将所有的背景相关属性放在一行声明中，但需要注意使用/分隔背景位置和背景大小。

文字阴影

text-shadow属性用于给文本添加阴影效果，可以为文本创建一种立体感或突出显示的效果。这个属性允许你设置阴影的水平偏移、垂直偏移、模糊距离和阴影颜色。

语法：text-shadow: 水平偏移 垂直偏移 模糊距离 阴影颜色;

  • 水平偏移：阴影的水平偏移距离，正值向右，负值向左。可以使用长度单位（如px、em等）。
  • 垂直偏移：阴影的垂直偏移距离，正值向下，负值向上。可以使用长度单位（如px、em等）。
  • 模糊距离：阴影的模糊程度，值越大，阴影越模糊。可以使用长度单位（如px、em等）。
  • 阴影颜色：指定阴影的颜色，可以使用颜色名称、十六进制、RGB、RGBA等颜色值。
.text-shadow-example {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

此示例为文本添加了一个向右下角偏移的半透明黑色阴影，模糊距离为4px。

你还可以为文本添加多个阴影效果，只需用逗号分隔每个阴影定义即可：

.text-shadow-example {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.3);
}

盒子阴影

box-shadow属性用于给盒子（元素）添加阴影效果，可以为元素创建一种立体感或突出显示的效果。

语法：

box-shadow: inset? 水平偏移 垂直偏移 模糊距离 扩展距离 阴影颜色;
  • inset（可选）：添加这个关键词表示创建内阴影，即阴影在元素内部。
  • 水平偏移：阴影的水平偏移距离，正值向右，负值向左。可以使用长度单位（如px、em等）。
  • 垂直偏移：阴影的垂直偏移距离，正值向下，负值向上。可以使用长度单位（如px、em等）。
  • 模糊距离：阴影的模糊程度，值越大，阴影越模糊。可以使用长度单位（如px、em等）。
  • 扩展距离：阴影的扩展大小，正值会使阴影扩大，负值会使阴影缩小。可以使用长度单位（如px、em等）。
  • 阴影颜色：指定阴影的颜色，可以使用颜色名称、十六进制、RGB、RGBA等颜色值。

示例：

.box-shadow-example {
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.5);
}

此示例为盒子添加了一个向右下角偏移的半透明黑色阴影，模糊距离为4px。

过渡

transition属性用于在CSS属性值之间创建平滑过渡效果，使元素的样式在一定时间内逐渐改变。它通常与伪类:hover一起使用，以增强网页的交互体验。

属性名：transition

常见取值：

  • transition-property：指定应用过渡效果的CSS属性名称，例如width、height、opacity等。使用all可以表示应用于所有可过渡的属性。
  • transition-duration：指定过渡效果持续的时间，例如0.5s（0.5秒）或300ms（300毫秒）。
  • transition-timing-function：指定过渡效果的速度曲线，例如linear、ease、ease-in、ease-out、ease-in-out等。也可以使用cubic-bezier()函数自定义速度曲线。
  • transition-delay：指定过渡效果开始之前的延迟时间，例如1s（1秒）或500ms（500毫秒）。

注意点：

  1. 过渡需要：默认状态和hover状态样式不同，才能有过渡效果。
  2. transition属性给需要过渡的元素本身加。
  3. transition属性设置在不同状态中，效果不同：
    ① 给默认状态设置，鼠标移入移出都有过渡效果。
    ② 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果。

示例：

/* 给默认状态设置，鼠标移入移出都有过渡效果 */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 0.5s ease-in-out;
}

.box:hover {
  width: 200px;
  background-color: blue;
}

在这个示例中，.box元素的宽度和背景颜色在鼠标移入和移出时都会有过渡效果。过渡效果持续0.5秒，并使用ease-in-out速度曲线。

项目前置认知

网站与网页的关系

网站：相当于一本书

网页：相当于这本书上的每一页

多个同主题网页整合在一起，形成一个完整的网站

骨架结构标签

DOCTYPE文档说明

文档类型声明，告诉浏览器该网页的 HTML版本

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

网页语言

<html lang="en">

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

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

字符编码

<meta charset="UTF-8">

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

常见字符编码：

  1. UTF-8：万国码，国际化的字符编码，收录了全球语言的文字
  2. GB2312：6000+ 汉字
  3. GBK：20000+ 汉字

注意点：开发中统一使用 UTF-8 字符编码即可

SEO三大标签

介绍：

SEO（Search Engine Optimization）：搜索引擎优化

作用：让网页在搜索引擎的排名靠前

提升SEO的常见方法：

  1. 竞价排名
  2. 将网页制作成html后缀
  3. 标签语义化（在合适的地方使用合适的标签）
  4. …

在前端开发中，有三个重要的标签与SEO密切相关，分别是<title>、<meta name="description">和<meta name="keywords">标签。

  1. <title>标签：
  • 作用：定义网页的标题，显示在浏览器标签页上。
  • SEO重要性：搜索引擎把<title>标签作为网页内容的一个重要指标。一个精炼、具有关键词的标题可以提高搜索引擎排名。
  • 用法：将<title>标签放在<head>元素内，如<title>Example Website</title>。
  1. <meta name="description">标签：
  • 作用：提供网页的简短描述，用于搜索引擎显示在搜索结果中。
  • SEO重要性：一个清晰、简洁的描述可以吸引用户点击，提高网页的点击率。搜索引擎可能会根据描述内容对网页进行排序。
  • 用法：将<meta name="description">标签放在<head>元素内，如<meta name="description" content="This is an example website for SEO.">。
  1. <meta name="keywords">标签（已过时）：
  • 作用：列出网页的关键词，供搜索引擎参考。
  • SEO重要性：早期，搜索引擎会根据这些关键词对网页进行排序。然而，由于滥用关键词堆砌的现象，现代搜索引擎（如谷歌）已不再使用<meta name="keywords">标签进行排名。
  • 用法：将<meta name="keywords">标签放在<head>元素内，如<meta name="keywords" content="example, website, SEO">。

ico图标设置

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

 <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

rel 的全称是 “relationship”，它表示当前文档与被链接文档或资源之间的关系。rel 属性主要用于 <link> 和 <a> 标签中，用于描述两者之间的联系，以便浏览器和搜索引擎更好地理解链接资源的用途。

版心

版心，它指的是网页中用于放置内容和元素的区域。版心设计可以帮助组织和呈现页面内容，让不同大小的屏幕都能看到页面的主体内容，使其更具可读性和易用性

版心的使用，通常会给标签抽出一个类来专门设置它的宽度和居中。
例如：

.container{
        width: 1240px;
        margin: 0 auto;
    }

CSS的书写顺序

image-20230430105029685

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

项目结构搭建

文件和目录准备

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

完成后的目录及文件结构

xtx-pc-client/
  ├── favicon.ico
  ├── index.html
  ├── css/
  │   ├── base.css
  │   ├── common.css
  │   └── index.css
  ├── images/
  └── uploads/

基础公共样式

在实际项目开发中，浏览器默认的样式可能会影响到网站的外观。为了确保跨浏览器的一致性，我们通常需要先重置浏览器默认样式。base.css 文件就是用于存放这些基础公共样式的。下面是一个典型的 base.css 示例：

/* 去除常见标签默认的 margin 和 padding */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
input {
  margin: 0;
  padding: 0;
}

/* 设置网页统一的字体大小、行高、字体系列相关属性 */
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;
}

在这个 base.css 示例中，我们重置了浏览器默认的边距和内边距、设置了默认字体和颜色、去掉了链接的下划线、移除了列表的圆点、设置了表格的样式以及设置了图片的最大宽度。

你可以根据项目的实际需求调整这些样式。在项目中直接引入 base.css 文件，就可以防止不同浏览器中标签默认样式不同的影响，统一不同浏览器的默认显示效果，方便后续项目开发。

index 页面骨架

一个典型的 index.html 页面骨架可能包括以下部分：头部、导航栏、轮播图、主要内容区域、侧边栏、和底部。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页 - 示例网站</title>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
  <header>
    <h1>示例网站</h1>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </nav>
  </header>

  <section class="banner">
    <!-- 轮播图代码 -->
  </section>

  <main>
    <section class="content">
      <!-- 主要内容区域 -->
    </section>

    <aside>
      <!-- 侧边栏 -->
    </aside>
  </main>

  <footer>
    <p>版权所有 &copy; 2023 示例网站</p>
  </footer>
</body>
</html>

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

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

相关文章

【Win11 | SSH】详细教你如何在Windows 11 下完成OpenSSH的安装（保姆级攻略）

【Win11 | SSH】详细教你如何在Windows 11 下完成OpenSSH的安装（保姆级攻略）

文章目录 一、问题描述二、问题尝试解决2.1 ssh的问题2.2 如何手动安装2.3 install 脚本找不到2.4 power shell 开始报错2.5 继续安装ssh 三、输入 ssh 再报错 一、问题描述 最近在测试github的连接时&#xff0c;在终端或命令行窗口中&#xff0c;输入以下命令测试你的 SSH 连…
阅读更多...
【五一创作】医院手术室麻醉管理系统概述和功能 SQLServer 2008 R2

【五一创作】医院手术室麻醉管理系统概述和功能 SQLServer 2008 R2

医院手术室麻醉管理系统概述 1.系统功能概述 手术麻醉管理系统采用下拉式汉化菜单&#xff0c;界面友好&#xff0c;实用性强&#xff0c;设有与住院、病区、药房等系统的软件接口。 系统主要功能有&#xff1a; 手术管理&#xff1a;提供手术病人检索、手术申请、手术安排…
阅读更多...
VSCode配置Arduino

VSCode配置Arduino

综上所周知&#xff0c;Arduino IDE太不智能了&#xff0c;没有代码提示&#xff0c;不能代码跳转&#xff0c;于是乎找一下vscode有啥插件用 在网上找了些教程&#xff0c;也碰到了奇奇怪怪地坑&#xff0c;于是记录一下能成功配置步骤 准备 1.已安装好Arduino IDE 2.已安装好…
阅读更多...
Clion开发STM32之串口封装(HAL库)

Clion开发STM32之串口封装(HAL库)

前提 在开发STM32过程中&#xff0c;芯片提供的串口引脚一般是不会发生变化的&#xff0c;所以为了方便移植&#xff0c;借助HAL提供的注册回调函数自定义&#xff0c;这边重新进行简要的封装此工程开发是以Clion为开发的IDE,用keil只需将对应的文件进行移植即可.文章末尾附带…
阅读更多...
Photoshop如何使用选区之实例演示？

Photoshop如何使用选区之实例演示？

文章目录 0.引言1.利用快速选择工具抠图2.制作网店产品优惠券3.利用选区改变眼睛颜色4.抠取复杂的花束5.制作丁达尔光照效果6.利用选区调整图像局部颜色 0.引言 因科研等多场景需要进行绘图处理&#xff0c;笔者对PS进行了学习&#xff0c;本文通过《Photoshop2021入门教程》及…
阅读更多...
STM32F103 系统架构

STM32F103 系统架构

1、Cortex M3 内核 & 芯片 ARM公司提供内核&#xff08;如Cortex M3&#xff0c;简称CM3&#xff0c;下同&#xff09;授权&#xff0c;完整的MCU还需要很多其他 组件。芯片公司&#xff08;ST、NXP、TI、GD、华大等&#xff09;在得到CM3内核授权后&#xff0c;就可以把C…
阅读更多...
Linux网络基础二

Linux网络基础二

一.应用层 我们程序员写的一个个解决我们实际问题, 满足我们日常需求的网络程序, 都是在应用层。 二.再谈 "协议" 协议是一种 "约定". socket api的接口, 在读写数据时, 都是按 "字符串" 的方式来发送接收的. 如果我们要传输一些"结构化…
阅读更多...
VBA替换中文文献引用出现的et al.和and

VBA替换中文文献引用出现的et al.和and

问题描述&#xff1a;Endnote是常用的文献管理工具&#xff0c;并提供国标模板Chinese Std GBT7714 (numeric).ens&#xff0c;但Endnote在中英文混排上略欠考虑。Chinese Std GBT7714使用序号的形式&#xff08;******1&#xff09;对文献进行引用&#xff0c;但有时我们需要以…
阅读更多...
python毕业设计之django+vue医院医疗救助系统

python毕业设计之django+vue医院医疗救助系统

&#xff08;1&#xff09; 信息发布 当有基金的申请审批通过时&#xff0c;慈善机构信息维护部门应与慈善机构进行对接&#xff0c;保证信息的真实性&#xff0c;信息发布之后患者可以进行相应的基金申请。 &#xff08;2&#xff09; 基金管理 此项功能是保证基金信息的动态刷…
阅读更多...
HR员工管理的三重境界：管事、管人、管心

HR员工管理的三重境界：管事、管人、管心

在一个公司里&#xff0c;员工来来往往是常态&#xff0c;虽说我们不能替他们决定&#xff0c;但是一定是与公司的管理者有一定的关系。马云曾经说过&#xff1a;“一个员工离职&#xff0c;不外乎两种原因&#xff0c;一是钱没给到位&#xff1b;二是心里委屈了”。一句话就是…
阅读更多...
笔记：计算机网络体系结构（OSI七层模型、TCP/IP五层协议）

笔记：计算机网络体系结构（OSI七层模型、TCP/IP五层协议）

计算机网络体系结构 计算机网络是一个复杂的、具有综合性技术的系统&#xff0c;它由计算机系统、通信处理机、通信线路和通信设备、操作系统以及网络协议等组成。为了更好地描述计算机网络结构&#xff0c;使计算机网络系统有条不紊地处理工作&#xff0c;需要定义一种较好的…
阅读更多...
2023.04.30 学习周报

2023.04.30 学习周报

文章目录 摘要文献阅读1.题目2.摘要3.介绍4.本文贡献5.数据处理6.模型6.1 look - up操作6.2 LSTM6.3 周期模拟及额外因素 7.实验7.1 数据集7.2 基线7.3 实验表现 8.结论 ISOMAP1.基本思想2.欧氏距离3.折线近似曲线4.计算折线长度5.Floyd-Warshall算法6.ISOMAP算法7.总结 数学建…
阅读更多...
Educoder/头歌JAVA——Java Web：基于JSP的网上商城

Educoder/头歌JAVA——Java Web：基于JSP的网上商城

目录 一、商品列表 本关任务 具体要求 结果输出 实现代码 二、商品详情 本关任务 JDBC查询方法封装 商品相关信息介绍 具体要求 结果输出 实现代码 三、商品搜索 编程要求 测试说明 实现代码 四、购物车列表 本关任务 JDBC查询方法封装 购物车相关信息介绍…
阅读更多...
IPsec中IKE与ISAKMP过程分析（主模式-消息4）

IPsec中IKE与ISAKMP过程分析（主模式-消息4）

IPsec中IKE与ISAKMP过程分析&#xff08;主模式-消息1&#xff09;_搞搞搞高傲的博客-CSDN博客 IPsec中IKE与ISAKMP过程分析&#xff08;主模式-消息2&#xff09;_搞搞搞高傲的博客-CSDN博客 IPsec中IKE与ISAKMP过程分析&#xff08;主模式-消息3&#xff09;_搞搞搞高傲的博客…
阅读更多...
Jenkins+Docker+gitee 持续部署spring boot 应用教程

Jenkins+Docker+gitee 持续部署spring boot 应用教程

目录 参考安装jenkinsci拉取镜像创建目录安装maven启动镜像配置输入密码安装推荐的插件 创建用户密码配置环境变量安装gitee和dingtalk插件创建SpringBoot并创建Dockfile配置gitee的webhook配置构建shell脚本配置监听gitee webhook触发构建 配置dingtalk钉钉通知 参考 Jenkins…
阅读更多...
归纳截图小结

归纳截图小结

文章目录 web服务器、缓存和PHP加速对比没有做软连接http状态码cookie是什么图形管理界面nginx的访问路径LANM架构redisd服务整体框架免密连接kubeletk8s架构图kubeadm、kubectl、kubelet作用k8s集群token失效时&#xff0c;重新创建tokenk8s网络通信OSI总结pod的理解k8s核心知…
阅读更多...
springboot+vue高校实验室预约管理系统

springboot+vue高校实验室预约管理系统

开发环境 开发语言&#xff1a;Java 后端框架&#xff1a;springbootweb 前端框架&#xff1a;vue.js 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.3.9 校实验…
阅读更多...
K8S集群原理（IT枫斗者）

K8S集群原理（IT枫斗者）

K8S集群原理&#xff08;IT枫斗者&#xff09; 看图说K8S 先从一张大图来观看一下K8S是如何运作的&#xff0c;再具体去细化K8S的概念、组件以及网络模型。从上图&#xff0c;我们可以看到K8S组件和逻辑及其复杂&#xff0c;但是这并不可怕&#xff0c;我们从宏观上先了解K8S…
阅读更多...
【设计模式】责任链模式的设计与示例

【设计模式】责任链模式的设计与示例

前言 责任链模式是一种行为设计模式&#xff0c;执行上它允许请求沿着一条处理链路依次向下传递&#xff0c;每个处理节点都能对当前状态的请求进行处理&#xff0c;满足一定条件后传递给下一个处理节点&#xff0c;亦或者直接结束这一次处理流程。 在现实生产环境中&#xf…
阅读更多...
工作流框架研究

工作流框架研究

工作流框架研究 主流开源框架介绍OsWorkFlowJBPMActivitiFlowableCamundaCamunda 和Flowable对比功能上对比性能上对比 总结 主流开源框架介绍 OsWorkFlow 对于比较简单的流程&#xff0c;OsWorkFlow会是一个比较好的选择&#xff0c;对于复杂的流程就不推荐了&#xff0c;Os…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023