Рубрика: HTML,CSS

Защищено: 10 урок. Трансформация и транзакция.

Это содержимое защищено паролем. Для его просмотра введите, пожалуйста, пароль:

Пароль:

24.10.2016
Защищено: 9 урок. CSS3 градиент и тени

Это содержимое защищено паролем. Для его просмотра введите, пожалуйста, пароль:

Пароль:

21.10.2016
Защищено: Урок №8: Виды и свойства блоков. Псевдоклассы и псевдоэлементы

Это содержимое защищено паролем. Для его просмотра введите, пожалуйста, пароль:

Пароль:

19.10.2016
Защищено: Урок №7. Принципы CSS-позиционирования

Это содержимое защищено паролем. Для его просмотра введите, пожалуйста, пароль:

Пароль:

17.10.2016
Защищено: Урок №6. Псевдоклассы и background (фон)

Это содержимое защищено паролем. Для его просмотра введите, пожалуйста, пароль:

Пароль:

13.10.2016
Защищено: Урок №5. Блочная модель CSS. Основная структура сайта.

Это содержимое защищено паролем. Для его просмотра введите, пожалуйста, пароль:

Пароль:

12.10.2016
Защищено: Урок 4. Блочные и строчные теги. Каскадная таблица стилей CSS.

Это содержимое защищено паролем. Для его просмотра введите, пожалуйста, пароль:

Пароль:

10.10.2016

к 5 уроку

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Блочная верстка</title>
  </head>
  <body>
  <div class="wrapper">
    <div id="header">
      <div class="logo"><a href="index.html">Ikurs</a></div>
    </div>
    <div id="nav">
      <nav>
        <ul>
          <li><a href="index.html">Главная</a></li>
          <li><a href="#">Услуги</a></li>
          <li><a href="#">Контакты</a></li>
        </ul>
      </nav>
    </div>
    <div id="content">
    
      <div class="sqr"></div>
    
    </div>
    <div id="sidebar">sidebar</div>
    <div id="footer">footer</div>
  </div>	
  </body>
</html>

style.css

/*Универсальный селектор 0 б*/
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body{
  font-family:Calibri,sans-serif;
  background:pink url(images/symphony.png) repeat;
  background-position:100% 50%;
}
/*Селекторы тегов (элементов) 2 б*/

.wrapper{
  max-width:960px;
  margin:0 auto;
}
#header,#footer,#nav{
  width:100%;
  float:left;
  background: rgba(0, 0, 0, 0.70);
  padding:10px 20px;
  border-bottom:#fff solid 2px;
}
#content{
  width:calc(100% - 300px);
  float:left;
  background:#eee url(images/webmaster.jpg) no-repeat;
  background-size:cover;
  background-position: 50% 50%;
  background-attachment:fixed;
  padding:10px 20px;
  height:700px;
  
}
#sidebar{
  width:300px;
  float:left;
  background:#ddd;
  padding:10px 20px;
}
/*Селекторы классов 10 б*/
.logo{
  text-align:center;
}
.logo a{
  color:#fff;
  font-size:30px;	
  text-decoration:none;
}
#nav li{
  float:left;
  margin: 10px 0;
}
#nav a{
  color:#000;
  padding:10px;
  text-decoration:none;
  background:#fff;
  border:2px transparent solid;
  
}
#nav a:hover{
  /*background:#fff;*/
  border:2px #333 solid;
}
#content{
  position:relative;
}
.sqr{
  width:100px;
  height:100px;
  background:red;
  position:absolute;
}


/*Селекторы идентификаторов 100 б*/

02.04.2016

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

@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css";
@import "animate.css";
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
body{
  background:url(images/crossword.png);
  font-family: 'calibri',sans-serif;
  font-size:1.25em;
  line-height:1.5em;
}
a{
  text-decoration:none;
}
#header,#content,#footer{
  width:100%;
  float:left;
  border:1px solid #FFF;
}
#header,#footer{
  background:rgba(0,0,0,0.7);
  
}
#content{
  margin-top:67px;
}
#up{
  position:fixed;
  width:50px;
  right:5%;
  bottom:5%;
}
.fix{
  position:fixed;
  top:0;
  left:0;
  width:100%;
}
h1,h2{
  text-align:center;
  margin:40px 0;
  border-bottom: 2px solid #ff0;
    line-height: 0;
  
}
.titl{
  background:#ff0;
  color:#000;
}
img{max-width:100%;
width:auto;
}

.center{
  max-width:1140px;
  margin:0 auto;
}
.font{
  font-size:1.5em;
  margin:5%;
  color:#ff0;
}
.cntr{
  text-align:center;
}
.row{
  padding:20px;
  width:100%;
  float:left;
}
.logo{
  float:left;
}
.logo a{
  color:#fff;
}
.menu{
  float:right;
}
.menu li{
  float:left;
}
.menu a{
  padding:25px 20px;
  /*background:#888;*/
  color:#fff;
}
.menu a:hover{
  background:#ff0;
  color:#000;
  
}
.block{
  background:url(images/02.jpg) no-repeat;
  background-attachment:fixed;
  background-size: cover;
  float: left;
    width: 100%;
  /*height: 100vh;*/
}
.block2{
  background:url(images/02.jpg) no-repeat;
  background-attachment:fixed;
  background-size: cover;
  float: left;
    width: 100%;
  /*height: 100vh;*/
}
.col-2{
  width:50%;
  padding:1%;
  float:left;
}
.col-3{
  width:33.3%;
  padding:1%;
  float:left;
}
.col-4{
  width:25%;
  padding:1%;
  float:left;
}
.fon{background:rgba(0,0,0,0.5);
  color:#fff;
  box-shadow: 0 0 109px rgb(0, 0, 0);
  height:100vh;
}
.fon2{background:rgba(0,0,0,0.5);
  color:#fff;
  box-shadow: 0 0 109px rgb(0, 0, 0);
  
}
.head{
  margin:15vh 0;
}
.btnred{
  text-align: center;
    background: #EA1124;
    padding: 10px 20px;
    width: 200px;
    margin: 0 auto;
  transition:0.5s;
}
.btndark{
  text-align: center;
    background: #484848;
    padding: 10px 20px;
    width: 200px;
    margin: 0 auto;
  transition:0.5s;
}
.btnred:hover,.btndark:hover{
  background: #eee;
  color:#000;
  
}
#zakaz{
  padding:20px 0;
  background:url(images/12.jpg) no-repeat;
  background-size:cover;
  background-attachment:fixed;
  float:left;
  width:100%;
}
#portfolio .col-4{
  height:150px;
  transition:3s;
}
#block2{
  text-align:center;
  }
#block3{
  margin: 40px 0;
    text-align: center;

}
input{
  width:100%;
  height:50px;
  font-size:20px;
  padding:10px;
  
}
input[type=submit]{
  background: #EA1124;
    padding: 10px 20px;
    width: 100%;
    margin: 0 auto;
  transition:0.5s;
  color:#fff;
  font-size:20px;
}
.blur img,.bw img,.sepia img,.contrast img
{transition:3s;position:relative;-webkit-filter: grayscale(80%);}
.blur img:hover {
-webkit-filter: grayscale(0%);
transform:rotate(360deg) scale(2) translate(100px);
z-index:1;
}
.bw img:hover {
-webkit-filter: grayscale(0%);
transform:rotateY(360deg) scale(4) translate(-100px);
z-index:1;
}

.icon{
  font-size:50px;
  margin:20px;
  text-align:center;
}

.i1{
  animation:i1 3s 0s;
  
  
}
.i2{
  
  animation:i2 3s 0s;
}
.i3{
  
  animation:i3 3s 0s;
}
@keyframes i1{
  0%{transform:translate(-100%);}
  100%{transform:translate(0%);}
}
@keyframes i2{
  0%{transform:translateY(-100%);}
  100%{transform:translateY(0%);}
}
@keyframes i3{
  0%{transform:translate(100%);}
  100%{transform:translate(0%);}
}
.sidebar{
  float:left;
  width:300px;
}
.contentr{
  float:left;
  width:calc(100% - 300px);
}
ul{list-style:none;}

.ms a{
  background:#444;
  padding:10px 20px;
  color:#FFF;
  display:block;
  border-bottom:1px solid #eee;
  transition:0.5s;
}
.ms a:hover{
  padding:10px 20px 10px 40px;
  background:#666;
}
.mslist{
  position:relative;
  transition:3s;
}
.mslist:after{
  content:" ";
  border-left:10px solid #fff;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  position:absolute;
  top:20px;
  right:10px;
  transition:0.5s;
  
}
.mslist:hover:after{
  transform:rotate(180deg);
}
.msdrop{
  position:absolute;
  top:0;
  left:100%;
  width:100%;
  display:none;
}
.mslist:hover .msdrop {
  display:block;
}

HTML

<html>
 <head>
 <meta charset="utf-8">
 <title>Блочная верстка</title>
 <link rel="stylesheet" href="style.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 </head>
 <body>
 <div id="header" class="fix">
 
 <div class="center">
 <div class="row">
 <div class="logo animated bounceInLeft"><a href="index.html"><h3>IWebmaster.kz</h3></a></div>
 <div class="menu">
 <ul>
 <li><a href="">Меню1</a></li>
 <li><a href="">Меню2</a></li>
 <li><a href="">Меню1</a></li>
 <li><a href="">Меню1</a></li>
 </ul>
 </div>
 </div>
 </div>
 
 </div>
 <div id="content">
 <div class="block">
 <div class="center">
 <div class="row fon">
 <h1 class="head"><span class="titl">Академия IWebMaster.kz</span></h1>
 <h3 class="cntr">IWebMaster.kz - компания, обьединившая в себе талантливых профессиональных подрядчиков, они качественно и в срок исполнят любое задание по самым оптимальным ценам! <br></h3>
 <p class="cntr font"><span>Оставьте заявку и мы разработаем вам отличный сайт!</span></p>
 <div class="col-2"><div class="btnred i1">Заказать сайт</div></div>
 <div class="col-2"><div class="btndark i3">Вход/регистрация</div></div> 
 
 
 </div>
 </div>
 </div>
 
 <div id="block2">
 <div class="center">
 <div class="row">
 <div class="col-3">
 <div class="icon mov1"><i class="fa fa-envelope-o"></i></div>
 <h3>Оставьте заявку</h3>
 <p>Зарегестрируйтесь в профиле и оставьте заявку<p>
 </div>
 <div class="col-3">
 <div class="icon mov2"><i class="fa fa-cogs"></i></div>
 <h3>Конкурс</h3>
 <p>Web-мастера рассмотрят вашу заявку, предложат свою цену за разработку сайта!<p>
 </div>
 <div class="col-3">
 <div class="icon mov3"><i class="fa fa-check"></i></div>
 <h3>Свобода выбора</h3>
 <p>Выберите своего Web-мастера, учитывая предложенную им цену и его профиль!<p>
 </div>
 </div>
 </div>
 </div>
 
 <div id="portfolio">
 <div class="center">
 <div class="row">
 <h2><span class="titl">Наши работы</span></h2>
 <div class="col-2 mov1">
 <img src="images/2.jpg">
 </div>
 <div class="col-4 mov3">
 <img src="images/5.jpeg">
 </div>
 <div class="col-4 mov3">
 <img src="images/6.jpeg">
 </div>
 <div class="col-4 mov3">
 <img src="images/7.jpeg">
 </div>
 <div class="col-4 mov3">
 <img src="images/8.jpeg">
 </div>
 
 </div> 
 </div> 
 </div>
 <div id="block3">
 <div class="center">
 <div class="row">
 <div class="col-4">
 <div class="icon mov1"><i class="fa fa-envelope-o"></i></div>
 <h3>Оставьте заявку</h3>
 <p>Зарегестрируйтесь в профиле и оставьте заявку<p>
 </div>
 <div class="col-4">
 <div class="icon mov2"><i class="fa fa-cogs"></i></div>
 <h3>Конкурс</h3>
 <p>Web-мастера рассмотрят вашу заявку, предложат свою цену за разработку сайта!<p>
 </div>
 <div class="col-4">
 <div class="icon mov3"><i class="fa fa-check"></i></div>
 <h3>Свобода выбора</h3>
 <p>Выберите своего Web-мастера, учитывая предложенную им цену и его профиль!<p>
 </div>
 <div class="col-4">
 <div class="icon mov2"><i class="fa fa-cogs"></i></div>
 <h3>Конкурс</h3>
 <p>Web-мастера рассмотрят вашу заявку, предложат свою цену за разработку сайта!<p>
 </div>
 </div>
 </div>
 </div>
 <div id="zakaz">
 <div class="center fon2">
 <div class="row">
 <form>
 <div class="col-3"><input type="text" name="name" placeholder="Введите Имя"></div>
 <div class="col-3"><input type="tel" name="tel" placeholder="Введите телефон"></div>
 <div class="col-3"><input class="btnred" type="submit" name="submit" value="Заказать звонок"></div>
 </form> 
 
 
 
 </div>
 </div>
 </div>
 
 
 
 </div>
 <div id="footer">
 <div class="center">
 <div class="row">
 Футер
 </div>
 </div>
 </div>
 <div id="up"><a href="#"><img src="images/up.png"></a></div>
 <script>$(window).scroll(function() {
 $('.mov1').each(function(){
 var imagePos = $(this).offset().top;
 var topOfWindow = $(window).scrollTop();
 if (imagePos < topOfWindow+500) {
 $(this).addClass('i1');
 }
 });
 $('.mov2').each(function(){
 var imagePos = $(this).offset().top;
 var topOfWindow = $(window).scrollTop();
 if (imagePos < topOfWindow+500) {
 $(this).addClass('i2');
 }
 });
 $('.mov3').each(function(){
 var imagePos = $(this).offset().top;
 var topOfWindow = $(window).scrollTop();
 if (imagePos < topOfWindow+500) {
 $(this).addClass('i3');
 }
 });
 
 $('.mov4').each(function(){
 var imagePos = $(this).offset().top;
 var topOfWindow = $(window).scrollTop();
 if (imagePos < topOfWindow+500) {
 $(this).addClass('bounceInLeft');
 }
 });
 
 });
</script>
 </body>
</html>

17.02.2016

Теги HTML

Название	Свойство	Описание
<p> абзац </p>	блочный тег	Определяет текстовый абзац. Тег <p> является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.
<br>	Строчный тег	Тег <br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца <p>, использование тега <br> не добавляет пустой отступ перед строкой. Если текст, в котором используется перевод строки, обтекает плавающий элемент, то с помощью атрибута clear тега <br> можно сделать так, чтобы следующая строка начиналась ниже элемента.
<strong>Жирный Текст</strong>	Строчный тег	Тег <strong> предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.
<em>Курсивный текст</em>	Строчный тег	Тег <em> предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.
<h1>Заголовок 1</h1> <h2>Заголовок 2</h2> <h3>Заголовок 3</h3> <h4>Заголовок 4</h4> <h5>Заголовок 5</h5> <h6>Заголовок 6</h6>	блочный тег	HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h1> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>,…,<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.
<ul> Маркированный список </ul>	блочный тег	Тег <ul> устанавливает маркированный список. Каждый элемент списка должен начинаться с тега <li>. Если к тегу <ul> применяется таблица стилей, то элементы <li> наследуют эти свойства. <ul> <li>элемент маркированного списка</li> </ul>
<ol>Маркированный список</ol>	блочный тег	Тег <ol> устанавливает нумерованный список. Каждый элемент списка должен начинаться с тега <li>. Если к тегу<ol> применяется таблица стилей, то элементы <li> наследуют эти свойства. <ol> <li>элемент нумерованного списка</li> <li>элемент нумерованного списка</li> </ol>
<li>список</li>	блочный тег	Тег <li> определяет отдельный элемент списка. Внешний тег <ul> или <ol> устанавливает тип списка — маркированный или нумерованный. <ul> <li>элемент маркированного списка</li> </ul> <ol> <li>элемент нумерованного списка</li> </ol>
<hr>	блочный тег	Рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера. Тег<hr> относится к блочным элементам, линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке.
<a>Ссылка</a>	Строчный тег	Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы. Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта. <a href=»tip.html»>Как сделать такое же фото?</a>
<img>	Строчный тег	Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border=»0″ в тег <img>.
<table>Таблица </table>	блочный тег	Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. <table> <tr> <td>…</td> </tr> </table>
<tr>Строка</tr>		Тег <tr> служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега <th> или <td>.
<td>Столбец</td>		Предназначен для создания одной ячейки таблицы. Тег <td> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.
<th>Заголовок</th>		Тег <th> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Тег <th> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>. <table> <tr> <th>…</th> </tr> </table>
<caption>Название таблицы</captiom>	блочный тег	Тег <caption> предназначен для создания заголовка к таблице и может размещаться только внутри контейнера<table>, причем сразу после открывающего тега. Такой заголовок представляет собой текст, по умолчанию отображаемый перед таблицей и описывающий ее содержание.
<span>Выделенная информация</span>	Строчный тег	Тег <span> предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как <table>, <p> или <div>, с помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <span> и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибутclass или id с именем селектора.

04.02.2016