将百度搜索嵌⼊⾃⼰的html⽹页（美化版）⽹页添加百度搜索(已美化)
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;
}
html5颜代码
.text-frame{width:400px; height:40px;}
</style>
下⾯是添加百度搜索代码
<body>
<div >
<form action="www.baidu/s">
<input type="text" class="text-frame" name="wd">
<input type="submit" class="login-button" value="百度⼀下">
</form>
</div>
</body>
以上是完整代码
效果请⾃⾏测试
代码思路
打开www.baidu，F12查看源码
可以看出
1.form 的 action="/s"，表⽰数据提交到www.baidu/s
2.输⼊框的name=“wd”
知道了输⼊框的name及数据提交到哪⼉，就可以实现了，代码如下：
<form action="www.baidu/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="百度⼀下">
欢迎光临我的⼩站呀   

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。