css06背景图片
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--内部样式-->
<style type="text/css">
body{
/* background-color: pink;/!*背景颜色*!/
background-image: url("image/liqingzhao.jpg");/!*背景图片*!/
background-position: 200px 50px; /!*设置背景图片的位置*!/
background-repeat: no-repeat;/!*背景图片 填充方式*!/ */
/*简写的方式*/
background:pink url("image/cat.jpg") 200px 50px no-repeat ;
}
</style>
</head>
<body>
</body>
</html>
商品分类
01.创建一个html页面
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>全部商品分类</title>
<link type="text/css" rel="styleSheet" href="css/demo1.css" />
</head>
<body>
<div id="nav">
<div class="title">全部商品分类</div>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li>
<li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li>
<li><a href="#">电脑</a> <a href="#">办公</a></li>
<li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li>
<li><a href="#">服饰鞋帽</a> <a href="#">个护化妆</a></li>
<li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li>
<li><a href="#">食品饮料</a> <a href="#">保健食品</a></li>
<li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li>
</ul>
</div>
</body>
</html>
02.创建对应的demo1.css文件
*{
margin: 0px; /*设置网页中所有的元素 外边距为0*/
}
#nav{
width: 230px; /*最大的div宽度*/
}
.title{
height: 30px; /*div的高度*/
line-height: 30px;/*内容的行高*/
color: white; /*字体颜色*/
background:red url("../image/arrow-down.gif") 210px no-repeat; /*背景*/
cursor: move; /*控制鼠标的形状为 可移动状态*/
}
ul{
background-color: #D7D7D7; /*背景颜色*/
}
a{
text-decoration: none; /*去掉超链接默认的下划线*/
}
li{
background-image: url("../image/arrow-right.gif") ; /*背景图片*/
background-repeat: no-repeat; /*背景图片的填充方式*/
background-position: 173px; /*背景图片的位置*/
line-height: 30px; /*内容的行高*/
/*list-style-image: url("../image/arrow-down.gif"); 设置列表的标志图片*/
/* list-style-type: decimal-leading-zero; 设置列表的标志类型*/
/* list-style: decimal url("../image/arrow-down.gif") ; 类型和图片同时存在 取图片*/
list-style: none; /*去除标记*/
}
/* 超链接的伪类*/
/*a:link{ 未访问的链接
color:red;
}*/
/*a:visited{ 已经访问的链接
color:darkcyan;
}*/
a:hover{/* 鼠标悬停的链接*/
color:red;
text-decoration: underline;/*给超链接增加下划线*/
}
/*
a:active｛ 点或者是被选中的链接
color:yellow;
}*/
03.效果图
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>对背景图片的大小进行设置</title>
<style type="text/css">
div{
height: 200px;
width: 200px;
border: 5px solid red;
background: url("images/cat.jpg") no-repeat;
background-size: cover; /*对背景图片的大小进行设置*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
css06背景图片的更多相关文章
- CSS3 background-image背景图片相关介绍
这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...
- app引导页(背景图片切换加各个页面动画效果)
前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...
- 在rem布局下使用背景图片以及sprite
现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及我的好友@墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景 ...
- navigationController 去掉背景图片、去掉底部线条
//去掉背景图片 [self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] init] forBarMe ...
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
- CSS常用背景图片定位方法
CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会 ...
- CSS background-color 、image 背景图片
背景颜色 background-color 语法: background-color:<color> 默认值:transparent 透明 适用于:所有元素 继承性:无 动画性:是 计算 ...
- Java怎么添加背景图片
首先,导入相关的包: import java.awt.BorderLayout; import java.awt.Container; import javax.swing.ImageIcon; im ...
- 用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题
在一个main.js中require一个scss文件,scss文件中用了背景图片,图片url是用的相对路径,用extract-text-webpack-plugin插件提取出的css文件背景图片路径不 ...
随机推荐
- jquery mobile 栅格化
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- jquery mobile展开项collapsible
代码演示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...
- iPhone mobile safari fixed 元素滚动慢的问题处理
最近做一个手机阅读应用,抓取网站数据,做格式化后,适合手机浏览器以及电脑上阅读,不显示任何其他内容无关元素. Site:http://cbread.duapp.com/ 固定左侧边栏时,使用的CSS如 ...
- Web工程师的工具箱
RequestBin:允许你创建一个URL,利用这款工具进行收集请求,然后通过个性化方式进行检查. Hurl:发出HTTP请求,输入URL,设置标题,查看响应,最后分享给其他人.类似的工具有:REST ...
- jquery easy ui 学习 （5） windowlayout
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- .net发邮件
// 引入命名空间 using System.Net; using System.Net.Mail; SmtpClient smtp = new SmtpClient(); //实例化一个SmtpCl ...
- 构建高可用web站点（四）
首先我们来了解负载均衡的概念:英文名称为Load Balance,其意思就是将负载(工作任务)进行平衡.分摊到多个操作单元上进行执行,例如Web服务器.FTP服务器.企业关键应用服务器和其它关键任务服 ...
- 7月12日至芯FPGA就业班招生
至芯科技FPGA就业培训班将于2014年7月12日正式开班,届时至芯科技将秉承着一贯的教学传统,为广大师生打造一个专业的技术平台和轻松的学习环境. 在夏宇闻教授的带领下,至芯科技汇聚了一批来自国内外大 ...
- SANS top 20
What Are the Controls?The detailed Consensus Audit Guidelines are posted at http://www.sans.org/cag/ ...
- BZOJ 1013 [JSOI2008]球形空间产生器sphere
1013: [JSOI2008]球形空间产生器sphere Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 3074 Solved: 1614[Subm ...