Make the Submit button in the Web page more beautiful

Source: Internet
Author: User
Tags format print format reference
Button | Web page do you feel that your homepage is not beautiful enough to make it change? Have you heard of the style table? Is the CSS, it is the one that allows you to more accurately control the pages of the stuff. Let's take a look at two examples first:

1, the button background from gray to yellow, the following is the code:
〈form method= "POST"
〈input type= "button" value= "buttons" name= "B1" style= "Background-color:rgb (255,255,0)"
〈/p〉
〈/form〉
The "form" label is the label for the form, and "type" is the type of the Description button, which shows that the button is a normal command button. Then, please note that something important is coming! "Style" indicates that a style form is used here, and "Background-color" is used to declare the background color property of the button, and the following "RGB" gives its property value, where "(255,255,0)" means yellow.

2, the button text color into red, font into italics, the code is as follows:
〈form method= "POST"
〈input type= "button" value= buttons "name=" B1 "style=" Background-color:rgb (255,255,0); Font-family: italics _gb2312; Color:rgb (255,0,0) "〉〈/p〉
〈/form〉
See if there's something more? Yes, more than two attributes: "font-family" and "color", the first is the font properties, the latter is the color properties of the font, their values are: italics _gb2312 and RGB (255,0,0), indicating that the text is red in italics, OK, Use this example to find out what a style form is.
First of all, what do you call a style form? If you've ever used word, you'll know that you just need to set up a layout and print format. So all the pages in the file have the same format, and the style sheet is the same thing, the same Web site just needs to provide a style form, and then reference it on all pages, then the entire site will have the same format. There are three styles in a single style sheet.
The first is an external Web page style form. It is a CSS suffix name file, the equivalent of a template, set up in the page only need to reference it inside, you can make the referenced pages have the same format.
The second is an inline web page style form that generally states that it works only on this page, and that if you already use an external style form, it will be masked by an inline web page style form.
The third type is called an inline style form for a piece of text, a table, or a graphic. In the front, we use this style form, note that it is usually followed by a familiar HTML tag, such as the previous "input" tag, with "style", followed by some attributes and property values. and use them to accurately control the label. The property is separated from the property value by a colon, separated by a semicolon between the property and the property.
Well, with the above theoretical knowledge, let's contact the actual, let's look at a more complicated example:
〈form method= "POST"
〈input type= "button" value= buttons "name=" B1 "style=" font-family: Official script; font-size:9pt; Background-image:url (' file:///D:/Inetpub/wwwroot/asp/wwwboad/IMAGES/asp400.jpg '); Border-left:medium Ridge RGB (128,0,0); Border-right:medium none rgb (128,0,128); Border-top:medium none rgb (0,255,0); Border-bottom:medium Ridge RGB (255,0,0) "
〈/p〉
〈/form〉
In fact, the form and I said earlier is the same, but more than a few attributes, "font-family: Official script;" font-size:9pt; " To explain the button text is 9PT size of the official script, the button background is a picture, with a "background-image" attribute. Followed by a "Border-left" property Description The left side of the button is uplifted, the border line is crimson, and the thickness is medium. The rest can be, and so on, used to illustrate the right side of the button, top and bottom.
Try it out, is your homepage more beautiful?

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.