diff --git "a/\351\203\221\351\233\250\350\211\257/\347\254\224\350\256\260/20241104-\345\252\222\344\275\223\346\237\245\350\257\242.md" "b/\351\203\221\351\233\250\350\211\257/\347\254\224\350\256\260/20241104-\345\252\222\344\275\223\346\237\245\350\257\242.md" new file mode 100644 index 0000000000000000000000000000000000000000..20d04add19636161d349d3a8d0840a65cfdb2806 --- /dev/null +++ "b/\351\203\221\351\233\250\350\211\257/\347\254\224\350\256\260/20241104-\345\252\222\344\275\223\346\237\245\350\257\242.md" @@ -0,0 +1,86 @@ + + +```markdown +# CSS 媒体查询 (Media Queries) + +## 简介 +CSS 媒体查询让我们可以根据不同的设备特性来应用不同的CSS样式规则。这使得我们能够创建更加灵活和响应式的布局。 + +## 基本语法 +```css +@media 不支持的媒体类型 and (媒体特性) { + CSS规则; +} +``` +如果媒体类型被支持，CSS规则将被应用。 + +## 媒体类型 +- `all`：所有设备 +- `print`：打印机 +- `screen`：计算机屏幕 +- `speech`：屏幕阅读器 + +## 媒体特性 +### 宽度和高度 +- `width`：设备或视口的宽度 +- `height`：设备或视口的高度 + +### 朝向 +- `orientation`：`portrait` 或 `landscape` + +### 分辨率 +- `resolution`：设备的分辨率 +- `dpi`：点每英寸 +- `dpcm`：点每厘米 + +## 示例 +### 基本媒体查询 +```css +@media screen and (max-width: 600px) { + body { + background-color: lightblue; + } +} +``` +这段代码意味着如果屏幕宽度小于或等于600px，背景颜色将变为浅蓝色。 + +### 多个媒体特性 +```css +@media screen and (min-width: 600px) and (orientation: landscape) { + body { + background-color: lightgreen; + } +} +``` +这段代码意味着如果屏幕宽度大于或等于600px且设备处于横屏模式，背景颜色将变为浅绿色。 + +### 链式媒体查询 +```css +@media screen and (min-width: 600px) { + body { + background-color: lightgreen; + } +} + +@media screen and (min-width: 960px) { + body { + background-color: lightyellow; + } +} +``` +这些代码意味着随着屏幕宽度的增加，背景颜色会从浅绿色变为浅黄色。 + +### 使用媒体特性 +```css +@media print { + body { + font-size: 10pt; + } +} +``` + +## 注意事项 +- 媒体查询可以嵌套在CSS文件中，也可以作为单独的CSS文件被链接。 +- 媒体查询是向下兼容的，旧版浏览器会忽略媒体查询。 +- 使用媒体查询可以提高页面加载速度，因为它允许浏览器只加载必要的CSS。 +``` diff --git "a/\351\203\221\351\233\250\350\211\257/\347\254\224\350\256\260/20241106-\345\270\203\345\261\200.md" "b/\351\203\221\351\233\250\350\211\257/\347\254\224\350\256\260/20241106-\345\270\203\345\261\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..0f6219c65c544a8a64e306541b170da375ee7c0c --- /dev/null +++ "b/\351\203\221\351\233\250\350\211\257/\347\254\224\350\256\260/20241106-\345\270\203\345\261\200.md" @@ -0,0 +1,138 @@ +```html + + + + + + + Document + + + + +
+ + + + + +
+ + +
+ + +
+
景点.玩乐
+
景点.玩乐
+
景点.玩乐
+
景点.玩乐
+
景点.玩乐
+
+ + +
+
+
海外酒店
+
+
海外酒店
+
海外酒店
+ +
+
+
海外酒店
+
海外酒店
+ +
+
+ + + + + +
+
海外酒店
+
+
海外酒店
+
海外酒店
+ +
+
+
海外酒店
+
海外酒店
+ +
+
+
+
海外酒店
+
+
海外酒店
+
海外酒店
+ +
+
+
海外酒店
+
海外酒店
+ +
+
+
+ + +
+
+
电话费
+
电话费
+
电话费
+
电话费
+
电话费
+
+ +
+
电话费
+
电话费
+
电话费
+
电话费
+
电话费
+
+ + +
+ + +
+
+
获得更多福利 >
+
+ + + +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ + + + + + + +
+ + +``` \ No newline at end of file diff --git "a/\351\203\221\351\233\250\350\211\257/\347\254\224\350\256\260/20241107-\345\244\215\344\271\240.md" "b/\351\203\221\351\233\250\350\211\257/\347\254\224\350\256\260/20241107-\345\244\215\344\271\240.md" new file mode 100644 index 0000000000000000000000000000000000000000..3a902a6384034948f31719e9a272a63da3cafc9c --- /dev/null +++ "b/\351\203\221\351\233\250\350\211\257/\347\254\224\350\256\260/20241107-\345\244\215\344\271\240.md" @@ -0,0 +1,108 @@ + +```markdown +# 页面布局 CSS样式 + +## HTML结构 +```html + + + + + + 页面布局 + + + +
页眉
+ +
主要内容
+ + + + +``` + +## CSS样式 +```css +/* 重置浏览器默认样式 */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* 设置字体和背景 */ +body { + font-family: Arial, sans-serif; + line-height: 1.6; + background-color: #f4f4f4; + color: #333; +} + +/* 布局容器 */ +.container { + width: 80%; + margin: auto; + overflow: hidden; +} + +/* 页眉样式 */ +header { + background: #333; + color: #fff; + padding: 20px 0; + text-align: center; +} + +/* 导航样式 */ +nav { + background: #555; + color: #fff; + padding: 15px 0; + text-align: center; +} + +/* 主内容区域样式 */ +main { + background: #fff; + padding: 20px; + margin-bottom: 20px; +} + +/* 侧边栏样式 */ +aside { + background: #e7e7e7; + padding: 20px; + text-align: center; +} + +/* 页脚样式 */ +footer { + background: #333; + color: #fff; + text-align: center; + padding: 10px 0; + position: absolute; + bottom: 0; + width: 100%; +} +``` + +## 媒体查询（响应式布局） +```css +/* 平板设备 */ +@media (max-width: 768px) { + .container { + width: 90%; + } +} + +/* 手机设备 */ +@media (max-width: 480px) { + header, nav, main, aside, footer { + padding-left: 15px; + padding-right: 15px; + } +} +``` +