<!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. Spring依赖注入的三种方式

    看过几篇关于Spring依赖注入的文章,自己简单总结了一下,大概有三种方式: 1.自动装配 通过配置applicationContext.xml中的标签的default-autowire属性,或者标签 ...

  2. html form <label>标签基础语法结构与使用案例教程(转载)

    在表单布局中会遇到label标签的使用,label没有任何样式效果,有触发对应表单控件功能.比如我们点击单选按钮或多选框前文字对应选项就能被选中,这个就是对文字加了<label>标签实现. ...

  3. 织梦dedecms网站六大SEO优化技巧（转帖）

    一个排名好的网站离不开好的cms,当然不同cms各有各的好处,因此我们在上线新网站的时候,要针对不同的情况因地制宜,选择不同的网站管理系统来做seo优化,现在使用比较流行的cms是织梦dedecms, ...

  4. javascript获得给定日期的前一天的日期

    /** * 获得当前日期的前一天 */ function getYestoday(date){ var yesterday_milliseconds=date.getTime()-1000*60*60 ...

  5. centos7 服务器安装nginx，mysql，php

    一.概述 项目的需要,今天在虚拟机上基于Centos安装配置了服务器运行环境,web服务用 nginx,数据库存储在mysql,动态脚本语言是php. 二.步骤 首页保证Centos7已经安装完毕,正 ...

  6. 浅析a标签的4个伪类 .

    关于伪类,大家最熟悉的还是a标签的4个伪类::link        有链接属性时:visited    链接地址已被访问过:active     被用户激活(在鼠标点击与释放之间发生的事件):hov ...

  7. js移动设备手机跳转地址代码

    if(/AppleWebKit.*mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alc ...

  8. CodeForces 474B（标记用法）

    CodeForces 474B Time Limit:1000MS Memory Limit:262144KB   64bit IO Format:%I64d & %I64u Descript ...

  9. 30 个 Python 语言的特点技巧

    1   介绍 从我开始学习Python时我就决定维护一个经常使用的“窍门”列表.不论何时当我看到一段让我觉得“酷,这样也行!”的代码时(在一个例子中.在StackOverflow.在开源码软件中,等等 ...

  10. es6整理

    1.const和let let类似于var,不同的是let只在所在的代码段有效 for循环的计数器,就很合适使用let命令. let和var的区别: //变量i是var声明的,在全局范围内都有效.所以 ...