1. <output id="wnoop"><sup id="wnoop"></sup></output>
    2. <td id="wnoop"><menuitem id="wnoop"></menuitem></td><output id="wnoop"></output>

      45fan.com - 路饭网

      搜索: 您的位置主页 > 电脑频道 > 电脑教程 > 阅读资讯使用Dreamweaver制作百度搜索栏静态页面的步骤

      使用Dreamweaver制作百度搜索栏静态页面的步骤

      2018-08-12 15:30:03 来源:www.5810432.com

      使用Dreamweaver制作百度搜索栏静态页面的步骤

      Dreamweaver中想要使用代码制作百度搜索栏静态页面该怎么制作呢下面我们就来看看详细的教程

      使用Dreamweaver制作百度搜索栏静态页面的步骤

      1如果将搜索框分为块状可以将他分为4段如图所示

      使用Dreamweaver制作百度搜索栏静态页面的步骤

      2打开DW软件新建一个html文件并保存

      在body中输入内容

      <body>
      <div><img src="img/logo_bd.png" alt=""></div>
      <input type="text">
      <h1>搜索经验</h1>
      <h2><a href="">帮助</a></h2>
      </body>

      如下图

      使用Dreamweaver制作百度搜索栏静态页面的步骤

      使用Dreamweaver制作百度搜索栏静态页面的步骤

      3然后建立style样式清除标签?#28304;?#30340;一些属性

      img{display:block;}
      input{margin:0;padding:0;}
      h1,h2{margin:0;font-weight:normal;}

      使用Dreamweaver制作百度搜索栏静态页面的步骤

      使用Dreamweaver制作百度搜索栏静态页面的步骤

      4对logo图片设置具体宽高并浮动如图所示

      使用Dreamweaver制作百度搜索栏静态页面的步骤

      使用Dreamweaver制作百度搜索栏静态页面的步骤

      5对input标签添加属性设置如图所示

      使用Dreamweaver制作百度搜索栏静态页面的步骤

      使用Dreamweaver制作百度搜索栏静态页面的步骤

      6最后添加h1和h2的属性值如图所示这样一个简单的搜索框就出来了

      使用Dreamweaver制作百度搜索栏静态页面的步骤

      使用Dreamweaver制作百度搜索栏静态页面的步骤

      以上就是dw制作百度搜索栏效果的教程希望大家喜欢请继续关注路饭

       

      本文地址
      Tags 制作 Dreamweaver 百度
      编辑路饭网
      关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部
      ״Ԫˮ̳

        1. <output id="wnoop"><sup id="wnoop"></sup></output>
        2. <td id="wnoop"><menuitem id="wnoop"></menuitem></td><output id="wnoop"></output>

            1. <output id="wnoop"><sup id="wnoop"></sup></output>
            2. <td id="wnoop"><menuitem id="wnoop"></menuitem></td><output id="wnoop"></output>