Jump to content

Оцените первую верстку


cof666
 Share

Recommended Posts

По задумке должны были быть еще и скрипты, но я успел выучить только html и css, поэтому вместо сладйера стоит просто картинка

lysenko-project1.url.ph

Просьба указать ошибки как грубые так и мелкие, и как можно было бы их испарвить

Уже знаю, что верстка сама по себе кривая, много дивов, которые располагаются один за одним как попало и куча id вместо классов

Остальное хочу от вас услышать

Edited by cof666
Link to comment
Share on other sites

class="li1", id="biscuits" нехорошо, лучше хотя бы стандартное current-menu-item.

Пустые блоки clear нехорошо, смотрите в сторону clearfix.

 

  <div id="contentImg2"></div>   <div id="contentImg3"></div>   <div id="contentImg4"></div>   <div class="clear"></div>

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

 

 

<div id="text">   <p id="text1">from $5.99</p>   <p id="text2">from $3.75</p>   <p id="text3">from $11</p>   <p id="text4">from $4.99</p>   </div>   <div id="shop">   <a href="#" id="shop1">Shop Now!</a>   <a href="#" id="shop2">Shop Now!</a>   <a href="#" id="shop3">Shop Now!</a>   <a href="#" id="shop4">Shop Now!</a>   </div>

 

То же самое. Очень плохо. Нужно было писать 1 блок, стилизовать его, а дальше просто дублировать класс и поменять текст в html.

<div id="line1"></div>

очень плохо. Есть для этого border, или ::after ::before

 

Пока что хвалить негде.. Лучшее что можете сейчас делать, это смотреть обсуждения работ на этом форуме и смотреть что там пишут и какие советы дают.

Link to comment
Share on other sites

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

current-menu-item в переводе означает текущий пункт меню. То есть если текущий пункт меню выглядит как то иначе чем другие пункты, то лучше ему давать такой или подобный класс. А не li1

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Обсуждения

    • Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy