蓝桥杯Web组备赛笔记1

目录

一、flex布局

1、详细的使用解释

2、简单例子

3、flex布局要认识两个轴

4、版心布局

5、13届蓝桥真题 (1,6)

二、grid布局

1、应用

2、代码例子

三、CSS动画

1、注意区别

2、代码例子

3、13届蓝桥真题 (2)

4、更多transform属性的介绍

四、媒体查询


一、flex布局

1、详细的使用解释,小伙伴们可以看小编的下面这篇文章

HTML基础第六课(冲浪笔记6)_申小兮IU的博客-CSDN博客Flex、方向排列、换行、Flex多轴、order、Flex的放大缩小https://blog.csdn.net/qq_51478745/article/details/125712554

2、这边小编再来个简单例子,推荐一个编写布局小技巧




    
    
    
    Document
    


    

注意:利用编译器提供的调试工具,直接编辑调整需要的布局,然后直接copy代码

蓝桥杯Web组备赛笔记1_第1张图片

3、flex布局要认识两个轴

(1)主轴:x轴

(2)交叉轴:y轴

蓝桥杯Web组备赛笔记1_第2张图片

4、版心布局

(1)含义:设计师设定的一个区域,比如宽度1260px、1024px,目前主流的设计稿的大小,在针对不同设备,不同屏幕分辨率,进行版心的调整

(2)代码例子




    
    
    
    Document
    


    

蓝桥杯Web组备赛笔记1_第3张图片 蓝桥杯Web组备赛笔记1_第4张图片

5、13届蓝桥真题 (1,6)

(1)第一题:水果拼盘

/* TODO:待补充代码 */
#pond {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

蓝桥杯Web组备赛笔记1_第5张图片

 (2)第六题:蓝桥知识网

蓝桥杯Web组备赛笔记1_第6张图片



  
    
    
    蓝桥知识网
    
  
  
    
    
  • 首页
  • 热门技术
  • 使用手册
  • 知识库
  • 练习题
  • 联系我们
  • 更多
蓝桥云课
随时随地丰富你的技术栈!
加入我们
人工智能
人工智能亦称智械、机器智能,指由人制造出来的机器所表现出来的智能。通常人工智能是指通过普通计算机程序来呈现人类智能的技术。
前端开发
前端开发是创建 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;
}

二、grid布局

1、应用:适用于格子布局,商品列表

2、代码例子

(1)自定义行列数及行列的长度

.grid{
    width: 500px;
    height: 500px;
    background-color: aqua;
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 200px 200px 200px;
}

蓝桥杯Web组备赛笔记1_第7张图片

当设置的行列总长大于父级所设置的宽高,会出现溢出 

(2)解决溢出最好的方法就是将所有的行列长度用属性值auto替代,这样就是自动计算每个各自的大小

grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;

蓝桥杯Web组备赛笔记1_第8张图片

(3)通过函数repeat()设置行列

grid-template-columns: repeat(3,1fr);/* 3是列数,1fr是均等分,fr是单位 */
grid-template-rows: repeat(3,1fr);/* 3是行数 */

其效果同(2)

(4)常见的形式:高度由内容撑开,这时候就需要内容与内容间的间距




    
    
    
    Document
    


    

蓝桥杯Web组备赛笔记1_第9张图片

(5) 内容居中

①法一:父级设置居中

justify-items: center;

蓝桥杯Web组备赛笔记1_第10张图片

更多设置技巧同样可以在调试器上直接设置自己需要的样式,然后直接复制代码

蓝桥杯Web组备赛笔记1_第11张图片

②法二:在子级本身设置居中

justify-self: center;

(6)设置区域模板,快速定位子元素位置

该方法能够特别容易编写出骰子




    
    
    
    Document
    


    

蓝桥杯Web组备赛笔记1_第12张图片




    
    
    
    Document
    


    

蓝桥杯Web组备赛笔记1_第13张图片


三、CSS动画

1、注意区别

transform(转换)、transition(过渡)、translate(位移)

2、代码例子




    
    
    
    Document
    


    

3、13届蓝桥真题 (2)

/*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);
}

4、更多transform属性的介绍

小伙伴们可以参考小编的这篇文章

HTML基础第五课(冲浪笔记5)_color: aqua;_申小兮IU的博客-CSDN博客媒体查询、动画效果、清除浮动、过渡属性、calc函数、透明度、鼠标手势、最大最小宽度、transform属性、https://blog.csdn.net/qq_51478745/article/details/125700227


四、媒体查询

代码例子:




    
    
    
    Document
    


    

蓝桥杯Web组备赛笔记1_第14张图片

你可能感兴趣的:(蓝桥杯Web组,html,css,html5)