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属性。

相关文章
|
8天前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
103 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
4月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
43 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
2月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
146 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
2月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
62 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
4月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
4月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
73 6
|
4月前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
67 5
|
4月前
|
JavaScript
使用Node.js创建一个简单的Web服务器
使用Node.js创建一个简单的Web服务器
|
4月前
|
机器学习/深度学习 人工智能 JavaScript
JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景
本文探讨了JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景。JavaScript将注重性能优化、跨平台开发、AI融合及WebAssembly整合;TypeScript则强调与框架整合、强类型检查、前端工程化及WebAssembly的深度结合。两者结合发展,特别是在Vue 3.0中完全采用TypeScript编写,预示着未来的Web开发将更加高效、可靠。
139 4

热门文章

最新文章