inicio mail me! sindicaci;ón

The webpage expresses only Web standard solution

After entering EYou.com, the mail interface that gives new edition immediately is changed into the job of XHTML CSS, make the same score time base fortunately this result is quite strong still, of in an orderly way worked to come down. Can encounter new issue of course, for instance, do a webpage at ordinary times, because did not follow a program what to had hit to be handed in, use watch sheet lesser. Not bad, the world still has Google, make me OK and relaxed answer new challenge. A few experience, draw up come everybody is shared.

Be based on use a sex easily (Accesibility) consideration, the standard that expresses sheet writes a law to should include Fieldset and Legend in <form> and </form> (specification) , let an user understand the content of this region that express sheet is schematic. Simple structure is as follows:

It is quotative content below:
<form>
<fieldset>
<legend></legend>
. . . . . .
</fieldset>
</form>

In certain circumstance probably what you are not willing to make Fieldset and the design plan that Legend affects you medium perhaps is beautiful, easy to handle, it is the Border setting of Fieldset in CSS 0, the Display setting of Legend went for None.

Below great majority circumstance, the position that expresses sheet distributes a line, left is mark (Label) , right is input casing (Input Type= “text” . . . ) . Two so simple layout, I suggest strongly not to use form. Referenced Http://stylephreak.frogrun.com/uploads/source/cssform.php and Http://www.aplus.co.yu/css/forms/ ? Css=1 (absolutely two valuable reference, you need not have looked downward surely) , we discover, the means of settlement with Web current level is, for Label and Input Type= “text” . . . periphery adds a Div, it is the Display setting this Div Block. Set Label for Float: Left; (this also is to want a Div setting to be Display: The reason of Block; ) later can let label with the input casing is the same as group to go up. Letting Label is to a neat small doohickey, secure the width of Label, perhaps be opposite right according to needing to use Text-align towards the left next neat. The small doohickey of set width is, basis of use unit Em labels most big character number will decide width, need not work hard test Px.

To make my elaborate easier understanding, I write some of code simply:

It is quotative content below:

XHTML: (part)

<form>
<fieldset>
<legend> expresses odd example </lengend>
Full name of <div><label For= "name" > : </label><input Type= "text" Id= "name" /></div>
<div><label For= "etc" > is other etc: </label><input Type= "text" Id= "etc" /></div>
<div Class= "submit" ><input Type= "submit" Value= " refers " /></div>
</fieldset>
</form>
CSS: (part)

Body {/* has nothing to do with watch sheet, install the indication effect */ of the pageWidth: 400px;Margin: 20px Auto;Font: 14px/1.5 Serif;
}Fieldset {Border: None;Border-top: 1px Solid #ccc;
}Legend {Padding: 2px;Border: 1px Solid #ddd;Background: #ececed;
}Div {Display: Block;Padding: 5px 0;
}Label {Float: Left;Width: 6em;Text-align: Right;
}
.submit {Margin-left: 6em;
}
.submit Input {Padding: 2px;Border: 1px Solid #ccc;Background: #ececec;
}

Bookmark:Digg Del.icio.us Reddit

Leave a Comment