News box with css (без картинки)

Преглед на урок

News box with css (без картинки)

14 Юни 2009, 18:34 | 5797 преглеждания | 6 коментарa

Категория: Програмиране » XHTML/CSS

Оценка:

(2 гласували)

6 добавяния към любими

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="bg" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Новини в два блока</title>
<style type="text/css">        
body {
        background-color: #FFFFFF;
    }
.nifty {
        width: 250px;
        background: #C5E100;
        margin: 0 auto;
        color: #FFFFFF;
    }
b.rtop, b.rbottom {
        display:block;
        background: #FFF
    }
b.rtop b, b.rbottom b {
        display:block;
        height: 1px;
        overflow: hidden;
        background: #C5E100;
    }
b.r1 { margin: 0 5px }
b.r2 { margin: 0 3px }
b.r3 { margin: 0 2px }
b.rtop b.r4, b.rbottom b.r4 { margin: 0 1px;height: 2px }
.title {
        font-size: 19px;
        font-weight: bold;
        text-align:center;
        font-family: arial, sans-serif, helvetica;
    }
.new {
        padding: 5px 5px 5px 5px;
        text-align: center;
        color: #fff;
        font-size: 15px;
        font-family: arial, sans-serif, helvetica;
    }
#left {
        width: 250px;
        border: 1px solid #C5E100;
        padding: 3px 3px 3px 3px;
        float: left;
    }
#center {
        width: 250px;
        border: 1px solid #C5E100;
        padding: 3px 3px 3px 3px;
        float: left;
        margin-left: 20px;
    }
#right {
        width: 250px;
        border: 1px solid #C5E100;
        padding: 3px 3px 3px 3px;
        float: left;
        margin-left: 20px;
    }
</style>
</head>
<body>

<div id="left">
<div class="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="title">Code good with CSS!</div><hr color="#FFFFFF" width="230" align="center" />
<div class="new">

Coding with css can be quite pleasent experience. You only have to jknow what you are doing why you are doing it and how exactly to do it! There might be many problems concerning the layout and making it look all the same under different browsers, but you must not hate CSS for this, instead focus and try to overcome this difficulties.</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</div>
<div id="center">
<div class="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="title">Code good with CSS!</div><hr color="#FFFFFF" width="230" align="center" />
<div class="new">
Coding with css can be quite pleasent experience. You only have to jknow what you are doing why you are doing it and how exactly to do it! There might be many problems concerning the layout and making it look all the same under different browsers, but you must not hate CSS for this, instead focus and try to overcome this difficulties.</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</div>
<div id="right">

<div class="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="title">Code good with CSS!</div><hr color="#FFFFFF" width="230" align="center" />
<div class="new">
Coding with css can be quite pleasent experience. You only have to jknow what you are doing why you are doing it and how exactly to do it! There might be many problems concerning the layout and making it look all the same under different browsers, but you must not hate CSS for this, instead focus and try to overcome this difficulties.</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</div>

</body>
</html>

Демо

Автор: akolevutd

Ако урокът ви допада, споделете го в Twitter и Facebook или го запазете в Delicious.

Урокът е добавен от: [PoD]MaTRiX

Коментари

basshun7er

a az iskam samo edna tablica i iskam da si q sloja kadet iskam kajete kak pls primerno po sredata ili nqkade kadeto iskam

bY.ZeRG

хора как да си направя блок като този защото този не става пишете ми на скайп : simply.red6

tender_surrender

хъм, чак сега осъзнавам изразът "като индианец пред писеща машина"
Любопитно ми е , но дали някой би направил нещо подобно в по-достъпна форма с повече разяснения.

Тази кутиика ми прилича на част от цялостен лейаут в VideoTutorials-bg.com. (Ако правя непозволена реклама няма против да ме изтриете.) Само, че поредицата носи наименованието "CSS за напреднали", така че няма да ти е много от полза. Не казвам, че akolevutd плагиатства. Просто много ми напомни. :)

Добави коментар

Трябва да сте регистиран потребител за може да оставяте коментари! Направете своята безплатна регистрация още сега.