Sample way how to create CSS layout with HTML:
- style.css
- layout.html
more code
Layout.html<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="nav">
<h2>Sidebar 1</h2>
<ul class="menu">
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li>Menu3</li>
</ul>
<h2>Sidebar 2</h2>
<p>www.w3.org/Style/Examples/011/firstcss.en.html But for your very first CSS style sheet, it is good not to be distracted by too many advanced ... But just a few words about the structure of our example HTML page.</p>
</div>
<div class="content">
<h1>content 1</h1>
<p>www.w3.org/Style/Examples/011/firstcss.en.html But for your very first CSS style sheet, it is good not to be distracted by too many advanced ... But just a few words about the structure of our example HTML page.</p>
<h1>content 2</h1>
<p>www.w3.org/Style/Examples/011/firstcss.en.html But for your very first CSS style sheet, it is good not to be distracted by too many advanced ... But just a few words about the structure of our example HTML page.</p>
<div class="footer">
<address>copy right by: Keo lakhena , mail:keolakhena2015@gmail.com</address>
</div>
</div>
</div>
</body>
</html>
style.css
body{ font-family: time of news roman; background-color: pink;}.wrapper{ width:957px; height:500px; position:absolute; padding:5px; margin:5px; border:1px solid;}p{ font-family:Arial; text-align:justify; font-size:12px;}.nav{ width:300px; height:475px; float:left; padding:10px; border:1px solid;}ul.menu{ float:left; width:200px;}li{ background: white; margin: 5px; padding: 10px; border-bottom:10px solid red; list-style-type: none;}a{ text-decoration:none;}a:link{ color:yellow;}a:visited{color:red;}
address { margin-top: 1em; padding-top: 1em; border-top: thin dotted ;}.content{ float:right; width:620px}.footer{ margin-top:200px; height: 50px; padding: 5px;}
It good for me for learning
ReplyDelete