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

к 5 уроку

Написано

admin

в

<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 б*/

 

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