xitu-html-css-tutorial

HTML

一种第一网站内容的文件格式

它规范了一个网页的：

基本信息
内容
布局结构

Template

HTML 本身的格式打字太多了，好麻烦：

Jade
Haml
ejs
Handlebars

<!DOCTYPE html>
<html>
    <head></head>
    <body class="container"></body>
</html>

doctype html
html
    head
    body.container

<!DOCTYPE html>
<html>

    <head>
        <title>这是网页的标题</title>
        <link rel="stylesheet" href="PATH/TO/STYLE.CSS">
        <meta name="keywords" contents="keyword1,keyword2, ...">
    </head>

    <body>
        <header>
            <p>Header 标题</p>
        </header>

        <main>
            <section>
                <article><img src="http://gold.xitu.io/logo.svg"></article>
                <article>
                    <h3>稀土掘金</h3>
                    <p>
                        <a href="http://gold.xitu.io">掘金</a>是一个好网站。
                        <strong>掘金</strong>是一个好网站。
                    </p>
                </article>
            </section>
        </main>

        <script src="..."></script>
        <script>
            console.log("在浏览器里直接运行代码");
        </script>
    </body>

</html>

CSS

用 id, class, pseudo class 来定义 HTML 里元素的具体样式。

Pre/Post-processor

CSS 写起来也很讨厌，因此我们有很多工具来帮忙

Sass
Stylus
Less
PostCSS

#footer {
    background-color: black;
}

.item {
    font-size: 20px;
}

input:focus {
    border: 1px solid blue;
}

.post img {
    border-radius: 5px;
}

// 让一个人的头像编程圆的
.avatar {
    border-radius: 100%;
    width: 50px;
    height: 50px;
}

// 一个碰上去，点击会变颜色的 button
button {
    background: rgba(0,0,0,0.5);
    transition: background 0.3s linear, color 0.3s ease-in-out;
}
button:hover {
    background: rgba(0,0,0,0.7);
}
button:active {
    background: #000;
    color: blue;
}

// 一个会转 50° 的方格
.rotate {
    transform: rotate(50deg);
}
.rotate.rotating {
    animation: rotate 10s linear infinite; 
}

@keyframes rotate {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

HTML

五官

CSS

颜值

JavaScript

表情

HTML

Template

CSS

Pre/Post-processor

HTML

CSS

Files

JS

Jade/ejs/ ...

BACKEND

FRONTEND

Sass/Less/ ...

JS / CoffeeScript

Express.js

DEMO

LEARN MORE

xitu-html-css-tutorial

xitu-html-css-tutorial

Ming YIN

HTML

五官

CSS

颜值

JavaScript

表情

xitu-html-css-tutorial

More from Ming YIN