CSSレイアウトまとめ

課題 CSS

擬似クラスを含むレイアウト:まとめ

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Green and Plain</title>
    <link rel="stylesheet" type="text/css" href="style.css" media="screen, print" />
</head>
<body>

<!--▼header-->
<div id="header">
<h1>Green and Plain</h1>
<p>Design by Free CSS Templates</p>
<!--▼nav-->
<div id="nav">
  <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">About Us</a></li>
   <li><a href="#">Products</a></li>
   <li><a href="#">Services</a></li>
   <li><a href="#">Contact Us</a></li>
  </ul>
</div>
<!--▲nav-->
</div>
<!--▲header-->
<!--▼container-->
<div id="container">
<!--▼content-->
<div id="content">
<h2>Welcome to our website</h2>
<p class="first">Posted by FreeCssTemplates</p>

<p class="second"><span class="em">Green and Plain</span> is a free template from <a href="#">Free CSS Templates</a> released under a <a href="#">Creative Commons Attribution 2.5 License</a>. You're free to use this template for both commercial or personal use. I only ask that you link back to <a href="#">my site</a> in some way. Enjoy :)</p>

<p class="last"><a href="#">Comments (32)</a> &#8226; <a href="#">Read full post &#187;</a>
<h3>Lorem Ipsum Dolor Volutpat</h3>
<p class="first">Posted by FreeCssTemplates</p>

<p class="second">Curabitur tellus. Phasellus tellus turpis, iaculis in, faucibus lobortis, posuere in, lorem. Donec a ante. Donec neque purus, adipiscing id, eleifend a, cursus vel, odio. Vivamus varius justo sit amet leo. Morbi sed libero. Vestibulum blandit augue at mi. Praesent fermentum lectus eget diam. Nam cursus, orci sit amet porttitor iaculis, ipsum massa aliquet nulla, non elementum mi elit a mauris.</p>
<ul>
    <li> Magna lacus bibendum mauris</li>
    <li> Velit semper nisi molestie</li>
    <li> Magna lacus bibendum mauris</li>
    <li>Velit semper nisi molestie</li>
</ul>
<p class="last"><a href="#">Comments (32)</a> &#8226; <a href="#">Read full post &#187;</a></p>
</div>
<!--▲content-->
    <!--▼side-->
    <div id="side">
    <!--▼search-->
    <div id="search">
     <h4>Search</h4>
     <p><input type="text" name="search" size="25"><input type="button" value="検索"></p>
    </div>
    <!--▲search-->
      <h4>Lorem Ipsum</h4>
    <ul>  
         <li> Fusce dui neque fringilla</li>
         <li>Eget tempor eget nonummy</li>
         <li>Magna lacus bibendum mauris</li>
         <li> Nec metus sed donec</li>
         <li>Magna lacus bibendum mauris</li>
         <li>Velit semper nisi molestie</li>
         <li>Eget tempor eget nonummy</li>
    </ul>
     <h4>Volutpat Dolore</h4>
     <ul>
         <li>Nec metus sed donec</li>
         <li>Magna lacus bibendum mauris</li>
         <li>Velit semper nisi molestie</li>
         <li>Eget tempor eget nonummy</li>
         <li>Nec metus sed donec</li>
         <li>Magna lacus bibendum mauris</li>
         <li>Velit semper nisi molestie</li>
     </ul>
     </div>
     <!--▲side-->
</div>
<!--▲container-->
<!--▼footer-->
<div id="footer">
<address>〓 2012.Design by Free CSS Templates.</address>
</div>
<!--▲footer-->
</body>
</html>

@charset "UTF-8";

* {
	margin: 0;
	padding: 0;
}
body {
	color: #000;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 0.875em;
	text-align: left;
	line-height: 1.7;
	width: 1000px;
	margin: 0 auto;
}
a {
	color: #060;
}
a:visited {
	color: #060;
}
a:hover {
	color: #6C9;
}
h1, h1 + p, #nav li a, h4, address {
	color: #fff;
}

/*header*/
#header {
	width: 1000px;
	height: 135px;
	margin: 0 0 30px 0;
	position: relative;
	background-image: url(images/img01.jpg);
	background-repeat: repeat-x;
}
h1 {
	font-size: 2em;
	padding: 15px 0 0 120px;
	background-image: url(images/img03.jpg);
	background-repeat: no-repeat;
	background-position: 50px center;
}
h1 + p {
	margin: -8px 0 0 120px;
}

/*nav*/
#nav {
	position: absolute;
	right: 50px;
	top: 25px;
}

#nav ul {
	list-style-type: none;
}
#nav li {
	float: left;
	width: 100px;
	height: auto;
}
#nav li a {
	font-size: 0.85em;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	padding: 10px 8px 10px 5px;
	display: block;
	background-color: #203e0b;
	background-image: url(images/img02.jpg);
	background-repeat: no-repeat;
	background-position: center right;
}
#nav li a:hover {
	background-color: #0C9;
}
/*container*/
#container {
    overflow: auto;
	clear: both;
	width: 900px;
	height: auto;
	margin: 0 auto;
	background-color: #fff;
}

/*content*/
#content {
	width: 580px;
	float: left;
}
h2 {
	font-size: 1.85em;
	font-weight: bold;
	border-bottom: 2px solid #9CC;
}
h3 {
	font-size: 1.5em;
	border-bottom: 2px solid #9CC;
}
#content p.first {
	margin: 3px 0;
	font-size: 0.75em;
}
#content p.second {
	margin: 20px 0 20px 0;
}
#content p.second .em {
	font-weight: bold;
}
#content p.last {
	font-size: 1em;
	font-weight: bold;
	margin-bottom: 40px;
}
/*content list*/
#content ul {
    margin-bottom: 20px;
}
#content li {
	margin-left: 20px;
}

/*side*/
#side {
	width: 250px;
	float: right;
	margin: 30px 25px 30px 0;
}
h4 {
	padding: 5px 20px;
	margin-bottom: 10px;
	background-color: #649847;
}
h4 + p {
	margin: 15px 0 25px 0;
}
/*side list*/
#side ul {
	list-style-type: none;
	margin: 15px 0 25px 0;
}
#side li {
	margin-left: 20px;
}

/*footer*/
#footer {
	clear: both;
	width: 900px;
	text-align: center;
	margin: 0 50px;
	background-color: #649847;
}
address {
	font-style: normal;
	text-align: center;
	padding: 10px 0;
}