建设电商网站,哈尔滨百度优化,桂林seo公司推荐23火星,随州网站开发文章目录 一 、CSS技巧1.1 CSS精灵#xff08;CSS Sprites#xff09;1.1.1 实现步骤1.1.2 例子 1.2 字体图标1.2.1如何使用字体图标1.2.2 字体图标使用总结 1.3 垂直对齐方式vertical-align1.3.1 值1.3.2 例子 1.4 过渡效果transition1.4.1 CSS过渡效果#xff08;transiti… 文章目录 一 、CSS技巧1.1 CSS精灵CSS Sprites1.1.1 实现步骤1.1.2 例子 1.2 字体图标1.2.1如何使用字体图标1.2.2 字体图标使用总结 1.3 垂直对齐方式vertical-align1.3.1 值1.3.2 例子 1.4 过渡效果transition1.4.1 CSS过渡效果transition的属性名和属性值如下1.4.2 注意 1.5 透明度opacity1.5.1 注意事项1.5.2 例子 1.6 光标类型cursor 二、扩展2.1 SEO 三大标签2.2 Favicon 图标 一 、CSS技巧
1.1 CSS精灵CSS Sprites
一种优化网页性能的技术目的是减少HTTP请求次数从而实现加快图片在页面中加载速度。
优点减轻服务器的压力请求。加快了页面的加载速度提高了用户体验缺点维护起来复杂精灵图不宜将过多图标放置在同一个里面也不宜经常性的变动1.1.1 实现步骤
准备精灵图将已知的大小的图标或者图像利用编辑软件整合在一张大图中编写适宜的结构创建出来的盒子应与小图的尺寸相同并利用 CSS 的 background-image设置背景图为“精灵图” 和 background-position 属性来显示所需的图像部分即改变背景图位置。
1.1.2 例子
.icon-search, .icon-cart {display: inline-block;width: 32px; /* 图标的宽度 */height: 32px; /* 图标的高度 */background-image: url(path/to/sprite.png); /* 精灵图的路径 */background-repeat: no-repeat;
}.icon-search {background-position: 0 0; /* 搜索图标的起始位置 */
}.icon-cart {background-position: -32px 0; /* 购物车图标的起始位置 */
}
1.2 字体图标
字体图标是一种灵活高效的网页图标解决方案具备多种优势可以通过CSS轻松调整大小和颜色文件体积小加载快兼容几乎所有主流浏览器且只需引入相关CSS文件即可轻松使用非常适合提升网页的视觉效果和用户体验。
1.2.1如何使用字体图标
可以从各种在线资源库中获取字体图标例如阿里巴巴矢量图标库、Font Awesome、Ionicons等。 以阿里巴巴矢量图标库为例当我们登录之后。 选择需要的库后当我们来到下面的界面后可以选择心仪的图标到“库”和“收藏”中 然后我们聚焦于右上角的购物车的那个图标点击一下选择添加到项目为了项目的完整度也方便后续的更新使用 然后写好名称 下一步Download我们就在本地的浏览器的设置好的下载存放地址中得到一个zip包 解压缩点击那个html文件 我们就可以看到下面的我们选择font class选项 就把那个底部描述信息赋值那个就是该图标对应的class
1.2.2 字体图标使用总结 导入文件夹将上述解压出的文件仅复制全部文件进去不包含文件夹放置在项目名称下面的iconfont文件夹下面。 引入图标库在head部分通过link标签引入字体图标库的CSS文件。 link relstylesheet href./iconfont/iconfont.css定义样式使用CSS定义图标样式如尺寸和颜色。 style.iconfont {font-size: 100px;color: #00a4ff;}
/style使用图标在body部分通过添加相应的类名来显示图标。 span classiconfont icon-xiaoxi-zhihui/span1.3 垂直对齐方式vertical-align
使行内元素盒模型与其行内元素容器垂直对齐。
只对行内元素、行内块元素和表格单元格元素生效不能用它垂直对齐块级元素。
效果:图片img的底下有空白,转块级不按基线对齐,空白就消失了1.3.1 值 1.3.2 例子
!DOCTYPE html
html langen
headmeta charsetUTF-8// 行内块被当作字处理stylediv {border: 1px solid #000;}img {//浏览器把行内块、行内标签当做文字处理,默认按基线对齐vertical-align: text-bottom ;/*display: block;*/}/style
/head
bodydivphhh/pimg src./x.png althhh/div
/body
/html1.4 过渡效果transition
过渡效果是一种在特定的时间段内平滑地改变一个或多个CSS属性的方式。元素从一种样式逐渐变为另一种样式时提供动画效果。
div {transition: property duration timing-function delay;
}或者
//指定过渡的属性、持续时间、延迟时间和速度曲线来控制过渡的行为
div {font-size: 14px;transition-property: font-size;transition-duration: 4s;transition-delay: 2s;
}div:hover {font-size: 36px;
}CSS 属性是 transition-property、transition-duration、transition-timing-function 和 transition-delay 的一个符合属性
1.4.1 CSS过渡效果transition的属性名和属性值如下 属性名 transition-property指定要过渡的CSS属性的名称。transition-duration指定过渡效果持续的时间。transition-timing-function指定过渡效果的速度曲线。transition-delay指定过渡效果何时开始。 属性值 transition-property可以是一个或多个CSS属性的名称如 width, height, opacity 。transition-duration可以是时间值如 0.5s, 1s, 2s 。transition-timing-function可以是速度曲线函数如 ease, linear, ease-in-out 。transition-delay可以是时间值如 0s, 0.5s, 1s 。
1.4.2 注意
属性的名值长度不一致 会采用重复使用的形式匹配若是property短的时间将会被截取
div {transition-property: opacity, left, top, height;transition-duration: 3s, 5s;
}
为
div {transition-property: opacity, left, top, height;transition-duration: 3s, 5s, 3s, 5s;
}
1.5 透明度opacity
opacity属性用于设置元素的透明度。该属性接受一个介于0和1之间的数值其中 属性名opacity 属性值 0: 完全透明元素不可见 0-1之间小数半透明 1: 不透明 1.5.1 注意事项
opacity属性不仅影响背景颜色还会影响元素的所有子元素的透明度。 如果只想改变背景色的透明度而不影响内容可以使用rgba或hsla颜色值
style.background-opacity {background-color: rgba(255, 0, 0, 0.5); /* 红色50%透明 */width: 100px;height: 100px;}
/stylediv classbackground-opacity半透明背景/div1.5.2 例子
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleopacity/titlestyle.hover-opacity {background-color: greenyellow;width: 100px;height: 100px;transition: opacity 0.5s;}.hover-opacity:hover {opacity: 0.5;}/style
/head
bodydiv classhover-opacity鼠标悬停我/div
/body
/html1.6 光标类型cursor
cursor 属性用于设置鼠标指针光标在指定区域上的形状 default: 默认箭头光标。pointer: 手形光标通常用于链接。text: 文本输入光标I-beam。help: 带问号的帮助光标。wait: 沙漏或旋转圈表示等待。crosshair: 十字准心光标。not-allowed: 禁止操作的圆圈斜杠光标。move: 移动光标用于拖动操作。n-resize: 向上调整大小光标。e-resize: 向右调整大小光标。s-resize: 向下调整大小光标。w-resize: 向左调整大小光标。ne-resize: 向右上方调整大小光标。nw-resize: 向左上方调整大小光标。se-resize: 向右下方调整大小光标。sw-resize: 向左下方调整大小光标。url(path/to/cursor.png): 自定义光标图像。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCursor/titlestyle.default-cursor { cursor: default; }.pointer-cursor { cursor: pointer; }.text-cursor { cursor: text; }.help-cursor { cursor: help; }.wait-cursor { cursor: wait; }.crosshair-cursor { cursor: crosshair; }.not-allowed-cursor { cursor: not-allowed; }.move-cursor { cursor: move; }.n-resize-cursor { cursor: n-resize; }.custom-cursor { cursor: url(custom-cursor.png), auto; }/style
/head
bodydiv classdefault-cursorDefault Cursor/divdiv classpointer-cursorPointer Cursor/divdiv classtext-cursorText Cursor/divdiv classhelp-cursorHelp Cursor/divdiv classwait-cursorWait Cursor/divdiv classcrosshair-cursorCrosshair Cursor/divdiv classnot-allowed-cursorNot Allowed Cursor/divdiv classmove-cursorMove Cursor/divdiv classn-resize-cursorNorth Resize Cursor/divdiv classcustom-cursorCustom Cursor/div
/body
/html
二、扩展
2.1 SEO 三大标签
SEO搜索引擎优化是一种让网站在搜索引擎结果中更加清晰也帮助我们将搜索结果更靠前的过程。 Title 标签 title 标签定义了网页的标题显示在浏览器标签上是搜索引擎结果页面SERP中最突出的部分。它应该简洁明了包含页面的主要关键词。 Meta Description 标签 meta namedescription content... 标签提供了页面内容的简要描述通常显示在搜索引擎结果中标题下方。虽然它对排名的直接影响较小但对点击率有显著影响。 meta namekeywords content 是一个用于定义网页关键词的 HTML 标签。 Header 标签H1、H2、H3等 h1 到 h6 标签用于定义内容的层次结构和标题。搜索引擎通过这些标签理解页面的结构和重点。
2.2 Favicon 图标
创建一个正方形的图标通常大小为 16x16 像素或 32x32 像素。将图标保存为 .ico 格式例如 favicon.ico。确保保存在您项目的合适位置比如项目根目录。
在 head 标签中添加以下代码将 favicon 图标链接到您的网页
link relicon typeimage/x-icon hreffavicon.ico
