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

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

Содержание:

Верстка 1  http://ot7.ru/html/51

Верстка 2 http://ot7.ru/html/urok5

Верстка 1

  1. Создайте меню и фон как на  примере http://ot7.ru/html/51
  2. Код html
<html>
  <head>
    <meta charset="utf-8">
    <title>Блочная верстка</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="header">
      <div class="center">
        <div class="row">
          <div class="logo">
            <h3>
            <a href="index.html">IWebmaster.kz</a>
            </h3>
          </div>
          <div class="menu">
            <ul>
              <li><a href="index.html">Главная</a></li>
              <li><a href="">О нас</a></li>
              <li><a href="">Услуги</a></li>
              <li><a href="#">Контакты</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div id="content">
      <div class="block">
        <div class="center">
          <div class="row">content</div>
        </div>
      </div>
      <div class="block2">
        <div class="center">
          <div class="row">content</div>
        </div>
      </div>
      <div class="center">
        <div class="row">
        <p>
        Lorem ipsum dolor sit amet, essent insolens ad duo. His augue explicari at, per ad enim facete appetere. Labore virtute suscipit ex nec, per modo sonet lobortis ad. Mel ei homero dolorum dissentias. Eu quem solet tritani est, deserunt elaboraret mei ex. At est interesset cotidieque, has dicunt melius in, sed an prima clita scripserit. At eos omnis causae eligendi.

        Cum id graeci vidisse interesset. Tempor moderatius nam ea, ea vel scaevola liberavisse philosophia, evertitur voluptaria est at. Eum doming omittantur eu, munere ponderum percipitur at sit. Vis fugit adipisci abhorreant id, aeque clita qui ei. Audiam sensibus instructior mei ex. Apeirian consequuntur interpretaris ad vim.

        Ex hinc qualisque elaboraret his, integre nominati percipitur ius et. Pro esse luptatum at, mei in iisque alterum. Sit id porro ignota intellegebat, mei at ancillae gubergren. Vim odio labore voluptua ei.

        Has soluta aperiam disputationi ea, brute tation vix an. In qui habemus accumsan invidunt, sea commune adipisci aliquando et. At ius tacimates conclusionemque. Mea ea tota aliquid. An nostrum adolescens sententiae pri, sea ut duis vulputate referrentur, hinc postea patrioque eu sed. Has cu maiorum percipitur signiferumque, sea blandit lucilius reprehendunt id.

        Sea no solum graeco referrentur, doming percipitur in cum. Nemore diceret vis cu. No mundi similique ius, at nihil omnes omnesque vix, id iuvaret elaboraret est. Mea cu tota solet discere, diam erroribus mel at.
        </p>
        </div>
      </div>
    </div>
    <div id="footer">
      <div class="center">
        <div class="row">footer</div>
      </div>
    </div>
  </body>
</html>

Код файла style.css

/* *-универсальный селектор - 0 баллов
  a,body,h1,p и т.д. - селекторы тегов(элементов) - 2 балла
  .content,.row и т.д. - селекторы классов - 10 баллов
  #header,#content,#footer - селекторы идентификаторов - 100 баллов
 */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  
}
a{
  text-decoration:none;
  
}
body{
  background:#ff0 url(images/pattern3.jpg) repeat;
}
/*задаем блокам резиновые свойства*/
#header,#content,#footer{
  width:100%;
  float:left;
  border:1px solid #FFF;
}
#header,#footer{
  background:rgba(0,0,0,0.7);
}
/*задаем ширину рабочей области и оцентровываем ее*/
.center{
  max-width:1124px;/**/
  margin:0 auto;
}

.row{
  float:left;
  width:100%;
  padding:20px;
}
.logo{
  float:left;
}
.menu{
  float:right;
}
.menu a,.logo a{
  color:#fff;
}
.menu li{
  float:left;
}
.menu a{
  padding:25px 20px;
  
}
/* :hover - псевдоселектор, изменяет отображение блока при наведении*/
.menu a:hover{
  background:#fff;
  color:#000;
  border-bottom:5px solid red;
}
.block{
  float:left;
  width:100%;
  background:url(images/fon1.png) no-repeat;
  background-size:cover; /*размер фоновой картинки: ширина 100% и высота 100% блока*/
  background-position:50% 50%;/*оцентровываем картинку*/
  background-attachment:fixed; /*создаем параллакс эффект - фиксируем картинку*/
  height:100vh; /*100% высота окна*/
  
}
.block2{
  float:left;
  width:100%;
  background:url(images/pattern.jpg) no-repeat;
  background-size:cover;
  background-position:50% 50%;
  background-attachment:fixed;
  height:100vh;
  
}

 

 

Верстка 2

  1. Создайте меню и фон как на  примере http://ot7.ru/html/urok5
  2. Код html 
    <html>
    <head> 
       <title> Блочная верстка </title>
     <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    
  </head>
    
  <body> 
    <div id="wrapper">
      <div class="header">
      <div class="top">
        <div class="zapis"><a href="contact.html">Записaться</a></div>
        <div class="phone"><address>г.Караганда, ул.Бульвар мира 37, офис 412 | тел: +7 7212 421218, + 7 777 226 27 88</address></div>
      </div>
      <div class="logo"><a href="index.html"><img src="images/logo.png"></a></div>
      <div class="menu">
          <ul>
            <li><a href="">Главная </a>	</li>
            <li><a href="">Портфолио</a></li>
            <li><a href="">Отзывы</a></li>
            <li><a href="">Контакты</a></li>
          </ul>
      </div>
      </div>
      <div class="sidebar"> Сайдбар</div>
      <div class="content">Контент
      </div>
      <div class="footer">Футер</div>
    </div>
  </body>
</html>
  3. Код style.css 
    @import url(https://fonts.googleapis.com/css?family=Ubuntu+Condensed&subset=latin,cyrillic);
body{
  margin:0;
  padding:0;
  font-family: 'Ubuntu Condensed', sans-serif;
  background:url(images/pattern.png);
  background-attachment:fixed;
  
}
img{
  max-width:100%;
  width:auto;
}
/*Внешняя оболочка сайта*/
#wrapper{
  max-width:1200px;
  margin:0 auto;
}
/*шапка сайта*/
.header{
  width:100%;
  background:#DE214B;
  float:left;
  border-bottom: 2px #fff solid;
}
/*верхняя часть шапки где указывается координаты*/
.top{
  width:100%;
  float:left;
  background: #a73c53;
    color: #F5F5F5;
    border-bottom: 1px #fff solid;
    font-size: 12px;
}
/*ссылка записаться на курсы */
.zapis{
  float:left;
  margin:10px 20px;
}
.zapis a{
  color:#fff;
}
/*контактные данные*/
.phone{
  float:right;
  margin:10px 20px;
}
/*конец верхней части top*/

/*логотип*/
.logo{
  max-width:300px;/*максимальная ширина блока с логотипом*/
  float:left;
  margin:20px;
}
  .logo img{
  width:100px;/*ширина картинки*/
}
/*меню*/
.menu{
  max-width:820px;/*максимальная ширина блока*/
  margin:10px 0px;/*внешний отступ сверху и снизу 10px*/
  float:right;/*расположение справа*/
  font-size: 20px;/*размер шрифта*/
}
.menu ul{
  margin:10px 0px;/*внешний отступ блока со списком*/
  float:right;
}
.menu li{
  float:left;
  margin:5px 0px;
}
.menu a{
  padding:10px 20px;
  text-decoration:none;
  color:#fff;
  border-left:1px transparent solid;/*рамка слева с прозрачным цветом*/
  border-right:1px transparent solid;/*рамка справа с прозрачным цветом*/
}
/*правило для меню при наведении*/
.menu a:hover{
  padding:25px 20px; 
  background:#a73c53;
  border-left:1px #fff solid;
  border-right:1px #fff solid;
}
.sidebar{
  width:300px;
  background:#666;
  float:left;
  padding:15px;
  box-sizing:border-box;
}
.content{
  width:calc(100% - 300px);
  min-width:300px;
  background:#777;
  float:left;
  padding:15px;
  box-sizing:border-box;
}
.footer{
  width:100%;
  background:#000;
  float:left;
  padding:15px;
  box-sizing:border-box;
  color:#fff;
}