HTML-blog webpage layout and html blog Layout
HTML file
<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
CSS file
@ Charset "UTF-8"; body {margin: 0; padding: 0; text-align: center; font-size: 13px; background-image: url (.. /img/Default.jpg );}. container {width: 778px; margin: 0 auto; text-align: left ;}. header {padding-top: 40px; padding-bottom: 20px; padding-left: 50px;}/* navigation menu */. navBar {position: relative; height: 30px; width: 100% ;}. navBar ul {position: relative; margin: 0; padding: 0; height: 30px; background: url (.. /img/navigation .png) 0px-30px repeat-x ;}. navBar ul li {width: 15%; padding: 0; margin: 0; list-style: none; float: left; height: 30px; display: inline; /* set the display mode */}. navBar ul li a {font: 12px Arial; color: white; text-decoration: none; line-height: 30px; display: block; background-image: url (.. /img/navigation .png) 100%-60px no-repeat; padding: 0 17px 0 15px ;}. navBar ul li a: hover {text-decoration: underline ;}. navBar. left {position: absolute; top: 0px; left: 0px; width: 10px; height: 30px; display: block; z-index: 1; background: url (.. /img/navigation .png) 0% 0px no-repeat ;}. navBar. right {position: absolute; top: 0px; right: 0px; width: 10px; height: 30px; display: block; z-index: 1; background: url (.. /img/navigation .png) 100%-90px no-repeat;}/* sidebar */. sidebarLeft {float: left; width: 200px ;}. sidebarRight {float: right; width: 200px;}/* Small panel */. frame {width: 100%; margin-bottom: 15px; background-color: white; border: solid 1px gray ;}. title {margin: 1px; margin-bottom: 5px; padding: 4px; font-weight: bold; background-color: #66 cccc;}/* Article, friend list */. list {list-style-type: none; padding: 5px; margin: 0 auto ;}. list li {padding: 3px; border-bottom: dotted 1px # aaf ;}. mainContent {width: 370px; margin: 0 auto ;}. footer {clear: both; position: relative; padding: 10px 0; text-align: center; color: # eee ;}
HTML page layout problems
As follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "www.w3.org/..al.dtd">
<Html xmlns = "www.w3.org/5o/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> div + CSS layout </title>
<Style>
Body {font-family: Verdana; font-size: 14px; margin: 0 ;}
# Container {margin: 0 auto; width: 900px ;}
# Header {height: 100px; background: # 6cf; margin-bottom: 5px ;}
# MainContent {height: 500px; margin-bottom: 5px ;}
# Sidebar {float: left; width: 200px; height: 500px; background: # 9ff ;}
# Content {float: right; width: 695px; height: 500px; background: # cff;}/* because it is fixed width, the left and right float method can effectively avoid the ie 3 pixel bug */
# Footer {height: 60px; background: # 6cf ;}
</Style>
</Head>
<Body>
<Div id = "container">
<Div id = "header"> header </div>
<Div id = "mainContent">
<Div id = "sidebar"> sidebar </div>
<Div id = "content"> </div>
</Div>
<Div id = "footer"> footer </div>
</Div>
</Body>
</Html>... the remaining full text>
Webpage html layout DIV + CSS help
I don't want to write it myself. I 'd like to ask for help.