HTML&CSS基础-背景相关设置

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.背景颜色设置

1>.HTML源代码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>背景相关设置</title>
  6.  
  7.         <style type="text/css">
  8.             .box1{
  9.                 width: 500px;
  10.                 height: 500px;
  11.                 /*设置背景颜色*/
  12.                 background-color: deeppink;
  13.                 /*设置居中*/
  14.                 margin: 0 auto;
  15.             }
  16.         </style>
  17.     </head>
  18.     <body>
  19.  
  20.         <div class="box1"></div>
  21.     </body>
  22. </html>

2>.浏览器打开以上代码渲染结果

二.背景图片设置

1>.HTML源代码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>背景相关设置</title>
  6.  
  7.         <style type="text/css">
  8.             .box1{
  9.                 width: 1920px;
  10.                 height: 1080px;
  11.                 /*设置居中*/
  12.                 margin: 0 auto;
  13.                 /**
  14.                  *     使用background-image属性来设置背景图片：
  15.                  *         语法:
  16.                  *             background-image: url(相对路径)
  17.                  *
  18.                  *     background-image使用注意事项:
  19.                  *         1>.如果背景图片大于元素，默认会显示图片的左上角;
  20.                  *         2>.如果背景图片和元素一样大，则会将背景图片全部显示;
  21.                  *         3>.如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素;
  22.                  *
  23.                  */
  24.                 background-image: url(img/01.jpg);
  25.  
  26.                 /**
  27.                  *    可以同时设置为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色。
  28.                  *    一般情况下，设置背景图片时都会同时指定一个背景颜色，因为用户在访问网站时可能不能立即加载图片(因为浏览器需要下载图片)，这样用户起码还能看到背景颜色。
  29.                  */
  30.                 background-color: deeppink;
  31.  
  32.                 /**
  33.                  *     background-repeat可用于设置背景图片的重复方式,有以下可选值:
  34.                  *         repeat:
  35.                  *             默认值，当图片小于元素大小时，会默认以水平，垂直方向重复(平铺)以充满元素。
  36.                  *         no-repeat:
  37.                  *             当图片小于元素大小时，背景图片不会重复，有多大就显示多大。
  38.                  *         repeat-x:
  39.                  *             当图片小于元素大小时，背景图片沿水平方向重复。
  40.                  *         repeat-y:
  41.                  *             当图片小于元素大小时，背景图片沿垂直方向重复。
  42.                  */
  43.                 background-repeat: repeat-x;
  44.             }
  45.         </style>
  46.     </head>
  47.     <body>
  48.         <div class="box1"></div>
  49.     </body>
  50. </html>

2>.浏览器打开以上代码渲染结果

三.背景图片位置相关配置

1>.HTML源代码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>背景相关设置</title>
  6.  
  7.         <style type="text/css">
  8.             .box1{
  9.                 width: 500px;
  10.                 height: 500px;
  11.                 /*设置居中*/
  12.                 margin: 0 auto;
  13.                  /*设置背景图片*/
  14.                 background-image: url(img/02.png);
  15.                 /*设置背景颜色*/
  16.                 background-color: deeppink;
  17.                  /*设置图片不重复*/
  18.                 background-repeat: no-repeat;
  19.                 /**
  20.                  *     背景图片默认贴在元素的左上角显示，通过"background-position"可以调整背景图片在元素中的位置。
  21.                  *
  22.                  *     "background-position"属性可以使用top,right,left,bootom,center中的两个值(代表水平方向和垂直方向，如果只写一个值那么第二个值默认是"center"，很有局限性，严格来说就是一个九宫格，因此并不推荐使用)来指定一个背景图片的位置，例如:
  23.                  *         top left:
  24.                  *             左上
  25.                  *         bottom right:
  26.                  *             右下
  27.                  *         center center:
  28.                  *             居中
  29.                  *
  30.                  *     "background-position"属性也可以直接指定两个偏移量
  31.                  *         第一个值是水平方向的偏移量:
  32.                  *             如果指定的是一个正值，则图片会向右移动指定的像素；
  33.                  *             如果指定的是一个负值，则图片会向左移动指定的像素;
  34.                  *
  35.                  *         第二值是垂直方向的偏移量：
  36.                  *             如果指定的是一个正值，则图片会向上移动指定的像素；
  37.                  *             如果指定的是一个负值，则图片会向下移动指定的像素;
  38.                  */
  39.                 /*background-position: center;*/
  40.                 background-position: 80px 53px;
  41.             }
  42.  
  43.             body{
  44.                 background-image: url(img/03.png);
  45.                 background-repeat: no-repeat;
  46.                 height: 5000px;
  47.  
  48.                 /**
  49.                  *     background-attachment用来设置背景图片是否随页面一起滚动，有以下可选值:
  50.                  *         scroll:
  51.                  *             默认值，背景图片随着窗口滚动
  52.                  *         fixed:
  53.                  *             背景图片的定位永远相对于浏览器的窗口，即图片不随着窗口滚动
  54.                  *
  55.                  *
  56.                  *     温馨提示:
  57.                  *         不随窗口滚动的图片,我们一般都是设置给body，而不设置给其它元素
  58.                  *
  59.                  */
  60.                 background-attachment: fixed;
  61.             }
  62.         </style>
  63.     </head>
  64.     <body>
  65.         <div class="box1"></div>
  66.         <p>
  67.             噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！
  68.         </p>
  69.  
  70.         <p>
  71.             噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！
  72.         </p>
  73.  
  74.         <p>
  75.             噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！
  76.         </p>
  77.  
  78.         <p>
  79.             噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！
  80.         </p>
  81.  
  82.         <p>
  83.             噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！
  84.         </p>
  85.  
  86.     </body>
  87. </html>

2>.浏览器打开以上代码渲染结果

Python正则表达式（regular expression）简介-re模块的更多相关文章

  1. Python正则表达式Regular Expression基本用法

    资料来源:http://blog.csdn.net/whycadi/article/details/2011046   直接从网上资料转载过来,作为自己的参考.这个写的很清楚.先拿来看看. 1.正则表 ...

  2. Python -- 正则表达式 regular expression

    正则表达式(regular expression) 根据其英文翻译,re模块 作用:用来匹配字符串.  在Python中,正则表达式是特殊的字符序列,检查一个字符串是否与某种模式匹配. 设计思想:用一 ...

  3. Java基础-正则表达式(Regular Expression)语法规则简介

    Java基础-正则表达式(Regular Expression)语法规则简介 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.正则表达式的概念 正则表达式(Regular Exp ...

  4. 正则表达式-Regular expression学习笔记

    正则表达式 正则表达式(Regular expression)是一种符号表示法,被用来识别文本模式. 最近在学习正则表达式,今天整理一下其中的一些知识点 grep - 打印匹配行 grep 是个很强大 ...

  5. 正则表达式(Regular Expression, RegEx)学习入门

    1. 概述 正则表达式(Regular Expression, RegEx)是一种匹配模式,描述的是一串文本的特征. 正如自然语言中高大.坚固等词语抽象出来描述事物特征一样,正则表达式就是字符的高度抽 ...

  6. python(4): regular expression正则表达式/re库/爬虫基础

    python 获取网络数据也很方便 抓取 requests 第三方库适合做中小型网络爬虫的开发, 大型的爬虫需要用到 scrapy 框架 解析 BeautifulSoup 库, re 模块 (一) r ...

  7. Python中的正则表达式regular expression

    1 match = re.search(pat,str)  If the search is successful, search() returns a match object or None o ...

  8. python learning Regular Expression.py

    # 正则表达式,又称规则表达式.(英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学的一个概念.正则表达式通常被用来检索.替换那些符合某个模式(规 ...

  9. java 正则表达式 -Regular Expression

    正则表达式(Regular Expression),可以说就是一个字符构成的串,它定义了一个用来搜索匹配字符串的模式.正则表达式定义了字符串的模式,可以用来搜索.编辑或处理文本,不仅限于某一种语言(P ...

  10. C#中【正则表达式regular expression】相关的知识

    Regex System.Text.RegularExpressions.Regex      regex应该是regular expression的缩写 https://msdn.microsoft ...

随机推荐

  1. P4292 [WC2010]重建计划

    无脑上二分+淀粉质完事了 每个子树算的时候把儿子按照最长路径从小到大依次做,和前面的单调队列算一波,每个儿子的复杂度不超过这个子树大小 // luogu-judger-enable-o2 #inclu ...

  2. SpringBoot日记——MQ消息队列整合（一）

    除了之前讲到的缓存,我们还会用到消息队列来存储一些消息,为了提升系统的异步性能等等: 消息服务有两个概念需要知道:消息代理-message broker,目的地-destination.消息发送由代理 ...

  3. Asp.net MVC Razor常见问题及解决方法(转载>云中客)

    没有经验的童鞋就是这样磕磕碰碰出来的经验. 1,Datatype的错误提示消息无法自定义 这也许是Asp.net MVC的一个Bug.ViewModel中定义了DataType为Date字段: 1 2 ...

  4. 【原】python3.7 无法pip安装提示ssl错误解决方案

    问题 pip is configured with locations that require TLS/SSL, however the ssl module in Python is not av ...

  5. [转载] JVM 内存结构

    转载自:http://gityuan.com/2015/10/17/java-memory/

  6. mac 安装 tomcat 配置

    前面的话:记录下 Mac 安装配置 Tomcat 过程 1. 下载安装 Tomcat 下载 Tomcat 地址(官方地址):https://tomcat.apache.org/download-80. ...

  7. PAT甲题题解-1016. Phone Bills (25)-模拟、排序

    博主欢迎转载,但请给出本文链接,我尊重你,你尊重我,谢谢~http://www.cnblogs.com/chenxiwenruo/p/6789229.html特别不喜欢那些随便转载别人的原创文章又不给 ...

  8. 甲题题解-1116. Come on! Let’s C (20)-（素数筛选法）

    用vis标记出现过的id,checked标记询问过的id.至于如何判断排名为素数,用素数筛选法预处理一下即可,水题. #include <iostream> #include <cs ...

  9. 用IDEA开发简单的Servlet

    最近学习java,主要是servlet相关的内容.IDEA和servlet之前都没有碰过,所以做了一下小实验,走了一些弯路:这里把一个完整的步骤写出来,加深一下印象. IDEA创建项目步骤 1. 在i ...

  10. 第二个Spring冲刺周期团队进展报告

    第一天:找识别不了的原因 第二天:继续找识别不了的原因 第三天:找文字库,找到tessdata语言包,放到手机SD卡根目录 第四天:了解OCR引擎 第五天:将导入tess-two导入到项目中,并进行测 ...