建站
咨詢
售后
建站咨詢
新聞中心
css中怎么給網(wǎng)頁設(shè)置一個搜索框
在html中添加一個input框和button搜索按鈕即可，css中修改這個搜索框和按鈕的樣式讓它更美觀一些即可。
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：主機域名、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、任縣網(wǎng)站維護、網(wǎng)站推廣。
css+div中搜索框怎么寫
.search/*整個搜索框*/{
width:300px;
height:30px;
background-image: url(../images/search.gif)/*這是這個搜索框的背景*/;
background-repeat: no-repeat;
background-position: 50%;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 15px;
padding: 0px;
overflow: hidden;
clear: both;
}
.search input/*用來去掉搜索框里的文本框和按鈕的背景和邊框，并設(shè)置并列排放*/{
border:none;
background:none;
float:left;
}
.search_box/文本框樣式/{
width:150px;
height:26px;
line-height:26px;
padding:0px;
color:#999999;
text-align:left;
margin-top: 2px;
margin-right: 15px;
margin-bottom: 0px;
margin-left: 10px;
float: left;
}
.search_button/*按鈕樣式*/{
width:45px;
height:27px;
cursor:pointer;
color:#000000;
font-size: 14px;
}
具體樣式可根據(jù)自己的需要調(diào)整。
希望對你有所幫助。
CSS搜索框樣式
這個搜索框做的很好，看似簡單，里面包含了大量CSS基礎(chǔ)知識。由于時間關(guān)系，這里寫了一個相似度為95%的樣式供參考和學(xué)習(xí)，由于無法確認字體，先挑選了比較接近的Gautami
先上HTML
body
div?id="A"
input?id="inputTxt"?type="text"?placeholder="Search"?/
div?id="inputBtn"Go/div
/div
/body
這里開始寫CSS
body?{?padding:?0;?margin:?0;?background:?#D6D6D6;?}
/*固定容器*/
#A?{?width:?316px;?height:?28px;?margin:?22%?auto;?border:?1px?solid?#A3A3A3;?border-top-color:?#939393;?border-bottom-color:?#D5D5D5;?border-radius:?3px;?box-shadow:?0px?1px?1px?#f4f4f4;?position:?relative;?}
#A??*?{?position:?absolute;?top:?0;?}
/*輸入框*/
#inputTxt?{?left:?0;?width:?246px;?height:?24px;?background:?#E6E6E6;?border:?0;?border-top:?1px?solid?#C8C8C8;?border-bottom:?1px?solid?#E6E6E6;?outline:?none;?padding-left:?30px;?color:?#666;?}
#inputTxt::-webkit-input-placeholder,#inputTxt::-moz-placeholder?{?color:?#B8B8B8;?font:?600?13px?'Gautami';?}
/*按鈕*/
#inputBtn?{?right:?0;?width:?38px;?height:?26px;?line-height:?26px;?background:?linear-gradient(#E4E4E4,?#B5B5B5);?border:?1px?solid?transparent;?border-top-color:?#FCFCFC;?border-left-color:?#ADADAD;?border-bottom-color:?#B5B5B5;?color:?#6E6E6E;?text-align:?center;?font-size:?smaller;?font-weight:?bold;?cursor:?pointer;?}
/*文字陰影*/
#inputTxt,?#inputBtn,?#inputTxt::-webkit-input-placeholder,#inputTxt::-moz-placeholder?{?text-shadow:?1px?1px?0px?#fff;?}
/*圖標(biāo)*/
#A:before,?#A:after?{?content:?"";?position:?absolute;?z-index:?2;?box-shadow:?0px?1px?0px?#fff;?}
#A:before?{?left:?9px;?top:?9px;?width:?6px;?height:?6px;?border:?2px?solid?#ccc;?border-radius:?50%;?}
#A:after?{?left:?17px;?top:?18px;?width:?6px;?height:?2px;?background:?#ccc;?transform:?rotate(45deg);?-webkit-transform:?rotate(45deg);?-o-transform:?rotate(45deg);?}
最后，上效果圖：上為原始搜索框，下為本次代碼實現(xiàn)的搜索框
搜索框css樣式
!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"
html?xmlns="
head
meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/
title無標(biāo)題文檔/title
script?type="text/javascript"?src="jquery.js"/script
style
.{?padding:0;?margin:0;?list-style:none;}
.htmlBox{?width:100%;?min-width:500px;?height:500px;?border:1px?solid?#A349A4;?border-radius:5px;}
.sskBox{?width:100%;?height:35px;?margin-top:150px;?border:1px?solid?#000;?border-left:0;?border-right:0;}
.zc{?width:100px;?height:35px;?float:left;}
.zj{?width:250px;?height:35px;?float:left;?border-left:1px?solid?#000;?border-right:1px?solid?#000;}
.yc{?height:35px;?float:right;}
/style
/head
body
div?class="htmlBox"
div?class="sskBox"
div?class="zc"左邊100/div
div?class="zj"中間250/div
div?class="yc"右邊自適應(yīng)/div
/div
/div
/body
script
tmntH();//加載的時候執(zhí)行一次
$(window).resize(function()?{tmntH();});//瀏覽器窗口變化時執(zhí)行
function?tmntH()
{
var?ycw=$(".sskBox").width()-352+'px';//yc的寬度等于sskBox寬度-350-2(邊框線)
//alert(div3);
$(".yc").css("width",ycw);
}
/script
/body
/html
文章名稱：css搜索框樣式,htmlcss搜索框
網(wǎng)站網(wǎng)址：http://fisionsoft.com.cn/article/dsschoh.html
