<!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. 【NEERC 2003】有向图破坏

    [题目描述] Alice和Bob正在玩如下的游戏.首先Alice画一个有N个顶点,M条边的有向图.然后Bob试着摧毁它.在一次操作中他可以找到图中的一个点,并且删除它所有的入边或所有的出边. Alic ...

  2. jqgrid设置单元格数据

    $("#gridid").jqGrid('setCell',rowid,icol,data); rowid为行ID,jqgrid内置的那个,从1开始 icol为列索引,从0开始, ...

  3. 【FLYabroad 】微软内部代码检查工具 (Microsoft Source Analysis for C#)[转]

    SourceAnalysis (StyleCop)的终极目标是让所有人都能写出优雅和一致的代码,因此这些代码具有很高的可读性. 早就听说了微软内部的静态代码检查和代码强制格式美化工具 StyleCop ...

  4. set_time_limit() 控制页面运行时间

    当你的页面有大量数据时,建议使用set_time_limit()来控制运行时间,默认是30s,所以需要你将执行时间加长点,如 set_time_limit(300)  ,其中将秒数设为0 ,表示持续运 ...

  5. GFStableList Adapter

    STL中,list的优点是插入.删除性能极佳(时间复杂度只需O(1)即可),而且非常重要的在删除节点后,其迭代器不失效,但list查找却不擅长.map由于其实现的数据结构为rb-tree,因此,其插入 ...

  6. rename 后缀

    for file in $(find . -name "*.del" -type f);do mv "$file" "${file%.del}&quo ...

  7. Tomcat基础教程（一）

    Tomcat, 是Servlet和JSP容器,其是实现了JSP规范的servlet容器.它在servlet生命周期内包容,装载,运行,和停止servlet容器. Servlet容器的三种工作模式: 1 ...

  8. springmvc参数类型转换三种方式

    SpringMVC绑定参数之类型转换有三种方式:     1. 实体类中加日期格式化注解      @DateTimeFormat(pattern="yyyy-MM-dd hh:MM&quo ...

  9. Preventing Web Attacks with Apache

    http://www.boyunjian.com/do/article/snapshot.do?uid=net.csdn.blog/wurangy050/article/details/5287235

  10. cf C. Inna and Dima

    http://codeforces.com/contest/374/problem/C 记忆化搜索,题意:求按照要求可以记过名字多少次,如果次数为无穷大,输出Poor Inna!,如果不经过一次输出P ...