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

最新推荐文章于 2024-12-04 09:00:44 发布

槐序二十四

最新推荐文章于 2024-12-04 09:00:44 发布

阅读量848

点赞数 2

分类专栏： JAVA 文章标签：精灵图版心前端开发注意事项前端

本文链接：https://blog.csdn.net/weixin_40836179/article/details/78445690

版权

JAVA 专栏收录该内容

33 篇文章

订阅专栏

版心

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

版心的用法也非常简单，

具体的代码如下

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;
}

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

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