java培训记录Day03 2022/3/16星期三
今天是培训的第三天，天气依旧晴朗。。。
上午老师讲昨天的PPT，属实无聊。一上午啥也没干，等干饭
下午还是不知道干嘛，人麻了，头疼。
下午终于讲课了，还不错。
目录
今日任务：
CSS布局
块级元素（block element）
行内元素（inline element）
Display
inline
block
inline-block
inline，block，inline-block之间的区别图解
覆盖默认的 Display 值
隐藏元素 - display:none 还是 visibility:hidden？
width 和 max-width
定位（position）
溢出（Overflow）
水平和垂直对齐
不透明度 / 透明度
opacity
透明悬停效果
反向悬停
使用 RGBA 的透明度
导航栏
全高固定垂直导航栏
水平导航栏
固定的导航栏
固定在顶部
固定在底部
粘性导航栏
下拉菜单
今日任务：
老师忘了布置，自己设定吧。
- Display
- max-width
- 定位（）
- 溢出
- 清除浮动
- inline-block
- 对齐
- 组合器
- 伪类
- 不透明
CSS布局
块级元素（block element）
块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。
块级元素的一些例子：
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
行内元素（inline element）
内联元素不从新行开始，仅占用所需的宽度
行内元素的一些例子：
- <span>
- <a>
- <img>
Display
display 属性规定是否/如何显示元素。
每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
| list-item | 此元素会作为列表显示。 |
| run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
| table | 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 |
inline
- 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
- 不能更改元素的height，width的值，大小由内容撑开.
- 可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行.
block
- 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
- 能够改变元素的height，width的值.
- 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
inline-block
- 结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
- 用通俗的话讲，就是不独占一行的块级元素。
inline，block，inline-block之间的区别图解
覆盖默认的 Display 值
设置元素的 display 属性仅会更改元素的显示方式，而不会更改元素的种类。因此，带有 display: block; 的行内元素不允许在其中包含其他块元素。
隐藏元素 - display:none 还是 visibility:hidden？
通过将 display 属性设置为 none 可以隐藏元素。该元素将被隐藏，并且页面将显示为好像该元素不在其中
visibility:hidden; 也可以隐藏元素。
但是，该元素仍将占用与之前相同的空间。元素将被隐藏，但仍会影响布局
width 和 max-width
当浏览器窗口小于元素的宽度时，上面这个 <div> 会发生问题。浏览器会将水平滚动条添加到页面。
在这种情况下，使用 max-width 可以改善浏览器对小窗口的处理。为了使网站在小型设备上可用，这一点很重要：
定位（position）
position 属性
position 属性规定应用于元素的定位方法的类型。
有五个不同的位置值：
- static （静态的）
- relative （相对的）
- fixed （固定的）
- absolute （绝对的）
- sticky （黏性的）
溢出（Overflow）
overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。
overflow 属性可设置以下值：
- visible - 默认。溢出没有被剪裁。内容在元素框外渲染
- hidden - 溢出被剪裁，其余内容将不可见
- scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
- auto - 与 scroll 类似，但仅在必要时添加滚动条
注释：overflow 属性仅适用于具有指定高度的块元素。
水平和垂直对齐
CSS 布局 - 水平和垂直对齐
https://www.w3school.com.cn/css/css_align.asp
不透明度 / 透明度
opacity
opacity 属性指定元素的不透明度/透明度。
opacity 属性的取值范围为 0.0-1.0。值越低，越透明：
img {opacity: 0.5;
}透明悬停效果
opacity 属性通常与 :hover 选择器一同使用，这样就可以在鼠标悬停时更改不透明度：
实例
img {opacity: 0.5;
}img:hover {opacity: 1.0;
}反向悬停
当用户将鼠标悬停在图像上时，我们希望图像不透明。这条 CSS 是 opacity:1;。
img:hover {opacity: 0.5;
}使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读：
解决办法：
使用 RGBA 的透明度
如果您不希望对子元素应用不透明度，使用 RGBA 颜色值。
RGBA 颜色值指定为：rgba(red, green, blue, alpha)。 alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。
实例
div {background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}导航栏
全高固定垂直导航栏
<!DOCTYPE html>
<html>
<head><style>ul {list-style-type: none;margin: 0;padding: 0;width: 25%;background-color: #f1f1f1;height: 100%; /* 全高 */position: fixed; /* 使它产生粘性，即使在滚动时 */overflow: auto; /* 如果侧栏的内容太多，则启用滚动条 */}</style>
</head>
<body><ul><li><a href="default.asp">Home</a></li><li><a href="news.asp">News</a></li><li><a href="contact.asp">Contact</a></li><li><a href="about.asp">About</a></li></ul>
</body>
</html>水平导航栏
方法1.使用display-inlne
<html lang="en">
<head><style>li{display: inline;}</style>
</head>
<body><ul><li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li></ul>
</body>
</html>效果：
固定的导航栏
使导航栏保持在页面的顶部或底部，即使用户滚动页面也是如此：
固定在顶部
<html lang="en">
<head><style>li{display: inline;}ul{position: fixed;top: 0;width: 100%;}</style>
</head>
<body><ul><li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li></ul>
</body>
</html>固定在底部
ul {position: fixed;bottom: 0;width: 100%;
}粘性导航栏
为 <ul> 添加 position: sticky;，以创建粘性导航栏。
粘性元素会根据滚动位置在相对和固定之间切换。它是相对定位的，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）
<!DOCTYPE html>
<html>
<head>
<style>
body {font-size: 28px;
}ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;position: -webkit-sticky; /* Safari */position: sticky;top: 0;
}li {float: left;
}li a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;
}li a:hover {background-color: #111;
}.active {background-color: #4CAF50;
}
</style>
</head>
<body><div class="header"><h1>向下滚动</h1><p>请向下滚动以查看粘性效果。</p>
</div><ul><li><a class="active" href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li>
</ul><h2>粘性导航栏实例</h2>
<p>如果导航栏到了滚动位置，它会<strong>粘</strong>到顶部。</p>
<p><b>注释：</b>Internet Explorer 不支持粘性定位并且 Safari 需要 -webkit- 前缀。</body>
</html>
下拉菜单
基础的下拉菜单
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {position: relative;display: inline-block;
}.dropdown-content {display: none;position: absolute;min-width: 160px;padding: 12px 16px;z-index: 1;
}.dropdown:hover .dropdown-content {display: block;
}
</style>
</head>
<body>
<div class="dropdown"><span>把鼠标移到我上面</span><div class="dropdown-content"><p>Hello World!</p></div>
</div></body>
</html>
java培训记录Day03 2022/3/16星期三相关推荐
- java培训记录Day02 2022/3/15星期二
今天是培训的第二天,天气很晴朗... 目录 今日任务 行级标签 超链接 超链接的三种应用场合 超链接中的target属性 超链接伪类 常用的特殊符号 Frameset iframe iframe与fr ...
- java培训记录Day09 2022/3/22星期二（数组）
目录 今日简介: 今日知识 数组: 声明数组变量 创建数组 数组元素的默认初始化值 For-Each 循环 二维数组的使用 java.util.Arrays 今日代码: 1.数组反转 2.数组复制 今 ...
- java培训记录Day06 2022/3/19星期六（网页布局：grid）
目录 今日简述 今日新技能 1.grid布局 基本概念 display: grid grid-template-columns 属性,grid-template-rows 属性 auto-fill(自 ...
- java培训记录Day18 2022/3/31星期四（super+多态+抽象类）
目录 super关键字 super的使用,调用属性和方法 super调用构造器 多态性 多态的使用 为什么要使用多态 多态性只适用于方法不适用于属性 instanceof:向下转型 代码块 抽象类(a ...
- on java 8 学习笔记 2022.2.16
2022.2.16 问题 其实我感觉引用计数的方法不只书中提到的这种问题吧,难道不会有对象被误删的情况吗? 答:不会,因为这种方法就是参考了只要有引用,它就是有效对象的路子,而只要引用大于0,那它就是 ...
- 【记录】2022/7/16
我该有一种破釜沉舟的爱 觉察世间百态下酝酿的温柔 生命不是拿来贩卖的 时间终会给我答案 在此之前 请不要坠落 请看向天堂的大门 即便在晚霞里收摊回家 即便在沼泽中唏嘘抽烟 即便我这些bug整了一天也没 ...
- 2022年南京Java培训机构排名，实力突出遥遥领先
2022年南京Java培训机构排名,实力突出遥遥领先 近日,中国权威机构公布了2022年南京Java培训机构排名,本次排名第一的机构仍是动力节点,在2021年中,动力节点在Java培训机构排名中始终始 ...
- Java培训实现月薪15k，我都经历了什么（绝不是广告）
Java培训实现月薪15k,我都经历了什么(绝不是广告) 我是一名通过培训进入IT行业的Java开发人员,目前在广州的一家科技公司工作,中级Java开发,月薪16k.同届毕业的同学中,我水平应该在中上 ...
- java培训教程分享：Java中用户如何自定义异常?
我们在学习java技术的时候应该有了解过,在java中是定义了很多的异常类的,虽然这些大量异常类可以帮助我们描述编程时出现的大部分异常情况,但是在程序开发中有时可能需要描述程序中特有的异常情况,例如在 ...
最新文章
- Trip to Saint Petersburg CodeForces-1250 C
- linux下安装wpasupplicant及配置
- db2不记录日志插入记录
- Fatfs文件系所有函数总结
- python完全支持面向对象编程_Python面向对象编程
- 特斯拉为何使用.NET 技术栈？
- Matplotlib - 折线图 plot() 所有用法详解
- java double 的精度_Java Double的精度问题
- Lync Server 2013群聊天室创建和简单测试
- iOS点击获取短信验证码按钮
- HttpClient那些事儿
- python电脑下载-Python3.9官方下载
- Javascript第四章定义函数的形式、回调函数第五课
- 百旺智能编码_极速开票，智能编码，一键匹配，颠覆了传统手动输入的开票模式，再也不用担心选错税收分类编码啦...
- 新代系统反向间隙参数_新代系统SYNTEC：调试参数
- 如何用手机远程协助长辈？我找出了6个最佳方法！（免ROOT）
- 彻底搞懂数据库内连接、外连接
- 五大浏览器的简单介绍
- swf转Word小技巧
- react native 的button点击变色以及禁用问题