8.16学习成果

jiangchubiu

已于 2023-08-16 21:15:53 修改

阅读量101

点赞数

文章标签：学习

于 2023-08-16 15:24:13 首次发布

本文链接：https://blog.csdn.net/jiangchubiu/article/details/132311578

版权

1. 学习内容

1.1 CSS定位

定位
- 作用：①让元素自由的放在网页的任意位置 ②一般用于盒子之间的层叠情况
- 三种定位

种类	代码	特点	应用场景	注意点
静态定位	position:static	默认：不定位
相对定位	position:relative	①需要配合方位属性实现移动 ②相对于自身原位置进行移动 ③在页面中占位置	①用于小范围移动 ②配合绝对定位	若方位属性left、right同时存在，以left为准；top、bottom同时存在，以top为准
绝对定位	position:absolute	①需要配合方位属性实现移动 ②有已定位的父级：以该父级为参照定位；无已定位父级：以浏览器窗口为参照定位 ③在页面中不占位置，脱离标准流	①配合相对定位（子绝父相）	查找父级的方式：就近查找
固定定位	position:fixed	①需要配合方位属性实现移动 ②以浏览器窗口为参照定位 ③在页面中不占位置，脱离标准流	①网页最上部分的导航

元素层级显示
- 不同布局方式元素的层级关系：标准流<浮动<定位
- 不同定位之间的层级关系：
  - 相对、绝对、固定默认层级相同
  - HTML写在下面的元素层级越高
  - z-index：整数（取值越大，显示顺序越靠上）

1.2 响应式布局

网格视图：响应式网格视图通常是12列，宽度为100%
- 首先计算每列的百分比100% / 12列 = 8.33%
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  ……
  .col-12 {width: 100%;}
媒体查询：使用@media可以针对不同媒体类型定义不同的样式

关键字	作用	注意点
not	用于否定媒体查询	必须指定媒体类型
only	在查询匹配时应用样式	必须指定媒体类型
,	将多个媒体查询合并为一个规则，类似于or运算符
and	①用于将多个媒体查询组合成单条媒体查询 ②用于将媒体功能与媒体类型结合

常见媒体类型：

媒体类型	描述
all	用于所有设备
screen	用于电脑屏幕、平板电脑、智能手机

图片响应式功能实现

图片类型	属性	注意点
普通图片	`width:100% height:auto`	图片会比原始图片大
	`max-width:100% height:auto`	图片永远不会大于其原始大小
背景图片	`background-size:contain`	图片保持其比例不变，自适应内容区域
	`background-size:100% 100%`	图片延展覆盖整个区域
	`background-size:cover`	图片比例保持不变，且能完全覆盖背景区域，使得部分图像无法显示

视频响应式功能实现

属性	注意点
`width:100% height:auto`	视频播放器比原始尺寸大
`max-width:100% height:auto`	视频播放器永远不会大于其原始大小

2. 学习目标

2.1 目标

2.1.1 定位

了解CSS定位的作用，并能说出不同定位方式的特点
掌握使用定位的步骤
熟悉不同元素层级的先后显示关系

2.1.2 响应式布局

掌握如何创建响应式网格视图
掌握使用媒体查询功能，针对不同的媒体类型定义不同的样式
掌握实现图片、视频的响应式功能的方法

2.2 demo

2.2.1 相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        div{
            position: relative;
            left: 100px;
            top: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>文字文字文字</div>
</body>
</html>

相对定位

2.2.2 绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <style>
        div{
            width: 300px;
            height: 300px;
        }
        .father{
            position: relative;
            left: 100px;
            top: 100px;
            background-color: pink;
        }
        .son{
            position: absolute;
            left: 50px;
            top: 50px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>

</body>
</html>

绝对定位

2.2.3 固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位</title>
    <style>
        .navigation{
            position: fixed;
            /* 定位的居中写法 */
            left: 50%;
            margin-left: -500px;
            width: 1000px;
            height: 80px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="navigation"></div>
    <div>
        <img src="E:\前端\html基础\1.jpg">
    </div>
    <div>
        <img src="E:\前端\html基础\1.jpg">
    </div>
    <div>
        <img src="E:\前端\html基础\1.jpg">
    </div>
    <div>
        <img src="E:\前端\html基础\1.jpg">
    </div>
</body>
</html>

固定定位

2.2.4 网格视图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格视图</title>
    <style>
        *{
            box-sizing: border-box;
        }
        .menu{
            width: 25%;
            border: 1px solid #000;
            float: left;
        }
        .content{
            width: 75%;
            border: 1px solid #000;
            float: left;
        }
    </style>
</head>
<body>
    <div class="menu">menu</div>
    <div class="content">content</div>
</body>
</html>

网格视图

2.2.5 媒体查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体查询</title>
    <style>
        div{
            background-color: pink;
        }
        @media screen and (max-width:500px){
            div{
                background-color: skyblue;
            }

        }
    </style>
</head>
<body>
    <div>
        <p>若浏览器宽度小于250像素，背景为天蓝色，否则为粉色</p>
    </div>
</body>
</html>

2.2.6 图片/视频响应式功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片响应</title>
    <style>
        img{
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <img src="E:\前端\html基础\1.jpg">
</body>
</html>

3.学习成果

3.1 定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
    <style>

        .navigation{
            position: fixed;
            /* 定位的居中写法 */
            left: 50%;
            margin-left: -500px;
            background-color: pink;
            height: 80px;
            width: 1000px;
        }
        .newslist{
            list-style-type: none;
        }
        
        .all-news{
            position: relative;
            left: 200px;
            top: 100px;
            height: 800px;
            width: 300px;
            background-color: orange;
        }
        .news_pic{
            position: absolute;
            right: 5px;
            top: 0;
            width: 30px;
            background-color: skyblue;            
        }
        .news-content{
            position: absolute;
            left: 350px;
            top:0;
            width: 1100px;
            height: 800px;
            background-color: silver;
        }

    </style>
</head>
<body>
    <div class="navigation">导航栏</div>
    <div class="all-news">
        <div class="list-title">
            <h3>新闻列表</h3>
            <img src="./新闻.png" alt="新闻" class="news_pic">
        </div>
        <ol class="newslist">
            <li class="news">这是新闻1</li>
            <li class="news">这是新闻2</li>
            <li class="news">这是新闻3</li>
            <li class="news">这是新闻4</li>
            <li class="news">这是新闻5</li>
            <li class="news">这是新闻6</li>
            <li class="news">这是新闻7</li>
            <li class="news">这是新闻8</li>
            <li class="news">这是新闻9</li>
            <li class="news">这是新闻10</li>
        </ol>
        <div class="news-content">
            这是新闻内容
        </div>
    </div>

</body>
</html>

3.2 响应式布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻首页</title>
    <style>
        *{
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        [class*="col-"]{
            float: left;
            width: 100%;
            padding: 20px;
        }
        @media  only screen and (min-width:800px) {
            .col-1 {width: 8.33%;}
            .col-2 {width: 16.66%;}
            .col-3 {width: 25%;}
            .col-4 {width: 33.33%;}
            .col-5 {width: 41.66%;}
            .col-6 {width: 50%;}
            .col-7 {width: 58.33%;}
            .col-8 {width: 66.66%;}
            .col-9 {width: 75%;}
            .col-10 {width: 83.33%;}
            .col-11 {width: 91.66%;}
            .col-12 {width: 100%;}
        }

        .header{
            background-color: #0099cc;
            color: white;
            padding: 10px;
        }
        .menu>ul{
            background-color: #33b5e5;
            list-style-type: none;
            line-height: 50px;
            color: white;
        }
        .content{
            background-color: whitesmoke;
        }
        img{
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>今日新闻</h1>
    </div>
    <div class="col-3 menu">
        <ul>
            <li>这是第1条新闻</li>
            <li>这是第2条新闻</li>
            <li>这是第3条新闻</li>
            <li>这是第4条新闻</li>
            <li>这是第5条新闻</li>
            <li>这是第6条新闻</li>
            <li>这是第7条新闻</li>
            <li>这是第8条新闻</li>
        </ul>
    </div>
    <div class="row">
    <div class="col-3 col-9 content">
        <h2>新闻标题</h2>
        <p>第一段新闻内容第一段新闻内容第一段新闻内容第一段新闻内容第一段新闻内容第一段新闻内容第一段新闻内容</p>
        <p>第二段新闻内容第二段新闻内容第二段新闻内容第二段新闻内容第二段新闻内容第二段新闻内容第二段新闻内容</p>
        <img src="E:\前端\html基础\1.jpg" width="600px">
    </div>
</body>
</html>