In the mobile mall system, we often see that there is a search box on the top of the page. This type of search box blogger prefers the form of fixed on the top of the page, translucent suspension, and can see some of the rotation maps vaguely.
To make such a search box, the key to the technology is:
First of all, we define a HTML fragment:
<!-Search box-> <header class = bar> <FORM NAME = Search Class = Search ID = Search Action => <DIV Class = Search-download> <input Type = SEARCH NAME = WORD ID = WOR d> < span class = Placeholder> <span class = iconfont icon-sousuo> </span> <span class = text> search </span> </div> </header> <!-a one The background map is actually a rotation map-> <div class = background> <IMG SRC = bg.jpg> </div>
Header tag is the search box, and the following div is a background map.
At the same time, the CSS style is attached:
<STYLE TYPE = Text/CSS> Body {Margin: 0; Padding: 0; FONT-SIZE: 14px; FONT-FAMILY: Microsoft Yahei, 'Arial', 'Verdana', 'Helvetica', SANS-S erif;}. Bar {pose: Fixed; TOP: 0; left: 0; Right: 0; /* determines the search box at the top* /height: 44px; padding: 0 10px; background-color: #fff; opacity: 0.8; /* search for search. Frame Transparent effect*/ z-index: 10;}. Bar Form {Display: Block; Padding: 0; Margin: 0;}. Search-Row {posity: related: 30px; padding: 7px 0;}. arch -Row Input [Type = Search] {position: absolute; top: 7px; height: 30px; line-height: 21px; 100%; padding: 10px 10px 10px 30px; border: 0; BORDER: 0; BOR der-radius: 6px; outline : 0; Background-COLOR: RGBA (0,0,0,0.1); font-siZe: 16px; text-align: center; z-index: 100;}. Search-copy .placeholder {positive: absolute; TOP: 2px; left: 0; Right: 0; Display: Inline-Block; Height: 34px; Line-Height: 34px; Border: 0; Border-Radius: 6px; FonT-SIZE: 16px; Text-Align: Center; color: #999; z-index: 1;} .search-download .Placeholder .iconfont {display: inline-block; width: 19px; line-height: 24px; padding: font-siZe: 21P x; color: #666 ;}. Search-pictures .placeholder .text {line-height: 40px; vertical-align: top;}. Background img {width: 100%; c: beFore {posity: AB solute; Top: 11px; left: 5px ; Right: Auto; Display: Block; Margin-Right: 0; FONT-SIZE: 21px;}. Active input [type = search] {text-align: left} .placeholder { display: none} </style>A long period of CSS style, but its core is two sentences: fixed; /* determine the search box top* /and background-color: #fff; opacity: 0.8; /* search box semi-transparent effect* /, others The style of the style is for the typesetting of the page. The details of the typography require the readers to write it by themselves. The process may take some time.
In this way, we complete a static search box:
Remarks: The search icon here uses iconfont, and readers can download it at iconfont vector icon library on their own.
At this point, we also need to achieve some motion effects through JS:
It is used to realize the "search" position icon switching during the user switching input. The principle is very simple, which increases and removes the Class class. These classes define styles.
.Active: BeFore {position: absolute; TOP: 11px; left: 5px; Right: Auto; Display: block; margin-raight: 0; font-siZe: 21px;}. YPE = Search] {Text-Align : left} .Active .placeholder {Display: None} <script Type = Text/Javascript>/* Input box to get the focus indicating that the user is entering*/$ (#word) .focusin () () {$ (. See. Arch- ROW) .addClass (Active iconfont icon-Sousuo);/* Input box lost focus indicates that the user enters*/$ (#word) .focusout (function () {/* determines whether the user has content input*/if ($ (this) .Val () ==) { /* No content input change style* /$ (. Search-download) .RmoveClass (Active iconfont icon-sousuo); Submit the form*/ $ (#search) .submit ();}}); </ script>Remarks: You need to introduce jQuery here, don't forget!
Extension. ExtensionFull HTML code:
<! Doctype html> <html> <wead> </title> <meta name = viewport content = width = device-width, initial-scale = 1, maximum-scale = 1, user-sca LABLE = no> < Link REL = styleShet Type = Text/CSS HREF = iconfont/iconfont.css> <Script Type = Text/JavaScript SRC = JQuery -.11.1.min.js> </SCRIPT> <Style Type = Text/css> Body { margin: 0; padding: 0; font-size: 14px; FONT-FAMILY: Microsoft Yahei, 'Arial', 'Verdana', 'Helvetica', sans-Serif;}. ; TOP: 0; LEFT : 0; Right: 0; /* determine the top of the search box* / height: 44px; padding: 0 10px; background-color: #fff; opacity: 0.8; /* Search box translucent effect* / z-index: 10 ;}. Bar Form {display: block; padding: 0; margin: 0;}. Search-eat {position: related: height: 30px; padding: 7px 0;}. = Search] {posity : absolute; top: 7px; height: 30px; line-height: 21px; width: 100%; padding: 10px 15px 10px 30px; border-radius: 6px; outline: 0; backgr OUND-COLOR: RGBA (0 ,0,0,0.1); font-size: 16px; text-align: center; z-index: 100;}.search-row .placeholder { position: absolute; top: 2px; left: 0; right: 0; Display: Inline-Block; Height: 34px; Line-Height: 34px; Border: 0; Border-Radius: 6px; FONT-SIZE: 16px; TEXT-Align: COLOR: #999; dex: 1;} .search-pictures .placeholder .iconfont {display: inline-black; width: 19px; line-height: 24px; padding: 10px 0; font-siZe: 21px; #666;}. Arch-download .Placeholder .text {line-height: 40px; vertical-align: top;}. Background img {width: 100%;}. Active: beFore {position: absolute; TOP: 11px; left: 5px; Rig ht: Auto; Display: Block; Margin -Right: 0; FONT-SIZE: 21px;}. Active input [Type = Search] {Text-Align: Left} .Active .placeholder {Display: None} </style> </head> <body> <!- -Search box-> <header class = bar> <FORM NAME = Search Class = Search ID = Search Action => <DIV Class = Search-eat> <input Type = SEARCH NAME = WORD ID = Word> span class = Placeholder> <span class = iconfont icon-sausuo> </span> <span class = text> search </span> </div> </header> <!-A background map is actually actual Here is often a rotation map-> <div class = background> <IMG SRC = bg.jpg> </body> <script type = text/javascript>/* Input box to get the focus indicating that the user is in Enter*/$ (#word) .focusin (function () {$ (). Search-download) .addClass (Active iconfont icon-sousuo);/*Input box lost the focus to indicate the user's input*/$ (# Word) .focusout (function () { /* Determine whether the user has the content input* / if (this). VIS () ==) { /* No content input to change the style* / $ (. Search-download). RemoveClass (Active iConfont Icon-Sousuo);} Else {/* There is a content input to keep the style and submit the form*/$ (#search) .submit ();}); </script> </html> SummarizeThe above is the HTML implementation of the mobile terminal fixed suspension semi -transparent search box. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!