input搜索框记录

最新推荐文章于 2024-04-30 17:59:49 发布

qq_43101834

最新推荐文章于 2024-04-30 17:59:49 发布

阅读量405

点赞数

分类专栏： html和css 实习学习

本文链接：https://blog.csdn.net/qq_43101834/article/details/113756953

版权

实习学习同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

html和css

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"">
    <title>商品搜索</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2367085_9vawwsb6io.css">
    <style>
        body,
		html {
			background-color: white;
			width: 100%;
		}
        /* search-box  start */
        .search_box{
            display: flex;
            align-items: center;
            padding:0.2rem;
            justify-content: space-around;
        }
        .search_icon{
            background-color:whitesmoke;
            display: flex;
            align-items: center;
            height:0.4rem;
            padding:0 0.1rem;
            flex:1;
            border-radius:0.25rem;
        }
        .icon-search-copy{
            color:gray;
            font-size:0.12rem;
        }
        input{
            border:0px;
            outline:none;
            margin-left:0.1rem;
            background-color:whitesmoke;
            width:80%;//长宽不为百分之百是因为要空出父元素圆角的距离，100%的话样式就会变形
            height:95%;
            font-size: 0.14rem;   
        }
        .search_text{
            font-size: 0.15rem;
            margin-left:0.1rem;
        }
        /* search-box end */
    </style>
</head>
<body>
    <div class="search_box">
        <div class="search_icon">
            <div class="iconfont icon-search-copy"></div>
            <input type="text" placeholder="搜索商品">
        </div>
        <div class="search_text">搜索</div>
    </div>
    <script src="../js/rem.js"></script>
    </body>

</html>

在这里插入图片描述

手写搜索框，涉及到rem单位转换适应不同设备，单独练习全文rem*100所得值为px单位

qq_43101834

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
input搜索框记录

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-sca
复制链接

扫一扫