proszę o zrobienie kursu css bo ja nie umiem a musi się w nim zmieścić wbrane tło najlepiej w jednym.... Question from @sara1111

October 2018 1 9 Report

proszę o zrobienie kursu css bo ja nie umiem a musi się w nim zmieścić wbrane tło najlepiej w jednym kolorze, trzy bloki:

BLOK 1

BLOK2 BLOK3

mniej więcej tak w BLOKU 2 ma być napisane home lub start i napis o czym jest np.

home

muzyka

w BLOKU 3 notatka na temat tej strony jak jest o muzyce to np: Warto słuchać muzyki bo rozwija wyobraźnie. itp

patryk432

Proszę o zrobienie kursu CSS?

Czasami na prawdę warto czytać to, co się samemu pisze.

CSS: http://pastebin.com/qpteLU7J

HTML: http://pastebin.com/gNj9cgVX

Kod zgodny z wybranym doctype, testowany na Operze 11.62

Kod:

body
{
background: #C5C5C5;
}

.main_block
{
overflow : auto;
padding : 10px;
background : white;
border-radius: 5px 5px 5px 5px;
box-shadow : 0px 0px 2px silver;
text-align : center;
}

.upper_div
{
width : 100%;
height: 100px;
}

.wrapper
{
overflow: hidden;
}

.left_div
{
float: left;
width: 20%;
}

.right_div
{
float : right;
width : 80%;
font-family: Georgia;
font-size : 16px;
}

.button
{
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f7f7f7), color-stop(1, #f5f5f5) );
background:-moz-linear-gradient( center top, #f7f7f7 5%, #f5f5f5 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#f5f5f5');
background-color:#f7f7f7;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #e3e3e3;
display:inline-block;
color:#777777;
font-family:Arial;
font-size:11px;
font-weight:bold;
padding:5px 24px;
text-decoration:none;
}

.button:hover
{
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f5f5f5), color-stop(1, #faf7fa) );
background:-moz-linear-gradient( center top, #f5f5f5 5%, #faf7fa 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#faf7fa');
background-color:#f5f5f5;
}

.button:active
{
position:relative;
top:1px;
}

<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01//EN'>
<html>
<head>
<title>Moja strona</title>
<link rel='stylesheet' type='text/css' href='/styl.css'>
<meta http-equiv='Content-type' content='text/html; charset=UTF-8'>
</head>
<body>

<div class='main_block'>

<div class='upper_div'>
Logo strony lub cokolwiek innego...
</div>

<div class='wrapper'>
<div class='left_div'>
<p><a href='/' class='button'>Strona główna</a></p>
<p><a href='/' class='button'>foo</a></p>
<p><a href='/' class='button'>foo</a></p>
</div>
<div class='right_div'>
Warto słuchać muzyki, ponieważ dzięki niej rozwija się nasza wyobraźnia, etc.
</div>
</div>

</div>
</body>
</html>