使用div+css實(shí)現(xiàn)如圖所示搜索框效果：
示例圖.png
分析：
1.使用markman對(duì)原圖進(jìn)行寬度、高度、顏色等方面的分析，如下圖：
示例圖.png
2.分析元素：
該搜索框主要構(gòu)成：input文本框、button按鈕、按鈕左側(cè)一個(gè)三角形的指示符號(hào)；
實(shí)現(xiàn)：
- 先組織頁(yè)面結(jié)構(gòu)：
<form action="">
<div class="form">
<input type="text" name="uname" placeholder="Search here...">
<button>SEARCH
<span class="t"></span>
</button>
</div>
</form>
- 文本框,使用placeholder來(lái)進(jìn)行文本框注釋：
<input type="text" name="uname" placeholder="Search here...">
- 搜索按鈕：
<button>SEARCH</button>
- 三角形指示符號(hào)：從示例圖上看這個(gè)三角形符號(hào)是與按鈕融合的，因此我們初步確定將它做為按鈕內(nèi)部元素，使用定位的方式來(lái)實(shí)現(xiàn)
<button>SEARCH
<span class="t"></span>
</button>
- 樣式設(shè)計(jì)：
- 先重置頁(yè)面的默認(rèn)外邊距與內(nèi)邊距：
*{
margin:auto;
padding:0;
}
- 設(shè)置類form的樣式：
.form{
width: 454px;
height: 42px;
background:rgba(0,0,0,.2);
padding:15px;
border:none;
border-radius:5px;
}
設(shè)置搜索框的外邊框樣式，設(shè)置透明度,去掉外邊框線，設(shè)置邊框弧度：
background:rgba(0,0,0,.2);
border:none;
border-radius:5px;
- 設(shè)置input輸入框的樣式：
input{
width: 342px;
height: 42px;
background-color: #eeeeee;
border:none;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
font-style:italic;
}
邊框弧度也可簡(jiǎn)寫(xiě)成：
border-radius:5px 0 0 5px;
設(shè)置字體樣式：
style-style:italic
還有其他屬性值：
| 屬性值 | 描述 |
|---|---|
| normal | 默認(rèn)值。瀏覽器顯示一個(gè)標(biāo)準(zhǔn)的字體樣式。 |
| italic | 瀏覽器會(huì)顯示一個(gè)斜體的字體樣式。 |
| oblique | 瀏覽器會(huì)顯示一個(gè)傾斜的字體樣式。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承字體樣式。 |
- 按鈕樣式：
button{
width:112px;
height: 42px;
background-color:#d93c3c;
color:#fff;
border:none;
border-radius:0 5px 5px 0;
position: relative;
}
注意，這里使用了相對(duì)定位：
position: relative;
作用是用來(lái)幫助指示三角形的位置;
- 指示三角形的樣式：
.t{
border-width:6px;
border-style:solid;
border-color: transparent #d93c3c transparent transparent;
position: absolute;
right:100%;
}
這個(gè)元素使用絕對(duì)定位，將其的y坐標(biāo)從右往左的參考元素的100%邊框位置上,x坐標(biāo)不設(shè)置，則默認(rèn)為0：
position: absolute;
right:100%;
制作三角形指示符號(hào)的步驟：
- 定義三角的span元素：
<span class="triangle"></span>
- 制作四色邊框:
.triangle {
display: inline-block;
border-width: 100px;
border-style: solid;
border-color: #000 #f00 #0f0 #00f;
}
border-color 四個(gè)值依次表示上、右、下、左四個(gè)邊框的顏色。
- 需要哪個(gè)方向的三角形，就將其他3個(gè)三角形設(shè)為透明即可
border-color: #000 transparent transparent transparent;
不使用span，使用偽類直接定位三角形的位置，則在刪除掉三角形的span元素和樣式，直接在按鈕元素的樣式上增加before，完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:auto;
padding:0;
}
.form{
width: 454px;
height: 42px;
background:rgba(0,0,0,.2);
padding:15px;
border:none;
border-radius:5px;
}
input{
width: 342px;
height: 42px;
background-color: #eeeeee;
border:none;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
font-style:italic;
}
button{
/*display:inline-block;*/
width:112px;
height: 42px;
background-color:#d93c3c;
color:#fff;
border:none;
border-top-right-radius:5px;
border-bottom-right-radius:5px;
position: relative;
font-size:16px;
font-weight: bold;
}
/*使用偽類來(lái)添加三角符號(hào)*/
button:before{
content:"";
border-width:6px;
border-style:solid;
border-color: transparent #d93c3c transparent transparent;
position: absolute;
right:100%;
top:38%;
}
</style>
</head>
<body>
<form action="">
<div class="form">
<input type="text" name="uname" placeholder="Search here..."><button>SEARCH</button>
</div>
</form>
</body>
</html>
