猿创征文｜30天入门前端笔记 第四天CSS媒体查询

学习计划

• 今天一共有两个学习目标，就是CSS中引入字体图标和媒体查询的操作

字体图标的引入

• https://www.iconfont.cn/ 这个是字体图标库官网，可以在这里面找到很多需要的图标
• 找到之后将图标引入，CSS样式表，然后在页面调用，下面是实际操作

    
    
    
    
    


    

欢迎注册
已有注册？立即注册

 
    手机号:

 
    验证码:
    
    

        获取验证码
    
    
注册
    
阅读并同意 注册条款 
    

• CSS样式表部分

@import './font-icon/iconfont.css';
body{
    background-color: aqua;
    width: 100vw;
    height: 100vh;
}
*{
    margin: 0;
    padding: 0;
}
.main-box{
width: 50vw;
height: 80VH;
box-sizing: border-box;
padding: 20px;
border-radius:12px;
background: rgb(160, 160, 84);
margin: 30px;
}
h3{
    font-size: 20px ;color: rgb(95, 55, 5);
    line-height: 43px;
}
.tip{
font-size: 12px;
color: rgb(74, 44, 7);
line-height: 30px;
margin-bottom: 30px;
}
.tip span{
    color: blueviolet;
}
.row{
    padding-bottom: 20px;
    height: 25px;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
}
.code{
    margin-bottom: 30px;
}
.zu{
    background-color: aqua;
    border-radius: 20px;
    /* 圆角 */
    height: 40px;
    line-height: 40px;
    text-align: center;
    /* 居中 */
    margin-bottom: 25px;
    text-decoration:none
    }
    button:focus{
        background-color: aliceblue;
    }
.foot{
    text-align: center;
}
.tubiao{
    font-size: 25px;
    color: rgb(95,55,5);
}

上面的代码会生成一个模拟的登录界面，算是对前面内容的一个小总结，里面有涉及了盒模型，表单以及CSS选择器和字体图标的使用

• 字体图标库的文件复制到CSS文件夹后，可以使用@import ‘./font-icon/iconfont.css’;将它引入到我们自己的样式表中，合并到一起

媒体查询

• 媒体查询在我们想要根据设备的大致类型或者对特定的设备参数来修改网站时非常有用
• 每一条媒体查询语句都由一个可选的媒体类型和任意数量的媒体特性表达式后塍，可以使用多种逻辑操作生成多条媒体查询语句
• 比如可以用if语句判断多个不同的媒体查询的对应参数

    
    
    
    
    
    


    

欢迎注册
已有注册？立即注册

 
    手机号:

 
    验证码:
    
    

        获取验证码
    
    
注册
   
    
阅读并同意 注册条款 
    

• 媒体查询涉及到布局，明天就开始学习布局的相关内容，今天大概看了一下，布局的前提是在一个宽度固定而高度随内容增长的空间内进行布局
• 不可能在一个高宽都不限定的无限空间内进行布局

今日总结

• 今天学完之后明显感觉自己差不多可以写一些简单的小页面了，对一个页面的大概组成也有了了解
• 明天就开始学习定位和布局的内容，预计是两天时间
• 最后 还是那句话 学习就是不断地坚持 加油！！