前端實例

實例

仿博客頁面

HTML代碼css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿博客界面</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <!--左邊界面-->
    <div class="left-interface">
        <!--頭像-->
        <div class="header-img">
            <img src="12.jpg" alt="">
        </div>
        <!--博客名稱-->
        <div class="blog-name">若惜together</div>
        <!--博客信息-->
        <div class="blog-info">good good study, day day up.</div>
        <!--博客連接-->
        <div class="blog-href">
            <ul>    <!--無序列表-->
                <li><a href="">關於我</a></li>
                <li><a href="">微博</a></li>
                <li><a href="">公衆號</a></li>
            </ul>
        </div>
        <!--技能展現-->
        <div class="blog-skill">
            <ul>
                <li>JavaScript</li>
                <li>Python</li>
                <li>Golang</li>
            </ul>
        </div>
    </div>
    <!--右邊界面-->
    <div class="right-interface">
        <!--創建一個div標籤,包含全部的內容-->
        <div class="article-list">
            <!--單個的內容-->
            <div class="article">
                <!--內容標題,包含標題和時間兩個信息-->
                <div class="article-title">
                    <!--標題-->
                    <h1 class="article-name">既然活着,不別抱怨</h1>
                    <!--時間-->
                    <span class="article-date">2019-04-15</span>
                </div>
                <!--內容的一些信息-->
                <div class="article-info"> 一我的活着,何任什麼時候,是不能無所事事,更不可枸人憂天,怨聲載道,必需要有他該作的事情,惟有那樣他的內心纔會有所寄託,他纔會真正的得到快樂。 </div>
                <!--內容的屬性,歸類-->
                <div class="article-tag"> #HTML #CSS </div>
            </div>
            <div class="article">
                <!--內容標題,包含標題和時間兩個信息-->
                <div class="article-title">
                    <!--標題-->
                    <h1 class="article-name">既然活着,不別抱怨</h1>
                    <!--時間-->
                    <span class="article-date">2019-04-15</span>
                </div>
                <!--內容的一些信息-->
                <div class="article-info"> 一我的活着,何任什麼時候,是不能無所事事,更不可枸人憂天,怨聲載道,必需要有他該作的事情,惟有那樣他的內心纔會有所寄託,他纔會真正的得到快樂。 </div>
                <!--內容的屬性,歸類-->
                <div class="article-tag"> #HTML #CSS </div>
            </div>
            <div class="article">
                <!--內容標題,包含標題和時間兩個信息-->
                <div class="article-title">
                    <!--標題-->
                    <h1 class="article-name">既然活着,不別抱怨</h1>
                    <!--時間-->
                    <span class="article-date">2019-04-15</span>
                </div>
                <!--內容的一些信息-->
                <div class="article-info"> 一我的活着,何任什麼時候,是不能無所事事,更不可枸人憂天,怨聲載道,必需要有他該作的事情,惟有那樣他的內心纔會有所寄託,他纔會真正的得到快樂。 </div>
                <!--內容的屬性,歸類-->
                <div class="article-tag"> #HTML #CSS </div>
            </div>
            <div class="article">
                <!--內容標題,包含標題和時間兩個信息-->
                <div class="article-title">
                    <!--標題-->
                    <h1 class="article-name">既然活着,不別抱怨</h1>
                    <!--時間-->
                    <span class="article-date">2019-04-15</span>
                </div>
                <!--內容的一些信息-->
                <div class="article-info"> 一我的活着,何任什麼時候,是不能無所事事,更不可枸人憂天,怨聲載道,必需要有他該作的事情,惟有那樣他的內心纔會有所寄託,他纔會真正的得到快樂。 </div>
                <!--內容的屬性,歸類-->
                <div class="article-tag"> #HTML #CSS </div>
            </div>
            <div class="article">
                <!--內容標題,包含標題和時間兩個信息-->
                <div class="article-title">
                    <!--標題-->
                    <h1 class="article-name">既然活着,不別抱怨</h1>
                    <!--時間-->
                    <span class="article-date">2019-04-15</span>
                </div>
                <!--內容的一些信息-->
                <div class="article-info"> 一我的活着,何任什麼時候,是不能無所事事,更不可枸人憂天,怨聲載道,必需要有他該作的事情,惟有那樣他的內心纔會有所寄託,他纔會真正的得到快樂。 </div>
                <!--內容的屬性,歸類-->
                <div class="article-tag"> #HTML #CSS </div>
            </div>
            <div class="article">
                <!--內容標題,包含標題和時間兩個信息-->
                <div class="article-title">
                    <!--標題-->
                    <h1 class="article-name">既然活着,不別抱怨</h1>
                    <!--時間-->
                    <span class="article-date">2019-04-15</span>
                </div>
                <!--內容的一些信息-->
                <div class="article-info"> 一我的活着,何任什麼時候,是不能無所事事,更不可枸人憂天,怨聲載道,必需要有他該作的事情,惟有那樣他的內心纔會有所寄託,他纔會真正的得到快樂。 </div>
                <!--內容的屬性,歸類-->
                <div class="article-tag"> #HTML #CSS </div>
            </div>
        </div>
    </div>
</body>
</html>
View Code

CSS代碼html

/*公用樣式*/ * {     /* 通配符選擇器,能和任何元素匹配*/ font-family: ".PingFang SC", "Microsoft Yahei", serif ; font-size: 14px; margin: 0;          /*用於控制元素與元素之間的距離*/ padding: 0;         /*用於控制內容與邊框之間的距離*/
}
/*去掉a標籤的下劃線*/ a { text-decoration: none;
}
/*左邊欄 樣式*/ .left-interface { width: 20%;     /*寬度佔20%*/ background-color: #767776; height: 100%;   /*高度佔100%*/ position: fixed;    /*固定左邊欄*/ left: 0; top: 0;
}
/*頭像樣式*/ .header-img { height: 128px; width: 128px;
    /*設置邊框爲5像素,實線,白色的線條*/ border: 5px solid white;
    /*將border-radius設置爲長或高的一半便可獲得一個圓形*/ border-radius: 50%;
    /*將溢出來的多餘圖片隱藏掉*/ overflow: hidden;
    /*並將其下移20像素按順序top,right,bottom,left,這裏只用了一個元素,默認後三項爲0, 將圖片居中*/ margin: 20px auto 0;
}
/*兒子選擇器,header-img下面的img標籤*/ .header-img>img {
    /*設置他們的最大寬度和最大高度,爲header-img的寬度和高度*/ max-width: 100%; max-height: 100%;
}
/*博客名稱*/ .blog-name { color: white; font-size: 24px;
    /*設置加粗字體,設置字體的粗細*/ font-weight: bold;
    /*對齊元素中的文本,left,right,center(居中),justify(兩端對齊)*/ text-align: center; margin-top: 15px;
}
/*博客介紹*/ .blog-info { color: white; text-align: center;
    /*邊框虛線*/ border: 2px dashed white; margin: 20px 15px;
}
/*博客連接和技能*/ .blog-href, .blog-skill {   /*分組*/ text-align: center; border: 2px solid white; margin: 20px 20px;
}
/*去除li標籤前面的那個點*/ .blog-href li, .blog-skill li{ list-style-type: none;
} .blog-href a { color: #eee;
}
/*後代選擇器*/ /*僞元素選擇器,在li標籤以前添加內容*/ .blog-skill li:before { content: "#";
}

/*右邊欄 樣式*/ .right-interface { width: 80%; background-color: #dddddd;
    /*最好讓他自適應, 別固定死了*/ height: 100%; float: right;   /*讓有邊欄向右漂,由於左邊欄已經固定了,因此不用漂了*/
}
/*內容*/ .article { background-color: white; margin-top: 20px; margin-left: 20px; margin-right: 5%;
}
/*內容標題*/ .article-name {
    /*使元素同時具備行內元素和塊級元素的特色*/ display: inline-block; padding: 15px; border-left: 3px solid red;
}
/*文章發佈時間*/ .article-date { float: right;
    /*將日期的位置和標題的位置水平對齊*/ margin-top: 15px; margin-right: 10px;
}
/*內容信息*/ .article-info { background-color: white;
    /*top, right, bottom, left*/ padding: 10px 10px 5px 20px;
}
/*內容的屬性,歸類*/ .article-tag { margin: 10px; padding: 10px; border-top: 1px solid #dddddd;
}
View Code
相關文章
相關標籤/搜索