|
|
3分56秒 步骤 1 : 效果 步骤 2 : 布局 步骤 3 : 纯html 步骤 4 : 加上样式 步骤 5 : 样式讲解 步骤 6 : 再整合在一起
并不是所有的搜索页面都和主页的那个一样。 比如在天猫注册页面，使用的搜索页面就是一个相对简单点的搜索页面，这个页面也会被不同的页面所包含
<!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.simpleSearchDiv{
background-color: #C40000;
width: 300px;
margin: 10px 20px 40px;
padding: 1px;
height: 40px;
display: block;
}
div.simpleSearchDiv input{
width: 225px;
border: 1px solid transparent;
height: 34px;
margin: 2px;
outline:none;
}
div.simpleSearchDiv button{
width: 60px;
border: 1px solid transparent;
background-color: #C40000;
color: white;
font-size: 14px;
/* 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.simpleLogo{
position: absolute;
left: 10px;
top: 50px;
width: 140px;
}
body{
font-size: 12px;
font-family: Arial;
}
a{
color:#999;
}
a:hover{
text-decoration:none;
color: #C40000;
}
</style>
<div>
<a href="#nowhere">
<img src="https://how2j.cn/tmall../../../img/site/simpleLogo.png" class="simpleLogo" id="simpleLogo">
</a>
<div class="simpleSearchDiv pull-right">
<input type="text" name="keyword" placeholder="平衡车 原汁机">
<button type="button" class="searchButton">搜天猫</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 style="clear:both"></div>
</div>
增值内容，请先登录
模仿天猫前端，单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力，积累宝贵前端项目经验。总计28张页面布局分析图， 33个js交互代码讲解， 395个选择器，1150个样式（每个均有注释）， 涵盖全部68个知识点，267个学习步骤,包含一共21个讲解视频，累计时长11小时44分25秒，大小1.97G，为简历加上一个有吸引力的砝码。
学习期间，遇到本项目任何问题，都可以得到我的专业指导。 (购买一次，即可访问天猫前端所有知识点)
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
增值内容，请先登录
模仿天猫前端，单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力，积累宝贵前端项目经验。总计28张页面布局分析图， 33个js交互代码讲解， 395个选择器，1150个样式（每个均有注释）， 涵盖全部68个知识点，267个学习步骤,包含一共21个讲解视频，累计时长11小时44分25秒，大小1.97G，为简历加上一个有吸引力的砝码。
学习期间，遇到本项目任何问题，都可以得到我的专业指导。 (购买一次，即可访问天猫前端所有知识点)
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
<!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 src="https://how2j.cn/tmall../../../img/site/simpleLogo.png" class="simpleLogo" id="simpleLogo">
</a>
<div class="simpleSearchDiv pull-right">
<input type="text" name="keyword" placeholder="平衡车 原汁机">
<button type="button" class="searchButton">搜天猫</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 style="clear:both"></div>
</div>
增值内容，请先登录
模仿天猫前端，单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力，积累宝贵前端项目经验。总计28张页面布局分析图， 33个js交互代码讲解， 395个选择器，1150个样式（每个均有注释）， 涵盖全部68个知识点，267个学习步骤,包含一共21个讲解视频，累计时长11小时44分25秒，大小1.97G，为简历加上一个有吸引力的砝码。
学习期间，遇到本项目任何问题，都可以得到我的专业指导。 (购买一次，即可访问天猫前端所有知识点)
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
<!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.simpleSearchDiv{
background-color: #C40000;
width: 300px;
margin: 10px 20px 40px;
padding: 1px;
height: 40px;
display: block;
}
div.simpleSearchDiv input{
width: 225px;
border: 1px solid transparent;
height: 34px;
margin: 2px;
outline:none;
}
div.simpleSearchDiv button{
width: 60px;
border: 1px solid transparent;
background-color: #C40000;
color: white;
font-size: 14px;
/* 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.simpleLogo{
position: absolute;
left: 10px;
top: 50px;
width: 140px;
}
body{
font-size: 12px;
font-family: Arial;
}
a{
color:#999;
}
a:hover{
text-decoration:none;
color: #C40000;
}
</style>
<div>
<a href="#nowhere">
<img src="https://how2j.cn/tmall../../../img/site/simpleLogo.png" class="simpleLogo" id="simpleLogo">
</a>
<div class="simpleSearchDiv pull-right">
<input type="text" name="keyword" placeholder="平衡车 原汁机">
<button type="button" class="searchButton">搜天猫</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 style="clear:both"></div>
</div>
增值内容，请先登录
模仿天猫前端，单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力，积累宝贵前端项目经验。总计28张页面布局分析图， 33个js交互代码讲解， 395个选择器，1150个样式（每个均有注释）， 涵盖全部68个知识点，267个学习步骤,包含一共21个讲解视频，累计时长11小时44分25秒，大小1.97G，为简历加上一个有吸引力的砝码。
学习期间，遇到本项目任何问题，都可以得到我的专业指导。 (购买一次，即可访问天猫前端所有知识点)
增值内容，点击购买
使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。 如果是误封 ，请联系站长，谢谢
<!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.simpleSearchDiv{
background-color: #C40000;
width: 300px;
margin: 10px 20px 40px;
padding: 1px;
height: 40px;
display: block;
}
div.simpleSearchDiv input{
width: 225px;
border: 1px solid transparent;
height: 34px;
margin: 2px;
outline:none;
}
div.simpleSearchDiv button{
width: 60px;
border: 1px solid transparent;
background-color: #C40000;
color: white;
font-size: 14px;
/* 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.simpleLogo{
position: absolute;
left: 10px;
top: 50px;
width: 140px;
}
body{
font-size: 12px;
font-family: Arial;
}
a{
color:#999;
}
a:hover{
text-decoration:none;
color: #C40000;
}
</style>
<div>
<a href="#nowhere">
<img src="https://how2j.cn/tmall../../../img/site/simpleLogo.png" class="simpleLogo" id="simpleLogo">
</a>
<div class="simpleSearchDiv pull-right">
<input type="text" name="keyword" placeholder="平衡车 原汁机">
<button type="button" class="searchButton">搜天猫</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 style="clear:both"></div>
</div>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
