整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

零基础教你学前端-72 CSS背景

们学习 CSS 背景属性。

假设这里有个 div 容器,宽 400,高 300,默认情况下,这个 div 是没有背景的,或者说它的背景是透明的,我们拿一张图片实验一下就能看得出来,这个 div 在默认情况下,背景是透明的。

也可以给 div 加一个背景颜色。


既然可以设置背景颜色,那么当然也可以给这个 div 设计一个背景图片,就像这样。但是由于这个 div 已经被我设定了大小,图片呢,是大于这个容器的,所以实际上,我们最终看到的效果,是这个样子的。我们只能看到图片的一部分。下面我们就来看看应用 CSS 背景属性如何实现这个效果。

创建一个 css-background.html 文件和一个 background-style.css 文件。接下来,我们打算给整个页面来添加背景图片。

事实上,body 元素也是一个容器,可以直接给 body 添加背景图片。body 容器默认水平方向上,是占满整个窗口的,我们来给它添加一个高度样式,定义选择器 body,声明样式 height: 100%。

CSS
body {
  height: 100%;
}

预览一下效果,按下 F12,来观察一下页面 body 元素的大小,我们发现 body 依然是只有宽度,没有高度。为什么我们设置的高度 100% 不管用呢?大家注意,这里的100%是相对于它的父元素高度的,body 元素的父元素是 html,这个元素我们并没有给它设置大小。

所以,在 body 选择器前面加一个 html 逗号 ( html, ),这样两个元素都设置了高度。让他们的高度和浏览器窗口大小保持一致。

这时再来看一下页面,现在 body 和整个窗口就一样大了。

CSS
html, body {
  height: 100%;
}

下面我们给 body 添加背景图片,可以通过 background-image 属性实现,属性值为 url 后跟一个小括号,括号里面填写背景图片的路径 (url(./duck.gif))

回到样式代码,再定义一个 body 选择器,单独给它再声明样式 background-image: url(./duck.gif)。这个图片是一个动态图片。

我们来观看一下效果,为什么会出现这么多的图片呢?我明明只是加了一张背景图而已。原因是,当我们给元素添加背景图片的时候,图片是以平铺的方式来展现的。


什么是平铺呢?就是当我们放入一张背景图的时候,这个图片在默认情况下,会向四周扩散,无限的进行重复,就变成了这个样子。当然了,容器是有大小限制的,最终我们能看到的部分呢,也就这么多而已。

如果我们不希望这个背景图是重复的,需要使用一个新的背景属性 background-repeat,取值为 no-repeat。

我们来看效果,最终就只有一张动图了。

接下来我们来修改一下,将背景图片换成另外一张图片。

再来观察这个效果,由于不允许平铺,我们只看到了一张图片。



把 background-repeat 属性值 no-repeat 改为 repeat。

我们就看到了这样的效果。


在平时开发的时候,给一个网页或一个比较大的容器设置背景,经常会采用这样的技巧,放一个小的图片进去,只需要让它保持平铺的方式,我就会得到一张无限大的图。

再回到刚才的例子。如果要求这个背景图片在页面中间显示,我们如何调整背景图的位置呢?

我们需要使用 background-position 属性,这个属性需要写两个值:第一个值表示在水平方向上的对齐方式——left,center,right。第二个值表示在垂直方向上的对齐方式——top,center ,bottom。

给 body 添加样式 background-position: center center,也就是水平垂直居中。

大家发现,图片移到了页面的中间。如果将图片放到右下角,属性值该如何设置呢?把答案写到公屏上吧。

回到 html 代码,添加一个 h1 元素和五个 p 元素,填入一些文本。再复制五份。

再回到 css 代码,背景图恢复为 bg.png,图片平铺方式为 repeat。

我们看一下效果,可以通过滚动条来查看网页内容,仔细观察,文字和背景图片一起滚动。那能否实现文字滚动,背景图片不动呢?大家可以先脑补一下效果。



实现这个效果,需要使用 background-attachment 属性,用来声明容器里的背景图片与内容的依附方式。值 fixed:图片固定,值 scroll:同时滚动。

给 body 选择器添加样式 background-attachment

[əˈtætʃmənt] : fixed。

再看一下效果,滚动一下页面,背景固定的效果实现了!

前面我们多次使用到了 background-color 属性,它可以给容器设置背景颜色,值可以设置为颜色名称,十六进制颜色值,RGB颜色值等等。

把背景图片的样式注释掉,添加 background-color 属性,值为 green。

此时,整个页面背景为绿色!颜色有点深,可以让绿色变的浅一些吗?

你能想到的方法应该是换一个其他的颜色值,其实,我们可以通过让背景透明一些,同样可以实现这个效果。

这需要学习一个新的颜色值表示方法——rgba。这里的 rgb 就是 rgb 颜色值,a 是 alpha 的简写,表示通过设置一个 alpha 通道,来指定颜色的不透明度,是一个介于 0 到 1 的数字。0表示完全透明,1 表示完全不透明。比如 rgba(0, 0, 0, 0.5),表示的颜色就是黑色半透明。

把 green 颜色名称改为 rgba(0, 255, 0, 0.1)。

我们看,页面绿色的背景因为透明,颜色变浅了!

为了缩短代码,也可以使用单一的 background 来指定所有的背景属性。

可以把 body 的全部背景属性,合并在一个 background 属性里。注释所有代码,声明属性 background,值可以写为:颜色值 rgba(0, 255, 0, 0.1), 背景图片 url(./duck.gif),平铺方式 no-repeat,背景图位置 right bottom,背景依附 fixed。 (rgba(0, 255, 0, 0.1) url(./bg.png) no-repeat right bottom fixed;)

我们看,一句声明,实现了全部的背景效果!

文章配套视频链接: https://www.bilibili.com/video/BV1oU4y1278g/?p=75

众号【传智播客博学谷】回复关键词:前端 PS Java(100G) Python(80G) 大数据 区块链 测试 PPT JS(40g+300教程) HTML 简历 领取相关学习资料!

一、HTML

1、<image>标签上title属性与alt属性的区别是什么?

alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。

这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户,视觉障碍的用户和使用屏幕阅读器的用户等。

title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。参考《alt和title属性的区别及应用》

2、分别写出以下几个HTML标签:文字加粗、下标、居中、字体

加粗:<b>、<strong>

下标:<sub>

居中:<center>

字体:<font>、<basefont>、参考《HTML标签列表》

3、请写出至少5个html5新增的标签,并说明其语义和应用场景

section:定义文档中的一个章节

nav:定义只包含导航链接的章节

header:定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。

footer:定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。

aside:定义和页面内容关联度较低的内容——如果被删除,剩下的内容仍然很合理。

参考《HTML5 标签列表》

4、请说说你对标签语义化的理解?

a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构

b. 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;

c. 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;

d. 便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

5、Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?

声明位于文档中的最前面,处于 标签之前。告知浏览器以何种模式来渲染文档。

严格模式的排版和 JS 运作模式是,以该浏览器支持的最高标准运行。

在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

6、你知道多少种Doctype文档类型?

标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。

XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。

Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,

Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。

7、HTML与XHTML——二者有什么区别

a. XHTML 元素必须被正确地嵌套。

b. XHTML 元素必须被关闭。

c. 标签名必须用小写字母。

d. XHTML 文档必须拥有根元素。

参考《XHTML 与 HTML 之间的差异》

8、html5有哪些新特性、移除了那些元素?

a. HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。

b. 拖拽释放(Drag and drop) API

c. 语义化更好的内容标签(header,nav,footer,aside,article,section)

d. 音频、视频API(audio,video)

e. 画布(Canvas) API

f. 地理(Geolocation) API

g. 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失

h. sessionStorage 的数据在页面会话结束时会被清除

i. 表单控件,calendar、date、time、email、url、search

j. 新的技术webworker, websocket等

移除的元素:

a. 纯表现的元素:basefont,big,center, s,strike,tt,u;

b. 对可用性产生负面影响的元素:frame,frameset,noframes;

9、iframe的优缺点?

优点:

a. 解决加载缓慢的第三方内容如图标和广告等的加载问题

b. iframe无刷新文件上传

c. iframe跨域通信

缺点:

a. iframe会阻塞主页面的Onload事件

b. 无法被一些搜索引擎索引到

c. 页面会增加服务器的http请求

d. 会产生很多页面,不容易管理。

参考《iframe的一些记录》

10、Quirks模式是什么?它和Standards模式有什么区别?

在写程序时我们也会经常遇到这样的问题,如何保证原来的接口不变,又提供更强大的功能,尤其是新功能不兼容旧功能时。IE6以前的页面大家都不会去写DTD,所以IE6就假定 如果写了DTD,就意味着这个页面将采用对CSS支持更好的布局,而如果没有,则采用兼容之前的布局方式。这就是Quirks模式(怪癖模式,诡异模式,怪异模式)。

区别:总体会有布局、样式解析和脚本执行三个方面的区别。

a. 盒模型:在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在Quirks 模式下,IE的宽度和高度还包含了padding和border。

b. 设置行内元素的高宽:在Standards模式下,给等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效。

c. 设置百分比的高度:在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的用

d. 设置水平居中:使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效。

11、请阐述table的缺点

a. 太深的嵌套,比如table>tr>td>h3,会导致搜索引擎读取困难,而且,最直接的损失就是大大增加了冗余代码量。

b. 灵活性差,比如要将tr设置border等属性,是不行的,得通过td

c. 代码臃肿,当在table中套用table的时候,阅读代码会显得异常混乱

d. 混乱的colspan与rowspan,用来布局时,频繁使用他们会造成整个文档顺序混乱。

e. 不够语义

参考《为什么说table表格布局不好?》

12、简述一下src与href的区别

src用于替换当前元素;href用于在当前文档和引用资源之间确立联系。

src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置

href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接

公众号【传智播客博学谷】回复关键词:前端 PS Java Python 大数据 区块链 测试 PPT JS HTML 简历 领取相关学习资料!

、跳出新页面:

<basetarget=”_blank”>target="_self"不跳转

<form action="xxx.htm" target="_blank">form表单提交的跳转设置

2、点击按钮跳出别的页面添加

<a href="#" onclick="openZoosUrl();return false;">

onclick="return false"

3、display:block;块级元素,也就是说它可以设置一些宽高,独占一行,比如,div元素,p元素等display:inline-block,行级元素,也就说它可以使得同样设置成行级元素的元素一起在一行,然后可以设置宽高,这个适应于制作一个导航菜单,将每个菜单项设置成行级元素。它的宽和高默认是内容的宽和高,典型的元素是表单类的元素。dispaly:inline.行级元素,不可设置宽和高,默认宽高是内容的宽和高,典型的比如,span,

4、html鼠标小手:

cursor:pointer;

5、html背景图属性:

background-size:100%;,但是你的图片宽度,高度要设置成100% ,要注意的是.php的文件里面这个background-image:url();不好用,失效,你要使用网站的绝对路径background:url('/20151106/404/image/404.png') no-repeat 4px 5px;}background:url("11111.jpg");background-repeat:no-repeat;background-size:100%;width:100%;height:100%;

这个是给页面加背景的body{padding: 0px;margin: 0px;background-color:#494949;width:100%;height:100%;}.

还有在设置背景图片的时候可以使用背景background-image:url("");这个属性来设置背景,但是图片要用gif的格式

6、按输出方式来显示文本格式:<pre></pre>横线:<hr /><q></q>双引号标签下划线<ins></ins>

7、html---position/relative/absolute/fixed/三种布局定位方式的总结relative是按照自身来说,absolute是按照浏览器来说,但是要注意的是,如果他有父级元素的话,那么他就是依照父级元素来进行改变位置的。

8、无序列表去掉前面黑点li{list-style:none;}

9、隐藏元素 - display:none或visibility:hidden

display-这个元素,设置之后原本的元素不会占用当前的空间,不会影响布局,但是后者,隐藏之后还会占用空间

10、HTML隐藏多余

Div{overflow:hidden}

10、隐藏自适应:overflow:auto;

11、关于框架的问题

这个是接受你要显示页面

indx.php是框架显示的页面,最上面,也就是没按键显示

<iframe src="index.php" style="width:100%;height:100%;border:none " name="main"></iframe>

这个是你点击之后想在哪显示后面加:target=""

<a href='../admin/shopclass/add.php' target="main">添加分类</a>

12、关于背景的高的问题,也就是说你定义了一个div但是没有搞,是为了让你的图片在上面。那么就有这个属性了

overflow:hidden;

也就是你本身是属于父级元素的,但是你float就脱离了文本,变成浮动的,所有就不会在用父子元素的空间,所以就父级加上这个overflow:hidden;

13、锚点的设置

在你想跳转的页面的地方加上:<a name="miao">

然后在你想加链接的地方加上<a href="#miao">去找锚点</a>

14.点击换验证码图片

<img src="../public/common/yzm.php" alt="" style="cursor:pointer" onclick="this.src='../public/common/yzm.php?rand='+Math.random()">

15、圆角

border-radius:5px;

16、textarea的左侧文字在最左边

style="vertical-align:top"



17、html块状元素和内联元素的总结,块状元素可以设置margin,但是使用margin的时候要符合:1.块状元素,2.有宽高,其中内联元素不能设置margin和宽高的属性,只能设置padding