CSS 实例div#maincontent ul.example-list {list-style-type: none;margin: 15px 0 0 0;}div#maincontent ul.example-list li {margin: 0;padding: 0;border-bottom: 1px s
CSS 网格项目.grid-container { display: grid; grid-gap: 10px; background-color: #2196F3; padding: 10px; text-align: center; box-sizing: border-box;}.grid-i
CSS 网格容器.grid-container { display: grid; grid-gap: 10px; background-color: #2196F3; padding: 10px; text-align: center; box-sizing: border-box;}.grid-i
CSS 网格布局模块.grid-container { display: grid; grid-gap: 10px; background-color: #2196F3; padding: 10px; text-align: center;}.grid-item { background-col
响应式网页设计 - 视频使用 width 属性如果 width 属性设置为100％，则视频播放器将响应并放大和缩小：示例代码：video { width: 100%; height: auto;} 完整实例【亲自试一试】：<!
响应式网页设计 - 图像使用 width 属性如果 width 属性设置为百分比，且高度设置为 "auto"，则图像将进行响应来放大或缩小：示例代码：img { width: 100%; height: auto;} 完整实
响应式网页设计 - 媒体查询什么是媒体查询？媒体查询是 CSS3 中引入的一种 CSS 技术。仅在满足特定条件时，它才会使用 @media 规则来引用 CSS 属性块。示例代码：如果浏览器窗口
响应式网页设计 - 网格视图什么是网格视图？许多网页都基于网格视图（grid-view），这意味着页面被分割为几列：.gridwrapper {overflow: auto;position: relative;height: 200px;box-
响应式网页设计 - 视口什么是视口？视口（viewport）是用户在网页上的可见区域。视口随设备而异，在移动电话上会比在计算机屏幕上更小。在平板电脑和手机之前，网页仅设计为用于计算
响应式网页设计 - 简介什么是响应式网页设计？响应式 web 设计会让您的网页在所有设备上看起来都不错。响应式 web 设计仅使用 HTML 和 CSS。响应式 web 设计并不是程序或 Jav
CSS 媒体查询 - 实例CSS 媒体查询 - 更多实例让我们看看使用媒体查询的更多例子。媒体查询是一种流行的技术，用于将定制的样式表传递给不同的设备。下面演示一个简单的例子，让
CSS 媒体查询CSS2 引入了媒体类型CSS2 中引入了 @media 规则，它让为不同媒体类型定义不同样式规则成为可能。例如：您可能有一组用于计算机屏幕的样式规则、一组用于打印机、一
CSS Flexbox.flex-container { display: -webkit-flex; display: flex; background-color: dodgerblue; text-align: center;}.flex-item { background-colo
CSS Box SizingCSS Box SizingCSS box-sizing 属性允许我们在元素的总宽度和高度中包括内边距（填充）和边框。假如不指定 CSS box-sizing 属性默认情况下，元素的宽度和高度是这
CSS 在媒体查询中使用变量在媒体查询中使用变量现在，我们希望在媒体查询中修改变量值。提示：媒体查询旨在为不同的设备（显示器、平板电脑、手机等）定义不同的样式规则。您可以在
