Sharp Dressed Web Form
•Télécharger en tant que PPTX, PDF•
0 j'aime•1,012 vues
Some basic CSS knowledge for a time before Bootstrap, Flex and CSS Grid. This was aimed at the ASP.NET WebForms crowd. Update links used in the slide deck: https://love2dev.com/blog/making-a-sharp-dressed-web-form-thin-aspnet-8/ https://love2dev.com/blog/working-with-the-internet-explorer-developer-tools/
Recommandé
Recommandé
Contenu connexe
Plus de Chris Love
Plus de Chris Love (20)
Dernier
Dernier (20)
Sharp Dressed Web Form
- 1. Everybody Loves a Sharp Dressed Web Form Chris Love Tellago Inc. http://ProfessionalASPNET.com http://Twitter.com/ChrisLove
- 2. Books
- 3. References CSS Cookbook http://bit.ly/dbzg0i A List Apart http://www.alistapart.com/ SitePoint http://SitePoint.com High Performance Web Sites http://bit.ly/aZAVDx
- 4. Table Layouts Easy To Get What You Want Ultimately Confining Nesting Gets Messy Quickly Ultimately Poor Performance
- 5. Web Site Layers CSS JavaScript/jQuery HTML C#/VB.NET SQL
- 6. Browser Differences Every Engine Plays By Its Own Rules IE – Trident FireFox – Mozilla Chrome, Safari - WebKit All Try to Honor Standards ACID IE 9 is the best IE IE 6 Must DIE!!
- 7. CSS Resets Override Browser Default Settings Can be Simple or Complex I Like the YUI CSS Rest http://developer.yahoo.com/yui/reset/ http://www.kennycarlile.net/2008/06/19/yahoo-vs-eric-meyer-css-reset/
- 8. DOCTYPE Quirks Mode Strict, transitional, frameset <!doctype html public "-//w3c//dtdxhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
- 9. CSS Selectors Element Body, P, H1… Id #txtFirstName, #Footer… Class .btn, .address… http://www.w3.org/TR/CSS2/selector.html
- 11. :hover
- 12. :focus
- 13. :active
- 14. Sibling
- 15. Lable + Input
- 16. Attribute
- 18. Combine Rules for Selectors
- 19. Target Rule Differences between Selectorshttp://professionalaspnet.com/archive/2009/11/05/Using-CSS-Selectors.aspx
- 20. Layouts <div id="header"> <div class="MainHeader"> </div> <div id="MainNav"> </div> </div> <div id='container'> <asp:ContentPlaceHolder ID="MainContent" runat="server"> </asp:ContentPlaceHolder> </div> <div id="Mainfooter"> </div>
- 21. Layouts #header, #container, #Mainfooter { margin:auto; width:955px; }
- 23. Really 2 Nested DIVs <div id="left-column"> <div id="right-main-content"> <div id="MainColHome"> <div id="center-main-content"> </div> <div id="right-column"> </div> </div> </div> </div>
- 24. Form Best Practices Fieldsets Group Items Labels for Lists Organizing Buttons Subtle Ques http://professionalaspnet.com/archive/2009/06/22/Making-a-Sharp-Dressed-Web-Form-_1320_-Thin-ASP.NET-8.aspx
- 25. Form Layouts <fieldset id="Fieldset1"> <legend>Contact Us!</legend> <ol> <li> <label id="Label1" for="FirstName"> First Name : </label> <input name="FirstName" type="text" maxlength="25" class="required" /><em><imgsrc="images/required.png" alt="required" /></em> </li> ... <li> <ul> <li> <button id=" btnCancel " name="btnCancel" type="button"> Cancel</button></li> <li> <button id=" btnReset " name="btnReset" type="reset"> Reset</button></li> <li> <button id=" btnSubmit " name="btnSubmit" type="submit"> Submit</button></li> </ul> </li> </ol> </fieldset>
- 26. Tools IE 8 Developer Tools http://professionalaspnet.com/archive/2009/10/24/Working-with-the-Internet-Explorer-Developer-Tools.aspx FireBug – getFireBug.com SuperPreview (other similar tools) Install Every Browser You Can IE FireFox Chrome Safari