First, look at the page often appear in the button and text box as it is!
What can we do to change the shape of text boxes and buttons? Then I'll give you two kinds of text boxes and button styles as examples for reference, the first is the text box and button No three-dimensional, just have line color and fill color, this effect everyone may have seen on many sites, giving a special feeling, very good, the second effect is more special, is to make a text box similar to the underline effect and is colored, while the button background color is no longer gray, but color, it can be said that this is a very cool effect, OK, I would like to say that the two effects of the implementation of the detailed procedures.
text box and button without stereo effect
So let's illustrate that by editing the page in DW3, first we have inserted the corresponding form object in the webpage, such as inserting a text box and a button, at this time, we press [F10] key, display the page Source Code edit window, that we in the webpage
<style type= "Text/css" >
Input.smallinput{border:1 solid black; font-size:9pt; Font-style:normal; Font-variant:normal; Font-weight:normal; height:18px; Line-height:normal}
</style>
All right, the first step is done, and next we'll add this code to the text box and the HTM statement of the button:
Class=smallinput
For example, in <input type= "text" name= "TextField" class=smallinput> and
<input type= "Submit" name= "submit" value= "flat button" class=smallinput>
This code is added to this text box and the HTM statement of the button. The final effect is shown below:
How, compared to the previous picture in the standard button is not more beautiful, it is not too difficult to achieve it.
Three-colored underlined text boxes and button effects
Again, we need the help of the stylesheet to do this, and insert the style sheet between the
. jb51.net]
<style type= "Text/css" >
Input.smallinput{background: #ffffff; Border-bottom-color: #ff6633; border-bottom-width:1px;border-top-width:0px; border-left-width:0px;border-right-width:0px; Solid #ff6633; Color: #000000; font-size:9pt; Font-style:normal; Font-variant:normal; Font-weight:normal; height:18px; Line-height:normal}
Input.buttonface{background: #ffcc00; border:1 solid #ff6633; COLOR: #ff0000; font-size:9pt; Font-style:normal; Font-variant:normal; Font-weight:normal; height:18px; Line-height:normal}
</style>
As you can see from the style sheet above, the implementation of this effect is achieved through two styles, one is the text box, one is the button, so in the text box and the button in the HTM statement you need to insert two different code, in the text box is inserted in the Class=smallinput code.
Example <input type= "text" name= "TextField" CLASS=SMALLINPUT>
Insert the class= "ButtonFace" code in the button statement as an example
<input type= "Submit" name= "submit" value= "color button" class= "ButtonFace" >
This corresponds to the style of the text box and the button in the style sheet, and the final effect is as follows:
Look at the above effect, will not remind you of that monotonous text box and button? Both of the above methods are implemented through the stylesheet, and the use of the method is very simple.
Form production is the focus of web page development, through the form can achieve interaction and communication, can also achieve the collection and sharing of information, the above two articles from the perspective of semantics and structure, you can also participate in discussion and learning!
