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%;}
- 首先计算每列的百分比100% / 12列 = 8.33%
-
媒体查询：使用
@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>
智能推荐
hive使用适用场景_大数据入门：Hive应用场景-程序员宅基地
文章浏览阅读5.8k次。在大数据的发展当中，大数据技术生态的组件，也在不断地拓展开来，而其中的Hive组件，作为Hadoop的数据仓库工具，可以实现对Hadoop集群当中的大规模数据进行相应的数据处理。今天我们的大数据入门分享，就主要来讲讲，Hive应用场景。关于Hive，首先需要明确的一点就是，Hive并非数据库，Hive所提供的数据存储、查询和分析功能，本质上来说，并非传统数据库所提供的存储、查询、分析功能。Hive..._hive应用场景
zblog采集-织梦全自动采集插件-织梦免费采集插件_zblog 网页采集插件-程序员宅基地
文章浏览阅读496次。Zblog是由Zblog开发团队开发的一款小巧而强大的基于Asp和PHP平台的开源程序，但是插件市场上的Zblog采集插件，没有一款能打的，要么就是没有SEO文章内容处理，要么就是功能单一。很少有适合SEO站长的Zblog采集。人们都知道Zblog采集接口都是对Zblog采集不熟悉的人做的，很多人采取模拟登陆的方法进行发布文章，也有很多人直接操作数据库发布文章，然而这些都或多或少的产生各种问题，发布速度慢、文章内容未经严格过滤，导致安全性问题、不能发Tag、不能自动创建分类等。但是使用Zblog采._zblog 网页采集插件
Flink学习四：提交Flink运行job_flink定时运行job-程序员宅基地
文章浏览阅读2.4k次，点赞2次，收藏2次。restUI页面提交1.1 添加上传jar包1.2 提交任务job1.3 查看提交的任务2. 命令行提交./flink-1.9.3/bin/flink run -c com.qu.wc.StreamWordCount -p 2 FlinkTutorial-1.0-SNAPSHOT.jar3. 命令行查看正在运行的job./flink-1.9.3/bin/flink list4. 命令行查看所有job./flink-1.9.3/bin/flink list --all._flink定时运行job
STM32-LED闪烁项目总结_嵌入式stm32闪烁led实验总结-程序员宅基地
文章浏览阅读1k次，点赞2次，收藏6次。这个项目是基于STM32的LED闪烁项目，主要目的是让学习者熟悉STM32的基本操作和编程方法。在这个项目中，我们将使用STM32作为控制器，通过对GPIO口的控制实现LED灯的闪烁。这个STM32 LED闪烁的项目是一个非常简单的入门项目，但它可以帮助学习者熟悉STM32的编程方法和GPIO口的使用。在这个项目中，我们通过对GPIO口的控制实现了LED灯的闪烁。LED闪烁是STM32入门课程的基础操作之一，它旨在教学生如何使用STM32开发板控制LED灯的闪烁。_嵌入式stm32闪烁led实验总结
Debezium安装部署和将服务托管到systemctl-程序员宅基地
文章浏览阅读63次。本文介绍了安装和部署Debezium的详细步骤，并演示了如何将Debezium服务托管到systemctl以进行方便的管理。本文将详细介绍如何安装和部署Debezium，并将其服务托管到systemctl。解压缩后，将得到一个名为"debezium"的目录，其中包含Debezium的二进制文件和其他必要的资源。注意替换"ExecStart"中的"/path/to/debezium"为实际的Debezium目录路径。接下来，需要下载Debezium的压缩包，并将其解压到所需的目录。
Android 控制屏幕唤醒常亮或熄灭_android实现拿起手机亮屏-程序员宅基地
文章浏览阅读4.4k次。需求：在诗词曲文项目中，诗词整篇朗读的时候，文章没有读完会因为屏幕熄灭停止朗读。要求：在文章没有朗读完毕之前屏幕常亮，读完以后屏幕常亮关闭；1.权限配置：设置电源管理的权限。
随便推点
目标检测简介-程序员宅基地
文章浏览阅读2.3k次。目标检测简介、评估标准、经典算法_目标检测
记SQL server安装后无法连接127.0.0.1解决方法_sqlserver 127 0 01 无法连接-程序员宅基地
文章浏览阅读6.3k次，点赞4次，收藏9次。实训时需要安装SQL server2008 R所以我上网上找了一个.exe 的安装包链接：https://pan.baidu.com/s/1_FkhB8XJy3Js_rFADhdtmA提取码：ztki注：解压后1.04G安装时Microsoft需下载.NET，更新安装后会自动安装如下：点击第一个傻瓜式安装，唯一注意的是在修改路径的时候如下不可修改：到安装实例的时候就可以修改啦数据..._sqlserver 127 0 01 无法连接
js 获取对象的所有key值，用来遍历_js 遍历对象的key-程序员宅基地
文章浏览阅读7.4k次。1. Object.keys(item); 获取到了key之后就可以遍历的时候直接使用这个进行遍历所有的key跟valuevar infoItem={ name:'xiaowu', age:'18',}//的出来的keys就是[name,age]var keys=Object.keys(infoItem);2. 通常用于以下实力中 <div *ngFor="let item of keys"> <div>{{item}}.._js 遍历对象的key
粒子群算法（PSO）求解路径规划_粒子群算法路径规划-程序员宅基地
文章浏览阅读2.2w次，点赞51次，收藏310次。粒子群算法求解路径规划路径规划问题描述 给定环境信息，如果该环境内有障碍物，寻求起始点到目标点的最短路径， 并且路径不能与障碍物相交，如图 1.1.1 所示。1.2 粒子群算法求解1.2.1 求解思路 粒子群优化算法（PSO），粒子群中的每一个粒子都代表一个问题的可能解， 通过粒子个体的简单行为，群体内的信息交互实现问题求解的智能性。 在路径规划中，我们将每一条路径规划为一个粒子，每个粒子群群有 n 个粒 子，即有 n 条路径，同时，每个粒子又有 m 个染色体，即中间过渡点的_粒子群算法路径规划
量化评价：稳健的业绩评价指标_rar 海龟-程序员宅基地
文章浏览阅读353次。所谓稳健的评估指标，是指在评估的过程中数据的轻微变化并不会显著的影响一个统计指标。而不稳健的评估指标则相反，在对交易系统进行回测时，参数值的轻微变化会带来不稳健指标的大幅变化。对于不稳健的评估指标，任何对数据有影响的因素都会对测试结果产生过大的影响，这很容易导致数据过拟合。_rar 海龟
IAP在ARM Cortex-M3微控制器实现原理_value line devices connectivity line devices-程序员宅基地
文章浏览阅读607次，点赞2次，收藏7次。–基于STM32F103ZET6的UART通讯实现一、什么是IAP，为什么要IAPIAP即为In Application Programming(在应用中编程)，一般情况下，以STM32F10x系列芯片为主控制器的设备在出厂时就已经使用J-Link仿真器将应用代码烧录了，如果在设备使用过程中需要进行应用代码的更换、升级等操作的话，则可能需要将设备返回原厂并拆解出来再使用J-Link重新烧录代码，这就增加了很多不必要的麻烦。站在用户的角度来说，就是能让用户自己来更换设备里边的代码程序而厂家这边只需要提供给_value line devices connectivity line devices