Dreamweaver怎么制作百度搜索栏静态页面?（dreamweaver制作搜索框）-Dreamweaver教程-知优网

Dreamweaver怎么制作百度搜索栏静态页面？Dreamweaver中想要设计百度的搜索页面，该怎么设计呢？今天我们就来看看使用dw代码设计百度搜索栏静态页面的教程，需要的朋友可以参考下

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

Dreamweaver怎么制作百度搜索栏静态页面?（dreamweaver制作搜索框） Dreamweaver 百度页面第1张

Adobe Dreamweaver CC 2017 v17.0 中文版(附安装教程) 64位

查看详情

Dreamweaver怎么制作百度搜索栏静态页面?（dreamweaver制作搜索框） Dreamweaver 百度页面第2张

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

Dreamweaver怎么制作百度搜索栏静态页面?（dreamweaver制作搜索框） Dreamweaver 百度页面第3张

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制作搜索框） Dreamweaver 百度页面第4张

Dreamweaver怎么制作百度搜索栏静态页面?（dreamweaver制作搜索框） Dreamweaver 百度页面第5张

3、然后建立style样式，清除标签自带的一些属性，

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

Dreamweaver怎么制作百度搜索栏静态页面?（dreamweaver制作搜索框） Dreamweaver 百度页面第6张

Dreamweaver怎么制作百度搜索栏静态页面?（dreamweaver制作搜索框） Dreamweaver 百度页面第7张

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

Dreamweaver怎么制作百度搜索栏静态页面?（dreamweaver制作搜索框） Dreamweaver 百度页面第8张

Dreamweaver怎么制作百度搜索栏静态页面?（dreamweaver制作搜索框） Dreamweaver 百度页面第9张

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

Dreamweaver怎么制作百度搜索栏静态页面?（dreamweaver制作搜索框） Dreamweaver 百度页面第10张

Dreamweaver怎么制作百度搜索栏静态页面?（dreamweaver制作搜索框） Dreamweaver 百度页面第11张

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

Dreamweaver怎么制作百度搜索栏静态页面?（dreamweaver制作搜索框） Dreamweaver 百度页面第12张

Dreamweaver怎么制作百度搜索栏静态页面?（dreamweaver制作搜索框） Dreamweaver 百度页面第13张

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

相关推荐：

Dreamweaver怎么上传站点到服务器?

Dreamweaver网页中怎么添加电子邮箱链接?

Dreamweaver cc2018新版页面怎么切换回旧版本布局?

Dreamweaver 百度页面

分享到：