将百度搜索嵌入自己的html网页（美化版）

2021-07-25 01:32:48 阅读：298 来源： 互联网

标签：网页代码 width html background 按钮 font 美化美化版

网页添加百度搜索(已美化)

html5添加百度搜索引擎

话不多说直接上代码

下面是CSS美化代码

<style type="text/css">
.login-button { /* 按钮美化 */
width: 270px; /* 宽度 */
height: 40px; /* 高度 */
border-width: 0px; /* 边框宽度 */
border-radius: 3px; /* 边框半径 */
background: #1E90FF; /* 背景颜色 */
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
outline: none; /* 不显示轮廓线 */
font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */
font-size: 17px; /* 字体大小 */
}

.login-button:hover { /* 鼠标移入按钮范围时改变颜色 */
background: #5599FF;
}

.text-frame{width:400px; height:40px;} 
</style>

下面是添加百度搜索代码

<body>
    <div style="text-align:center">
        <form action="https://www.baidu.com/s">
        <input type="text" class="text-frame" name="wd">
        <input type="submit" class="login-button" value="百度一下">
        </form>
    </div>
</body>

以上是完整代码

效果请自行测试

测试网站将源码直接复制粘贴即可

代码思路

打开https://www.baidu.com，F12查看源码

可以看出

1.form 的 action="/s"，表示数据提交到https://www.baidu.com/s

2.输入框的name=“wd”

知道了输入框的name及数据提交到哪儿，就可以实现了，代码如下：

<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<input type="submit" value="百度一下">
</form>

效果如下

所以添加CSS美化代码

<style type="text/css">
.login-button { /* 按钮美化 */
width: 270px; /* 宽度 */
height: 40px; /* 高度 */
border-width: 0px; /* 边框宽度 */
border-radius: 3px; /* 边框半径 */
background: #1E90FF; /* 背景颜色 */
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
outline: none; /* 不显示轮廓线 */
font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */
font-size: 17px; /* 字体大小 */
}

.login-button:hover { /* 鼠标移入按钮范围时改变颜色 */
background: #5599FF;
}

.text-frame{width:400px; height:40px;} 
</style>

并将css美化class添加到input框内

<input type="text" class="text-frame" name="wd">
<input type="submit" class="login-button" value="百度一下">

欢迎光临我的小站呀我的小破站

标签：网页,代码,width,html,background,按钮,font,美化,美化版
来源： https://www.cnblogs.com/zhuzhushop/p/15056619.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9