CSS中引入字体图标以及实例演示媒体查询 - 大前端

首页 > 博客列表 > CSS中引入字体图标以及实例演示媒体查询

博主信息

博文 29

粉丝 1

访问量 25198

专题推荐

更多>

用CSS方式插入字体图标并自定义样式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
    <div class="main-box">
<span class="iconfont icon-vip-fill tubiao">欢迎注册</span>
<p class="tip">已有注册？<span class="login-btn">立即注册</span>
</p>
<div class="row"> 
    <label for="">手机号:<input type="tel" maxlength="11" id="mobile" ></label>
</div>
<div class="row"> 
    <label for="">验证码:<input type="tel" maxlength="6" id="mobile" style=" width:120px""></label>
    </div>
    <div class="code" id="codemsg">
        <button>获取验证码</button>
    </div>
    <div  class="zu">注册</div>
    <div class="foot"><input type="checkbox" checked>阅读并同意 <a href="">注册条款</a> </div>
    </div>
</body>
</html>

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

在网上下载好需要的字体图标之后，用@import将CSS样式引入自己的CSS样式表中，然后进行自定义样式

媒体查询实例演示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <link rel="stylesheet" href="demo.css">
    <style>
        /* 媒体查询 */
/* 因为是PC端优先  所以先从大尺寸开始适配 */
@media(min-width :1000px){
.main-box{
    background-color: rgb(160, 160,84);
}
/* 当可视页面最小1000PX时 */
}
@media(max-width:999px)and(min-width :800px){
    .main-box{
        background-color: rgb(30, 30, 10);
}
}
/* 当可视页面最小800PX 最大999PX时 */
@media(max-width:799px)and(min-width :600px){
    .main-box{
        background-color: rgb(116, 116, 116);
    }
}
/* 当可视页面最大799PX  最小600PX时 */
@media(max-width:599px)and(min-width :400px){
    .main-box{
        background-color: rgb(255, 255, 255);
    }
}
/* 当可视页面最大599PX最小400PX时 */
@media(max-width:599px)and(min-width :400px){
    .main-box{
        background-color: rgb(255, 255, 0);
    }
}
/* 当可视页面最大599PX最小400PX时 */
@media(max-width:399px)and{
    .main-box{
        background-color: rgb(9, 9, 9);
    }
}
/* 当可视页面最大不超过399PS时 */
    </style>
</head>
<body>
    <div class="main-box">
<span class="iconfont icon-vip-fill tubiao">欢迎注册</span>
<p class="tip">已有注册？<span class="login-btn">立即注册</span>
</p>
<div class="row"> 
    <label for="">手机号:<input type="tel" maxlength="11" id="mobile" ></label>
</div>
<div class="row"> 
    <label for="">验证码:<input type="tel" maxlength="6" id="mobile" style=" width:120px""></label>
    </div>
    <div class="code" id="codemsg">
        <button>获取验证码</button>
    </div>
    <div  class="zu">注册</div>   
    <div class="foot"><input type="checkbox" checked>阅读并同意 <a href="">注册条款</a> </div>
    </div>
</body>
</html>

布局的前提是用户在一个宽度固定，而高度随着内容增长的空间内进行布局（不可能在一个无限的空间内进行布局，宽度或者高度要有一个固定）

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

markdown的实际应用

2022-07-01 23:15:54