Задание по HTML к одиннадцатому уроку

Автор: | 22.09.2015
Нет комментариев

Шаблон главной страницы 

Примеры адаптивной верстки по ссылке1  и ссылке2  

код HTML

  1. <html>
  2. <head>
  3. <title>4 урок</title>
  4. <meta charset="utf-8">
  5. <link rel="stylesheet" href="style.css">
  6. <link rel="stylesheet" href="style.css" media="screen">
  7. <meta name="viewport" content="width=device-width, initial-scale=1" >
  8. </head>
  10. <body>
  11. <div class="wrapper">
  12. <div class="header">Блочный тег</div>
  13. <div class="sidebar"></div>
  14. <div class="content">
  15. <div class="col-3"><img src="images/colorwebdesign.jpg"></div>
  16. <div class="col-3">Блочный тег</div>
  17. <div class="col-3">Блочный тег</div>
  18. <div class="col-2"><img src="images/colorwebdesign.jpg"></div>
  19. <div class="col-2">Блочный тег</div>
  20. <div class="col-4">Блочный тег</div>
  21. <div class="col-4">Блочный тег</div>
  22. <div class="col-4">Блочный тег</div>
  23. <div class="col-4"><img src="images/colorwebdesign.jpg"></div>
  24. </div>
  25. <div class="footer"></div>
  26. </div>
  27. </body>
  28. </html>
<html>
    <head> 
       <title>4 урок</title>
     <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="style.css" media="screen">
    <meta name="viewport" content="width=device-width, initial-scale=1" >		
  </head>
    
  <body> 
  <div class="wrapper">
    <div class="header">Блочный тег</div>
    <div class="sidebar"></div>
    <div class="content">
      <div class="col-3"><img src="images/colorwebdesign.jpg"></div>
      <div class="col-3">Блочный тег</div>
      <div class="col-3">Блочный тег</div>
      <div class="col-2"><img src="images/colorwebdesign.jpg"></div>
      <div class="col-2">Блочный тег</div>
      <div class="col-4">Блочный тег</div>
      <div class="col-4">Блочный тег</div>
      <div class="col-4">Блочный тег</div>
      <div class="col-4"><img src="images/colorwebdesign.jpg"></div>
    </div>
    <div class="footer"></div>
  </div>	
  </body>
</html>

код CSS

  1. body{
  2. font:100%/1.5em Arial,sans-serif;
  3. word-wrap: break-word;
  4. }
  5. .wrapper{
  6. max-width:90%;
  7. margin:0 auto;
  8. }
  9. .header{
  10. width:100%;
  11. clear:both;
  12. height:100px;
  13. background:#222;
  15. }
  18. .sidebar{
  19. width:300px;
  20. float:left;
  21. height:300px;
  22. background:#444;
  24. }
  25. .content{
  26. width:calc(100% - 300px);
  27. float:left;
  28. background:#777;
  30. }
  31. .footer{
  32. width:100%;
  33. clear:both;
  34. height:100px;
  35. background:#222;
  36. }
  37. .col-2{
  38. margin:2%;
  39. width:46%;
  40. float:left;
  41. background:blue;
  42. color:#fff;
  43. height:300px;
  44. }
  45. .col-3{
  46. margin:2%;
  47. width:29%;
  48. float:left;
  49. background:green;
  50. color:#fff;
  51. height:300px;
  52. }
  53. .col-4{
  54. margin:2%;
  55. width:21%;
  56. float:left;
  57. background:pink;
  58. color:#fff;
  59. height:300px;
  60. }
  61. img{
  62. max-width:100%;
  63. width:auto;
  64. }
body{
  font:100%/1.5em Arial,sans-serif;
  word-wrap: break-word; 
}
.wrapper{
  max-width:90%;
  margin:0 auto;
}
.header{
  width:100%;
  clear:both;
  height:100px;
  background:#222;
  
}


.sidebar{
  width:300px;
  float:left;
  height:300px;
  background:#444;
  
}
.content{
  width:calc(100% - 300px);
  float:left;
  background:#777;
  
}
.footer{
  width:100%;
  clear:both;
  height:100px;
  background:#222;
}
.col-2{
  margin:2%;
  width:46%;
  float:left;
  background:blue;
  color:#fff;
  height:300px;
}
.col-3{
  margin:2%;
  width:29%;
  float:left;
  background:green;
  color:#fff;
  height:300px;
}
.col-4{
  margin:2%;
  width:21%;
  float:left;
  background:pink;
  color:#fff;
  height:300px;
}
img{
  max-width:100%;
  width:auto;
}

 

Модальное окно

  1. <!DOCTYPE html>
  2. <head>
  3. <title>Creating a modal window with HTML5 &amp; CSS3</title>
  5. <style>
  6. .modalDialog {
  7. position: fixed;
  8. font-family: Arial, Helvetica, sans-serif;
  9. top: 0;
  10. right: 0;
  11. bottom: 0;
  12. left: 0;
  13. background: rgba(0,0,0,0.8);
  14. z-index: 99999;
  15. opacity:0;
  16. -webkit-transition: opacity 400ms ease-in;
  17. -moz-transition: opacity 400ms ease-in;
  18. transition: opacity 400ms ease-in;
  19. pointer-events: none;
  20. }
  22. .modalDialog:target {
  23. opacity:1;
  24. pointer-events: auto;
  25. }
  27. .modalDialog > div {
  28. width: 400px;
  29. position: relative;
  30. margin: 10% auto;
  31. padding: 5px 20px 13px 20px;
  32. border-radius: 10px;
  33. background: #fff;
  34. background: -moz-linear-gradient(#fff, #999);
  35. background: -webkit-linear-gradient(#fff, #999);
  36. background: -o-linear-gradient(#fff, #999);
  37. }
  39. .close {
  40. background: #606061;
  41. color: #FFFFFF;
  42. line-height: 25px;
  43. position: absolute;
  44. right: -12px;
  45. text-align: center;
  46. top: -10px;
  47. width: 24px;
  48. text-decoration: none;
  49. font-weight: bold;
  50. -webkit-border-radius: 12px;
  51. -moz-border-radius: 12px;
  52. border-radius: 12px;
  53. -moz-box-shadow: 1px 1px 3px #000;
  54. -webkit-box-shadow: 1px 1px 3px #000;
  55. box-shadow: 1px 1px 3px #000;
  56. }
  58. .close:hover { background: #00d9ff; }
  59. </style>
  60. </head>
  62. <body>
  64. <a href="#openModal">Open Modal</a>
  66. <div id="openModal" class="modalDialog">
  67. <div>
  68. <a href="#close" title="Close" class="close">X</a>
  69. <h2>Modal Box</h2>
  70. <p>This is a sample modal box that can be created using the powers of CSS3.</p>
  71. <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
  72. </div>
  73. </div>
  75. </body>
  76. </html>
<!DOCTYPE html>
<head>
  <title>Creating a modal window with HTML5 &amp; CSS3</title>
  
  <style>
  .modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
  }

  .modalDialog:target {
    opacity:1;
    pointer-events: auto;
  }

  .modalDialog > div {
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
  }

  .close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
  }

  .close:hover { background: #00d9ff; }
  </style>
</head>

<body>

<a href="#openModal">Open Modal</a>

<div id="openModal" class="modalDialog">
  <div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Modal Box</h2>
    <p>This is a sample modal box that can be created using the powers of CSS3.</p>
    <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
  </div>
</div>

</body>
</html>

 

Задание

Создать простую фотогалерею, которая будет хорошо отображаться на различных экранах устройств.

1. Для начала создать обычное изображение, которое будет растягиваться на всю ширину экрана.

  1. <div>
  2. <img src="../images/1.jpg">
  3. </div>
<div>
    <img src="../images/1.jpg">
</div>

Предельно просто. Всего лишь обернули изображение в контейнер.

  1. div {
  2. width: 100%;
  3. text-align: center;
  4. }
  5. div img {
  6. width: 100%;
  7. height: auto;
  8. }
div {
    width: 100%;
    text-align: center;
}
div img {
    width: 100%;
    height: auto;
}

Мы задаем ширину изображению, равную ширине контейнера div. Благодаря этому, если уменьшается div, то уменьшается img.
В итоге мы получили изображение, которое растягивается на весь экран, будь-то экран 320*240 пикселей или экран с разрешением 1920*1080 пикселей.

Untitled-68

Максимальная и минимальная ширина
Как видно в примере, если у нас очень большой экран или наоборот очень маленький, то изображение будет либо слишком сильно растягиваться с потерей качества, либо слишком сильно сжиматься.
Чтобы решить данную проблему зададим изображению определенную максимальную и минимальную ширину.

  1. div {
  2. margin: 0 auto;
  3. width: 1000px;
  4. max-width: 90%; /* контейнер не превышает 90% ширины экрана */
  5. min-width: 500px;
  6. }
  7. div img {
  8. max-width: 100%;
  9. height: auto;
  10. }
div {
    margin: 0 auto;
    width: 1000px;
    max-width: 90%; /* контейнер не превышает 90% ширины экрана */
    min-width: 500px;
}
div img {
    max-width: 100%;
    height: auto;
}

Теперь контейнер, а следовательно и изображение будут изменяться в разумных пределах от 500 до 1000 пикселей по ширине.

Фотогалерея
2. Попробуем создать минигалерею.
Будем использовать уже известные нам принципы.

  1. <div class="image_gallery">
  2. <div>
  3. <img src="../images/1.jpg" title="Деревья, листики..." />
  4. </div>
  5. <div>
  6. <img src="../images/2.jpg" title="Зима" />
  7. </div>
  8. <div>
  9. <img src="../images/3.jpg" title="Озеро" />
  10. </div>
  11. <div>
  12. <img src="../images/4.jpg" title="Райский остров" />
  13. </div>
  14. </div>
<div class="image_gallery">
    <div>
        <img src="../images/1.jpg" title="Деревья, листики..." />
    </div>
    <div>
        <img src="../images/2.jpg" title="Зима"  />
    </div>
    <div>
        <img src="../images/3.jpg" title="Озеро"  />
    </div>
    <div>
        <img src="../images/4.jpg" title="Райский остров"  />
    </div>
</div>

В HTML мы лишь добавили несколько изображений и завернули все в один div.

  1. div.image_gallery {
  2. margin: 0 auto;
  3. width: 1000px;
  4. text-align: center;
  5. max-width: 90%; /* контейнер не превышает 90% ширины экрана */
  6. min-width: 500px;
  7. }
  8. img {
  9. float: left;
  10. max-width: 48%;
  11. height: auto;
  12. padding: 1%; /* небольшие оступы для изображений */
  13. }
div.image_gallery {
    margin: 0 auto;
    width: 1000px;
    text-align: center;
    max-width: 90%; /* контейнер не превышает 90% ширины экрана */
    min-width: 500px;
}
img {
    float: left;
    max-width: 48%;
    height: auto;
    padding: 1%; /* небольшие оступы для изображений */
}

Каждое изображение в галерее теперь будет изменять свой размер в зависимости от контейнера. Так же мы добавили небольшой отступ по 1% с каждой стороны для красоты.

Untitled-69

Итог
Итак, мы создали маленькую фотогалерею, которая хорошо отображается на различных экранах. Мы добились адаптивности.
Но это еще не все.
В данном примере можно выделить большой минус: на мелких экранах изображения будут либо слишком мелкими, либо появится скролл в браузере.

 

Задание 2

Доработать галерею используя медиа запросы:

  1. <h1>...</h1>
  2. <div class="image_gallery">
  3. <div>
  4. <img src="../images/1.jpg" title="Деревья, листики..." />
  5. </div>
  6. <div>
  7. <img src="../images/2.jpg" title="Зима" />
  8. </div>
  9. ...
  10. </div>
<h1>...</h1>
<div class="image_gallery">
    <div>
        <img src="../images/1.jpg" title="Деревья, листики..." />
    </div>
    <div>
        <img src="../images/2.jpg" title="Зима"  />
    </div>
    ...
</div>
  1. h1 {
  2. font-size: 24px;
  3. text-align: center;
  4. }
  5. div.image_gallery {
  6. margin: 0 auto;
  7. width: 1000px;
  8. text-align: center;
  9. max-width: 90%; /* контейнер не превышает 90% ширины экрана */
  10. min-width: 500px;
  11. }
  12. img {
  13. float: left;
  14. max-width: 31%;
  15. height: auto;
  16. padding: 1%; /* небольшие оступы для изображений */
  17. }
h1 {
    font-size: 24px;
    text-align: center;
}
div.image_gallery {
    margin: 0 auto;
    width: 1000px;
    text-align: center;
    max-width: 90%; /* контейнер не превышает 90% ширины экрана */
    min-width: 500px;
}
img {
    float: left;
    max-width: 31%;
    height: auto;
    padding: 1%; /* небольшие оступы для изображений */
}

Что получилось? Смотрим:

Untitled-70

При небольшом разрешении картинки становятся слишком мелкими, а текст в заголовке огромным.
Решим нашу проблему!

  1. /* прошлый CSS */
  2. h1 {}
  3. div.image_gallery {}
  4. img {}
  6. @media screen and (max-width: 768px) { /* разрешение планшета */
  7. h1 {
  8. font-size: 20px;
  9. }
  10. div.image_gallery {
  11. min-width: 320px;
  12. }
  13. img {
  14. max-width: 48%; /* 2 изображения в ряд */
  15. height: auto;
  16. padding: 1%; /* небольшие оступы для изображений */
  17. }
  18. }
/* прошлый CSS */
h1 {}
div.image_gallery {}
img {}
 
@media screen and (max-width: 768px) { /* разрешение планшета */
    h1 {
        font-size: 20px;
    }
    div.image_gallery {
        min-width: 320px;
    }
    img {
        max-width: 48%; /* 2 изображения в ряд */
        height: auto;
        padding: 1%; /* небольшие оступы для изображений */
    }
}

Мы добавили проверку на разрешение. Если разрешение экрана меньше или равно 768 пикселей, то наша галерея перестраивается. В ряд у нас умещается теперь по 2 изображения (width 48% + padding 2%).

Untitled-71

В результате фотографии на экране планшета стали выглядеть намного лучше!

Теперь разберемся с экраном поменьше.

  1. @media screen and (max-width: 480px) { /* разрешение смартфона */
  2. h1 {
  3. min-width: 320px;
  4. font-size: 16px;
  5. }
  6. div.image_gallery {
  7. width: 320px;
  8. min-width: 320px;
  9. }
  10. img {
  11. max-width: 98%;
  12. height: auto;
  13. padding: 1%; /* небольшие оступы для изображений */
  14. }
  15. }
@media screen and (max-width: 480px) { /* разрешение смартфона */
    h1 {
        min-width: 320px;
        font-size: 16px;
    }
    div.image_gallery {
        width: 320px;
        min-width: 320px;
    }
    img {
        max-width: 98%;
        height: auto;
        padding: 1%; /* небольшие оступы для изображений */
    }
}

После добавления этого кода при разрешении экрана меньше либо равного 480 пикселей, изображения вновь перестраиваются и теперь отображаются по одному в ряд.

Untitled-72

Итог
Теперь мы имеет фотогалерею, которая удобно подстраивается под устройства. При желании можно добавить и другие разрешения (320 пкс, 960 пкс и т.д.).
Ничего сложного и такая хорошая возможность подстроить наш сайт под разные экраны!

 

  1. <h1>...</h1>
  2. <div class="image_gallery">
  3. <div>
  4. <img src="../images/1.jpg" title="Деревья, листики..." />
  5. </div>
  6. <div>
  7. <img src="../images/2.jpg" title="Зима" />
  8. </div>
  9. ...
  10. </div>
<h1>...</h1>
<div class="image_gallery">
    <div>
        <img src="../images/1.jpg" title="Деревья, листики..." />
    </div>
    <div>
        <img src="../images/2.jpg" title="Зима"  />
    </div>
    ...
</div>
  1. h1 {
  2. font-size: 24px;
  3. text-align: center;
  4. }
  5. div.image_gallery {
  6. margin: 0 auto;
  7. width: 1000px;
  8. text-align: center;
  9. max-width: 90%; /* контейнер не превышает 90% ширины экрана */
  10. min-width: 500px;
  11. }
  12. img {
  13. float: left;
  14. max-width: 31%;
  15. height: auto;
  16. padding: 1%; /* небольшие оступы для изображений */
  17. }
h1 {
    font-size: 24px;
    text-align: center;
}
div.image_gallery {
    margin: 0 auto;
    width: 1000px;
    text-align: center;
    max-width: 90%; /* контейнер не превышает 90% ширины экрана */
    min-width: 500px;
}
img {
    float: left;
    max-width: 31%;
    height: auto;
    padding: 1%; /* небольшие оступы для изображений */
}

Что получилось? Смотрим:

Untitled-70

При небольшом разрешении картинки становятся слишком мелкими, а текст в заголовке огромным.
Решим нашу проблему!

  1. /* прошлый CSS */
  2. h1 {}
  3. div.image_gallery {}
  4. img {}
  6. @media screen and (max-width: 768px) { /* разрешение планшета */
  7. h1 {
  8. font-size: 20px;
  9. }
  10. div.image_gallery {
  11. min-width: 320px;
  12. }
  13. img {
  14. max-width: 48%; /* 2 изображения в ряд */
  15. height: auto;
  16. padding: 1%; /* небольшие оступы для изображений */
  17. }
  18. }
/* прошлый CSS */
h1 {}
div.image_gallery {}
img {}
 
@media screen and (max-width: 768px) { /* разрешение планшета */
    h1 {
        font-size: 20px;
    }
    div.image_gallery {
        min-width: 320px;
    }
    img {
        max-width: 48%; /* 2 изображения в ряд */
        height: auto;
        padding: 1%; /* небольшие оступы для изображений */
    }
}

Мы добавили проверку на разрешение. Если разрешение экрана меньше или равно 768 пикселей, то наша галерея перестраивается. В ряд у нас умещается теперь по 2 изображения (width 48% + padding 2%).

Untitled-71

В результате фотографии на экране планшета стали выглядеть намного лучше!

Теперь разберемся с экраном поменьше.

  1. @media screen and (max-width: 480px) { /* разрешение смартфона */
  2. h1 {
  3. min-width: 320px;
  4. font-size: 16px;
  5. }
  6. div.image_gallery {
  7. width: 320px;
  8. min-width: 320px;
  9. }
  10. img {
  11. max-width: 98%;
  12. height: auto;
  13. padding: 1%; /* небольшие оступы для изображений */
  14. }
  15. }
@media screen and (max-width: 480px) { /* разрешение смартфона */
    h1 {
        min-width: 320px;
        font-size: 16px;
    }
    div.image_gallery {
        width: 320px;
        min-width: 320px;
    }
    img {
        max-width: 98%;
        height: auto;
        padding: 1%; /* небольшие оступы для изображений */
    }
}

После добавления этого кода при разрешении экрана меньше либо равного 480 пикселей, изображения вновь перестраиваются и теперь отображаются по одному в ряд.

Untitled-72

Итог
Теперь мы имеет фотогалерею, которая удобно подстраивается под устройства. При желании можно добавить и другие разрешения (320 пкс, 960 пкс и т.д.).
Ничего сложного и такая хорошая возможность подстроить наш сайт под разные экраны!