8.16学习成果-程序员宅基地

技术标签：学习

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>

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

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

从零开始搭建Hadoop_创建一个hadoop项目-程序员宅基地

文章浏览阅读331次。第一部分：准备工作1 安装虚拟机2 安装centos73 安装JDK以上三步是准备工作，至此已经完成一台已安装JDK的主机第二部分：准备３台虚拟机以下所有工作最好都在root权限下操作1 克隆上面已经有一台虚拟机了,现在对master进行克隆,克隆出另外2台子机;1.1 进行克隆21.2 下一步1.3 下一步1.4 下一步1.5 根据子机需要,命名和安装路径1.6 ..._创建一个hadoop项目

心脏滴血漏洞HeartBleed CVE-2014-0160深入代码层面的分析_heartbleed代码分析-程序员宅基地

文章浏览阅读1.7k次。心脏滴血漏洞HeartBleed CVE-2014-0160 是由heartbeat功能引入的，本文从深入码层面的分析该漏洞产生的原因_heartbleed代码分析

java读取ofd文档内容_ofd电子文档内容分析工具（分析文档、签章和证书）-程序员宅基地

文章浏览阅读1.4k次。前言ofd是国家文档标准，其对标的文档格式是pdf。ofd文档是容器格式文件，ofd其实就是压缩包。将ofd文件后缀改为.zip，解压后可看到文件包含的内容。ofd文件分析工具下载：点我下载。ofd文件解压后，可以看到如下内容：对于xml文件，可以用文本工具查看。但是对于印章文件(Seal.esl)、签名文件(SignedValue.dat)就无法查看其内容了。本人开发一款ofd内容查看器，..._signedvalue.dat

基于FPGA的数据采集系统（一）_基于fpga的信息采集-程序员宅基地

文章浏览阅读1.8w次，点赞29次，收藏313次。整体系统设计本设计主要是对ADC和DAC的使用，主要实现功能流程为：首先通过串口向FPGA发送控制信号，控制DAC芯片tlv5618进行DA装换，转换的数据存在ROM中，转换开始时读取ROM中数据进行读取转换。其次用按键控制adc128s052进行模数转换100次，模数转换数据存储到FIFO中，再从FIFO中读取数据通过串口输出显示在pc上。其整体系统框图如下：图1：FPGA数据采集系统框图从图中可以看出，该系统主要包括9个模块：串口接收模块、按键消抖模块、按键控制模块、ROM模块、D.._基于fpga的信息采集

微服务 spring cloud zuul com.netflix.zuul.exception.ZuulException GENERAL-程序员宅基地

文章浏览阅读2.5w次。1.背景错误信息：-- [http-nio-9904-exec-5] o.s.c.n.z.filters.post.SendErrorFilter : Error during filteringcom.netflix.zuul.exception.ZuulException: Forwarding error at org.springframework.cloud..._com.netflix.zuul.exception.zuulexception

邻接矩阵-建立图-程序员宅基地

文章浏览阅读358次。1.介绍图的相关概念　　图是由顶点的有穷非空集和一个描述顶点之间关系-边（或者弧）的集合组成。通常，图中的数据元素被称为顶点，顶点间的关系用边表示，图通常用字母G表示，图的顶点通常用字母V表示，所以图可以定义为:　　G=(V,E)其中，V(G)是图中顶点的有穷非空集合，E(G)是V(G)中顶点的边的有穷集合1.1 无向图：图中任意两个顶点构成的边是没有方向的1.2 有向图：图中..._给定一个邻接矩阵未必能够造出一个图

随便推点

MDT2012部署系列之11 WDS安装与配置-程序员宅基地

文章浏览阅读321次。（十二）、WDS服务器安装通过前面的测试我们会发现，每次安装的时候需要加域光盘映像，这是一个比较麻烦的事情，试想一个上万个的公司，你天天带着一个光盘与光驱去给别人装系统，这将是一个多么痛苦的事情啊，有什么方法可以解决这个问题了？答案是肯定的，下面我们就来简单说一下。WDS服务器，它是Windows自带的一个免费的基于系统本身角色的一个功能，它主要提供一种简单、安全的通过网络快速、远程将Window..._doc server2012上通过wds+mdt无人值守部署win11系统.doc

python--xlrd/xlwt/xlutils_xlutils模块可以读xlsx吗-程序员宅基地

文章浏览阅读219次。python–xlrd/xlwt/xlutilsxlrd只能读取，不能改,支持 xlsx和xls 格式xlwt只能改，不能读xlwt只能保存为.xls格式xlutils能将xlrd.Book转为xlwt.Workbook，从而得以在现有xls的基础上修改数据，并创建一个新的xls，实现修改xlrd打开文件import xlrdexcel=xlrd.open_workbook('E:/test.xlsx') 返回值为xlrd.book.Book对象,不能修改获取sheett_xlutils模块可以读xlsx吗

关于新版本selenium定位元素报错：‘WebDriver‘ object has no attribute ‘find_element_by_id‘等问题_unresolved attribute reference 'find_element_by_id-程序员宅基地

文章浏览阅读8.2w次，点赞267次，收藏656次。运行Selenium出现'WebDriver' object has no attribute 'find_element_by_id'或AttributeError: 'WebDriver' object has no attribute 'find_element_by_xpath'等定位元素代码错误，是因为selenium更新到了新的版本，以前的一些语法经过改动。..............._unresolved attribute reference 'find_element_by_id' for class 'webdriver