蓝桥杯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、这边小编再来个简单例子，推荐一个编写布局小技巧

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

3、flex布局要认识两个轴

（1）主轴：x轴

（2）交叉轴：y轴

4、版心布局

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

（2）代码例子

 

5、13届蓝桥真题 （1，6）

（1）第一题：水果拼盘

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

 （2）第六题：蓝桥知识网

  
    
    
    
    
  
  
    
    

      

        
蓝桥知识网
        

          
首页
          
热门技术
          
使用手册
          
知识库
          
练习题
          
联系我们
          
更多
        
      
      

        
蓝桥云课
        
随时随地丰富你的技术栈！
        
加入我们
      
    
    

      

        

          
人工智能
          
人工智能亦称智械、机器智能，指由人制造出来的机器所表现出来的智能。通常人工智能是指通过普通计算机程序来呈现人类智能的技术。
        
        

          
前端开发
          
前端开发是创建 WEB 页面或 APP 等前端界面呈现给用户的过程，通过 HTML，CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
        
        

          
后端开发
          
后端开发是实现页面的交互逻辑，通过使用后端语言来实现页面的操作功能，例如登录、注册等。
        
        

          
信息安全
          
ISO（国际标准化组织）的定义为：为数据处理系统建立和采用的技术、管理上的安全保护，为的是保护计算机硬件、软件、数据不因偶然和恶意的原因而遭到破坏、更改和泄露。
        
      
    
    

      

        
© 蓝桥云课 2022
        
京公网安备 11010102005690 号 | 京 ICP 备 2021029920 号
      
    
  

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

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

（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）常见的形式：高度由内容撑开，这时候就需要内容与内容间的间距

（5） 内容居中

①法一：父级设置居中

justify-items: center;

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

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

justify-self: center;

（6）设置区域模板，快速定位子元素位置

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

---

三、CSS动画

1、注意区别

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

2、代码例子

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

---

四、媒体查询

代码例子：