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

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

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

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

код 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

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;
}

 

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

<!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. Для начала создать обычное изображение, которое будет растягиваться на всю ширину экрана.

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

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

div {
    width: 100%;
    text-align: center;
}
div img {
    width: 100%;
    height: auto;
}

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

Untitled-68

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

div {
    margin: 0 auto;
    width: 1000px;
    max-width: 90%; /* контейнер не превышает 90% ширины экрана */
    min-width: 500px;
}
div img {
    max-width: 100%;
    height: auto;
}

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

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

<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.

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

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

<h1>...</h1>
<div class="image_gallery">
    <div>
        <img src="../images/1.jpg" title="Деревья, листики..." />
    </div>
    <div>
        <img src="../images/2.jpg" title="Зима"  />
    </div>
    ...
</div>
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

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

/* прошлый 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

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

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

@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 пкс и т.д.).
Ничего сложного и такая хорошая возможность подстроить наш сайт под разные экраны!

 

<h1>...</h1>
<div class="image_gallery">
    <div>
        <img src="../images/1.jpg" title="Деревья, листики..." />
    </div>
    <div>
        <img src="../images/2.jpg" title="Зима"  />
    </div>
    ...
</div>
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

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

/* прошлый 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

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

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

@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 пкс и т.д.).
Ничего сложного и такая хорошая возможность подстроить наш сайт под разные экраны!