目录
一、flex布局
1、详细的使用解释
2、简单例子
3、flex布局要认识两个轴
4、版心布局
5、13届蓝桥真题 (1,6)
二、grid布局
1、应用
2、代码例子
三、CSS动画
1、注意区别
2、代码例子
3、13届蓝桥真题 (2)
4、更多transform属性的介绍
四、媒体查询
HTML基础第六课(冲浪笔记6)_申小兮IU的博客-CSDN博客Flex、方向排列、换行、Flex多轴、order、Flex的放大缩小https://blog.csdn.net/qq_51478745/article/details/125712554
Document
注意:利用编译器提供的调试工具,直接编辑调整需要的布局,然后直接copy代码
(1)主轴:x轴
(2)交叉轴:y轴
(1)含义:设计师设定的一个区域,比如宽度1260px、1024px,目前主流的设计稿的大小,在针对不同设备,不同屏幕分辨率,进行版心的调整
(2)代码例子
Document
(1)第一题:水果拼盘
/* TODO:待补充代码 */
#pond {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
(2)第六题:蓝桥知识网
蓝桥知识网
蓝桥知识网
- 首页
- 热门技术
- 使用手册
- 知识库
- 练习题
- 联系我们
- 更多
蓝桥云课
随时随地丰富你的技术栈!
加入我们
人工智能
人工智能亦称智械、机器智能,指由人制造出来的机器所表现出来的智能。通常人工智能是指通过普通计算机程序来呈现人类智能的技术。
前端开发
前端开发是创建 WEB 页面或 APP 等前端界面呈现给用户的过程,通过 HTML,CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。
后端开发
后端开发是实现页面的交互逻辑,通过使用后端语言来实现页面的操作功能,例如登录、注册等。
信息安全
ISO(国际标准化组织)的定义为:为数据处理系统建立和采用的技术、管理上的安全保护,为的是保护计算机硬件、软件、数据不因偶然和恶意的原因而遭到破坏、更改和泄露。
/*
TODO:请补充代码
*/
*{
margin: 0;
padding: 0;
}
.header{
width: 100%;
background-color: #a6b1e1;
padding-top: 13px;
}
.head{
width: 1024px;
height: 46px;
margin: auto;
/* background-color: blanchedalmond; */
display: flex;
justify-content: space-between;
align-items: center;
}
.logo{
font-size: 18px;
color: white;
}
ul{
display: flex;
}
li{
font-size: 16px;
color: white;
margin: auto 16px;
list-style: none;
}
.header-content{
width: 1024px;
height: 427px;
margin: auto;
padding-top: 30px;
box-sizing: border-box;
}
.title{
text-align: center;
font-size: 45px;
color: black;
margin-bottom: 62px;
}
.text{
font-size: 21px;
font-weight: 200;
color: white;
text-align: center;
margin-bottom: 36px;
}
.join{
width: 120px;
color: #efbfbf;
margin: auto;
text-align: center;
padding: 10px 0px;
font-size: 18px;
border: 2px solid #efbfbf;
border-radius: 2px;
box-shadow: inset 0 0 0 2px #efbfbf;
}
.body{
width: 100%;
}
.body-content{
width: 1024px;
height: 302px;
margin: auto;
/* background-color: #a6b1e1; */
margin-top: 74px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.box{
height: 144px;
width: calc((1024px - 20px) / 2);
}
.box-title{
font-size: 30px;
font-weight: 200;
color: black;
}
.box-text{
font-size: 18px;
color: #aaa;
line-height: 1.4em;
}
.footer{
width: 100%;
border-top: 1px solid gray;
}
.foot{
width: 1024px;
height: 80px;
margin: auto;
padding-top: 30px;
box-sizing: border-box;
}
.foot-text{
text-align: center;
font-size: 14px;
color: #aaa;
}
.foot-text:nth-of-type(2){
margin-top: 10px;
}
(1)自定义行列数及行列的长度
.grid{
width: 500px;
height: 500px;
background-color: aqua;
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 200px 200px 200px;
}
当设置的行列总长大于父级所设置的宽高,会出现溢出
(2)解决溢出最好的方法就是将所有的行列长度用属性值auto替代,这样就是自动计算每个各自的大小
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
(3)通过函数repeat()设置行列
grid-template-columns: repeat(3,1fr);/* 3是列数,1fr是均等分,fr是单位 */
grid-template-rows: repeat(3,1fr);/* 3是行数 */
其效果同(2)
(4)常见的形式:高度由内容撑开,这时候就需要内容与内容间的间距
Document
(5) 内容居中
①法一:父级设置居中
justify-items: center;
更多设置技巧同样可以在调试器上直接设置自己需要的样式,然后直接复制代码
②法二:在子级本身设置居中
justify-self: center;
(6)设置区域模板,快速定位子元素位置
该方法能够特别容易编写出骰子
Document
Document
transform(转换)、transition(过渡)、translate(位移)
Document
/*TODO:请补充 CSS 代码*/
#box:hover #item1{
transform: rotate(-60deg);
}
#box:hover #item2{
transform: rotate(-50deg);
}
#box:hover #item3{
transform: rotate(-40deg);
}
#box:hover #item4{
transform: rotate(-30deg);
}
#box:hover #item5{
transform: rotate(-20deg);
}
#box:hover #item6{
transform: rotate(-10deg);
}
#box:hover #item7{
transform: rotate(10deg);
}
#box:hover #item8{
transform: rotate(20deg);
}
#box:hover #item9{
transform: rotate(30deg);
}
#box:hover #item10{
transform: rotate(40deg);
}
#box:hover #item11{
transform: rotate(50deg);
}
#box:hover #item12{
transform: rotate(60deg);
}
小伙伴们可以参考小编的这篇文章
HTML基础第五课(冲浪笔记5)_color: aqua;_申小兮IU的博客-CSDN博客媒体查询、动画效果、清除浮动、过渡属性、calc函数、透明度、鼠标手势、最大最小宽度、transform属性、https://blog.csdn.net/qq_51478745/article/details/125700227
代码例子:
Document