web前端技能方法总结(css、js、jquery、html)(17)

简介: web前端技能方法总结(css、js、jquery、html)

1、可以用background-image属性给任何元素添加背景图像。如果同时设的也有背景颜色,那么它是置于背景颜色之上的。背景图像跟背景颜色一样,只出现在内容区和补白之下,没有延伸到边框之外的边界。

background-image:url(images/background.gif); background-image属性被设置成URL,可以是相对路径或完整的URL(http://...).注意URL没有加引号

还有两个属性也能影响背景图像:background-position和background-repeat.

默认的背景图像是重复的。还好background-repeat属性有no -repeat值。浏览器默认的背景图像的位置是元素的左上方(和属性值设为top left效果一样)。

background-position属性用来设置图像的位置,可以用像素、百分数或top,left,right,bottom,center这些关键字定义。

background-repeat属性用来控制这种平铺效果,默认的格式是repeat,意为把图像设置为在水平和垂直方向上都重复。属性值no-repeat表示图像只显示一次,不重复;repeat-x表示图像只在水平方向上重复;

repeat-y表示图像只在垂直方向上重复;inherit表示继承父元素的值。

2、边框样式(border-style)一共有8种,有实线、虚线、凸出线、凹进线等;边框宽度(border-width)属性用来控制边框宽度。可以用关键词(thin、medium、thick,但是浏览器对它们的默认大小不一定总是相同)或像素来定义宽度;边框颜色;也可只定义边框的一侧,如上边框:border-top-color/border-top-style/border-top-width。

怎么让边框看起来像锯齿呢?其实有个小窍门:用虚线边框(dashed),把它设置为白色(跟页面的背景颜色匹配,假设页面背景是白色)。

3、class和id

一般当你想应用一种样式到多个元素的时候就用类。相反,如果你需要应用样式的只是一个元素并且页面上只有一个,就用id。严格来说,id属性是命名唯一的元素的。

(1)p.specials{ color:red; } 这条规则只选择specials类中的段落。 .specials{ color:red; } 这条规则选择specials类中的所有元素。

(2)#footer{ color:red; } 这条规则选择id为“footer”的任意元素。 p#footer{ color:red; } 这条规则选择一个id为“footer”的

元素。

类和id之间的唯一不同是id选择符只跟一个页面中的一个元素匹配。

4、使用多样式表

在XHTML中你可以定义多个样式表(用多个link标签)。样式表链接文件的顺序很重要!一个样式表会覆盖在它之前链接的样式表中的样式。这些样式表从上到下排列,最下面的样式表优先权最高。

元素有一个叫做media的属性,可以用来定义你的样式文件所需要的设备类型。例如属性值为screen适用于电脑屏幕,print适用于打印机类的媒体,handled适用于移动设备和移动电话等。如果没有提供媒体种类,样式文件就应该适用于所有设备。并不是所有的浏览器都支持media属性。

相关文章
|
25天前
|
前端开发 JavaScript 开发者
JavaScript:无处不在的Web语言
JavaScript:无处不在的Web语言
|
25天前
|
前端开发 JavaScript 开发者
JavaScript:构建动态Web的核心力量
JavaScript:构建动态Web的核心力量
|
4月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
25天前
|
JavaScript 前端开发 开发者
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
4月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
25天前
|
JavaScript 前端开发 物联网
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
4月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
4月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
4月前
|
前端开发 容器
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习
|
4月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录