<!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>&nbsp;<a href="#">音像</a>&nbsp;<a href="#">数字商品</a></li>

        <li><a href="#">家用电器</a>&nbsp;<a href="#">手机</a>&nbsp;<a href="#">数码</a></li>

        <li><a href="#">电脑</a>&nbsp;<a href="#">办公</a></li>

        <li><a href="#">家居</a>&nbsp;<a href="#">家装</a>&nbsp;<a href="#">厨具</a></li>

        <li><a href="#">服饰鞋帽</a>&nbsp;<a href="#">个护化妆</a></li>

        <li><a href="#">礼品箱包</a>&nbsp;<a href="#">钟表</a>&nbsp;<a href="#">珠宝</a></li>

        <li><a href="#">食品饮料</a>&nbsp;<a href="#">保健食品</a></li>

        <li><a href="#">彩票</a>&nbsp;<a href="#">旅行</a>&nbsp;<a href="#">充值</a>&nbsp;<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背景图片的更多相关文章

  1. CSS3 background-image背景图片相关介绍

    这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...

  2. app引导页(背景图片切换加各个页面动画效果)

    前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...

  3. 在rem布局下使用背景图片以及sprite

    现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及我的好友@墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景 ...

  4. navigationController 去掉背景图片、去掉底部线条

    //去掉背景图片 [self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] init] forBarMe ...

  5. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  6. CSS常用背景图片定位方法

    CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会 ...

  7. CSS background-color 、image 背景图片

    背景颜色 background-color 语法: background-color:<color> 默认值:transparent  透明 适用于:所有元素 继承性:无 动画性:是 计算 ...

  8. Java怎么添加背景图片

    首先,导入相关的包: import java.awt.BorderLayout; import java.awt.Container; import javax.swing.ImageIcon; im ...

  9. 用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题

    在一个main.js中require一个scss文件,scss文件中用了背景图片,图片url是用的相对路径,用extract-text-webpack-plugin插件提取出的css文件背景图片路径不 ...

随机推荐

  1. linux变量心得

    前一段时间学习了一下linux的变量,现在总结有3点需要特别注意: linux变量和C/C++变量的区别 linux变量的引用 linux变量特有的命令替换 先说第一点,linux变量更像是宏定义,只 ...

  2. canvas新属性

    lineCap默认值是butt,还有aquare,round 使用:context.lineCap="butt" lineJoin miter是默认 还可以是round,bevel ...

  3. python logging模块使用

    近来再弄一个小项目,已经到收尾阶段了.希望加入写log机制来增加程序出错后的判断分析.尝试使用了python logging模块. #-*- coding:utf-8 -*- import loggi ...

  4. 驱动读写进程内存R3,R0通信

    stdafx.h 头文件代码 #ifndef _WIN32_WINNT // Allow use of features specific to Windows XP or later. #defin ...

  5. HDU 2955（01背包问题）

    M - 01背包 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u   Descript ...

  6. Android模拟器genymotion安装与eclipse 插件安装

    推荐一款Android模拟器"Genymotion",有点速度快,占用资源少,可整合eclipse.闲话少谈,看安装步骤. 1.下载地址:https://www.genymotio ...

  7. Hazelcase 简介

    原博客地址:http://blog.csdn.net/zhu_tianwei/article/details/47984599 Hazelcast是一种内存数据网格in-memory data gri ...

  8. plugin

    http://wicky.nillia.ms/headroom.js/ http://makotot.github.io/sidebar/ http://www.nodebeginner.org/in ...

  9. cf B. I.O.U.

    http://codeforces.com/contest/376/problem/B #include <cstdio> #include <cstring> #includ ...

  10. 来晚了--SALTSTACK要弄起

    PUPPET就算了,我多少都有PYTHON基础,还是专SALTSTACK吧. 今天小玩玩,以后深入.