# Code snippet for Web Programming at 2012/11/5, # slide at http://zoro.ee.ncku.edu.tw/wp2012/res/07-layout.pdf ################################################################################ # a list for users to input orders Navigation Order
Order of Navigation
  1. Homepage
  2. Contact Us
  3. About Us
  4. Latest News

################################################################################ # beautify the above form body { font: 100% serif; } fieldset { background: #555555; padding: 1em; } form { width: 50%; margin: 0 auto; } input[type='text'] { width: 2em; text-align: center; position: absolute; left: 40%; } legend { border: 1px #513939 solid; background: #FAFAFA; } label { position: absolute; margin-left: -999em; } ol { list-style: none; position: relative; } ol li { border: 1px #FFF solid; background: #FAFAFA; padding: 0.7em; } ol li:hover { border: 1px #513939 solid; } ################################################################################ # make the above form dynamic ################################################################################ # a simple three-column layout Navigation Order
Left
Middle
# vi:nowrap:sw=2:ts=2