Блог по программированию

Задание по HTML к восьмому уроку

Написано

admin

в

  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>Трансформация и плавность перехода</title>
  5. <link rel="stylesheet" href="test.css">
  6. </head>
  7. <body>
  8. <div class="block">Трансформация</div>
  9. </body>
  10. </html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Трансформация и плавность перехода</title>
    <link rel="stylesheet" href="test.css">
  </head>
  <body>
    <div class="block">Трансформация</div>
  </body>
</html>

test.css

  1. *{
  2. margin:0;
  3. padding:0;
  4. box-sizing:border-box;
  5. }
  6. .block{
  7. width:200px;
  8. height:200px;
  9. background:#ff0;
  10. border-top:5px red solid;
  11. border-left:5px green solid;
  12. border-right:5px blue solid;
  13. border-bottom:5px orange solid;
  14. text-align:center;
  15. line-height:200px;
  16. }
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.block{
  width:200px;
  height:200px;
  background:#ff0;
  border-top:5px red solid;
  border-left:5px green solid;
  border-right:5px blue solid;
  border-bottom:5px orange solid;
  text-align:center;
  line-height:200px;
}

 

Добавьте анимацию к своей странице как на примере урок8

Задание для восьмого урока

  1. Создать страницу istoriya.html задать для нее фон
  2. Оформить текст «история города» используя стили приведенные в уроке 8.

— Первые четыре абзаца с выравниванием по левому краю, по правому краю, по центру и по обоим краям.
— Добавить три заголовка используя свойста text-decoration, а также применить его в тексте.
— Сделать чтобы все абзацы начинались с красной строки.
— Применить в тексте свойства text-transform.
— использовать свойсто вертикальное выравнивание.
— изменить растояние между символами и словами для первого абзаца.
— изменить расстояние между строками второго абзаца и третьего.
— изменить стили шрифта и font-family для заголовков.

1. Код страницы со стилями для фона, заголовка и ссылок:

  1. <html>
  2. <head>
  4. <title>Город мой</title>
  5. <meta name="keywords" content="Ключевые слова, HTML и его элементы" >
  6. <meta charset="utf-8">
  7. <meta name="description" content="Основы HTML от GoldStudio" >
  8. <meta name="author" content="Джон Дое" >
  9. <meta name="robots" content="index,follow">
  11. <style type="text/css">
  12. h1 {
  13. color:#009BF9;
  14. }
  15. html,body {
  17. background-image: url(gerb.jpg);
  18. background-repeat: repeat-y;
  19. }
  20. }
  21. a:link {
  22. color: #00E5FF;
  23. text-decoration:none;
  24. }
  25. a:visited {
  26. color: #009BF9;
  27. text-decoration:none;
  28. }
  29. a:active {
  30. font-style: italic;
  31. text-decoration:none;
  32. }
  33. a:hover {
  34. color:#00FBDB;
  35. font-style: italic;
  36. letter-spacing: 10px;
  37. font-weight:bold;
  38. text-decoration:none;
  39. }
  40. .divstyle
  41. {
  42. background-color: #F7FFFF;
  43. margin-left: 400px;
  44. margin-right: 400px;
  45. padding: 20px;
  46. margin-top: 10px;
  47. }
  48. .spanstyle
  49. {
  50. Color:#FFDEAD;
  51. }
  53. </style>
  55. </head>
  57. <body>
  59. <div class="divstyle">
  60. ….
  61. </div>
  63. </body>
  65. </html>
<html>
<head>

<title>Город мой</title>
<meta name="keywords" content="Ключевые слова, HTML и его элементы" >
<meta charset="utf-8">
<meta name="description" content="Основы HTML от GoldStudio" >
<meta name="author" content="Джон Дое" >
<meta name="robots" content="index,follow">

<style type="text/css">
h1 {
color:#009BF9;
}
html,body {

background-image: url(gerb.jpg);
background-repeat: repeat-y;
}
}
a:link {
color: #00E5FF;
text-decoration:none;
}
a:visited {
color: #009BF9;
text-decoration:none;
}
a:active {
font-style: italic;
text-decoration:none;
}
a:hover {
color:#00FBDB;
font-style: italic;
letter-spacing: 10px;
font-weight:bold;
text-decoration:none;
}
.divstyle
{
background-color: #F7FFFF;
margin-left: 400px;
margin-right: 400px;
padding: 20px;
margin-top: 10px;
}
.spanstyle
{
Color:#FFDEAD;
}

</style>

</head>

<body>

<div class="divstyle">
….
</div>

</body>

</html>

2. Создадим стиль для выравнивания текста первого абзаца

  1. .pleft {text-align: left}
.pleft {text-align: left}

И

  1. <p class="pleft">ваш текст</p>
<p class="pleft">ваш текст</p>

3. Стиль для выравнивания по правому краю

  1. .pright {text-align: right}
.pright {text-align: right}

И

  1. <p class="pright">ваш текст</p>
<p class="pright">ваш текст</p>

4. Выравнивание по центру:

  1. .pcenter {text-align: center}
.pcenter {text-align: center}

И

  1. <p class="pcenter">ваш текст</p>
<p class="pcenter">ваш текст</p>

5. Остальным абцам выравнивание по обоим краям

  1. p {text-align: justify}
p {text-align: justify}

Смотрим результат:

Untitled-49

6. Пропишем стили и классы для заголовков:

  1. h1 {
  2. color:#009BF9;
  3. text-decoration:underline;
  4. }
  5. .textа {text-decoration:overline;}
  6. .textb {text-decoration:line-through;}
h1 {
color:#009BF9;
text-decoration:underline;
}
.textа {text-decoration:overline;}
.textb {text-decoration:line-through;}

И применим класы для заголовка второго уровня и текста:

  1. <h2 class="texta">Самый большой город Карагандинской области</h2>
  2. <p class="textb">здесь ваш текст</p>
<h2 class="texta">Самый большой город Карагандинской области</h2>
<p class="textb">здесь ваш текст</p>

Смотрим результат:

Untitled-57

7. Делаем красную строку: text-indent: 20px
Стиль:

  1. p {
  2. text-align: justify;
  3. text-indent: 20px;
  4. }
p {
text-align: justify; 
text-indent: 20px;
}

Результат:

Untitled-51

8.  Сделаем чтоб в заголовке каждое слово начиналось с заглавного символа: text-transform: capitalize
Стиль:

  1. h1 {
  2. color:#009BF9;
  3. text-decoration:underline;
  4. text-transform: capitalize;
  5. }
h1 {
color:#009BF9;
text-decoration:underline;
text-transform: capitalize;
}

Добавим стили для преобразования символов в верхний и нижний регистр:

  1. .textc {text-transform: lowercase;}
  2. .textd {text-transform: uppercase;}
.textc {text-transform: lowercase;}
.textd {text-transform: uppercase;}

И применим их:

  1. <span class="textc">Страна</span>
  2. <span class="textd">Статус</span>
<span class="textc">Страна</span>
<span class="textd">Статус</span>

Результат:

Untitled-58

9. Напишем название города например ввиде волны:

  1. <h2>
  2. <span>К</span>
  3. <span style="vertical-align: -10px">а</span>
  4. <span>р</span>
  5. <span style="vertical-align: 10px">а</span>
  6. <span>г</span>
  7. <span style="vertical-align: -10px">а</span>
  8. <span>н</span>
  9. <span style="vertical-align: 10px">д</span>
  10. <span>а</span>
  11. </h2>
<h2>
<span>К</span>
<span style="vertical-align: -10px">а</span>
<span>р</span>
<span style="vertical-align: 10px">а</span>
<span>г</span>
<span style="vertical-align: -10px">а</span>
<span>н</span>
<span style="vertical-align: 10px">д</span>
<span>а</span>
</h2>

Результат:

Untitled-53

10. Изменим межсимвольное расстояние для первого абзаца. Добавим в класс pleft строки:

  1. word-spacing: 10px;
  2. letter-spacing: 5px;
word-spacing: 10px;
letter-spacing: 5px;

результат:

Untitled-54

11. Добавим в классы pright строку line-height: 25px; и pcenter строку line-height: 10px;

Untitled-55

12. Добавим в стиль заголовка строки font-style: italic; font-family: Comic Sans MS; и в класс texta строку font-style: oblique; font-family: Monotype Corsiva, Verdana;
Смотрим результат:

Untitled-56

 

Больше записей