安顺建设工程造价管理网站,电子商务网站设计案例,如何自行建设网站,做网站商城前景怎么样CSS样式补充
精灵图
CSS精灵图#xff08;CSS Sprites#xff09;是一种网页优化技术#xff0c;通过将多个小图像合并成一个大图像#xff0c;然后通过CSS的背景定位#xff08;background-position#xff09;属性来显示对应的图像部分。这种技术可以减少HTTP请求次数…CSS样式补充
精灵图
CSS精灵图CSS Sprites是一种网页优化技术通过将多个小图像合并成一个大图像然后通过CSS的背景定位background-position属性来显示对应的图像部分。这种技术可以减少HTTP请求次数提高网页的加载速度。
要使用CSS精灵图你需要遵循以下步骤
创建HTML盒子元素
div classbox icon/div使用PxCook工具量取小图片的宽度和高度。假设小图片的宽度为50px高度为50px。在CSS中设置盒子的样式
.box {display: inline-block;
}.icon {background-image: url(sprites.png);background-repeat: no-repeat;width: 50px;height: 50px;
}使用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: 宽度 高度;
取值 长度值可以用像素px、百分比%等单位设置宽度和高度。 例如background-size: 200px 100px; 百分比可以用百分比设置背景图片的宽度和高度相对于元素的宽度和高度。例如background-size: 50% 50%; auto如果只设置宽度或高度的值另一个值可以使用auto这样背景图片将保持原始的宽高比进行缩放。例如background-size: 100px auto; contain保持背景图片的宽高比将图片缩放到完全适应元素的大小可能会留下空白区域。例如background-size: contain; 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.5s0.5秒或300ms300毫秒。transition-timing-function指定过渡效果的速度曲线例如linear、ease、ease-in、ease-out、ease-in-out等。也可以使用cubic-bezier()函数自定义速度曲线。transition-delay指定过渡效果开始之前的延迟时间例如1s1秒或500ms500毫秒。
注意点
过渡需要默认状态和hover状态样式不同才能有过渡效果。transition属性给需要过渡的元素本身加。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 langen
作用搜索引擎归类 浏览器翻译
常见语言zh-CN 简体中文 / en 英文
字符编码
meta charsetUTF-8
作用保存和打开的字符编码需要统一设置否则可能会出现 乱码
常见字符编码
UTF-8万国码国际化的字符编码收录了全球语言的文字GB23126000 汉字GBK20000 汉字
注意点开发中统一使用 UTF-8 字符编码即可
SEO三大标签
介绍
SEOSearch Engine Optimization搜索引擎优化
作用让网页在搜索引擎的排名靠前
提升SEO的常见方法
竞价排名将网页制作成html后缀标签语义化在合适的地方使用合适的标签… 在前端开发中有三个重要的标签与SEO密切相关分别是title、meta namedescription和meta namekeywords标签。
title标签
作用定义网页的标题显示在浏览器标签页上。SEO重要性搜索引擎把title标签作为网页内容的一个重要指标。一个精炼、具有关键词的标题可以提高搜索引擎排名。用法将title标签放在head元素内如titleExample Website/title。
meta namedescription标签
作用提供网页的简短描述用于搜索引擎显示在搜索结果中。SEO重要性一个清晰、简洁的描述可以吸引用户点击提高网页的点击率。搜索引擎可能会根据描述内容对网页进行排序。用法将meta namedescription标签放在head元素内如meta namedescription contentThis is an example website for SEO.。
meta namekeywords标签已过时
作用列出网页的关键词供搜索引擎参考。SEO重要性早期搜索引擎会根据这些关键词对网页进行排序。然而由于滥用关键词堆砌的现象现代搜索引擎如谷歌已不再使用meta namekeywords标签进行排名。用法将meta namekeywords标签放在head元素内如meta namekeywords contentexample, website, SEO。
ico图标设置
显示在标签页标题左侧的小图标习惯使用.ico格式的图标 link relshortcut icon href/favicon.ico typeimage/x-iconrel 的全称是 “relationship”它表示当前文档与被链接文档或资源之间的关系。rel 属性主要用于 link 和 a 标签中用于描述两者之间的联系以便浏览器和搜索引擎更好地理解链接资源的用途。
版心
版心它指的是网页中用于放置内容和元素的区域。版心设计可以帮助组织和呈现页面内容让不同大小的屏幕都能看到页面的主体内容使其更具可读性和易用性
版心的使用通常会给标签抽出一个类来专门设置它的宽度和居中。 例如
.container{width: 1240px;margin: 0 auto;}CSS的书写顺序 开发中推荐多用类 后代但不是层级越多越好一个选择器中的类选择器的个数推荐 不要超过 3个
项目结构搭建
文件和目录准备 新建项目文件夹 xtx-pc-client在VScode中打开 在实际开发中项目文件夹不建议使用中文所有项目相关文件都保存在 xtx-pc-client 目录中 复制 favicon.ico 到 xtx-pc-client 目录 一般习惯将ico图标放在项目根目录 复制 images 和 uploads 目录到 xtx-pc-client 目录 images 存放网站 固定使用 的图片素材如logo、样式修饰图片…uploads存放网站 非固定使用 的图片素材如商品图片、宣传图片… 新建 index.html 新建 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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title首页 - 示例网站/titlelink relstylesheet hrefcss/base.csslink relstylesheet hrefcss/common.csslink relstylesheet hrefcss/index.css
/head
bodyheaderh1示例网站/h1navullia href#首页/a/lilia href#关于我们/a/lilia href#联系我们/a/li/ul/nav/headersection classbanner!-- 轮播图代码 --/sectionmainsection classcontent!-- 主要内容区域 --/sectionaside!-- 侧边栏 --/aside/mainfooterp版权所有 copy; 2023 示例网站/p/footer
/body
/html
