今天是培训的第三天，天气依旧晴朗。。。

上午老师讲昨天的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中是定义了很多的异常类的,虽然这些大量异常类可以帮助我们描述编程时出现的大部分异常情况,但是在程序开发中有时可能需要描述程序中特有的异常情况,例如在 ...

java培训记录Day03 2022/3/16星期三

今日任务：

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 的透明度

导航栏

全高固定垂直导航栏

水平导航栏

固定的导航栏

固定在顶部

固定在底部

粘性导航栏

下拉菜单

基础的下拉菜单

java培训记录Day03 2022/3/16星期三相关推荐

最新文章

热门文章