实例

仿博客页面

HTML代码

前端实例 随笔 第1张 
<!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代码

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。
前端实例 随笔 第3张 
/*公用样式*/
* {     /* 通配符选择器，能和任何元素匹配*/
    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

 

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄