簡易博客[ html + css ] 練習

本文轉載自查看原文 2019-04-26 10:31 626 前端知識總結

1. 前言

　　通過使用 html + css 編寫一個簡易的博客作為入門練習

2. 代碼及實現

2.1 目錄結構

2.2 代碼部分

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcss.com/normalize/8.0.1/normalize.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
    <title>Blogs</title>
</head>
<body>
    <div class="side-bar">
        <div class="header">
            <a href="" class="logo">周傑倫</a>
            <div class="intro">哼哼哈嘿</div>
        </div>
        <div class="nav">
            <a href="#" class="item">關於我</a>
            <a href="#" class="item">關於你</a>
            <a href="#" class="item">關於他</a>
        </div>
        <div class="tag-list">
            <a href="#" class="item">HTML</a>
            <a href="#" class="item">CSS</a>
            <a href="#" class="item">JS</a>
        </div>
    </div>
    <div class="main">
        <div class="article-list">
            <div class="item">
                <a href="article.html" class="title">彩虹</a>
                <div class="status">發布於：2019-10-10 | 閱讀：3500 | #HTML #CSS</div>
                <div class="content">看不見你的笑，我怎么睡的着.</div>
            </div>
            <div class="item">
                <a href="#" class="title">彩虹</a>
                <div class="status">發布於：2019-10-10 | 閱讀：3500 | #HTML #CSS</div>
                <div class="content">看不見你的笑，我怎么睡的着.</div>
            </div>
            <div class="item">
                <a href="#" class="title">彩虹</a>
                <div class="status">發布於：2019-10-10 | 閱讀：3500 | #HTML #CSS</div>
                <div class="content">看不見你的笑，我怎么睡的着.</div>
            </div>
        </div>
    </div>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcss.com/normalize/8.0.1/normalize.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
    <title>Blogs</title>
</head>
<body>
    <div class="side-bar">
        <div class="header">
            <a href="" class="logo">周傑倫</a>
            <div class="intro">哼哼哈嘿</div>
        </div>
        <div class="nav">
            <a href="#" class="item">關於我</a>
            <a href="#" class="item">關於你</a>
            <a href="#" class="item">關於他</a>
        </div>
        <div class="tag-list">
            <a href="#" class="item">HTML</a>
            <a href="#" class="item">CSS</a>
            <a href="#" class="item">JS</a>
        </div>
    </div>
    <div class="main">
            <div class="article">
                <h1 class="title">彩虹</h1>
                <div class="content">
                    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, aliquam aspernatur commodi
                        corporis ducimus in inventore iusto laborum libero maxime nemo nobis nostrum omnis perspiciatis
                        quibusdam saepe, sequi tempora velit.
                    </div>
                    <div>Cupiditate dolore est maxime vero? Cum illum minima modi nobis qui reprehenderit sed?
                        Consequatur distinctio eius nam quae vitae! Alias, beatae dolorum enim hic id impedit nobis
                        suscipit temporibus veniam.
                    </div>
                    <div>Ab, architecto aspernatur autem enim fuga maxime odio reiciendis reprehenderit suscipit velit?
                        Itaque labore porro recusandae vel velit. Ad at, dignissimos error illo iusto laboriosam maxime
                        non odit quod voluptatem.
                    </div></div>
            </div>
    </div>
</body>
</html>

article.html

body {
    background-color: #454545;
    line-height: 1.7;
}

body, a {
    color: white;
}

a {
    text-decoration: none;
}

.side-bar {
    float: left;
    width: 20%;
    position: fixed;
}

.main {
    float: right;
    width: 80%;
    color: #454545;
}

.side-bar > * {
    padding: 10px 15px;
}

.side-bar .header .logo {
    line-height: 1;
    display: inline-block;
    font-size: 30px;
    border: 3px solid white;
    padding: 10px 20px;
    margin-bottom: 10px;
}

.side-bar .nav a,
.side-bar .tag-list a {
    display: block;
    padding: 5px;
    transition: color 200ms;
    color: #666666;
}

.side-bar .nav a:hover,
.side-bar .tag-list a:hover {
    color: #eeeeee;
}

.side-bar .nav a {
    font-weight: 700;
}

.side-bar .tag-list a:before {
    content: '#';
}

.main .article-list,
.main .article {
    margin-right: 30%;
    background-color: white;
    padding: 20px 30px;
}

.article-list .item {
    margin-bottom: 25px;
}

.article-list .item .title {
    color: #454545;
    font-size: 22px;
    font-weight: 700;
}

.article-list .item .status {
    color: #cccccc;
    font-size: 13px;
}

.article-list .item > * {
    margin-bottom: 10px;
}

main.css

2.3 展示圖

index.html

article.html

3. 總結

通過簡易博客的練習，總結知識點如下：

1. 在編寫頁面的時候，首先應該講 HTML 布局寫出來，也就是應該先架構 HTML 代碼部分，HTML 代碼部分完成，再進行 CSS 部分的編寫。

2. 寫 HTML 代碼的時候，應該從整體上規划布局，比如 index.html 我第一次看到的時候以為是三個 div 的【左中右】，其實應該是兩個 div 一個背景圖而已。

3. CSS 代碼中，要總結的知識點比較多，重點總結如下：

a {
    text-decoration: none;
}

text-decoration: none; 取消 a 標簽的下划線


display: inline-block;

注意 display 的使用，參考：
http://www.w3school.com.cn/cssref/pr_class_display.asp


transition: color 200ms;

延遲 2 毫秒，這樣看起來更加絲滑

.side-bar .nav a:hover

hover 鼠標指針選中時的樣式



.side-bar {
    float: left;    
    width: 20%;
    position: fixed;
}

float: left;    
width: 20%;    

float 一般為 left 和 right ，而且配合 width 使用 left 和 right 加起來 100%
position: fixed 生成絕對定位的元素

position 參考：
http://www.w3school.com.cn/cssref/pr_class_position.asp


border: 3px solid white;    畫邊框必要屬性，solid 為實線



其他還要注意：
padding
margin
應該使用在什么地方比較合適。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 簡易商城 [ html + css ] 練習博客園：CSS & HTML HTML5+CSS （簡易nav設計）【html css js】實現一個簡易日歷 HTML+CSS 簡易搜索框利用HTML+css制作簡易時鍾 html+css 制作簡易導航欄 Html+css仿淘寶頁面練習 html5 css練習浮動布局 HTML+CSS實現簡易可交互照片牆