前端学习 DAY04
2024-05-09 18:58:34
CSS属性选择器
<!DOCTYPE html>
<html>
<head><title>css属性选择器</title><style>/*包含你title属性的所有元素设置样式*//* [title]{color: red;} *//*属性和值的选择器*/[title=baidu]{color: red;}/*包含指定值的选择器*//*[title~=baidu]{color: red;}*//* [lang|=en]{color: red;} 包含en的*//*包含s的*//*[title*=s]{color: red;}*//*bai开头的*//*[title^=bai]{color: red;}*//*bai结束的*//*[title$=ld]{color: red;}*/</style>
</head>
<body><h1>标题1</h1><h1 title="Hello">标题2</h1><a title="baidu hello"href="https://www.baidu.com">百度一下</a><a title="baidu world"href="https://www.baidu.com">百度一下</a><a title="css" href="https://www.baidu.com">百度一下</a><p lang="en">你好</p><p lang="en-us">你好</p><p lang="en-gb">你好</p><p lang="us">你好</p>
</body>
</html>
CSS-display
<!DOCTYPE html>
<html>
<head><title>display</title><style>.hidden{/* visibility: hidden;*/ /*虽然元素隐藏了但是占据了空间影响力整个布局*/display: done; /*隐藏元素并且从布局中删除元素*/ }/* display: block 将行列元素更改成块级元素*/span{display: block;}/*display:inline;将元素设为内联元素*/div{display: inline;background-color: aqua;width: 200px;height: 200px;}/*块级元素和内联元素结合*//*div{display: inline-block;background-color: aqua;width: 200px;height: 200px;}*/</style>
</head>
<body><h1 class="hidden">我是标题</h1><h1>我是标题</h1><span>1234</span><span>5678</span><div>div1</div><div>div2</div></body>
</html>
CSS定位
<!DOCTYPE html>
<html>
<head><title>Document</title><style>h1{/*static正常布局行为,与原布局一样*//* position:static;*//* relative*在正常位置偏移给定的值，不影响其他元素相对定位并未脱离文档流元素发生偏移后，会在文档流未添加定位所在位置留下空白*/position: relative;top: 100px;left: 100px;}</style>
</head>
<body><h1>我是标题</h1><h2>我是标题</h2>
</body>
</html>
CSS绝对定位
<!DOCTYPE html>
<html>
<head><title>绝对元素</title><style>.box{display: inline-block;background-color: red;width: 100px;height: 100px;}/*position:absolute;m绝对定为原宿脱离文档流绝对定位元素相对于最近的非static祖先元素定位two元素不存在应用了定位祖先元素，相对于紧邻的祖先进行定位*/#two{position: absolute;top:20px;left: 20px;}.content{width: 500px;height: 500px;background-color: aqua;top:20px;left: 20px;}</style>
</head>
<body><div class="content"><div class="box" id="one">one</div><div class="box" id="two">two</div><div class="box" id="three">three</div><div class="box" id="four">four</div></body>
</html>
CSS固定定位
<!DOCTYPE html>
<html >
<head><title>固定定位</title><style>.box{background-color: aqua;width: 100px;height: 100px;}.outer{width: 500px;height: 300px;}#one{/*固定定位 相对于viewport视口 处于统一位置*/position: fixed;top: 80px;left: 10px;}</style></head>
<body><div class="outer"><p>7月4日，蚂蚁集团宣布面向全球开发者正式开源可信隐私计算框架“隐语”，采用 Apache-2.0 协议，代码托管至 GitHub、Gitee 两大平台。2016 年，“隐语”作为一个“实验项目”在蚂蚁诞生，从矩阵变换技术踩下第一个脚印，到可信执行环境（TEE），再到多方安全计算（MPC）、联邦学习（FL）等，一路以来不断丰富自身技术内涵，在金融、医疗等领域实际应用场景中有成功的落地应用经验。尽管隐私计算理论发展四十余年，在应用层面，至今依然存在着诸多行业必须跨越的障碍：隐私计算技术方向多样，不同场景下有其各自更为合适的技术解决方案；隐私计算学习曲线很高，非隐私计算背景的用户使用困难；隐私计算涉及领域众多 需要领域专家共同协作。隐私计算现阶段依旧是相对新兴的跨学科领域，涉及密码学、机器学习、数据库、可信硬件等多个领域，包含多方安全计算（MPC）、联邦学习（FL）、可信执行环境（TEE）、可信密态计算（TECC）等多种技术路线，涉及众多专业技术栈，要实现完善并保障安全并非易事。“隐语”的设计目标，是使得数据科学家和机器学习开发者无需了解底层技术细节，就可以非常容易地使用隐私计算技术进行数据分析和机器学习建模。<p>“隐语”通过良好可扩展的架构设计，用一套通用框架统一支持了包括 MPC、TEE、FL、HE、DP 在内的多种主流隐私计算技术，可以对多种技术进行灵活组合，针对不同应用场景提供不同的解决方案。</p><div class="box" id="one">one</div>
</body>
</html>
CSS粘性定位
<!DOCTYPE html>
<html lang="en">
<head><title>粘性定位</title><style>* {box-sizing: border-box;}dl{margin: 0;padding: 24px 0 0 0;}dt{/*粘性定位需要指定top，right，bottom，left其中之一，才可以使粘性定位生效元素在跨越特定阀值前为相对定位，之后为固定定位*/position: sticky;top:-1px;background-color: aquamarine;}</style>
</head>
<body><dl><dt>A</dt><dd>andrew</dd><dd>apparat</dd><dd>arcade</dd><dd>at</dd></dl><dl><dt>B</dt><dd>andrew</dd><dd>apparat</dd><dd>arcade</dd><dd>at</dd></dl><dl><dt>C</dt><dd>andrew</dd><dd>apparat</dd><dd>arcade</dd><dd>at</dd></dl><dl><dt>D</dt><dd>andrew</dd><dd>apparat</dd><dd>arcade</dd><dd>at</dd></dl>
</body>
</html>
css浮动
<style>#fater{background-color: aqua;width: 1000px;/*第二种方式 手动设置父元素高解决塌陷*/height: 200px; /*第三种方式 父级添加overflow属性*/overflow: hidden;}.box{background-color: red;width: 100px;height: 100px;display: inline-block;}#two{float:right; /*向左向右浮动*/}#one{float:right;}/*第一种方式 浮动元素下面添加空的div 设定clear:both清除浮动 解决边框塌陷*/.clear{clear:both;}/*第四种 父级添加伪类*/.clear::after{content: '';display: block;clear: both;}</style>
推荐使用第四种
z-index
z-index用来调整元素以及子元素在z轴上的顺序
z-index值较大的元素覆盖较低的元素
默认值是auto 可以设置正数，也可以设置负数
7阶层叠水平
1.最底层 background/border
2.负z-index
3.block块状水平盒子
4.float 浮动盒子
5.inline/inline-block 水平盒子
6.z-index：auto 或者z-index:0
7.最顶层 正z-index
后来居上原则:先画的在下面，后画的在上面
css层叠
<!DOCTYPE html>
<html >
<head><title>2D转换</title><style>div{position: relative;width: 500px;height: 500;background-color: aqua;}p{position: absolute;top: 50%;left: 50%;width: 200px;height: 200px;background-color: red;/*移动不影响其他元素的位置transform: translate(-50%,-50%); 代表x轴 y轴的移动距离*/transform:translateX(200px);transform:translateY(200px);/*旋转 角度为45度*/transform: rotate(45deg);/*设置旋转中心*/transform-origin: 20px 20px; /*缩放 只写一个参数 第二个参数和第一个参数一样*/transform: scale(2);}span{/*对行内标签没有效果*/transform: translate(200px);}</style>
</head>
<body><div><p></p></div><span>123</span>
</body>
</html>
css动画
<!DOCTYPE html>
<html>
<head><title>动画</title><style>div{width: 100px;height: 100px;background-color: brown;position: relative;/*移动起来需要添加*/animation:myfirst 5s; /*设置时间*/}@keyframes myfirst {0%{background-color: brown;}25%{background-color: aqua;}50%{background-color: aquamarine;}100%{background-color: blanchedalmond;}}</style>
</head>
<body><div></div>
</body>
</html>
前端学习 DAY04相关推荐
- 【FE前端学习】第二阶段任务-基础
技能学习部分: 1.需要熟练掌握HTML标签以及CSS各个常用属性. 2.掌握CSS3 常用属性 3.掌握jquery的基本用法,对于JS基本逻辑语句需要熟练掌握 上文 [FE前端学习]第二阶段任务- ...
- Web前端学习有哪些技巧?
想要学好web前端技术,在学习过程中找到合适的方法和技巧,那么在实际学习过程中会更加的容易和快速掌握知识重点,尤其是对于初学者尤为关键,下面小编就为大家详细的介绍一下Web前端学习有哪些技巧?希望能够 ...
- “计算机之子”winter：我的前端学习路线与方法
你好,我是winter.今天我们一起来聊聊前端的学习路线与方法. 到现在为止,前端工程师已经成为研发体系中的重要岗位之一.可是,与此相对的是,我发现极少或者几乎没有大学的计算机专业愿意开设前端课程,更 ...
- python比前端好学吗_前端学习到底难不难？
难易程度是相对的,不是绝对的. 前端学习相对于java,python等肯定是更为简单的.精通会有难度,而且更新速度很快,需要不断的充实自己,提升自己,这也是一个难点. 前端学习初期,不知道该怎么学,学 ...
- hbuilder前端需要的插件_最新web前端学习路线
随着互联网的深入发展,前端开发工程师已成为市场上极具竞争力的人才.许多学生,包括以前的UI,java,或完全零基础,想学习的前端.下面的思维导图是在互联网上广泛传播的前端学习地图.许多初学者说,当他们 ...
- html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解
原标题:web前端学习技术之对HTML5 智能表单的理解 Html5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交. - t ...
- 前端学习路线_前端学习路线图
2020年全新前端学习路线图分享给大家! 学习是一个循序渐进的过程,是一件非常难得坚持的事情.如果真的想学习前端开发,一定要下决心! 我这里分享给你的前端学习路线图,希望对你有帮助,以下为2020年更 ...
- react实战项目_前端学习路线图--从网页设计到项目开发
前端学习路线是螺旋上升的,需要耗费的时间和精力不比其他编程的少,由于其稳健性的特点,使其成为大多数企业开发的刚需编程语言.在网上看到有很多的前端学习路线图,但大部分的前端学习路线图是很零碎的,没有系统 ...
- 黑马程序员：从零基础到精通的前端学习路线
黑马程序员:从零基础到精通的前端学习路线 随着互联网的深入发展,前端开发工程师一跃成为市场上非常抢手的人才.很多同学,包括以前做UI的.Java的.或者对于IT完全零基础的同学都想学习前端.下图是网上 ...
最新文章
- WIN7、XP局域网共享问题和重置IP协议
- boost::hana::value用法的测试程序
- 牛客练习赛 58——树链剖分
- C#省市二级联动（王者荣耀挑选英雄为例）
- CompletableFuture详解~异常处理
- 千寻和省cors精度对比_测量员新手上路攻略：解析省CORS和千寻CORS账号区别及其如何选择运用...
- 为了测试自动驾驶，福特将车带到了一个仿造城市
- 从天天爱消除和节奏大师的用户对于论坛形式的分析
- 杭电计算机2011年硕士研究生笔试详解
- 库卡 KUKA 机器人仿真软件sim pro 教程
- 雷电4模拟器安装xposed框架（2022年）
- 修改判断名字重复，保证名字唯一
- python 随机生成6位数字+字母的密码
- 校验18位身份证号码的正确性
- OC中继承代理委托类别
- C#发送邮件 SMTP
- 联想笔记本快捷键控制千千静听 2009年10月2日19:09:44
- android直播sdk+美颜,直播美颜sdk的三大功能及注意事项
- 人工智能革命：从ANI到AGI的道路
- 线程的故事（了解线程生命周期）