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

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

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

一.背景颜色设置

1>.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>背景相关设置</title>

        <style type="text/css">

            .box1{

                width: 500px;

                height: 500px;

                /*设置背景颜色*/

                background-color: deeppink;

                /*设置居中*/

                margin: 0 auto;

            }

        </style>

    </head>

    <body>

        <div class="box1"></div>

    </body>

</html>

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

二.背景图片设置

1>.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>背景相关设置</title>

        <style type="text/css">

            .box1{

                width: 1920px;

                height: 1080px;

                /*设置居中*/

                margin: 0 auto;

                /**

                 *     使用background-image属性来设置背景图片：

                 *         语法:

                 *             background-image: url(相对路径)

                 *

                 *     background-image使用注意事项:

                 *         1>.如果背景图片大于元素，默认会显示图片的左上角;

                 *         2>.如果背景图片和元素一样大，则会将背景图片全部显示;

                 *         3>.如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素;

                 *

                 */

                background-image: url(img/01.jpg);

                /**

                 *    可以同时设置为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色。

                 *    一般情况下，设置背景图片时都会同时指定一个背景颜色，因为用户在访问网站时可能不能立即加载图片(因为浏览器需要下载图片)，这样用户起码还能看到背景颜色。

                 */

                background-color: deeppink;

                /**

                 *     background-repeat可用于设置背景图片的重复方式,有以下可选值:

                 *         repeat:

                 *             默认值，当图片小于元素大小时，会默认以水平，垂直方向重复(平铺)以充满元素。

                 *         no-repeat:

                 *             当图片小于元素大小时，背景图片不会重复，有多大就显示多大。

                 *         repeat-x:

                 *             当图片小于元素大小时，背景图片沿水平方向重复。

                 *         repeat-y:

                 *             当图片小于元素大小时，背景图片沿垂直方向重复。

                 */

                background-repeat: repeat-x;

            }

        </style>

    </head>

    <body>

        <div class="box1"></div>

    </body>

</html>

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

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

1>.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>背景相关设置</title>

        <style type="text/css">

            .box1{

                width: 500px;

                height: 500px;

                /*设置居中*/

                margin: 0 auto;

                 /*设置背景图片*/

                background-image: url(img/02.png);

                /*设置背景颜色*/

                background-color: deeppink;

                 /*设置图片不重复*/

                background-repeat: no-repeat;

                /**

                 *     背景图片默认贴在元素的左上角显示，通过"background-position"可以调整背景图片在元素中的位置。

                 *

                 *     "background-position"属性可以使用top,right,left,bootom,center中的两个值(代表水平方向和垂直方向，如果只写一个值那么第二个值默认是"center"，很有局限性，严格来说就是一个九宫格，因此并不推荐使用)来指定一个背景图片的位置，例如:

                 *         top left:

                 *             左上

                 *         bottom right:

                 *             右下

                 *         center center:

                 *             居中

                 *

                 *     "background-position"属性也可以直接指定两个偏移量

                 *         第一个值是水平方向的偏移量:

                 *             如果指定的是一个正值，则图片会向右移动指定的像素；

                 *             如果指定的是一个负值，则图片会向左移动指定的像素;

                 *

                 *         第二值是垂直方向的偏移量：

                 *             如果指定的是一个正值，则图片会向上移动指定的像素；

                 *             如果指定的是一个负值，则图片会向下移动指定的像素;

                 */

                /*background-position: center;*/

                background-position: 80px 53px;

            }

            body{

                background-image: url(img/03.png);

                background-repeat: no-repeat;

                height: 5000px;

                /**

                 *     background-attachment用来设置背景图片是否随页面一起滚动，有以下可选值:

                 *         scroll:

                 *             默认值，背景图片随着窗口滚动

                 *         fixed:

                 *             背景图片的定位永远相对于浏览器的窗口，即图片不随着窗口滚动

                 *

                 *

                 *     温馨提示:

                 *         不随窗口滚动的图片,我们一般都是设置给body，而不设置给其它元素

                 *

                 */

                background-attachment: fixed;

            }

        </style>

    </head>

    <body>

        <div class="box1"></div>

        <p>

            噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！

        </p>

        <p>

            噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！

        </p>

        <p>

            噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！

        </p>

        <p>

            噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！

        </p>

        <p>

            噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！

        </p>

    </body>

</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. Ansible入门笔记（1）之工作架构和使用原理

    目录 Ansible入门笔记(1) 1.Ansible特性 2.ansible架构解析 3.ansible主要组成部分 1)命令执行来源: 2)利用ansible实现管理的方式 3)Ansile-pl ...

  2. eclipse中怎么找项目部署的路径和找编译后的class路径

    1.快捷键 ctrl+shift+R,会默认显示你的源文件.java的路径,如果没有.class的话,点击右上角的三角,选中  Show Derived Resource; 2.打开出现下图 3.按下 ...

  3. 复习下VLAN的知识

    转载:来自百度百科 VLAN一般指虚拟局域网 VLAN(Virtual Local Area Network)的中文名为"虚拟局域网". 虚拟局域网(VLAN)是一组逻辑上的设备和 ...

  4. mysql 查询所有子节点的相关数据

    定义一个函数 ) CHARSET utf8 BEGIN ); ); SET sTemp = '$'; SET sTempChd =cast(rootId as CHAR); WHILE sTempCh ...

  5. Notes of Daily Scrum Meeting（12.16）

    最近好几门课的大作业都到了要截止的时候了,好多天队员们都抽不出来时间做软工的项目了,这样确实 和我们的计划出入很大,不过希望老师谅解,三门课程设计确实压力很大. 今天的团队任务总结如下: 团队成员 今 ...

  6. XML中<beans>属性

    <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w ...

  7. 小组成员及其git链接

    组名:天天向上 Github仓库:https://github.com/lvcaixia/test 组长:吕彩霞 201303014109(计科高职13-3) 第一题   https://github ...

  8. maybe i have no answer

    怎么说呢,我从小学开始到高中,大学.我觉得老师对大家都是一样的,虽然我因为父母的原因可能和老师接触比较多,但是学业上其实没什么帮助的. 我更希望老师能给我人生道路上的指点,虽然自己的道路确实是自己走出 ...

  9. Book Review 《构建之法》-2

    -敏捷流程包括了几大原则:Backlog.burn-down.Sprint.Scrum. 敏捷开发注重个人之间的交流,提倡尽早的交付有价值的软件满足顾客的需求, 在开发过程中不断与客户进行交互,变化. ...

  10. ElasticSearch 2 (36) - 信息聚合系列之显著项

    ElasticSearch 2 (36) - 信息聚合系列之显著项 摘要 significant_terms(SigTerms)聚合与其他聚合都不相同.目前为止我们看到的所有聚合在本质上都是简单的数学 ...