慢慢做一个模仿天猫网站-4

最新推荐文章于 2024-04-22 23:06:24 发布

程序员大波

最新推荐文章于 2024-04-22 23:06:24 发布

阅读量660

点赞数

本文链接：https://blog.csdn.net/m0_37089517/article/details/104851776

版权

搜索栏怎么写？
看不懂直接看这里

步骤 1 :

效果
在这里插入图片描述

步骤 2 :

布局

搜索栏所在的div是一个居中的div

这个居中的div，包含一个子div，其中是平衡车 | 扫地机器人 | 原汁机 | 冰箱等信息

左侧的图片使用绝对定位的方式，这样就可以很方便的做到图片和搜索栏div水平放置的效果
在这里插入图片描述

步骤3：

代码

运行效果
在这里插入图片描述

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
 
<div>
    <a href="#nowhere"> <img class="logo" src="https://how2j.cn/tmall/img/site/logo.gif"
        id="logo">
    </a>
   
        <div class="searchDiv">
            <input type="text" placeholder="时尚男鞋  太阳镜 " name="keyword">
            <button class="searchButton" type="submit">搜索</button>
            <div class="searchBelow">
                <span> <a href="#nowhere"> 平衡车 </a> <span>|</span>
                </span> <span> <a href="#nowhere"> 扫地机器人 </a> <span>|</span>
                </span> <span> <a href="#nowhere"> 原汁机 </a> <span>|</span>
                </span> <span> <a href="#nowhere"> 冰箱 </a></span>
            </div>
        </div>
</div>
   
<div style="height:50px"></div>

步骤 4 :

加上样式

在这里插入图片描述

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.searchDiv{
    background-color: #C40000;
    width: 400px;
    margin: 50px auto;
    padding: 1px;
    height: 40px;
    display: block;
}
div.searchDiv input{
    width: 275px;
    border: 1px solid transparent;
    height: 36px;
    margin: 1px;
    outline:none;
}
div.searchDiv button{
    width: 110px;
    border: 1px solid transparent;
    background-color: #C40000;
    color: white;
    font-size: 20px;
    font-weight: bold;
}
div.searchBelow{
    margin-top: 3px;
    margin-left: -20px;
}
div.searchBelow span{
    color: #999;
}
div.searchBelow a{
    padding: 0px 20px 0px 20px;
    font-size: 14px;
}
img.logo{
    position: absolute;
    left: 0px;
    top: 30px;
    z-index:-1;
}
body{
    font-size:12px;
    font-family:Arial;
}
a{
    color:#999;
}
a:hover{
    text-decoration:none;
    color:#C40000;
}
</style>
 
<div>
    <a href="#nowhere"> <img class="logo" src="https://how2j.cn/tmall/img/site/logo.gif"
        id="logo">
    </a>
   
        <div class="searchDiv">
            <input type="text" placeholder="时尚男鞋  太阳镜 " name="keyword">
            <button class="searchButton" type="submit">搜索</button>
            <div class="searchBelow">
                <span> <a href="#nowhere"> 平衡车 </a> <span>|</span>
                </span> <span> <a href="#nowhere"> 扫地机器人 </a> <span>|</span>
                </span> <span> <a href="#nowhere"> 原汁机 </a> <span>|</span>
                </span> <span> <a href="#nowhere"> 冰箱 </a></span>
            </div>
        </div>
</div>
   
<div style="height:50px"></div>

在这里插入图片描述
继续努力学下去