作业效果：当宽度大于或等于375px

最大宽度大于等于375px

当宽度小于375px

作业代码在最后

css

元素与元素框

查看页面中所有元素生成的”框”: * {outline: 1px dashed red}

元素类型

类型	描述
块级元素	默认纵向排列
行内元素	默认横向排列
行内块元素	默认在横向排列中，进行纵向排列

display 属性

display属性常用值

属性值	描述
inline（默认）	行内元素
block	块级元素
inline-block	行内块级元素
list-item	块级: 列表元素,
table	块级: 表格元素
flex	弹性元素
grid	网格元素

css在 html 上

属性值	描述	备注
link标签	`<link rel="stylesheet" href="..." />`	外部样式
@import指令	`@import url(...)` `@import '...'`	外部样式
style元素	`<style>...</style>`	内部样式
style属性	`<tag style="...">`	行内样式

媒体探查

使用场景

场景	描述
`<link>`	`<link media="screen,print">`
`<style>`	`<style media="screen,print">`
`@import`	`@import url(...) screen,print;`
`@media`	`@media screen,print {...}`

媒体类型

媒体类型是不同媒体的标识符

类型	描述
`all`	所有媒体类型,即不限制
`print`	打印机,预打印预览使用
`screen`	屏幕,如浏览器等用户代理
`projection`	幻灯片

多种媒体类型之间使用逗号分隔: @media screen, print

6.4 媒体描述符

媒体类型通常会添加”媒体描述符”进行精准限制,例如设置媒体尺寸,分辨率等
媒体描述符的语法与 css 样式声明非常类似,如min-width: 500px
与 css 声明的不同之处在于,媒体描述符允许没有值,如print and (color)
多个 “媒体描述符” 之间使用 “逻辑关键字” 连接, 如 and 和 not
and表示多个”媒体描述符”必须同时满足, not则是整个查询取反,且必须写在and前面

常用 “媒体描述符”(显示区域相关)

序号	媒体描述符	描述
1	`width`	显示区域宽度
2	`min-width`	显示区域最小宽度
3	`max-width`	显示区域最大宽度
4	`device-width`	设备显示区域宽度
5	`min-device-width`	设备显示区域最小宽度
6	`max-device-width`	设备显示区域最大宽度
7	`height`	显示区域高度
8	`min-height`	显示区域最小高度
9	`max-height`	显示区域最大高度
10	`device-height`	设备显示区域高度
11	`min-device-height`	设备显示区域最小高度
12	`max-device-height`	设备显示区域最大高度

备注说明：

max-width: 浏览器显示区域宽度,与设备无关,通常用于 PC 端
max-device-width: 设备分辨率的最大宽度,通常用于移动端

作业实验
demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <title>古典哲学研究</title>
    <!-- link引用css -->
    <link rel="stylesheet" href="style/style2.css">
    <!-- style标签写css -->
    <style>
        /* import引用css */
        @import "style/style1.css";
        .us {
            color: darksalmon;
            background-color: darkslateblue;
            outline: darkgoldenrod 1px solid;
            align-self: center;
            text-align: center;
        }
        .us1 {
            color: darksalmon;
            background-color: darkslateblue;
        }
        body {
            background-color: black;
        }
        p {
            color: blanchedalmond;
        }
        .headluck {
            color: darkgray;
            text-align: center
        }
        a {
            color: blanchedalmond;
            online: chartreuse;
        }
        @media screen and (max-width: 375px) {
            .us1 {
                display: none;
            }
            body {
                background-color: rgb(25, 3, 31);
            }
            p {
                color: blanchedalmond;
            }
            .headluck {
                display: none;
            }
            .nav {
                display: none;
            }
            a {
                color: blanchedalmond;
                online: chartreuse;
            }
            .minmenu {
                top: 10px;
            }
        }
    </style>
</head>
<body>
    <h2 class="us">
        <a class="us1">欢迎来到</a><strong>赫格沃兹学院</strong>
    </h2>
    <p class="headluck">
        全球最秀的魔法课，让你成为哈利波特！</p>
    <div>
        <div>
            <ul>
                <li>
                    <!-- 使用style属性设置 -->
                    <select class="minmenu"
                        style="background-color: black;color: coral;height: 30px;">
                        <option value=""><a href="">课程</a>
                        </option>
                        <option value=""><a href="">考核</a>
                        </option>
                        <option value=""><a href="">商城</a>
                        </option>
                        <option value=""><a href="">会议</a>
                        </option>
                    </select>
                    <a href="" class="nav">学习课程</a>
                    <a href="" class="nav">参加考核</a>
                    <a href="" class="nav">道具商城</a>
                    <a href="" class="nav">魔法大会</a>
                </li>
            </ul>
        </div>
    </div>
    <table align="center">
        <tr>
            <th>课程</th>
            <th>课时</th>
            <th>费用</th>
        </tr>
        <tr>
            <td>生命的起源</td>
            <td>10节</td>
            <td>899元</td>
        </tr>
        <tr>
            <td>物质的运动</td>
            <td>12节</td>
            <td>1299元</td>
        </tr>
        <tr>
            <td>化学的魔法</td>
            <td>18节</td>
            <td>3388元</td>
        </tr>
    </table>
</body>
</html>

style/style1.css

/* 这是为列表准备的样式 */
ul {
  border: 1px solid #ccc;
  background-color: #efefef;
  padding: 9px 9px 9px;
}
ul > li {
  margin: 10px;
  text-align: center;
  list-style: none;
}
ul > li > a{
    color: black;
    font-size: 15px;
}

style/style2.css

/* 这是给表格准备的样式 */
table{
    border: orange 2px solid;
    width: 300px;
    text-align: center;
}
th{
    background-color: brown;
    color: beige;
    text-align: center;
    font-style: normal;
    border: orange 1px solid;
}
td{
    background-color: gray;
    color: indigo;
    text-align: center;
    font-style: oblique;
    border: khaki 1px solid;
}

D5，css基础知识

作业效果：当宽度大于或等于375px

当宽度小于375px

作业代码在最后

css

元素与元素框

元素类型

display 属性

css在 html 上

媒体探查

使用场景

媒体类型

6.4 媒体描述符

常用 “媒体描述符”(显示区域相关)

备注说明：

相关文章