IT新手入门,零基础学IT,转行做IT,IT行业的职位选择,你我一同探讨!

IT新手入门网给你介绍IT行业的职位有哪些,让你转行做IT不发愁,IT入门有捷径

当前位置: 主页 > 技能提升 > PHP开发 > css基本语法及css练习(第五天)

css基本语法及css练习(第五天)

时间:2017-01-18 08:29来源:原创 作者:恪己 点击:
一、CSS样式 1.为什么将所有图片内容放在放在一张图片呢? CSS Sprite,是将所有图片内容放在放在一张图片内, 这样的好处可以减少HTTP请求的次数,以减轻服务器的请求压力。 CSS Sprite只适用
一、CSS样式
 
1.为什么将所有图片内容放在放在一张图片呢?
 
CSS Sprite,是将所有图片内容放在放在一张图片内,
 
这样的好处可以减少HTTP请求的次数,以减轻服务器的请求压力。
 
CSS Sprite只适用于页面布局的背景图像。
 
2.又如何每次只显示部分图像内容呢?
 
可以通过CSS样式中的background-position属性来控制每次要显示的图像区域。
 
提示:图像的坐标原点位于图像的左上角,所以水平向左移动为负数;垂直向上移动为负数。

练习题:

网页如图:
IT新手入门网的php快速入门平台给你介绍css快速入门的方法,带你走进css编程的世界
 

title.jpg图:
零基础学IT网的php快速学习平台给你介绍css快速入门的方法,带你走进css编程的世界

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景图像定位</title>
<style>
body,p,div,h1,h2,h3,h4,h5,h6,ul,ol,li{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}
a{
color: #000;
text-decoration: none;
}
img{
border: none;
}
.clearfix:after{
display: block;
height: 0;
visibility: hidden;
content: '.';
clear: both;
}
.clearfix{
zoom:1;
}
#container{
width: 900px;
margin: 0 auto;

     

------分隔线----------------------------
栏目列表
推荐内容