搜索欄怎麼寫？
看不懂直接看這裏
步驟 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>
