【7.0】前端基础之CSS案例#

在设计页面的时候先用div划分页面，再去填充数据，再去填充样式

html#

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>CnBlogs</title>
6
    <link rel="stylesheet" href="01%20blog-css.css">
7
</head>
8
<body>
9

10
<div class="blog-left">
11
    <div class="blog-avatar-img">
12
        <img src="头像猫.jpg" alt="">
13
    </div>
14
    <div class="blog-username">
15
        Chimengmeng
16
    </div>
17
    <div class="blog-info">
18
        天涯何处无芳草
19
    </div>
20
    <div class="blog-link">
21
        <ul>
22
            <li><a href="">关于我</a></li>
23
            <li><a href="">微信</a></li>
24
            <li><a href="">QQ</a></li>
25
        </ul>
26
    </div>
27
    <div class="blog-bottom">
28
        <ul>
29
            <li><a href="">#python</a></li>
30
            <li><a href="">#Java</a></li>
31
            <li><a href="">#GoLand</a></li>
32
        </ul>
33
    </div>
34
</div>
35
<div class="blog-right">
36
    <div class="article">
37
        <div class="article-title">
38
            <span class="title">如何报道富婆</span>
39
            <span class="datetime">2023-03-06</span>
40
        </div>
41
        <div class="article-body">
42
            <p>天涯何处无芳草，何必单恋一根草！</p>
43
        </div>
44
        <hr>
45
        <div class="article-bottom">
46
            <span>#Python&nbsp;</span>
47
            <span>#JavaScript</span>
48
        </div>
49
    </div>
50

51
    <div class="article">
52
        <div class="article-title">
53
            <span class="title">如何报道富婆</span>
54
            <span class="datetime">2023-03-06</span>
55
        </div>
56
        <div class="article-body">
57
            <p>天涯何处无芳草，何必单恋一根草！</p>
58
        </div>
59
        <hr>
60
        <div class="article-bottom">
61
            <span>#Python&nbsp;</span>
62
            <span>#JavaScript</span>
63
        </div>
64
    </div>
65

66
    <div class="article">
67
        <div class="article-title">
68
            <span class="title">如何报道富婆</span>
69
            <span class="datetime">2023-03-06</span>
70
        </div>
71
        <div class="article-body">
72
            <p>天涯何处无芳草，何必单恋一根草！</p>
73
        </div>
74
        <hr>
75
        <div class="article-bottom">
76
            <span>#Python&nbsp;</span>
77
            <span>#JavaScript</span>
78
        </div>
79
    </div>
80

81
    <div class="article">
82
        <div class="article-title">
83
            <span class="title">如何报道富婆</span>
84
            <span class="datetime">2023-03-06</span>
85
        </div>
86
        <div class="article-body">
87
            <p>天涯何处无芳草，何必单恋一根草！</p>
88
        </div>
89
        <hr>
90
        <div class="article-bottom">
91
            <span>#Python&nbsp;</span>
92
            <span>#JavaScript</span>
93
        </div>
94
    </div>
95

96
    <div class="article">
97
        <div class="article-title">
98
            <span class="title">如何报道富婆</span>
99
            <span class="datetime">2023-03-06</span>
100
        </div>
101
        <div class="article-body">
102
            <p>天涯何处无芳草，何必单恋一根草！</p>
103
        </div>
104
        <hr>
105
        <div class="article-bottom">
106
            <span>#Python&nbsp;</span>
107
            <span>#JavaScript</span>
108
        </div>
109
    </div>
110

111
    <div class="article">
112
        <div class="article-title">
113
            <span class="title">如何报道富婆</span>
114
            <span class="datetime">2023-03-06</span>
115
        </div>
116
        <div class="article-body">
117
            <p>天涯何处无芳草，何必单恋一根草！</p>
118
        </div>
119
        <hr>
120
        <div class="article-bottom">
121
            <span>#Python&nbsp;</span>
122
            <span>#JavaScript</span>
123
        </div>
124
    </div>
125
</div>
126

127
</body>
128
</html>

CSS#

1
/* 这是对博客园首页的装饰代码 */
2

3

4
/*---------------------------------------------------*/
5
/* 通用样式 */
6
body {
7
    margin: 0;
8
    /* 去除上下距离 */
9
    background-color: #4e4e4e;
10
    /* 设置背景为浅色 */
11
}
12

13
a {
14
    text-decoration: none; /* 去除a标签下的下划线 */
15
}
16

17
ul {
18
    list-style-type: none;
19
    /* 去除ul列表前的点 */
20

21
    padding-left: 0;
22
    /* 去除ul自带的边框距离 */
23
}
24

25

26
/*---------------------------------------------------*/
27
/*  左侧样式 */
28
/* 整个左半部分，大板块 */
29
.blog-left {
30
    float: left;
31
    /* 让整个标签一直浮动在左侧 */
32
    width: 20%;
33
    /* 占据总页面宽度的 20% */
34
    height: 100%;
35
    /* 占据总页面高度的 100% */
36
    position: fixed;
37
    /* 固定位置模式 */
38
    background-color: darkslateblue;
39
    /* 给一个背景色 */
40
}
41

42
/* 头像版块 */
43
.blog-avatar-img {
44
    height: 100px;
45
    /* 指定高度 */
46
    width: 100px;
47
    /* 制定宽度 */
48
    border-radius: 50%;
49
    /* 制定圆形 */
50
    border: 3px solid white;
51
    /* 制定边框格式 */
52
    margin: 20px auto;
53
    /* 上下距离 20px 左右 居中 */
54
    overflow: hidden;
55
    /* 将图片塞到圆圈里 */
56
}
57

58
/* 附上上面的条件，让图片占据圆内的 100% */
59
.blog-avatar-img img {
60
    max-width: 100%;
61
    /* 占据圆内的100% */
62
}
63

64
/* 调整标题的字体相关属性 */
65
.blog-username, .blog-info {
66
    color: deeppink;
67
    /* 设置字体颜色 */
68
    font-size: 18px;
69
    /* 设置字体大小 */
70
    text-align: center;
71
    /* 设置文字居中 */
72
}
73

74
/* 调整 blog-link/blog-bottom 相关链接的设置 */
75
.blog-link, .blog-bottom {
76
    font-size: 20px;
77
}
78

79
/* 对blog-link下的a标签链接进行设置 */
80

81
.blog-link a, .blog-bottom a {
82
    color: darkgray; /* 修改默认颜色 */
83
}
84

85
.blog-link a:hover, .blog-bottom a:hover {
86
    color: white; /* 修改鼠标悬浮颜色 */
87
}
88

89
.blog-link ul, .blog-bottom ul {
90
    text-align: center; /* 让ul列表下的文本居中 */
91
    margin-top: 100px; /* 让文本中间距离加大 */
92

93

94
}
95

96
/*---------------------------------------------------*/
97
/* 右侧样式 */
98
.blog-right {
99
    float: right;
100
    /* 让整个版块内容浮动在右侧 */
101
    width: 80%;
102
    /* 占据宽度的80% */
103
    height: 1000px;
104
    /* 最大高度 1000px  */
105

106
}
107

108
/* 修改文章字体的背景色 */
109
.article {
110
    background-color: white;
111
    /* 设置文本背景色为白色 */
112
    margin: 10px 20px 10px 10px;
113
    /* 这是文本框距离边框的距离 */
114
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
115
    /* 为文本框增加阴影 */
116
}
117

118
/* 设置文本框左侧的小边框设置 */
119
.article-title {
120
    border-left: 5px solid red;
121
    /* 设置小边框的颜色深度(只有左侧边框) */
122
    text-indent: 16px;
123
    /* 设置小边框距离文本的距离 */
124
}
125

126

127
/* 修改文本框内的文本设置 */
128
.title {
129
    font-size: 24px;
130
    /* 设置主题文字的大小 */
131
    margin-top: 10px;
132
}
133

134
/* 修改文本框内的日期 */
135
.datetime {
136
    float: right;
137
    /* 浮动在右侧 */
138
    margin: 10px 20px 10px 10px;
139
    /* 设置日期距离边框的距离 */
140
    font-weight: bold;
141
    /* 设置字体加粗 */
142
}
143

144
/* 修改article-body 下的内容 */
145
.article-body {
146
    font-size: 18px;
147
    /* 设置文本内容字体大小 */
148
    text-indent: 28px;
149
    /* 设置文本缩进 */
150
    /*border-bottom: 1px solid black;*/
151
    /*!* 在内容底部 + 一条黑色的线 *!*/
152
    /* 或者在文本底部 + hr */
153
}
154

155
/* 修改文章底部的内容 */
156
.article-bottom {
157
    padding-left: 30px;
158
    padding-bottom: 10px;
159
    /* 调整文本距离边框的距离 */
160
}

音乐

音乐

【7.0】前端基础之CSS案例#

html#

CSS#

支持与分享

音乐

CSS 案例

【7.0】前端基础之CSS案例#

html#

CSS#

支持与分享