手机京东页面页面主体和头部搜索

Posted 2020-09-09 HongMaJu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手机京东页面页面主体和头部搜索相关的知识，希望对你有一定的参考价值。

效果图：

base.css

/*重置样式*/
*,::before,::after{
    /*选择所有的标签*/
    margin:0;
    padding:0;
    /*清楚移动端默认的 点击高亮效果*/
    -webkit-tap-highlight-color:transparent;
    /*设置所有的都是以边框开始计算宽度 百分比*/
    -webkit-box-sizing:border-box;/*兼容*/
    box-sizing:border-box;
}
body{
    font-size:14px;
    font-family:"Microsoft YaHei",sans-serif;/*设备默认字体*/
    color:333;
}
a{
    color:333;
    text-decoration:none;/*不显示下划线*/
}
a:hover{
    text-decoration:none;/*不显示下划线*/
}
ul,ol{
    list-style:none;
}
input{
    border:none;
    outline:none;
    /*清除移动端默认的表单样式*/
    -webkit-appearance:none;
}
/*公共样式*/
.f_left{
    float:left;
}
.f_right{
    float:right;
}
.clearfix::before,.clearfix::after{
    content:"";
    height:0;
    line-height:0;
    display:block;
    visibility:hidden;
    clear:both;
}
[class^="icon_"]{
    background: url("../images/sprites.png") no-repeat;
    background-size:200px 200px;
}

index.css

.layout{
    width:100%;
    max-width: 640px;
    min-width: 300px;
    margin:0 auto;
    position: relative;

}
.jd_header{
    position: fixed;
    left: 0;
    top:0;
    height:40px;
    width:100%;

}
.jd_header>.jd_header_box{
    position: relative;
    width: 100%;
    max-width: 640px;
    min-width: 300px;
    margin:0 auto;
    background: red;
    height:40px;

}
.jd_header>.jd_header_box>.icon_logo{
    width:60px;
    height:36px;
    position: absolute;
    /*background: url("../images/sprites.png") no-repeat;*/
    /*background-size:200px 200px;*/
    background-position: 0 -103px;
    top: 4px;
    left: 10px;


}
.jd_header>.jd_header_box>.login{
    width: 50px;
    height: 40px;
    line-height:40px;
    text-align: center;
    color: #ffffff;
    position: absolute;
    right:0;
    top:0;
    font-size: 15px;

}
.jd_header>.jd_header_box>form{
    width:100%;
    padding-left:75px;
    padding-right:50px;
    height:40px;
    position: relative;


}
.jd_header>.jd_header_box>form>input{
    width:100%;
    height:30px;
    border-radius:15px;
    margin-top:5px;
    padding-left:10px;

}
.jd_header>.jd_header_box>form>.icon_search{
    height:20px;
    width:20px;
    position: absolute;
    background-position: -60px -109px;
    top:10px;
    left:85px;

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/index.css">

</head>
<body>
<div class="layout">
    <header class="jd_header">
        <div class="jd_header_box">
            <a href="#" class="icon_logo"></a>
            <form action="#">
                <span class="icon_search"></span>
                <input type="search" placeholder="提示站位">
            </form>
            <a href="#" class="login">登录</a>
        </div>



    </header>
</div>

</body>
</html>

1,href="#"

href=#与href=javascript:void(0)的区别

＃"包含了一个位置信息
默认的锚点是＃top 也就是网页的上端
而javascript:void(0) 仅仅表示一个死链接

2,样式中的>

选择标签时仅作用与儿子标签而不作用于孙子标签

3，fixed的用法

fixed总是以body为定位时的对象

4，提取公共样式

[attribute^=value] a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。
[attribute*=value] a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。

5，position的用法

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

以上是关于手机京东页面页面主体和头部搜索的主要内容，如果未能解决你的问题，请参考以下文章

mui 页面无法下滑拖拽主要体现在华为手机浏览器

cordova StatusBar插件的使用（设置手机状态栏颜色和页面头部颜色一致），做出和原生一样的页面效果体验

Vue开发实例（05）之搭建项目主页面头部导航主体等页面布局

thymeleaf引用公共页面

jquery-mobile.js这个做手机页面，怎么只让他中间组件可以上下拉动，而头部和底部组件，不动，一直显示

基于scroll的吸顶效果