1. PxCook

PxCook (像素大厨) 是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。

  • 开发面板 (自动智能识别)
  • 设计面板(手动测量尺寸和颜色)

2. CSS精灵

CSS 精灵,也叫CSS Sprites,是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中,再background-position精确的定位出背景图片的位置。

优点:减少服务器被请求次数,减轻服务器的压力,提高页面加载速度。

实现步骤:

  • 创建盒子,盒子尺寸与小图尺寸相同。
  • 设置盒子背景图为精灵图。
  • 添加background-position属性,改变背景图位置。

       1.使用PxCook测量小图片左上角坐标

       2.取负数坐标为background-position属性值(向左上移动图片位置)

3. 字体图标

(1)字体图标:展示的是图标,本质是字体。

(2)作用:在网页中添加简单的、颜色单一的小图标。

(3)优点:

  • 灵活性:灵活地修改样式,例如:尺寸、颜色等;
  • 轻量级:体积小、渲染快、降低服务器请求次数;
  • 兼容性:几乎兼容所有主流浏览器;
  • 使用方便:先下载再使用。

(4)下载字体图标:iconfont-阿里巴巴矢量图标库

(5)使用字体图标:

  • 引入字体样式表(iconfont.css)
  • 标签使用字体图标类名
<html>
<head>
    <title>字体图标</title>
    <link rel="stylesheet" href="./iconfont.css"/>
    <style>
        .iconfont {
            font-size: 100px;
            color: red;
        }
    </style>
</head>
<body>
    <span class="iconfont icon-test"></span>
</body>
</html>

4. 垂直对齐方式

属性名:vertical-align

属性值

效果

baseline

基线对齐(默认)

top

顶部对齐

middle

居中对齐

bottom

底部对齐

<html>
<head>
    <title>垂直对齐方式</title>
    <style>
        div {
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div>
        <img src="./images/cat.jpg">小喵咪
    </div>
</body>
</html>

5. 过渡

作用:可以为一个元素在不同状态之间切换的时候添加过渡效果

属性:transition(复合属性)

属性值:过渡的属性 花费时间(s)

注意:

  • 过渡的属性可以是具体的CSS属性
  • 也可以为all(两个状态属性值不同的所有属性,都产生过渡效果)
  • transition 设置给元素本身
<html>
<head>
    <title>过渡</title>
    <style>
        img {
            width: 100px;
            height: 100px;
            transition: all 1s;
        }
        img:hover {
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
    <div>
        <img src="./images/cat.jpg">
    </div>
</body>
</html>

6. 透明度

作用:设置整个元素的透明度(包含背景和内容)

属性名:opacity

属性值:0-1

  • 0,完全透明(元素不可见)
  • 1,不透明
  • 0-1之间小数,半透明
<html>
<head>
    <title>透明度</title>
    <style>
        div {
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div>
        <img src="./images/cat.jpg">
    </div>
</body>
</html>

7. 光标类型

作用:鼠标悬停在元素上时指针显示样式

属性名:cursor

属性值

效果

default

默认值,通常是箭头

pointer

小手效果,提示用户可以点击

text

工字型,提示用户可以选择文字

move

十字光标,提示用户可以移动

<html>
<head>
    <title>透明度</title>
    <style>
        div {
            cursor: move;
        }
    </style>
</head>
<body>
    <div>
        <img src="./images/cat.jpg">
    </div>
</body>
</html>

 

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部