-
div+css视频教程之样式设置指南
样式设置指南
本节详细介绍在浏览器不支持 CSS 版本 3 (CSS3) 时应用该版本会发生什么 —— 浏览器将忽略它并退回到默认设置。 本节还将介绍 CSS3 样式(以 -moz、-webkit 等开头的样式)的特定于浏览器的实现。
简单的 < div> 标记
(X)HTML 拥有非常简单的标记 < div>,可以使用它将网页划分为有用的区域。从设计角度讲,这是一个不错的想法,因为它在本质上就是一个包含内容的方框。
CSS 2.1 的标准 < div> 效果
CSS 始终支持设置 < div> 的样式。其中一些元素包括边框调整,比如:
其中:
●size 是一个数字值。
●type 是实线、虚线、点线、双线或一些 3D 样式的边框。
●color 通常是一个 RGB 十六进制值。
举例而言,您可以使用 border: 1px solid #000000; 表示 1 像素宽的黑色实线。
类似于 body,也可以更改标准背景颜色以及文本的字体和颜色。可以像其他基础样式一样进行这些更改。
CSS3 增强的 < div> 效果
一种呼声最高的设计元素(在 CSS2.1 中未找到)是边框的圆角边缘。这意味着过去的许多设计人员必须构建基于图像的边框或使用某种组合了 CSS 和 JavaScript 的 dirty 技术。幸运的是,在 CSS3 中不再存在此情况,它引入了 border-radius 属性(例如 border-radius: 10px;)。
要将此属性应用到一些浏览器中,必须包含类似以下形式的标记:
此示例只是为了让该标记适用于基于 Mozilla(比如 Mozilla Firefox)和基于 Webkit(比如 Apple Safari)的旧浏览器。如果您愿意,可以将上述 3 个属性设置为不同值并让样式在 Firefox 和 Google Chrome 中显示不同的效果。
也可以在 < div> 上生成一个阴影。为此,可以使用以下 3 个属性(再次说明,一定要处理各种浏览器):
在这种情况下,第一个属性是水平阴影,第二个是垂直阴影,第三个是模糊量,第四个是阴影的颜色。可以在模糊量和阴影之间放置另一个属性(另一个与阴影的覆盖范围相关的大小值),但是此属性似乎没有广泛使用。
本节详细介绍在浏览器不支持 CSS 版本 3 (CSS3) 时应用该版本会发生什么 —— 浏览器将忽略它并退回到默认设置。 本节还将介绍 CSS3 样式(以 -moz、-webkit 等开头的样式)的特定于浏览器的实现。
简单的 < div> 标记
(X)HTML 拥有非常简单的标记 < div>,可以使用它将网页划分为有用的区域。从设计角度讲,这是一个不错的想法,因为它在本质上就是一个包含内容的方框。
CSS 2.1 的标准 < div> 效果
CSS 始终支持设置 < div> 的样式。其中一些元素包括边框调整,比如:
1 | border: size type color |
●size 是一个数字值。
●type 是实线、虚线、点线、双线或一些 3D 样式的边框。
●color 通常是一个 RGB 十六进制值。
举例而言,您可以使用 border: 1px solid #000000; 表示 1 像素宽的黑色实线。
类似于 body,也可以更改标准背景颜色以及文本的字体和颜色。可以像其他基础样式一样进行这些更改。
CSS3 增强的 < div> 效果
一种呼声最高的设计元素(在 CSS2.1 中未找到)是边框的圆角边缘。这意味着过去的许多设计人员必须构建基于图像的边框或使用某种组合了 CSS 和 JavaScript 的 dirty 技术。幸运的是,在 CSS3 中不再存在此情况,它引入了 border-radius 属性(例如 border-radius: 10px;)。
要将此属性应用到一些浏览器中,必须包含类似以下形式的标记:
1 2 3 |
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; |
也可以在 < div> 上生成一个阴影。为此,可以使用以下 3 个属性(再次说明,一定要处理各种浏览器):
1 2 3 |
-webkit-box-shadow: 8px 8px 6px #AAAAAA; -moz-box-shadow: 8px 8px 6px #AAAAAA; box-shadow: 8px 8px 6px #AAAAAA; |
栏目列表
最新更新
nodejs爬虫
Python正则表达式完全指南
爬取豆瓣Top250图书数据
shp 地图文件批量添加字段
爬虫小试牛刀(爬取学校通知公告)
【python基础】函数-初识函数
【python基础】函数-返回值
HTTP请求:requests模块基础使用必知必会
Python初学者友好丨详解参数传递类型
如何有效管理爬虫流量?
SQL SERVER中递归
2个场景实例讲解GaussDB(DWS)基表统计信息估
常用的 SQL Server 关键字及其含义
动手分析SQL Server中的事务中使用的锁
openGauss内核分析:SQL by pass & 经典执行
一招教你如何高效批量导入与更新数据
天天写SQL,这些神奇的特性你知道吗?
openGauss内核分析:执行计划生成
[IM002]Navicat ODBC驱动器管理器 未发现数据
初入Sql Server 之 存储过程的简单使用
这是目前我见过最好的跨域解决方案!
减少回流与重绘
减少回流与重绘
如何使用KrpanoToolJS在浏览器切图
performance.now() 与 Date.now() 对比
一款纯 JS 实现的轻量化图片编辑器
关于开发 VS Code 插件遇到的 workbench.scm.
前端设计模式——观察者模式
前端设计模式——中介者模式
创建型-原型模式