Today, we begin to learn the CSS form design of "ten days to learn web standards (div + CSS)", including the following content and knowledge points:
■ Change the text box and text field Style
■ Use the image beautification button
■ Change the drop-down list Style
■ Use the label Label to improve user experience
1. Change the text box and text field Style
If you have a solid learning experience in the front, this tutorial is quite easy. Let's talk about the text box below. Both the text box and text field can be beautified with CSS. For example, you can change the border, color, background color, and background image. See the following example:
. Text1 {border: 1px solid # f60; color: # 03c ;}
. Text2 {border: 2px solid #390; width: 200px; Height: 24px; font-size: 16px; font-weight: bold; line-Height: 1.6 ;}
. Text3 {border: 2px solid # c3c; Height: 20px; Background: url(icon9.gif) Right 3px no-Repeat ;}
. Text4 {border: 2px solid # f60; width: 150px; Height: 29px; font-size: 16px; line-Height: 1.6; Background: url(bg_9.gif) 0 0 no-Repeat ;}
The four style sheets correspond to rows 2nd, 3, 4, and 5, respectively. The first row is the default style of the text box. The second row is the style of the border and font color; the third step is to set the border, width, height, font size, and line height. The fourth step is to set the border and add the background color and background image. The fifth step is to add a GIF animation background image, it seems to be much more vivid, and the specific steps will not be repeated. Let's take a look at the style settings of text fields:
. Area {border: 1px solid # f90; overflow: auto; Background: # fff url(bg_9_1.gif) Right Bottom no-Repeat; width: 99%; Height: 100px ;}
The first is the default text field style, and the second is to set the border, width as the percentage, height, and landscape image. Overflow: auto defines that no scroll bar appears when the content does not exceed the height of the current text field. Okay. Run the code below to check the effect of the two.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Style type = "text/CSS">
. Text1 {border: 1px solid # f60; color: # 03c ;}
. Text2 {border: 2px solid #390; width: 200px; Height: 24px; font-size: 16px; font-weight: bold; line-Height: 1.6 ;}
. Text3 {border: 2px solid # c3c; Height: 20px; Background: # ffeeff URL (/upload/2010-08/28/icon9.gif) Right 3px no-Repeat ;}
. Text4 {border: 2px solid # f60; width: 150px; Height: 29px; font-size: 16px; line-Height: 1.6; Background: URL (/upload/2010-08/28/bg_9.gif) 0 0 no-Repeat ;}
. Area {border: 1px solid # f90; overflow: auto; Background: # fff URL (/upload/2010-08/28/bg_9_1.gif) Right Bottom no-Repeat; width: 99%; height: 100px ;}
</Style>
</Head>
<Body>
<P>
<Input type = "text" name = "textfield" id = "textfield"/>
This is the default Style
</P>
<P>
<Input name = "textfield2" type = "text" class = "text1" id = "textfield2" value = "I am blue"/>
This is to change the border style and text color
</P>
<P>
<Input name = "textfield3" type = "text" class = "text2" id = "textfield3" value = "check me"/>
This is a style that changes the border and sets the height and font size.
</P>
<P>
<Input class = "text3" type = "text" name = "textfield4" id = "textfield4"/>
This is an example of adding a background image. You can also add it to the left.
</P>
<P>
<Input class = "text4" type = "text" name = "textfield5" id = "textfield5"/>
This is to add a background image as GIF animation.
</P>
<P>
<Textarea name = "textarea" id = "textarea" Cols = "45" rows = "5"> </textarea>
</P>
<P>
<Textarea class = "area" name = "textarea2" id = "textarea2" Cols = "45" rows = "5"> </textarea>
</P>
</Body>
</Html>
Standard path www.aa25.cn prompt: you can modify some code before running
2. Use the image beautification button
Buttons are also common elements in Web pages. However, the default style is sometimes different from the overall effect of the page. You need to beautify it. Its Style settings are exactly the same as those in the text box, and there is nothing special about it. The following is an example of three instances:
. Btn02 {Background: # fff url(btn_bg2.gif) 0 0; Height: 22px; width: 55px; color: #297405; Border: 1px solid # 90be4a; font-size: 12px; font-weight: bold; line-Height: 180%; cursor: pointer ;}
. Btn04 {Background: url(btn_bg2.gif) 0-24px; width: 70px; Height: 22px; color: #9a00001; Border: 1px solid # dbb119; font-size: 12px; line-height: 160%; cursor: pointer ;}
. Btn07 {Background: url(submit_bg.gif) 0px-8px; Border: 1px solid # cfab25; Height: 32px; font-weight: bold; padding-top: 2px; cursor: pointer; font-size: 14px; color: #660000 ;}
. Btn08 {Background: url(submit_bg.gif) 0px-64px; Border: 1px solid #8b9c56; Height: 32px; font-weight: bold; padding-top: 2px; cursor: pointer; font-size: 14px; color: #360 ;}
. Btn09 {Background: URL (http://www.aa25.cn/upload/2010-08/14/014304_btn_bg.gif) 0 0 no-Repeat; width: pixel PX; Height: 37px; Border: none; font-size: 14px; font-weight: bold; color: # d84700; cursor: pointer ;}
The buttons in the figure, the first two are fixed width, but the width can be adjusted as needed; the middle two are adaptive width, which can be adjusted according to the number of words; the four styles are implemented in a horizontal loop of the background image, so the width is not limited. The last one completely uses the background image, so that the width will be fixed and will not affect the appearance. Note that you need to remove the button border in this way.
One advantage of using the buttons above is that when the CSS style sheet is not loaded, it will be displayed as the default button style, so that you can clearly know that this is a button. After loading normally, this will make the button more beautiful. It is different from the CSS button we talked about on the fifth day. The button is actually a link, and the button element here. Note: The display effect varies slightly in different browsers.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Style type = "text/CSS">
. Btn02 {Background: # fff URL (/upload/2010-08/28/btn_bg2.gif) 0 0; Height: 22px; width: 55px; color: #297405; Border: 1px solid # 90be4a; font-size: 12px; font-weight: bold; line-Height: 180%; cursor: pointer ;}
. Btn04 {Background: URL (/upload/2010-08/28/btn_bg2.gif) 0-24px; width: 70px; Height: 22px; color: #9a1_1; Border: 1px solid # dbb119; font-size: 12px; line-Height: 160%; cursor: pointer ;}
. Btn07 {Background: URL (/upload/2010-08/28/submit_bg.gif) 0px-8px; Border: 1px solid # cfab25; Height: 32px; font-weight: bold; padding-top: 2px; cursor: pointer; font-size: 14px; color: #660000 ;}
. Btn08 {Background: URL (/upload/2010-08/28/submit_bg.gif) 0px-64px; Border: 1px solid #8b9c56; Height: 32px; font-weight: bold; padding-top: 2px; cursor: pointer; font-size: 14px; color: #360 ;}
. Btn09 {Background: URL (http://www.aa25.cn/upload/2010-08/14/014304_btn_bg.gif) 0 0 no-Repeat; width: pixel PX; Height: 37px; Border: none; font-size: 14px; font-weight: bold; color: # d84700; cursor: pointer ;}
</Style>
</Head>
<Body>
<P>
<Input name = "button" type = "Submit" class = "btn02" id = "button" value = "Submit"/>
</P>
<P>
<Input name = "button2" type = "Submit" class = "btn04" id = "button2" value = "Submit"/>
</P>
<P>
<Input name = "button" type = "Submit" class = "btn07" id = "button" value = "Submit"/>
</P>
<P>
<Input name = "button2" type = "Submit" class = "btn08" id = "button2" value = "see how wide my width is"/>
</P>
<P>
<Input name = "button" type = "Submit" class = "btn09" id = "button" value = "free registration"/>
</P>
</Body>
</Html>
Standard path www.aa25.cn prompt: you can modify some code before running
3. Change the drop-down list Style
The drop-down list (menu) is one of the biggest headaches for everyone. because it does not take effect for many styles, It is very ugly to display on the page and is always at the top of IE6, as a result, many pop-up layers cannot block it (the hateful IE6) and greatly compromise the user test on the page, some designers have come up with many ways to change this situation.
In IE6, the background and width styles of the drop-down list are effective, and most others are not. In IE8, the border and height are supported. But this seems to be far away from our requirements, so we have to look for other methods. Let's take a look at the three figures below. The differences in the same code are shown in IE6, ff, and IE8 respectively.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Style type = "text/CSS">
. Select {border: 1px solid # f60; Background: # ff9; Height: 30px ;}
. Tip {width: 50px; Border: 1px solid # CCC; Background: # FFF; position: absolute; top: 5px; left: 70px; font-size: 12px; Height: 100px; padding: 5px ;}
</Style>
</Head>
<Body>
<P> select a project: </P>
<P>
<Select name = "select" id = "select" class = "select">
<Option> select -------------- </option>
<Option> standard path </option>
</SELECT>
</P>
<Div class = "tip"> let's see who can block me </div>
</Body>
</Html>
Standard path www.aa25.cn prompt: you can modify some code before running
The display varies with the three browsers, so it is best to seek other methods or use the default style. If the floating layer is blocked under IE6, IFRAME can be used, because the drop-down list does not run to the top of IFRAME. If you have higher beautification requirements, you can use Div simulation to replace the drop-down list. However, this method is difficult to implement. Due to the time relationship, this section does not introduce this method much, for more information, see http://www.aa25.cn/css_example/541.shtml.
4. Use label labels to improve user experience
Label labels are often ignored. The rational use of label labels improves the user experience on the page. We can use label labels for the description text of the form, so that when the user clicks the text, the cursor is positioned on the form.
For example, when you click the name text, the cursor will be located in the text box behind it. When you click the name text box, the corresponding options will be selected. Similarly, the check box is the same as the text field.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Style type = "text/CSS">
</Style>
</Head>
<Body>
<P>
<Label for = "name"> name: </label>
<Input type = "text" name = "name" id = "name"/>
</P>
<P> gender:
<Input type = "radio" name = "sex" id = "male" value = "radio"/> <label for = "male"> male </label>
<Input type = "radio" name = "sex" id = "female" value = "Radio2"/> <label for = "female"> female </label> </P>
<P> Hobbies:
<Input type = "checkbox" name = "Music" id = "Music"/> <label for = "Music"> listen to music </label>
<Input type = "checkbox" name = "Web" id = "Web"/> <label for = "Web"> surfing the Internet </label>
<Input type = "checkbox" name = "book" id = "book"/> <label for = "book"> reading </label> </P>
<P>
<Label for = "content"> resume: </label>
<Textarea name = "content" id = "content" Cols = "45" rows = "5"> </textarea>
</P>
<P> & nbsp; </P>
<P> & nbsp; </P>
</Body>
</Html>
Standard path www.aa25.cn prompt: you can modify some code before running
Article Source: Standard Road (http://www.aa25.cn/div_css/910.shtml)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
