<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Результат - Псевдоэлементы</title>
<style type="text/css">
body { margin: 0; } /* обнуляем поля по краям страницы */
#menu {
width: 200px; /* ширина колонки с меню */
float: left; /* колонка всплывает влево */
}
.menuname {
font-size: 150%; /* размер шрифта названия меню */
text-align: center; /* текст по центру */
color: #03f; /* цвет текста */
border-bottom: 3px #f03 solid; /* стили нижней части рамки */
}
#menu ul {
list-style-image: url(image/marker5.png); /* изображение для маркеров списка меню */
margin-left: 25px; /* размер поля слева */
padding: 0; /* обнуление внутренних отступов */
}
#menu ul li { margin: 10px 0; } /* размер внешних полей между пунктами меню */
#menu ul li a { color: #03f; } /* цвет ссылок в меню */
#menu ul li a:hover { color: #f03; } /* цвет ссылок под курсором */
#content { margin-left: 220px; } /* размер левого внешнего поля основной колонки */
h1 {
font-size: 200%; /* размер шрифта заголовка H1 */
color: #03f; /* цвет заголовка */
}
h2 {
font-size: 140%; /* размер шрифта заголовка H2 */
color: #3f0; /* цвет */
}
h2:before {
content: "Раздел:"; /* добавляем в начало каждого заголовка H2 слово Раздел */
color: #f03; /* цвет добавленного слова */
text-decoration: underline; /* подчеркивание */
}
p:first-letter {
font: bold 120% serif; /* стили шрифта первого символа параграфов */
color: red; /* цвет первого символа */
}
</style>
</head>
<body>
<div id="menu">
<div class="menuname">Меню</div>
<ul>
<li><a href="https://seodon.ru/kak-sdelat-sait/">Как сделать сайт</a></li>
<li><a href="https://seodon.ru/html/">HTML для начинающих</a></li>
<li><a href="https://seodon.ru/css/">CSS для новичков</a></li>
<li><a href="https://seodon.ru/programs/">Программы для сайта</a></li>
</ul>
</div>
<div id="content">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetuer ut cursus lacus diam congue. Consectetuer nibh eros risus Donec ligula tristique aliquet convallis adipiscing ac. Est lacus ut Nulla ligula a sociis vel Sed lorem justo. Aliquet Aenean Morbi morbi rutrum Suspendisse vel nibh ut consequat elit. Ut sagittis leo sed enim nunc adipiscing vestibulum laoreet magna augue. Iaculis Sed In wisi metus pellentesque risus et nibh eget vel. Ac aliquam risus Vestibulum In Nunc at id Morbi malesuada id. Elit dui congue tristique pede tortor Nunc pellentesque pulvinar nascetur natoque. Curabitur ipsum aliquam euismod eros Lorem orci mauris Vestibulum urna metus. Commodo Curabitur at congue malesuada ut pede elit vel urna lacinia. Sed odio faucibus lacinia vitae accumsan Quisque pretium elit mollis dui. Cum a turpis mauris consequat neque ut Sed non tincidunt tristique. Ut ut in a ac rutrum dui amet amet Vestibulum interdum. Mauris Vestibulum.</p>
<p>Habitant a quis malesuada magna convallis morbi Sed pretium Quisque Cras. Mauris tincidunt malesuada Curabitur congue nunc Aliquam et at diam consequat. Gravida eleifend amet nisl mauris dapibus consequat interdum eu eget habitant. Hendrerit dui Vivamus justo ante id enim adipiscing ligula nibh pretium. Nascetur Vivamus mi hac eros ac faucibus adipiscing penatibus convallis egestas. Est lobortis hac sed Sed odio enim Phasellus eget elit tortor. Tempor enim tempor eget habitant quis dictumst sed pede elit cursus. Curabitur amet dolor venenatis Nullam neque ultrices eu elit ante orci. Egestas sed tellus amet tincidunt interdum enim sed Quisque suscipit faucibus. Ipsum sed justo lorem porttitor dapibus leo tortor at sit et. Et est feugiat habitasse quis augue vitae Vestibulum in Morbi diam. Neque risus tincidunt Aenean et pede rhoncus ridiculus rhoncus mi nunc. Velit Phasellus dolor eget consectetuer tortor orci convallis Donec tellus leo. Nam dui eu Quisque aliquam interdum pede nec amet magnis cursus. Mauris porttitor quis nibh senectus at pretium nibh tortor Aenean adipiscing. Suspendisse tristique Vestibulum vitae eget lacinia fames egestas ut mauris volutpat. Libero et Phasellus pede orci lacinia mollis.</p>
<h2> Curabitur vel</h2>
<p>Curabitur vel ac lacinia tincidunt interdum tellus tempor laoreet ante semper. Ligula velit vitae faucibus eros vel nibh mauris elit pede augue. Risus elit ac augue fringilla volutpat enim ligula justo convallis quis. Consectetuer Nunc quis interdum rhoncus Vestibulum consequat velit convallis lorem semper. Sociis magna nunc id pretium ligula orci aliquet et quis lacinia. Proin ac facilisi nonummy sodales ligula ligula auctor eget laoreet id. Vestibulum nisl eu nunc accumsan facilisi ac Nam Morbi nulla arcu. Dolor sapien vel ligula risus enim ante ut tempor gravida condimentum. Porttitor dui sit quis auctor magna et porttitor Ut amet lobortis. Convallis at Aenean nec mauris leo auctor Curabitur dapibus cursus Curabitur. Nec Nunc interdum Vivamus diam at ipsum lorem lorem dictum nunc. Auctor Sed adipiscing Aenean magnis fringilla magna lacus lorem laoreet risus. Suscipit tortor amet lorem Curabitur diam volutpat consectetuer Quisque ligula eu. Lacus vitae pharetra at Pellentesque et vitae enim Curabitur pretium et. Suspendisse quis dui velit Sed gravida urna ut Vestibulum adipiscing at. Vivamus auctor Aliquam.</p>
<p>Et Nam at velit Phasellus congue nisl turpis tristique tortor tellus. Feugiat volutpat velit ullamcorper id ut pede Praesent natoque justo quis. Et nonummy cursus tincidunt id ligula condimentum Pellentesque Nam convallis Nulla. Consectetuer Vivamus at at ligula ante odio Aenean enim accumsan ultrices. Sem pharetra leo justo malesuada tellus nibh nisl nonummy sed semper. Vel turpis a nibh congue semper natoque arcu risus eros semper. Nibh Nulla nulla neque sociis quis Curabitur magnis et elit mauris. Vestibulum tristique ut neque Quisque magna wisi Quisque hac Sed enim. Lobortis metus at eros Vivamus faucibus euismod wisi id Curabitur Curabitur. Curabitur Cum ac et leo volutpat nunc sagittis elit Nulla dolor. Leo elit In sapien.</p>
<h2> Vestibulum dui</h2>
<p>Vel a sodales semper Vestibulum dui quis Vestibulum ligula quis facilisi. A at montes consequat vitae Morbi adipiscing interdum nunc Vestibulum convallis. Lorem vitae accumsan ridiculus vel auctor neque pellentesque consequat eget Curabitur. Tristique auctor a Quisque lacus consectetuer interdum tincidunt sapien et Sed. Pede Cras sem elit nulla vitae Morbi pede egestas nibh mauris. Risus Vestibulum vel congue eros lacinia leo vel tempus lacinia vitae. Quis nunc semper justo Aenean enim sit habitasse tellus congue Curabitur. Aliquam Suspendisse semper cursus ut auctor non hendrerit ac pede pretium. Phasellus enim id tellus pretium ridiculus lorem urna tristique quis magna. Orci lacinia Curabitur urna ipsum accumsan augue at malesuada at justo. Ut.</p>
<p>Fringilla dictum risus nonummy in Donec pretium Vivamus Aenean pretium felis. Ullamcorper Curabitur a consectetuer orci urna non adipiscing dui orci et. Pellentesque tellus urna leo habitant consequat wisi non pretium lorem neque. Sociis Donec ullamcorper sagittis ipsum justo eu feugiat justo et Phasellus. Libero sem auctor accumsan eget semper Sed id Aenean at vel. Quam Cras congue tempus magna augue sed est sem elit suscipit. Augue eleifend Suspendisse facilisi leo condimentum Pellentesque nisl nascetur in pede. A at elit elit risus pellentesque euismod Praesent augue vestibulum Suspendisse. Sodales ligula Sed urna Vestibulum id tellus nibh Aenean non Nunc. Eu justo tortor nonummy iaculis aliquet ut dignissim condimentum odio tempor. Nisl libero vitae interdum sociis eros lacus sem Aenean mauris netus. Lacus augue dui magna Quisque tortor pellentesque augue gravida Sed dui. Mi semper cursus pellentesque neque eu ac vitae tellus Donec dictumst. Donec adipiscing gravida Curabitur urna nonummy porta magna Nunc facilisis Nullam. Odio sed tempus Sed ac Nam interdum Curabitur tincidunt eget Curabitur. Maecenas Morbi auctor ac Quisque pretium nibh at sem Nunc fringilla. Senectus Quisque tincidunt quis Pellentesque et vel eleifend habitasse.</p>
<h2> Aenean sagittis</h2>
<p>Sodales Pellentesque Aenean sagittis semper lacinia augue massa tempor at wisi. Id venenatis Nulla gravida Vestibulum non In ipsum cursus libero id. Et lobortis neque lorem nibh enim turpis a Vestibulum Duis nulla. Leo semper ac semper mauris consequat semper nibh Curabitur ligula tempor. Enim nibh ligula dolor lacinia fermentum dignissim lacinia tellus eget adipiscing. Et Curabitur nulla nec velit neque pellentesque quis tortor porta dolor. Tristique Phasellus amet tempus Phasellus Vestibulum orci nulla condimentum faucibus non. Quis ut lobortis Sed sed volutpat dictumst ultrices ut fames a. In et ut consequat Lorem mattis dictumst Phasellus eu Nam mauris. Auctor sagittis feugiat laoreet neque malesuada tellus sit justo pretium scelerisque. Tristique Praesent Donec ut volutpat orci Nam condimentum convallis dolor non. Venenatis Morbi Donec morbi risus quam sem ac vitae diam Ut. Morbi a Curabitur suscipit felis Duis condimentum et sit urna Donec. Interdum a tellus Vivamus quis urna justo nulla elit Curabitur nisl. Mauris mus turpis et morbi Curabitur Integer et ac magnis vel. Ac leo volutpat ligula Nulla at nibh Cum eu adipiscing enim. Urna non volutpat Curabitur odio senectus at sapien dictumst lorem pretium. Nibh accumsan Aenean Morbi.</p>
</div>
</body>
</html>Думаю это задание было для вас одним из самых легких, а ведь какое-то время назад CSS был для вас не более чем непонятная и страшная аббревиатура, не правда ли? С чем вас и поздравляю! :) Ну да ладно. На что стоит обратить внимание. Чтобы добавленное содержимое и содержимое заголовков не стояли друг к другу вплотную, в самом начале был добавлен пробел. В принципе, этот пробел можно было добавить и не в заголовках, а в конце самого добавляемого текста, но тогда бы подчеркивание некрасиво выпирало справа. С этим уроком все.
| Вернуться в урок | → Перейти к следующему уроку |