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. 华为手机自带浏览器不支持 ES6 语法

    原文地址:https://caochangkui.github.io/huawei-es6/ 华为手机自带浏览器对 es6 语法的支持度极差,哪怕最新的荣耀10 手机也有该毛病!所以,移动端项目开发中 ...

  2. 浅谈android Service和BroadCastReceiver

    1.题记 Android中的服务和windows中的服务是类似的东西,服务一般没有用户操作界面,它运行于系统中不容易被用户发觉,可以使用它开发如监控之类的程序. 广播接收者(BroadcastRece ...

  3. Unity光照与渲染设置学习笔记

    学习了一下unity中有关光照和渲染的一些设置,现在才明白之前遇到的一些问题只是没有正确设置而已. unity不同版本的光照设置会有一些差异,而且可以调节的参数非常多,这里只记录一些重要的参数和使用方 ...

  4. openstack删除僵尸卷

    问题描述: 最近在清理openstack环境,在删除cinder云硬盘时,一直发现有两个卷在删除中. 解决方法如下: 首先我们去cinder的数据库中找到这个卷,命令为: MariaDB [(none ...

  5. kubeadm安装K8S单master双节点集群

    宿主机:master:172.16.40.97node1:172.16.40.98node2:172.16.40.99 # 一.k8s初始化环境:(三台宿主机) 关闭防火墙和selinux syste ...

  6. PAT甲题题解-1054. The Dominant Color (20)-排序/map

    原本用map,发现超时了,后来便先用数组存储排个序,最后for一遍统计每种颜色出现的次数(每种颜色的首位索引相减+1),找出最多的即可. #include <iostream> #incl ...

  7. 第二阶段Sprint7

    昨天:将“录制”及“保存”整合到一起,修复出现的Bug,使之能够正常运行. 今天:把视频录制整合到时间提醒里,实现视频提醒 遇到的问题:额,整进去直接就停止运行了..也没有报错..

  8. TAC队--团队选题报告

    The Art of Code--团队选题报告 一个APP项目能否被大众所接受,能否拥有受众,the most important是它的idea. 一个好的idea可以为项目带来巨大的改变 一个 独特 ...

  9. Alpha冲刺第4天

    Alpha第四天 1.团队成员 郑西坤 031602542 (队长) 陈俊杰 031602504 陈顺兴 031602505 张胜男 031602540 廖钰萍 031602323 雷光游 03160 ...

  10. [转帖]Linux后端执行命令的方法

    Linux 后台执行命令的方法 http://bbs.chinaunix.net/forum.php?mod=viewthread&tid=4241330&fromuid=212883 ...