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文件背景图片路径不 ...
随机推荐
- Delphi-UpperCase 函数
函数名称 UpperCase 所在单元 System.SysUtils 函数原型 function UpperCase(const S: string): string; 函数功能 将字符串中所有的小 ...
- Request.QueryString 不能像使用方法那样使用不可调用
想要获取URL栏中的字符串,于是敲下代码如下: string other = HttpContext.Current.Request.ServerVariables("QUERY_STRIN ...
- bzoj1188: [HNOI2007]分裂游戏
Description 聪聪和睿睿最近迷上了一款叫做分裂的游戏. 该游戏的规则试: 共有 n 个瓶子, 标号为 0,1,2.....n-1, 第 i 个瓶子中装有 p[i]颗巧克力豆,两个人轮流取豆子 ...
- 集合及特殊集合arrayList
1,运用集合 arrayList 首先复制Colections加 : 创建arrayList ar =new arrayList(); ArrayList具体提供的功能:属性 ...
- iOS自定义的UISwitch按钮
UISwitch开关控件 开关代替了点选框.开关是到目前为止用起来最简单的控件,不过仍然可以作一定程度的定制化. 一.创建 UISwitch* mySwitch = [[ UISwitchalloc] ...
- SAR-303 xml validator验证框架
// 配置文件详解 <mvc:annotation-driven validator="validator" /> <bean id="validato ...
- Struts2+JQuery发送Ajax请求
Action类代码: package com.example.action; public class JsonAction { private String name; private int id ...
- libcurl 下载上传
近来一个新的项目需要使用到http. 本来用socket来写一个的,后来发现功能实在太简单,有点捉襟见肘. 于是改用libcur来做. 首先下载libcur的源码,然后配置: ./configure ...
- hdu Co-prime
题意:求出在一个区间[A,B]内与N互质的个数 . 思路: 先求出n的质因子,然后求出与N的质因子不互质的个数然后总个数减去就是.用位运算二进制表示那个因子用到过,实现容斥原理.在1到n之间是c倍数的 ...
- QWaitCondition（和Java的Notify机制非常相像）
QT通过三种形式提供了对线程的支持.它们分别是,一.平台无关的线程类,二.线程安全的事件投递,三.跨线程的信号-槽连接.这使得开发轻巧的多线程Qt程序更为容易,并能充分利用多处理器机器的优势.多线程编 ...