首页 > 电脑专区 > windows >

Dreamweaver代码制作百度搜索栏静态页面

来源:互联网 2023-02-21 16:31:11 346

Dreamweaver代码制作百度搜索栏静态页面DEo办公区 - 实用经验教程分享!

Dreamweaver代码制作百度搜索栏静态页面DEo办公区 - 实用经验教程分享!

工具/原料

  • Dreamweaver软件

方法/步骤

  • 1

    如果将搜索框分为块状,可以将他分为4段,如图所示DEo办公区 - 实用经验教程分享!

    Dreamweaver代码制作百度搜索栏静态页面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办公区 - 实用经验教程分享!

    Dreamweaver代码制作百度搜索栏静态页面DEo办公区 - 实用经验教程分享!

    Dreamweaver代码制作百度搜索栏静态页面DEo办公区 - 实用经验教程分享!

  • 3

    然后建立style样式,清除标签自带的一些属性,DEo办公区 - 实用经验教程分享!

    img{display:block;}DEo办公区 - 实用经验教程分享!

    input{margin:0;padding:0;}DEo办公区 - 实用经验教程分享!

    h1,h2{margin:0;font-weight:normal;}DEo办公区 - 实用经验教程分享!

    Dreamweaver代码制作百度搜索栏静态页面DEo办公区 - 实用经验教程分享!

    Dreamweaver代码制作百度搜索栏静态页面DEo办公区 - 实用经验教程分享!

  • 4

    对logo图片设置具体宽高,并浮动,如图所示DEo办公区 - 实用经验教程分享!

    Dreamweaver代码制作百度搜索栏静态页面DEo办公区 - 实用经验教程分享!

    Dreamweaver代码制作百度搜索栏静态页面DEo办公区 - 实用经验教程分享!

  • 5

    对input标签添加属性设置,如图所示DEo办公区 - 实用经验教程分享!

    Dreamweaver代码制作百度搜索栏静态页面DEo办公区 - 实用经验教程分享!

    Dreamweaver代码制作百度搜索栏静态页面DEo办公区 - 实用经验教程分享!

  • 6

    最后添加h1和h2的属性值,如图所示,这样一个简单的搜索框就出来了。DEo办公区 - 实用经验教程分享!

    Dreamweaver代码制作百度搜索栏静态页面DEo办公区 - 实用经验教程分享!

    Dreamweaver代码制作百度搜索栏静态页面DEo办公区 - 实用经验教程分享!

  • 注意事项

    • 如果此经验对您有帮助,请为我投票加关注,谢谢大家的支持^_^

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!DEo办公区 - 实用经验教程分享!


    标签: 操作系统DREAMWEAVER软件静态

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码