Привет друзья, день сегодня в Тюмени был серым, делать было не чего решил занять себя на пару минут. Начал делать ящик для новостей, не хотел его сначала доводить до ума, но потом подумал мало ли понадобиться новичкам на форуме. Вот выкладываю первую версию.
Структура HTML:
Структура Main.css:
Структура HTML:
Код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Class Info Box 1.10</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<!-- Info Start -->
<div class="info">
<!-- Title start -->
<div id="info_header">
<h1>Info Box</h1> <!-- Main title -->
<p>Pravda.ru news today</p> <!-- Hint -->
<div id="info_header_strip"></div> <!-- Bottom strip -->
</div> <!-- Title end -->
<div id="info_content"> <!-- Info body content Start -->
<!-- News 1 Start -->
<div id="info_content_date"><p>11.05.2011</p></div> <!-- Date -->
<h1>Apple recognized world's most expensive brand</h1> <!-- Title -->
<p>The US-based Apple was recognized as the most expensive brand in the world. According to the annual research conducted by Millward Brown, Apple managed to climb to the first place thanks to the experience gained while working with clients, attention to detail and an increased presence in the corporate environment.</p> <!-- Text in Body -->
<div id="info_content_controls"> <!-- Controls Start -->
<div id="info_content_author"><p><a href="#">Artyom Chernyavsky</a></p></div> <!-- Author Post -->
<div id="info_content_button"><p><a href="#">Read Full</a></p></div> <!-- Read full post -->
<div id="info_content_button"><p><a href="#">Comments (0)</a></p></div> <!-- See comments -->
</div> <!-- Controls End -->
<br>
<!-- News 2 Start -->
<div id="info_content_date"><p>06.05.2011</p></div> <!-- Date -->
<h1>Swiss banks not safe anymore</h1> <!-- Title -->
<p>According to Swiss authorities, the county has frozen the accounts worth $954 million. $415 million belong to Gaddafi, $470 million - to Mubarak and $69 million - to Ben Ali. Ali's and Mubarak's accounts were frozen after the presidents had been toppled. The Swiss authorities believe that the officials simply stole the money from their own people.</p> <!-- Text in Body -->
<div id="info_content_controls"> <!-- Controls Start -->
<div id="info_content_author"><p><a href="#">Sergei Balmasov</a></p></div> <!-- Author post -->
<div id="info_content_button"><p><a href="#">Read Full</a></p></div> <!-- Read full post -->
<div id="info_content_button"><p><a href="#">Comments (0)</a></p></div> <!-- See comments -->
</div> <!-- Controls End -->
<br>
<!-- Copyright Start -->
<div id="info_content_copyright">
<p>Info Box, Version 1.10</p>
<p>Copyright (C) 2011, Igor Katrich. All rights reserved.</p>
</div> <!-- Copyright End -->
</div> <!-- Info body content End -->
</div> <!-- Info End -->
</body>
</html>
Код:
body {background: rgb(240,240,240); width: 550px; margin: 0 auto; padding-top: 40px;}
/* Class: Info Box, Version 1.10. */
/* Author: Igor Katrich */
/* Email: bolddot@live.com */
/* License: GNU General Public License 3.0 */
/* http://www.gnu.org/licenses/gpl.html */
.info {display: block; background: rgb(250,250,250); width: 550px; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border: 1px solid rgb(200,200,200); box-shadow: 0 0 10px rgba(0,0,0,.2);}
#info_content {padding: 5px;}
#info_content h1 {font-size: 16px; color: rgb(60,60,60); line-height: 18px; margin-top: -10px; text-shadow: 0 1px 0 white; padding-bottom: 2px; border-bottom: 1px solid rgb(200,200,200);}
#info_content p {font-size: 13px; color: rgb(80,80,80); line-height: 16px; text-shadow: 0 1px 0 white; margin-top: -8px;}
#info_content a {color: rgb(0,113,193); text-decoration: none;}
#info_content a:hover {color: rgb(0,149,255);}
#info_content a:active {color: rgb(0,72,123);}
#info_content_date p {float: right; font-size: 10px; color: rgb(80,80,80); line-height: 0; text-shadow: 0 1px 0 white; margin-top: 0;}
#info_content_controls {display: block; padding-top: 5px; padding-right: 5px;}
#info_content_author p {float: right; font-size: 10px; color: rgb(80,80,80); line-height: 16px; text-shadow: 0 1px 0 white; margin-top: -16px;}
#info_content_button p {float: right; font-size: 10px; color: rgb(80,80,80); line-height: 16px; text-shadow: 0 1px 0 white; margin-top: -16px; border-right: 1px solid rgb(200,200,200); padding-right: 5px; margin-right: 5px;}
#info_content_copyright p {font-size: 10px; text-align: center; color: rgb(80,80,80); line-height: 10px; text-shadow: 0 1px 0 white;}
#info_header {display: block; background: -moz-linear-gradient(top,rgb(250,250,250),rgb(230,230,230)); background: -webkit-linear-gradient(top,rgb(250,250,250),rgb(230,230,230)); border-top-left-radius: 8px; border-top-right-radius: 8px; margin-top: -12px; margin-bottom: 10px;}
#info_header_strip {border-top: 1px solid white; border-bottom: 1px solid rgba(0,0,0,.1);}
#info_header h1 {font-size: 16px; color: rgb(80,80,80); line-height: 26px; text-align: center; text-shadow: 0 1px 0 white;}
#info_header p {font-size: 13px; color: gray; line-height: 13px; text-align: center; text-shadow: 0 1px 0 white; margin-top: -15px;}
#info_header a {color: rgb(0,113,193); text-decoration: none;}
#info_header a:hover {color: rgb(0,149,255);}
#info_header a:active {color: rgb(0,72,123);}
