index.php ------------------------------------------------------
<?php
require('head.php');
$link = mysql_connect('localhost','root','');
mysql_select_db('fotoblog',$link);
mysql_query("SET NAMES 'UTF-8';");
$posts = mysql_query("SELECT * FROM `posts` ORDER BY `id` DESC LIMIT 5;",$link);
while($post = mysql_fetch_object($posts)){
echo'
<div class="post">
<div class="postText">'.$post->text.'</div>
<div class="postFoot">
<a href="#">? comments</a> / '.date('d/m/Y',$post->time).'
</div>
</div>
';
}
require('end.php');
?>
head.php -----------------------------------------------
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>foto blogs</title>
<link rel="stylesheet" href="stils.css" type="text/css">
</head>
<body>
<div id="main">
<div id="left">
<h2>Foto blogs</h2>
<nav id="menu">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</nav>
<span>
©2011 foto blogs
</span>
</div>
<div id="center">
<div id="center_right">
<b>Search: </b>
<form action="#" method="post">
<input type="text" name="search" placeholder="Type and hit enter">
</form>
<b>Twitter</b>
<div class="tweet">
<p>Pirmais tweets</p>
<span>15 min </span>
</div>
<div class="tweet">
<p>Otrais tweets</p>
<span>21 min </span>
</div>
<div class="tweet">
<p>Trešais tweets</p>
<span>25 min </span>
</div>
</div>
<div id="center_left">
end.php --------------------------------------------------------------------
</div>
</div>
</div>
</body>
</html>
stils.css ------------------------------------------------------------------
*{
margin:0;
padding:0;
}
body{
font-size:12px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-color:#F5F5F5;
}
#main{
width:1290px;
margin:auto;
overflow:hidden;
margin-top:40px;
/*border:1px solid #c0c0c0;
background-color:#fefefe;*/
}
#left{
position:fixed;
width:180px;
/*min-height:400px;*/
border:1px solid #F1F1F1;
background-color:white;
}
#left h2{
margin:20px;
font-family:Tahoma;
letter-spacing:0.12EM;
}
#left span{
display:block;
margin:20px;
margin-top:0px;
color:#B9BBBF;
}
#menu{
margin:20px;
border-top:1px solid #DDDFE2;
border-bottom:1px solid #DDDFE2;
}
#menu a{
display:block;
line-height:24px;
color:#545658;
text-decoration:none;
}
#menu a:hover{
color:#000;
text-decoration:underline;
}
#center{
overflow:hidden;
width:1080px;
margin-left:220px;
/*background-color:blue;*/
}
#center_right{
float:right;
width:265px;
min-height:300px;
/*background-color:orange;*/
}
#center_right input[type="text"]{
padding:5px;
height:20px;
line-height:20px;
width:200px;
margin-top:18px;
margin-bottom:60px;
color:#A1A3A6;
border:1px solid C9C9C9;
background-color:#FFF;
}
.tweet{
margin-top:20px;
text-align:justify;
}
.tweet span{
display:block;
margin-top:3px;
font-size:10px;
color:#A1A3A6;
}
#center_left{
float:left;
width:775px;
min-height:1000px;
/*background-color:violet;*/
}
.post{
min-height:200px;
line-height:20px;
margin-bottom:40px;
padding:30px;
border-top:1px solid #E1E1E1;
border-left:1px solid #E1E1E1;
box-shadow:1px 1px 2px #AAA;
background-color:white;
}
.post_content{
text-align:center;
}
.post_text{
margin-top:20px;
margin-bottom:20px;
text-align:justify;
color:#545658;
}
.post_food{
color:#A1A3A6;
}
.post_food a{
color:#A1A3A6;
text-decoration:none;
}
Комментариев нет:
Отправить комментарий