Персональный сайт, сделать после одной недели обучения HTML и CSS


Я только начал изучать CSS и HTML-верстки неделю назад и я сегодня сделал быстрый сайт. Это выглядит довольно хорошо, но я думаю, что я повторно/написал некоторые действительно грязно для CSS. Это потому, что я не использовал поплавок свойство в CSS слишком хорошо, поэтому я продолжаю использовать позицию:относительный и верхнего смещения поплавка.

/* General Elements* /
body {
    background: #53777a;
    font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;      
}

h1 {
    font-size: 28pt;       
}

h2 {}

p {}

a:link {
    color: black;
    text-decoration: none;
}

a:visited {
    color: purple;
    text-decoration: none;
}
a:hover {
    color: green;
    text-decoration: underline;
}
a:active {
    color:yellow;
    text-decoration: none;
}

/* Curvy Shapes */
 #wrapper, #footer {
    -moz-border-radius-bottomright: 50px;
        -moz-border-radius-topleft: 50px;
       -moz-border-radius-topright: 50px;
     -moz-border-radius-bottomleft: 50px;
        border-bottom-right-radius: 50px;
            border-top-left-radius: 50px;
           border-top-right-radius: 50px;
         border-bottom-left-radius: 50px;
}

#links {
    -moz-border-radius-bottomright: 50px;
     -moz-border-radius-bottomleft: 50px;
        border-bottom-right-radius: 50px;
         border-bottom-left-radius: 50px;
}

#header {    
     -moz-border-radius-topleft: 50px;
    -moz-border-radius-topright: 50px;
         border-top-left-radius: 50px;
        border-top-right-radius: 50px;    
}

/* Structure */
#wrapper {
    width: 900px;
    margin: 0 auto;
    margin-top: 30px;
    overflow: auto;
    background: #E0E4CC;
    padding: 20px;
    -moz-border-radius-bottomright: 50px;
        -moz-border-radius-topleft: 50px;
       -moz-border-radius-topright: 50px;
     -moz-border-radius-bottomleft: 50px;
        border-bottom-right-radius: 50px;
            border-top-left-radius: 50px;
           border-top-right-radius: 50px;
         border-bottom-left-radius: 50px;       
}

#header {
    text-align: center;
    background: #ECD078;
    padding: 4px;
}

#links {
    width: 900px;
    background-color: #A7DBD8;
    position: relative;
    top: -20px;
    text-align: center;
}

#links ul {
    list-style-type: none;
    padding: 5px;
}

#links li{
    display: inline;
    font-size: 14pt;
    padding: 20px;
}

.sidebar_left {
    float: left;
    width: 180px;
    margin-left: 10px;
    position: relative;
    top: -10px;
    text-align: justify;
    line-height: 150%;
}

#post {
    float: right;
    width: 680px;
    margin-left: 0px;
    margin-right: 10px;
    position: relative;
    top: -25px;
    text-align: justify;
    line-height: 150%;      
}

#post b {
    font-size: 18pt;
    text-decoration: underline;
}

#content {
    float: right;
    width: 680px;
    margin-left: 0px;
    margin-right: 10px;
    position: relative;
    top: -25px;
    text-align: justify;
    text-indent: 25px;
    line-height: 150%;
}

#social {
    float: right;
}

#footer {
    width: 890px;
    background: #A7DBD8;
    float: left;
    padding: 5px;
    text-align: right;
}

#footer b {
    margin-left: 10px;
}

/* End Structure */

/*images*/
.navimg {
    width: 2px;
    height: 20px;
}

#tree {
    width: 175px;
    height: 200px;
    float: right;
    margin-left: 20px;
    margin-top: 24px;
}

#blackwhite {
    width: 200px;
    height: 125px;
    float: left;
    margin-right: 20px;
    margin-top: 10px;       
}

#quickshot {
    width: 125px;
    height: 100px;
    display: block;
    margin-left: auto;
    margin-right: auto;        
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>    
    <title>Kevin Li</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
    <div id="wrapper">
        <div id="header">
            <h1>Kevin Li</h1>
        </div>

        <div id="links">
            <ul>
                <li><a href="#">Home</a></li>    
                <li><a href="#">Biography</a></li>    
                <li><a href="#">Portfolio</a></li>    
                <li><a href="#">Blog</a></li>    
                <li><a href="#">Images</a></li>    
                <li><a href="#">Contact Me</a></li>
            </ul>
        </div>

        <div class="sidebar_left">
            Lorem ipsum dolor sit amet...<br />
        </div>

        <div id="post">
            <b>Introduction</b><br />
            <i>Thursday, January 27, 2011</i>
        </div>

        <br />

        <div id="content">
            <img id="tree" src="images/c2_i6.png" />   
            <p>
                Lorem ipsum dolor sit amet...<br />
                <br />
                <img id="blackwhite" src="images/c3_i7.png" /> Ut venenatis diam nunc...<br />
                <br />
            </p>
        </div>

        <div id="footer">
            <b>Copyright 2010 Kevin Li</b>
        </div>
    </div>
</body>
</html>

Кстати, я знаю, что это не проверяет. Я работаю над этим сейчас.



1968
14
задан 27 января 2011 в 05:01 Источник Поделиться
Комментарии
4 ответа

Несколько быстрых замечаний глядя через источник:

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

<div id="post">
<b>Introduction</b><br />
<i>Thursday, January 27, 2011</i>
</div>
<br />
<div id="content">

Если бы мне пришлось переделать его, я бы сделал:

<div id="post">
<h1>Introduction</h1>
<h2>Thursday, blah blah</h2>
</div>
<div id="content">

Тогда ваш CSS будет стиль этих элементов:

div#post h1 { ... }
div#post h2 { ... }

Для ваших изображений, Если вам нужен код на JavaScript селектор, я бы, наверное, сделать их класса, а не уникального идентификатора. Похоже, что ваши изображения будут оформлены подобным образом, так почему бы не сгруппировать их с помощью класса? Или просто переопределить значения по умолчанию CSS для тега изображения.

Наконец, вы должны, вероятно, использовать сброс CSS. Браузеры используют разные значения по умолчанию, так что единственная разумная вещь, чтобы использовать сброса, так что все атрибуты стиля начинают одинаково во всех браузерах. Эрик Мейер-УСБ гуру, он его сбросить в http://meyerweb.com/eric/tools/css/reset/ (вместе с более подробного объяснения о том, почему, чтобы использовать его).

17
ответ дан 27 января 2011 в 08:01 Источник Поделиться

Ваш CSS не справиться, что произойдет, если читатель закроет окно, чтобы меньше запланированного размера.

Test: resize window to less than 900px.
Results: Window is cut off.

Это вопрос дизайна, более чем проблема кодирования.

4
ответ дан 27 января 2011 в 05:01 Источник Поделиться

Несколько семантических проблем:


  1. Не используйте теги.
    Если необходимо, вы можете использовать , или даже лучше, и тогда стиль класса в ваш CSS.

  2. Не используйте теги.
    Если необходимо, вы можете использовать , или даже лучше, и тогда стиль класса в ваш CSS.

  3. Не используйте
    теги для разнос.

    Если вам требуется интервал, использовать маржи-нижней или обивка дном.

3
ответ дан 28 января 2011 в 02:01 Источник Поделиться

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

Однако, я добавить переполнения: скрытый; к родительскому элементу, чтобы убедиться, что он заворачивает его немедленно поплыл дочерних элементов. Взять мой пример и попробовать его и с переливной.

HTML-код:

<div id="page">
<div id="main">main content</div>
<div id="side">side content</div>
</div>

Усс:

div#page{
overflow: hidden;
background-color: #ccc;
}

div#main{
float: left;
}

div#side{
float: right;
}

1
ответ дан 27 января 2011 в 06:01 Источник Поделиться