Dreamweaver怎么制作百度搜索栏静态页面?

所属分类: 网页制作 / Dreamweaver 阅读数: 345
收藏 0 赞 0 分享

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

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

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>

如下图

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

 

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

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

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

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

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

相关推荐:

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

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

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

更多精彩内容其他人还在看

通过Dreamweaver学习了解CSS

层叠样式表 (CSS) 是一系列格式设置规则,它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时,内容与表现形式是相互分开的。页面内容(HTML 代码)位于自身的 HTML 文件中,而定义代码表现形式的 CSS 规则位于另一个文件(外部样式表)或 HTML 文档的另一
收藏 0 赞 0 分享

网页中插入Flash按钮与文本

  Flash 的动画按钮能够给网站带来动感,这让不少读者觉得十分有趣,同时也为网站增加了许多访客,其实在 Dreamweaver MX 2004 中只需几步简单的操作,就可以插入 Flash 按钮。   一、在网页中插入Flash 按钮   ( 1 )打开 Dr
收藏 0 赞 0 分享

写给喜欢用DW编写CSS人的一些建议

  在DreamWeaver中编写CSS,这种编写习惯并不提倡,不过由于"可视化"和操作简便,使用的朋友依然很多,今天罗列一些“最佳习惯”,希望对这些朋友有所帮助。   CSS正在改变网站设计的进程。为迎合不断增长的倾向于CSS的
收藏 0 赞 0 分享

在Dreamweaver中利用CSS样式表设置网页

  本文介绍如何在Dreamweaver 中使用层叠样式表 (CSS) 设置页面中的文本格式。您可以使用 CSS 以 HTML 无法提供的方式来设置文本格式和定位文本,从而能更加灵活自如地控制页面的外观。   了解 CSS   层叠样式表 (CSS) 是一系列格式设置
收藏 0 赞 0 分享

DreamWeaver中p标签br标签怎么使用?

DreamWeaver中p标签br标签怎么使用?DreamWeaver中想要让文字换行,该怎么实现呢?下面我们就来看看dw文字换行的两种方法,需要的朋友可以参考下
收藏 0 赞 0 分享

DreamWeaver怎么使用块状标签div?

DreamWeaver怎么使用块状标签div?DreamWeaver页面中想要使用块状标签,该怎么使用呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

dreamweaver怎么实现鼠标放在不同的位置显示不同的图片?

dreamweaver怎么实现鼠标放在不同的位置显示不同的图片?dw中想要制作图片切换效果 ,该怎么制作呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

Dreamweaver数据库连接出现错误404该怎么解决?

Dreamweaver数据库连接出现错误404该怎么解决?Dreamweaver在连接数据库的时候出现404错误,该怎么解决呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

Dreamweaver cs6怎么设计一款简单的网页?

Dreamweaver cs6怎么设计一款简单的网页?Dreamweaver中想要设计一款简单的网页,该怎么设计呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享

Dreamweaver怎么输入文本并设置文本样式?

Dreamweaver怎么输入文本并设置文本样式?Dreamweaver设计网页的时候,想要输入文本并设置文本样式,该怎么设置呢?下面我们就来看看详细的教程,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多