Учусь верстать сайт, оцените моё начало

DivMan · January 12, 2014

http://allnet.16mb.com/

Откритикуйте меня по всему коду

Макет

<body>    <div id="wrapper">        <div id="topline"></div>        <div id="header">            <div id="logo"><a href="index.html"></a></div>            <div id="fak"><a href="index.html"></a></div>            <ul id="nav">            	<li><a href="index.html" class="active">HOME</a></li>            	<li><a href="about.html">ABOUT</a></li>            	<li><a href="services.html">SERVICES</a></li>            	<li><a href="partners">PARTNERS</a></li>            	<li><a href="solutions">SOLUTIONS</a></li>            </ul>        </div>        <div id="people">            <div id="peopleimg"></div>            <div id="slogan">                <h1>Fusce a sapien ac justo </h1>                <p>Phasellus at elit velit, ac</p>            </div>        </div>    </div></body>

@import url(reset.css);#wrapper{    width:1024px;    height: 1800px;    margin: 0 auto;    outline:1px solid #cccccc;}#topline{    height: 18px;    background-image: url(../images/topline.png);    background-repeat: repeat-x;}/*здесь начинается блок Header*/#header{    height:157px;    outline:0px solid #cc0000;    position: relative;}#logo{    width:229px ;    height: 93px;    outline:0px solid #cccccc;    background-image: url(../images/logo.png);    background-repeat: no-repeat;    position: absolute;    left:65px;    top:23px;    }#logo a{    display: block;    height: 93px;    cursor: pointer;}#fak{    width: 82px;    height: 163px;    outline:0px solid #cccccc;    background-image: url(../images/fak.png);    background-repeat: no-repeat;    position: absolute;    right:42px;    top: -17px;}#fak a{    display: block;    height: 164px;    cursor: pointer;}#nav{    width: 520px;    height: 30px;    outline:0px solid #cccccc;    position: absolute;    top: 56px;    left: 377px;}#nav li{    float:left;    outline:0px solid #cc0000;    margin-right: 27px;}#nav li a{    text-decoration: none;    font: 16px Arial,sans-serif;    color: #3f3f3f;}#nav li a.active{    color: #2c789c;}#nav li a:hover{    color: #2c789c;}/*Конец блока Header*/#people{    height:404px;    outline:0px solid #000000;    background-image: url(../images/people.jpg);    background-repeat: no-repeat;    background-position: 53px 20px;    position: relative;    }#peopleimg{    height: 393px;    width: 425px;    outline:0px solid #cc0000;    background-image: url(../images/peaple2.jpg);    position: absolute;    right:23px;    top:-1px;    z-index: 5;}#slogan{    width:365px;    height:83px;    outline:0px solid #000000;    position: absolute;    right:632px;    top:195px;    text-align: right;    }#slogan h1{    font: bold 23px Arial;    color:#1d1e1b;    text-transform: uppercase;}#slogan p{    font: 16px Arial;    color: #2c789c;}

Edited January 12, 2014 by DivMan

Aleksandr.L · January 12, 2014

Вы бы хотя бы один класс сделали, а то сплошные id. Я знаю этот макет — это из видеокурса Попова. Лучше посмотрите видеокурсы от "Специалиста".

DivMan · January 12, 2014

Вы бы хотя бы один класс сделали, а то сплошные id. Я знаю этот макет — это из видеокурса Попова. Лучше посмотрите видеокурсы от "Специалиста".

У специалиста мало уроков по вёрстке, в основном теория.

А какая разница что указывать??? работает одинаково

Edited January 12, 2014 by DivMan

Aleksandr.L · January 12, 2014

Вы бы хотя бы один класс сделали, а то сплошные id. Я знаю этот макет — это из видеокурса Попова. Лучше посмотрите видеокурсы от "Специалиста".
У специалиста мало уроков по вёрстке, в основном теория.
А какая разница что указывать??? работает одинаково

У них есть уровень 1 и уровень 2.

На счет id: почитайте комментарии: http://habrahabr.ru/post/153409/

DivMan · January 12, 2014

Вы бы хотя бы один класс сделали, а то сплошные id. Я знаю этот макет — это из видеокурса Попова. Лучше посмотрите видеокурсы от "Специалиста".
У специалиста мало уроков по вёрстке, в основном теория.
А какая разница что указывать??? работает одинаково

У них есть уровень 1 и уровень 2.

На счет id: почитайте комментарии: http://habrahabr.ru/post/153409/

типа class быстрее, чем id???

Aleksandr.L · January 12, 2014

Типа id лучше использовать для JS.

типа class быстрее, чем id???

У каждого правила в CSS есть "вес", по которому определяется порядок их применений. В этом смысле class'ы намного гибче.

scion · January 13, 2014

Cтарайтесь избегать пустых дивов для оформления.
Пробуйте сокращенные записи для свойств типа background

background-image: url(../images/people.jpg);
background-repeat: no-repeat;

на

background: url(../images/people.jpg) no-repeat;

так же и с font

например сделайте в body font: 62.5% Arial,..,..., sans-serif; (это при дефолтном размере в браузере равно 10px, дальше просто если нужен размер 10рх - то пишете 1ем, если 14рх - 1.4ем и так далее)

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

Пробуйте использовать HTML5 теги, типа header, nav, footer и так далее.

Все это не критично, но очень рекомендуемо. Плюс почитайте несколько хороших книг по верстке. Хороших будет достаточно нескольких

Да и как Вам сказали много id это не гуд, лучше выделить основные не повторяющиеся блоки и только им поставить id, а уж к их внутренним элементам обращаться селекторами.

Удачи!

Edited January 13, 2014 by scion

klierik · January 13, 2014

А какая разница что указывать??? работает одинаково

во-первых, работаетпо-разному

во-вторых, применения стилей через #ID - зло! Завтра программист возьмет твою верстку, впишет в неё свои #id и накроется вся твоя работа.

в подписи ссылка - начни от туда

Edited January 13, 2014 by klierik

DivMan · January 16, 2014

за что мне минусы?

klierik · January 17, 2014

я не минусовал, но скорее всего за то что твоё утверждение далеко от истины.

Sign In

Учусь верстать сайт, оцените моё начало

Recommended Posts

DivMan

Link to comment

Share on other sites

Aleksandr.L

Link to comment

Share on other sites

DivMan

Link to comment

Share on other sites

Aleksandr.L

Link to comment

Share on other sites

DivMan

Link to comment

Share on other sites

Aleksandr.L

Link to comment

Share on other sites

scion

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

DivMan

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information