網頁添加百度搜索(已美化)
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="百度一下">
歡迎光臨我的小站呀 我的小破站