版心和精灵图的介绍与使用，以及做网页的注意事项

版心

版心，顾名思义，就是居于板块的正中心。

版心的用法也非常简单，

具体的代码如下

div {width：800px;height：300px;background color：red;margin：0 auto;
}

注意：在宽度和高度的像素大小的英文经过测量出来的，并非凭空拿捏。

精灵图

精灵图，就是在一张图内多个小图画就是精灵图，

（估计是嫌它小才叫精灵图的吧！）

那么就是说他优点了。

他将多个小图片在同一个图片上显示，加快的图片的加载效率，减少了占用的空间和内存，这便是他的优点

那么然后就说说他的代码怎么写

div {width：24px;height：22px;background-image：url（路径）;background-position：0 -175px;
}

注意：宽度与高度是你需要的精灵图的大小

其次，在背景位置是精灵图的位置，以左上角为顶点

0，代表的是从左往右数的长，而-175是从上向下数的长，必须加上“ - ”

坐标写完了系统会自动在那个你定的点开始再向下截一个你定的大小的图

随后说说制作网页的一些注意事项。

1、要有固定的文件夹存放网页的位置

2、必备：效果图，存放图片的文件夹以及存放CSS的文件夹

3、创建base.css文件

（1）的CSS初始化

目的：清空某些标签默认的一些属性

初始化的代码示例：* {margin：0;padding：0}

注意：不建议使用*，建议换为：DIV，P，H1，H2，H3，H4，H5，H6，ul，ol，dl，li，dd，dt

（2）页面的公共代 base

4、创建主页面（index.html的）或者登陆（login.html的），注册页面（register.html）

5、在当前页面中导入base.css文件

怎么导入？很简单，在<HEAD>内写

<link rel =“stylesheet”type =“text / css”href =“路径”>

路径就是base.css文件路径

那问题来了，base 里面写什么好那？

首先建议是常用的，频繁使用的就可以，其次是名字，也就是类，他的类名要简单好记

我给介绍几个不妨看看

/*css初始化*/
body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dd,dt{margin:0;padding: 0;/*font-size: 14px;*/font-family: 宋体;
}/*去除a标签的下划线*/
a{text-decoration: none;
}/*去除前面标识符号*/
li{list-style: none;
}/*去除input的外轮廓线*/
input{outline-style: none;
}/*清除浮动*/
.clearfix:after,.clearfix:before{content: "";height:0;line-height: 0;display: block;clear: both;visibility: hidden;
}/*兼容ie浏览器*/
.clearfix{zoom: 1;
}/*版心*/
.w{width:980px ;margin:0 auto;/*border:1px solid;*/
}/*浮动居左*/
.fl{float: left;
}/*浮动居右*/
.fr{float: right;
}/*转换为行内块*/
.lb {display：inline-block;
}

就是这么多，不要求多就是方便快捷。

先分享这么多欢迎指出错的地方。

版心和精灵图的介绍与使用，以及做网页的注意事项相关推荐

13 【精灵图图标字体 CSS三角鼠标样式溢出省略号】
20.精灵图 20.1为什么需要精灵图? 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度. ...
精灵图和字体图标学习
精灵图为什么需要精灵图? 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度因此,为了有效的 ...
精灵图与字体图标的使用
文章目录 @[TOC](文章目录) 一.精灵图 1.1 为什么需要精灵图? 1.2 精灵图(sprites)的使用 1.3PS切片工具的使用二.字体图标 2.1 字体图标的产生 2.2 字体图标的优 ...
CSS精灵图、字体图标、三角、鼠标样式、用户界面样式、溢出省略号
[CSS精灵图.字体图标.三角.鼠标样式.用户界面样式.溢出省略号] 本文档是个人对 Pink 老师课程的总结归纳及补充,转载请注明出处! 一.精灵图 1.1 为什么需要精灵图? 一个网页中往往会应用 ...
css精灵列表使用实例,介绍一个导出CSS精灵图动画的AE小脚本
作者:李威在H5项目中如果有动画需求,一个常见的流程是设计师用 After Effect 制作动画,然后导出为序列帧. 序列帧就是一张张图片,快速连续播放就能成为动画,但是在H5里直接播放序列帧对网 ...
CSS中背景颜色、背景图片、渐变色、背景定位、精灵图（雪碧图）介绍
背景background: 背景可以设置为颜色和图片,设置为图片时,可以对图片继续设置. background-color:设置背景颜色: 其颜色的取值方式前面提到过,和color的取值一样,但是默认 ...
精灵图的使用以及css其他效果运用
1.精灵图 1.1.1 精灵图介绍问题1:什么是精灵图? 问题2:精灵图的优点是什么? 1.1.2 小结问题1: 就是把多个小背景图片整合到一张大图片中,这张大图片称之为精灵图.(精灵技术主要针对 ...
CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化
本篇文章为 CSS 基础系列笔记第七篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
CSS技巧之精灵图/字体图标/画三角/用户页面样式/vertical-align
15. 常见技巧 15.1 精灵图出现原因一个网页往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁接受和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度. ...

版心和精灵图的介绍与使用，以及做网页的注意事项

版心和精灵图的介绍与使用，以及做网页的注意事项相关推荐

最新文章

热门文章