Persönliche Website, erstellt nach einer Woche HTML und CSS

2113
Quelle (EN)
Kevin Li

Ich habe gerade erst vor einer Woche angefangen, CSS / HTML zu lernen, und habe heute eine schnelle Site erstellt. Es sieht ziemlich gut aus, aber ich denke, ich habe wirklich unordentliches CSS wiederverwendet / geschrieben. Dies liegt daran, dass ich die floatEigenschaft in CSS nicht allzu gut verwendet habe. Daher verwende ich die Funktion position:relativeund topversetze sie mit float.

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

Ich weiß es übrigens nicht. Ich arbeite jetzt daran.

Antworten
14
Könnten Sie das relevante HTML und CSS für uns veröffentlichen? Die meisten Leute werden Ihrem Link nicht folgen. Jeremy Heiler vor 9 Jahren 10
Wir haben die Richtlinie, dass die wichtigen Bits des Codes im Posting enthalten sein müssen. Es ist in Ordnung, einen Link "Mehr anzeigen" zu posten, aber es wird nicht * jeglicher * Code angezeigt. Ich denke auch generische Anfragen zur "Überprüfung meiner Website!" sind ein wenig zu breit angelegt, da dies HTML, CSS, Design usw. umfasst. Jeff Atwood vor 9 Jahren 3
@Jeff: Da er ausdrücklich die Unordentlichkeit des CSS angesprochen hat, sollte ich auch die Frage hinzufügen (obwohl die Frage dadurch ziemlich voll wird). sepp2k vor 9 Jahren 0
Der XML-Prolog vor dem Doctype bewirkt, dass IE6 den Quirks-Modus auslöst Knu vor 9 Jahren 1
Sie haben auch einige alt-Parameter, die Sie nicht angegeben haben James Willson vor 8 Jahren 0
Die erste Zeile wird nicht benötigt und ich würde kein Attribut pro Zeile ausführen. vor 9 Jahren 0
Ich denke, dies könnte einen besseren Titel verwenden, um zu beschreiben, worauf Sie Rückmeldungen wünschen. Nur zu sagen, "nach einer Woche HTML lernen", ist nicht sehr beschreibend und setzt zu viel von einem "Pat auf den Rücken" -Typ einer Umgebung. JGallardo vor 6 Jahren 0

7 Antworten auf die Frage

17
Travis Leleu

Ein paar kurze Kommentare durch die Quelle:

Sie haben es sehr gut geschafft, die Dinge semantisch zu strukturieren. Ich sehe nur ein paar <br />oder <b>Tags. Das heißt, Sie möchten wahrscheinlich für einige Dinge mehr semantisches Markup hinzufügen, z.

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

Wenn ich es überarbeiten würde, würde ich Folgendes tun:

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

Dann fügt Ihr CSS diese Elemente ein:

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

Wenn Sie für Ihre Bilder einen JavaScript-ID-Selektor benötigen, würde ich sie wahrscheinlich zu einer Klasse machen und nicht zu einer eindeutigen ID. Es sieht so aus, als würden Ihre Bilder alle ähnlich gestaltet. Warum gruppieren Sie sie nicht mit einer Klasse? Oder überschreiben Sie einfach die CSS-Standardwerte für das Image-Tag.

Schließlich sollten Sie wahrscheinlich einen CSS-Reset verwenden. Alle Browser verwenden unterschiedliche Standardwerte. Daher ist es nur sinnvoll, einen Reset durchzuführen, damit alle Stilattribute in allen Browsern gleich sind. Eric Meyer ist der CSS-Guru. Er hat sein Reset unter http://meyerweb.com/eric/tools/css/reset/ (zusammen mit weiteren Erklärungen, warum er verwendet wird).

Vielleicht möchten Sie Ihre Tags in `` `einwickeln, sonst werden die Dinge nicht angezeigt ... Hailwood vor 9 Jahren 0
Gibt es Tags wie `oder`-Tags? systemovich vor 9 Jahren 0
Ich würde die Semantik hier hinterfragen. könnte auch funktionieren. sollte auch verwendet werden . Ich persönlich würde niemals eindeutige Bezeichner aus Elementen entfernen, da die Flexibilität, ein bestimmtes Element mit jQuery zu gestalten, effizienter ist als das Navigieren durch eine Liste. Eine Klasse ist jedoch eine gute Idee, wenn Stile für viele Bilder wiederverwendet werden. Visionary Software Solutions vor 9 Jahren 0
@VisionarySoftwareSolutions Ich denke, Sie haben das erste Stück Code für eine Antwort verwechselt, ich habe es als Eingabe verwendet. OP, wie Sie sehen, gibt es viele gute Möglichkeiten, dies zu tun. Im Laufe des Fortschritts entwickeln Sie Ihren eigenen Stil. Ich empfehle, dass Sie versuchen, einen konsistenten Stil zu entwickeln - wenn Sie beispielsweise #post anstelle von div # post bevorzugen, ist das in Ordnung, aber seien Sie konsistent. Travis Leleu vor 6 Jahren 0
4
Hack Saw

Ihr CSS behandelt nicht, was passiert, wenn der Leser das Fenster auf eine kleinere als die geplante Größe schließt.

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

Dies ist ein Designproblem, mehr als ein Codierungsproblem.

3
Hailwood

Einige semantische Probleme:

  1. Verwenden Sie keine <b>Tags.
    Wenn Sie müssen, können Sie verwenden <strong>, oder noch besser, <span class="bold"></span>und dann die Klasse in Ihrem CSS - Stil.

  2. Verwenden Sie keine <i>Tags.
    Wenn Sie müssen, können Sie verwenden <em>, oder noch besser, <span class="italic"></span>und dann die Klasse in Ihrem CSS - Stil.

  3. Verwenden Sie keine <br />Tags für den Abstand.
    Wenn Sie einen Abstand benötigen, verwenden Sie margin-bottomoder padding-bottom.

Warum ist besser als oder ? Ich sehe nicht, welchen semantischen Wert man durch das Ersetzen dieser Tags erhält. André Paramés vor 9 Jahren 1
Wahrscheinlich, weil das W3C sagt, es sei besser, CSS zu verwenden. Ich kann die Vor-und Nachteile sehen .. verschiedene Ebenen von Fett, andere Farbe Fett, etc. http://www.w3schools.com/tags/tag_phrase_elements.asp Kevin vor 9 Jahren 0
Aber das ist kein semantisches Problem. Wenn keine andere Klasse verwendet wird, sehe ich nicht, wie "fett" etwas mehr über den Inhalt aussagt (als über die Präsentation zu sprechen) als . André Paramés vor 9 Jahren 4
Ich habe vorgeschlagen, Semantik durch gute Praxis zu ersetzen. systemovich vor 9 Jahren 0
@Kevin Ist dir klar, dass die W3Schools absolut nichts mit dem W3C zu tun haben? Yi Jiang vor 9 Jahren 7
Guter Aufruf, Dinge zu identifizieren, die nicht getan werden sollten. Die Begründung fehlt jedoch. Der Sinn von und ist es nicht, fetten Text und kursiven Text zu erhalten. Sie können das Standardverhalten mit CSS überschreiben. Es geht darum, eine semantische Bedeutung hinzuzufügen, damit intelligente Abfragen durchgeführt werden können. Visionary Software Solutions vor 9 Jahren 1
http://w3fools.com. Ich würde wahrscheinlich h1 oder h2 für den Header anstelle von ` ` und ein `verwenden
`für das Datum (und möglicherweise anderes Zeug über die Post).
Svish vor 8 Jahren 0
Eine bessere Idee ist zu verwenden oder was auch immer dieses spezielle Element ist. Warum verdient es hervorzuheben? Autorenname? Erste Erwähnung der Person im Artikel? Sound Biss Phrase, die den Punkt des Absatzes zusammenfasst? Dass Sie all dies als fett in der CSS definieren könnten, ist in Ordnung, da will es sein. Hack Saw vor 6 Jahren 0
2
potench

Ein paar Notizen:

Verwenden Sie HTML5

  1. Anstelle der <div id="header">Verwendung eines<header>
  2. Anstelle der <div id="post">Verwendung<article>
  3. Anstelle von <div class="sidebar_left">Gebrauch <aside>. Sie sollten auch KEINE "stilspezifischen" Klassen wie "left", "red" usw. verwenden, da sie in CSS leicht überschreibbar sind und nicht mehr relevant sind. Ich würde auch vorschlagen, sich an eine Konvention für CSS zu halten, bei der anstelle von Unterstrichen Bindestriche verwendet werden. Wenn Sie Ihr JavaScript durchsehen, wird es besser lesbar (Unterstriche bedeuten JS, Bindestriche bedeuten Selektoren oder DOM).
  4. Anstelle von <div id="footer">Gebrauch<footer>
  5. Anstelle von <div id="content">verwenden <section>oder <div id="main" role="main">. Sie sollten verwenden role, um mehr Kontext bereitzustellen.
  6. Anker mit Hashes: Ich bin nicht sicher, warum Sie einen Hash in Ihren Ankern verwenden (zB:) <a href="#">Contact Me</a>. Ich sehe, wie Entwickler es verwenden, um einfach einen Zeiger-Cursor zu aktivieren. Wenn dies der Fall ist, sollten Sie stattdessen Folgendes verwenden:

HTML

<a>Contact Me</a>

CSS

a { cursor: pointer;}
Es ist nicht sinnvoll, einen a-Cursor hinzuzufügen. Die Praxis der Verwendung von " Link " ist für alle von uns selbstverständlich, dass später eine URL eingefügt wird. JGallardo vor 6 Jahren 1
Beachten Sie, dass diese Frage 2011 veröffentlicht wurde, bevor HTML5 verfügbar war. 200_success vor 2 Jahren 0
2
Toni Almeida

Hier einige Code-Golf-Tipps, die die Leistung und die Lesbarkeit von Code verbessern können:

Diese:

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

könnte nur so sein:

#wrapper, #footer {
    border-radius: 50px;
    -moz-border-radius: 50px;
}

oder wenn die Werte unterschiedlich sind:

#elem {
    border-radius: 50px 0 25px 10px; /* Top 50px, Right 0, Bottom 25px, Left 10px */
    /* or */
    border-radius: 50px 0; /* Top & Bottom 50px, Right & Left 0 */
}

Diese Regel gilt auch, wenn Sie Margin oder Padding verwenden. Beispiel:

margin: 0 auto;
margin-top: 30px;

könnte sein:

margin: 30px auto 0;
2
JGallardo

Lassen Sie leere CSS-Regeln aus

In Ihrem Beispiel haben Sie diese

h2 {}

p {}

Sie können eine Datei für die Entwicklung haben, die diese enthält, damit Sie später daran arbeiten können. Lassen Sie diese jedoch in Ihrer Produktionsdatei aus, um die Dateigröße zu verringern. Dadurch werden Ihre Dateien auch lesbarer, wenn Sie sie zur Überprüfung einreichen.

Verwenden Sie keine <br>Tags für den Abstand

<br />
<img id="blackwhite" src="images/c3_i7.png" /> Ut venenatis diam nunc...<br />
<br />

Wenn Sie weiße Bereiche um Bilder erstellen möchten. Sie könnten so etwas tun

img { margin: 6px; }

Sie können diesen Rand natürlich beliebig gestalten. Oder Sie übergeben Regeln, je nachdem, wie sie in bestimmten Fällen angezeigt werden sollen.

Verwenden Sie classstatt idöfter.

In demselben Element haben Sie dies

blackwhiteklingt nicht so, als würde es ein bestimmtes Element in einem Dokument beschreiben. Tatsächlich sieht es jedoch so aus, als würden Sie einen Blog erstellen, der sich mit der Frage befasst, wie es einen "Post" gibt. Und da Sie viele Bilder auf dieser Seite haben, sollten Sie diese Klassen erstellen.

Verwenden Sie absolute Pfade

Der images/c3_i7.pngin <img id="blackwhite" src="images/c3_i7.png" />würde, /images/c3_i7.pngdie auf einem Server gut ist, weil es Fehler hilft zu verhindern, wenn die Dinge um bewegt zu bekommen.

1
Jeremy Heiler

Ich habe Ihre Website nicht angesehen, da ich es mir derzeit nicht leisten kann, auf zufällige Links zu klicken.

Ich füge overflow: hidden;jedoch das übergeordnete Element hinzu, um sicherzustellen, dass die unmittelbar untergeordneten Elemente mit Floating-Element eingeschlossen werden. Nehmen Sie mein Beispiel und versuchen Sie es mit und ohne Überlauf.

HTML:

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

CSS:

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

div#main{
  float: left;
}

div#side{
  float: right;
}

Verwandte Probleme