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

 时间:2024-11-05 10:04:37

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样式,清除标签自带的一些属性,img{display:blo罕铞泱殳ck;}input{mar爿讥旌护gin: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网页制作步骤图文
  • DW设置背景图片的操作方法
  • dw图片滚动效果怎么做
  • Dreamweaver中如何插入图片
  • dw制作网页完整步骤
  • 热门搜索
    呦怎么读 白带多像水一样流出来怎么办 怎么下载 鲇怎么读 植物医生护肤品怎么样 汽车怎么画 黄花菜怎么做好吃 手指饼干的做法 生日邀请函怎么写 牛肉粥的做法大全