CSS样式引入字体图标实例演示和媒体查询实例演示 - 大前端

首页 > 博客列表 > CSS样式引入字体图标实例演示和媒体查询实例演示

博主信息

博文 36

粉丝 1

访问量 37666

专题推荐

更多>

引入字体图标

html代码

<!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="css/css.css">
</head>
<body>
  <form action="">
        <fieldset>
            <legend class="dl iconfont icon-denglu1">用户登录</legend>
            <div class="main-box">
                <div class="tel iconfont icon-denglu"><label for="">手机号：<input type="tel" maxlength="11" id="mobile" class="input-tel" ></label></div>
                <div class="yzm iconfont icon-mimadenglu"><label for="">密  码：<input type="tel" maxlength="6" id="mobile" class="input-text"></label>
                </div>  
                    <div  class="row">
                        <button type="button" id="login" class="btn">登  录</button>
                    </div>
                    <div class="foot"><input type="checkbox" checked>阅读并同意 <a href="">注册条款</a> </div>
            </div>
        </fieldset>
  </form>
</body>
</html>

css代码

@import url(font_icon/iconfont.css);
fieldset{
    width: 50%;
    padding-top: 20px;
}
.dl{
    font-size: 25px;
    color: red;
}
.main_box{
    width: auto;
}
.tel, .yzm{
    width: auto;
    height: 40px;
}
.input-tel{
    width: 10rem;
}
.input-text{
    width: 10rem;
}
.yzm{
    width: 100%;
}
.btn{
    width: 96%;
    background-color: #007bff;
    text-align: center;
    padding: 1.2rem 0rem;
    margin: 1rem auto;
    color: white;
    border-radius: 0.6rem;
    cursor: pointer;
    display: block;
    box-sizing: border-box;
    border: 0rem;
}
.foot{
    text-align: center;
}

网上下载需要的字体图标，用@import将CSS样式引入自己的CSS样式表中，可以自定义样式，如：颜色、大小等。

运行效果

媒体查询

html代码

<!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="css/css.css">
</head>
<body>
  <form action="">
    <div class="main-box">
        <fieldset>
                <legend class="dl iconfont icon-denglu1">用户登录</legend>
                    <div class="tel iconfont icon-denglu"><label for="">手机号：<input type="tel" maxlength="11" id="mobile" class="input-tel" ></label></div>
                    <div class="yzm iconfont icon-mimadenglu"><label for="">密  码：<input type="tel" maxlength="6" id="mobile" class="input-text"></label>
                    </div>  
                        <div  class="row">
                            <button type="button" id="login" class="btn">登  录</button>
                        </div>
                        <div class="foot"><input type="checkbox" checked>阅读并同意 <a href="">注册条款</a> </div>
            </fieldset>
    </div>
  </form>
</body>
</html>

css代码

@import url(font_icon/iconfont.css);
@media(min-width :650px){
    .main-box{
        background-color: rgb(234, 253, 190);
    }
    }
@media(max-width:999px)and(min-width :700px){
    .main-box{
        background-color: rgb(243, 185, 255);
}
}
@media(max-width:799px)and(min-width :600px){
    .main-box{
        background-color: rgb(116, 116, 116);
    }
}
@media(max-width:599px)and(min-width :400px){
    .main-box{
        background-color: rgb(255, 255, 255);
    }
}
@media(max-width:599px)and(min-width :400px){
    .main-box{
        background-color: rgb(255, 255, 0);
    }
}
@media(max-width:399px)and{
    .main-box{
        background-color: rgb(9, 9, 9);
    }
}
fieldset{
    /* width: 50%; */
    padding-top: 20px;
}
.dl{
    font-size: 25px;
    color: red;
}
.tel, .yzm{
    width: auto;
    height: 40px;
}
.input-tel{
    width: 10rem;
}
.input-text{
    width: 10rem;
}
.yzm{
    width: 100%;
}
.btn{
    width: 96%;
    background-color: #007bff;
    text-align: center;
    padding: 1.2rem 0rem;
    margin: 1rem auto;
    color: white;
    border-radius: 0.6rem;
    cursor: pointer;
    display: block;
    box-sizing: border-box;
    border: 0rem;
}
.foot{
    text-align: center;
}

运行效果

批改老师：

PHPz

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

如何快速创建前端开发环境

2022-07-05 17:12:50