Dreamweaver代码制作百度搜索栏静态页面DEo办公区 - 实用经验教程分享!
DEo办公区 - 实用经验教程分享!
工具/原料
方法/步骤
1如果将搜索框分为块状,可以将他分为4段,如图所示DEo办公区 - 实用经验教程分享!
DEo办公区 - 实用经验教程分享!
1相关内容未经许可获取自百度经验2打开DW软件新建一个html文件并保存。DEo办公区 - 实用经验教程分享!
在body中输入内容,DEo办公区 - 实用经验教程分享!
body>DEo办公区 - 实用经验教程分享!
div>img src="img/logo_bd.png" alt="">/div>DEo办公区 - 实用经验教程分享!
input type="text">DEo办公区 - 实用经验教程分享!
h1>搜索经验/h1>DEo办公区 - 实用经验教程分享!
h2>a href="">帮助/a>/h2>DEo办公区 - 实用经验教程分享!
DEo办公区 - 实用经验教程分享!
/body>DEo办公区 - 实用经验教程分享!
DEo办公区 - 实用经验教程分享!
如下图DEo办公区 - 实用经验教程分享!
DEo办公区 - 实用经验教程分享!
DEo办公区 - 实用经验教程分享!
3然后建立style样式,清除标签自带的一些属性,DEo办公区 - 实用经验教程分享!
img{display:block;}DEo办公区 - 实用经验教程分享!
input{margin:0;padding:0;}DEo办公区 - 实用经验教程分享!
h1,h2{margin:0;font-weight:normal;}DEo办公区 - 实用经验教程分享!
DEo办公区 - 实用经验教程分享!
DEo办公区 - 实用经验教程分享!
4对logo图片设置具体宽高,并浮动,如图所示DEo办公区 - 实用经验教程分享!
DEo办公区 - 实用经验教程分享!
DEo办公区 - 实用经验教程分享!
5对input标签添加属性设置,如图所示DEo办公区 - 实用经验教程分享!
DEo办公区 - 实用经验教程分享!
DEo办公区 - 实用经验教程分享!
6最后添加h1和h2的属性值,如图所示,这样一个简单的搜索框就出来了。DEo办公区 - 实用经验教程分享!
DEo办公区 - 实用经验教程分享!
DEo办公区 - 实用经验教程分享!
注意事项
- 如果此经验对您有帮助,请为我投票加关注,谢谢大家的支持^_^
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!DEo办公区 - 实用经验教程分享!