how2j.cn


3分56秒
本视频采用html5方式播放,如无法正常播放,请将浏览器升级至最新版本,推荐火狐,chrome,360浏览器 如果装有迅雷,播放视频呈现直接下载状态,请调整 迅雷系统设置-基本设置-启动-监视全部浏览器 (去掉这个选项)

步骤 1 : 效果   
步骤 2 : 布局   
步骤 3 : 纯html   
步骤 4 : 加上样式   
步骤 5 : 样式讲解   
步骤 6 : 再整合在一起   

并不是所有的搜索页面都和主页的那个一样。 比如在天猫注册页面,使用的搜索页面就是一个相对简单点的搜索页面,这个页面也会被不同的页面所包含
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://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="http://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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
增值内容,请先登录
模仿天猫前端,单纯使用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="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> </head> <div> <a href="#nowhere"> <img src="http://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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
增值内容,请先登录
模仿天猫前端,单纯使用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="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://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="http://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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
增值内容,请先登录
模仿天猫前端,单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力,积累宝贵前端项目经验。总计28张页面布局分析图, 33个js交互代码讲解, 395个选择器,1150个样式(每个均有注释), 涵盖全部68个知识点,267个学习步骤,包含一共21个讲解视频,累计时长11小时44分25秒,大小1.97G,为简历加上一个有吸引力的砝码。 学习期间,遇到本项目任何问题,都可以得到我的专业指导。 (购买一次,即可访问天猫前端所有知识点)
增值内容,点击购买
步骤 6 :

再整合在一起

edit
增值内容,请先登录
模仿天猫前端,单纯使用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="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://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="http://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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2019-08-26 <div style="clear:both"></div>
Listeneesin
<div style="clear:both"></div>老师这个是什么意思







回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2019-08-17 站长,请出来解答一下,谢谢
8木头人8



如图片的描述一样,希望有人可以解答一下这个问题。

							

							


1 个答案

how2j 答案时间:2019-08-19
问题问的很好,我感觉是 里面的 div 就是不会被强制压缩,而是独立存在的。我做了点改动,贴出了代码,你观察一下效果: http://how2j.cn/code/441



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2019-06-02 超链接鼠标未停留时的默认样式
2018-10-17 网页自适应屏幕问题
2018-09-15 获得源码必须购买吗?
2018-06-22 怎么解决IE浏览器样式不对的问题?(IE8浏览器)
2018-04-20 对于块级元素来说,float:right不管用?
2018-02-26 css标签问题
2018-01-17 Type="button"和Type="submit"相同吗?
2017-10-26 添加div标签原因请教
2017-09-10 div.simpleSearchDiv 内margin下边距40px 可以去掉吗
2017-09-07 站长大大,用到simpleLogo这个选择器的div为什么还要加一个class
2017-08-09 div加上了样式 display:block;
2017-08-06 span 里的span 不起作用
2017-08-04 关于css不正确显示
2017-08-02 script和herf问题
2017-04-19 详情页中的公共部分
2017-04-18 图片的绝对定位
2017-04-17 div.searchBelow span 和searchBelow span的区别
2017-03-26 请问老师,input在type为text的时候input的height包括边框吗?
2017-03-20 W3标准问题
2017-03-20 css的样式写一个div框里面内容的效果时候,有区分前后效果吗
2017-01-13 style标签位置
2016-12-20 为什么要加form呢,之前的搜索框怎么没加form
2016-11-14 请问如何将这些公共页面快速嵌入到不同的页面?
2016-10-28 公共页面里面无<body><html>标签
2016-10-27 clear:both作用




提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 实践项目-天猫前端-简单搜索栏 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 881555796
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图