<!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. ECharts 是一款开源

    ECharts

  2. thinkphp T方法

    为了更方便的输出模板文件,新版封装了一个T函数用于生成模板文件名. 用法: T([资源://][模块@][主题/][控制器/]操作,[视图分层]) T函数的返回值是一个完整的模板文件名,可以直接用于d ...

  3. UVa 10020 - Minimal coverage（区间覆盖并贪心）

    Given several segments of line (int the X axis) with coordinates [Li, Ri]. You are to choose the min ...

  4. JQ之路——layer第三方弹窗

    layer官网 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script&g ...

  5. Android Service之LOCATION_SERVICE

    Android提供了GPS功能 LocationManager obj = (LocationManager)getSystemService(Context.LOCATION_SERVICE) Pe ...

  6. [Android] hid设备按键流程简述

    hexdump /dev/hidraw0就能看到usbhid设备传输过来的裸流 如:按下Input键 003ae60 0000 0096 8000 006b 0000 0000 0000 0000 * ...

  7. ASP.NET状缓存Cache的应用-提高数据库读取速度

    原文:ASP.NET状缓存Cache的应用-提高数据库读取速度 一. Cache概述       既然缓存中的数据其实是来自数据库的,那么缓存中的数据如何和数据库进行同步呢?一般来说,缓存中应该存放改 ...

  8. RandomAccessFile和memory-mapped files

    [0]README 0.1) 本文描述转自 core Java volume 2, 旨在理解 java流与文件——RandomAccessFile类解析 的相关知识: 0.1) 本文 转自: http ...

  9. Hadoop CombineFileInputFormat实现原理及源码分析

    Hadoop适用于少量的大文件场景,而不是大量的小文件场景(这里的小文件通常指文件大小显著小于HDFS Block Size的文件),其主要原因是因为FileInputFormat在为这些小文件生成切 ...

  10. Triangle——LeetCode

    Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjacent n ...