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文件背景图片路径不 ...
随机推荐
- yii2源码学习笔记
assets 前端资源文件夹,用于管理css js等前端资源文件等 commands 包含命令行命令,文件为控制器文件 config 应用的配置文件 controllers 控制器文件 mai ...
- bootstrap瀑布流代码
<extend name="Base/common" /> <block name="search-cate"> <include ...
- jquery easy ui 学习 （8）basic treegrid
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- iOS编程修改系统音量
iOS的AVFoundation框架提供了基本的音视频播放工具,我们基本上可以靠其中提供的类完成绝大部分的音视频播放任务.但是在音频播放的输出音量的处理上,苹果的策略比较保守.尽管AVPlayer和A ...
- Solr4.8.0源码分析(14)之SolrCloud索引深入(1)
Solr4.8.0源码分析(14) 之 SolrCloud索引深入(1) 上一章节<Solr In Action 笔记(4) 之 SolrCloud分布式索引基础>简要学习了SolrClo ...
- Node.js 入门(2)
1.http 请求 //调用Node.js自带的http模块 var http = require("http"); //调用http模块提供的函数createServer htt ...
- ubuntu 下安装nginx
y@y:~$ sudo apt-get install nginx y@y:~$ sudo service nginx start y@y:~$ nginx默认使用80端口,打开浏览器输入:http: ...
- poj2240 - Arbitrage(汇率问题,floyd)
题目大意: 给你一个汇率图, 让你判断能否根据汇率盈利 #include <iostream> #include <cstdlib> #include <cstdio&g ...
- Delphi Ini 操作简单例子
interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, Dialog ...
- JS调试工具
IE http://msdn.microsoft.com/zh-cn/library/ie/dn255003(v=vs.85).aspx FF http://www.wumii.com/item/1g ...