30个HTML+CSS前端开发案例（二）_htmlcss简单案例

作者：花生_TL007 | 2024-02-29 17:27:57

踩

htmlcss简单案例

30个HTML+CSS前端开发案例（6-10）

常用的选项卡菜单效果
网页框架布局
酷狗音乐热榜
小米商城首页产品栏
酷狗精选歌单效果

常用的选项卡菜单效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用的选项卡菜单效果</title>
		<style type="text/css">
			body{
				margin: 0;
			}
			.tab{
				width: 800px;
				/* height: 50px; */
				background-color: #f7f7f7;
				border-radius: 50px;
				margin: 50px auto 0;
				font-size: 0;
				text-align: center;
				padding: 5px 0;
			}
			.tab span{
				/* border: 1px solid red; */
				height: 40px;
				display: inline-block;
				padding: 0 40px;
				line-height: 40px;
				font-size: 16px;
				border-radius: 50px;
			}
			.tab span i{
				width: 26px;
				height: 26px;
				/* border: 1px solid red; */
				display: inline-block;
				background-image: url('images/icon.png');
				vertical-align: middle;/* 图像垂直居中,只对行内块级元素有效 */	
				margin-right: 5px;
			}
			.tab span i.icon1{
				background-position: -26px 0px;
			}
			.tab span i.icon2{
				background-position: -52px 0px;
			}
			.tab span i.icon3{
				background-position: -78px 0px;
			}
			.tab span i.icon4{
				background-position: -104px 0px;
			}
			.tab span i.icon5{
				
			}
			.tab span.current{
				background-color: #fe94a9;
				color: #fff;
			}
			.tab span.current i.icon1{
				background-position: 0 -26px;
			}
			.tab span.current i .icon2{
				background-position: -26px -26px;
			}
			.tab span.current i .icon3{
				background-position: -52px -26px;
			}
			.tab span.current i .icon4{
				background-position: -78px -26px;
			}
			.tab span.current i .icon5{
				background-position: -104px -26px;
			}
		</style>
	</head>
	<body>
		<div class="tab">
			<span class="current"><i class="icon1"></i>备孕期间</span>
			<span><i class="icon2"></i>怀孕</span>		
			<span><i class="icon3"></i>0-1岁</span>
			<span><i class="icon4"></i>1-2岁</span>
			<span><i class="icon5"></i>2-3岁</span>
		</div>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

网页框架布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页框架布局</title>
		<style type="text/css">
			body ul{
				margin: 0;
				padding: 0;
			}

			.layout {
				width: 1000px;
				/* height: 800px;
				background-color: aquamarine; */
				margin: 50px auto 0;
			}

			.column-2 {
				/* border: 2px solid #000; */
				margin-top: 20px;
			}

			.column-2 .column-2-1 {
				width: 700px;
				height: 300px;
				float: left;
				background-color: red;
			}

			.column-2 .column-2-2 {
				width: 280px;
				height: 300px;
				float: right;
				background-color: yellow;
			}

			.clear {
				clear: both;
			}

			.column-3 {
				/* border: 2px solid #000; */
				margin-top: 20px;
			}

			.column-3-1 {
				width: 260px;
				height: 300px;
				background-color: bisque;
				float: left;
			}

			.column-3-2 {
				width: 300px;
				height: 300px;
				background-color: orangered;
				float: left;
				margin-left: 20px;
			}

			.column-3-3 {
				width: 400px;
				height: 300px;
				background-color: #009af3;
				float: right;
			}

			.clearfix::after {
				display: block;
				content: "";
				clear: both;
			}
			ul{
				list-style: none;
			}
			.column-n{
				margin-top: 20px;
			}
			.column-n ul{
				/* border: 2px solid blue; */
			}
			.column-n ul li{
				/* border: 1px solid #000; */
				width: 190px;
				height: 200px;
				float: left;
				margin: 5px;
				background-color: chartreuse;
			}
		</style>
	</head>
	<body>
		<div class="layout">
			<div class="column-2">
				<div class="column-2-1"></div>
				<div class="column-2-2"></div>
				<div class="clear"></div>
			</div>
			<div class="column-3 clearfix">
				<div class="column-3-1"></div>
				<div class="column-3-2"></div>
				<div class="column-3-3"></div>
			</div>
			<div class="column-n">
				<ul class="clearfix">
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

酷狗音乐热榜

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>酷狗音乐热榜</title>
		<style type="text/css">
			body,
			h3,
			h4,
			p {
				margin: 0;
				padding: 0;
			}

			a {
				text-decoration: none;
			}

			.music-hot {
				width: 350px;
				height: 500px;
				/* border: 2px solid red; */
				margin: 50px auto 0;
			}

			.music-hot h3 {
				/* border: 1px solid red; */
				height: 40px;
				line-height: 40px;
			}

			.img-collection h3 span {
				font-size: 28px;
				font-weight: 100;
			}

			.img-collection h3 span i {
				color: #009af3;
				font-style: normal;
			}

			.img-collection h3 a {
				text-decoration: none;
				color: #666;
				font-size: 14px;
				font-weight: 100;
				float: right;
				/* border: 1px solid red; */
			}

			.music-hot .item {
				height: 98px;
				background-color: #f6f6f6;
				margin-top: 20px;

			}

			.music-hot .item .item-img {
				width: 98px;
				height: 98px;
				/* background-color: chartreuse; */
				float: left;
			}

			.music-hot .item .item-txt {
				width: 232px;
				height: 98px;
				/* background-color: cornflowerblue; */
				float: right;
				background: url('images/arrow.png') no-repeat right center;
			}

			.music-hot .item .item-txt h4 {
				/* border: 1px solid red; */
				font-size: 14px;
				padding: 8px 0;
			}

			.music-hot .item .item-txt p {
				/* border: 1px solid red; */
				font-size: 14px;
				color: #555;
				line-height: 25px;
			}

			.music-hot .item .item-txt p span {
				color: #999;
			}

			.music-hot .item a {
				/* border: 2px solid #000; */
				display: block;
			}

			.clearfix::after {
				content: "";
				display: block;
				clear: both;
			}

			.music-hot .item .item-txt h4 {
				color: #000;
			}
		</style>
	</head>
	<body>
		<div class="music-hot">
			<div class="img-collection">
				<h3>
					<a href="">更多</a>
					<span><i>精选</i>图片</span>
				</h3>
			</div>
			<a href="" class="clearfix">
				<div class="item">
					<div class="item-img">
						<img src="images/nav1.jpg" alt="音乐飙升榜" width="98">
					</div>
					<div class="item-txt">
						<h4>酷狗飙升榜</h4>
						<p>1 . 很受伤 (Live)- <span>郁可唯</span></p>
						<p>2 . Lemon (柠檬)- <span>米津玄師</span></p>
					</div>
				</div>
			</a>
			<a href="" class="clearfix">
				<div class="item">
					<div class="item-img">
						<img src="images/nav2.jpg" alt="音乐飙升榜" width="98">
					</div>
					<div class="item-txt">
						<h4>酷狗飙升榜</h4>
						<p>1 . 很受伤 (Live)- <span>郁可唯</span></p>
						<p>2 . Lemon (柠檬)- <span>米津玄師</span></p>
					</div>
				</div>
			</a>
			<a href="" class="clearfix">
				<div class="item">
					<div class="item-img">
						<img src="images/nav3.jpg" alt="音乐飙升榜" width="98">
					</div>
					<div class="item-txt">
						<h4>酷狗飙升榜</h4>
						<p>1 . 很受伤 (Live)- <span>郁可唯</span></p>
						<p>2 . Lemon (柠檬)- <span>米津玄師</span></p>
					</div>
				</div>
			</a>
		</div>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

小米商城首页产品栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小米商城首页产品栏</title>
		<style type="text/css">
			body {
				margin: 0;
				background-color: #ddd;
			}

			h3,
			h4,
			p,
			ul {
				margin: 0;
				padding: 0;
			}

			ul {
				list-style: none;
			}

			a {
				text-decoration: none;
				color: #000;
			}

			.product {
				width: 1226px;
				/* height: 700px; */
				/* border: 2px solid red; */
				margin: 50px auto 0;
			}

			.product .product-hot {
				width: 234px;
				/* height: 614px; */
				/* background-color: aqua; */
				float: left;
			}

			.product-hot img {
				/* 变成块级元素，消除img标签所产生的空隙 */
				display: block;
			}

			.product .product-list {
				width: 992px;
				/* height: 614px; */
				/* background-color: bisque; */
				float: right;
			}

			.clearfix::after {
				/* 清除浮动 */
				content: "";
				display: block;
				clear: both;
			}

			.product-list ul {
				/* border: 2px solid #000; */
			}

			.product-list ul li {
				/* border: 2px solid blue; */
				width: 234px;
				height: 300px;
				float: left;
				margin-left: 14px;
				margin-bottom: 14px;
				background-color: white;

			}

			.product-list ul li:nth-last-child(1) {
				height: 143px;
			}

			.product-list ul li:nth-last-child(2) {
				height: 143px;
			}

			.product-list ul li a {
				/* border: 2px solid #000; */
				display: block;
				/* 内联元素变块级元素 */
				height: inherit;
				/* 继承父高 */
				text-align: center;
				padding-top: 30px;
				box-sizing: border-box;
				/* 设置为怪异盒模型 */
			}

			/* 	.product-list ul li a img{
				margin-top: 30px;
			} */
			.product-list ul li a h3 {
				/* 标题隐藏省略效果 */
				font-size: 14px;
				font-weight: 400px;
				padding: 0 5px 0;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.product-list ul li a p.describe {
				color: #999;
			}

			.product-list ul li a p.price {
				font-size: 14px;
				padding-top: 15px;
			}

			.product-list ul li a p.price span {
				color: orange;
				margin-right: 10px;
			}

			.product-list ul li a p.price del {
				color: #999;
			}

			.product-list ul li .txt {
				width: 100px;
				height: 100px;
				/* background-color: aqua; */
				float: left;
				margin-left: 20px;
			}

			.product-list ul li .img {
				width: 80px;
				height: 80px;
				/* background-color: blue; */
				float: right;
				margin-right: 20px;
			}

			.product-list ul li .txt h4 {
				font-weight: 400;
				font-size: 14px;
				text-align: left;
			}

			.product-list ul li .txt p {
				font-size: 14px;
				text-align: left;
				color: orange;
				margin-top: 15px;
			}
			.product-list ul li .more{
				margin-top: 20px;
			}
			.product-list ul li .txt h4.ti{
				font-size: 20px;
			}
			.product-list ul li .txt p.hot{
				color: #999;
			}
		</style>
	</head>
	<body>
		<div class="product clearfix">
			<div class="product-hot">
				<a href="">
					<img src="images/mi00.webp" alt="热卖" width="234px">
				</a>
			</div>
			<div class="product-list">
				<ul class="clearfix">
					<li>
						<a href="">
							<img src="images/mi01.webp" alt="" width="160">
							<h3>Xiaomi Watch S1</h3>
							<p class="describe">腕事具备</p>
							<p class="price"><span>1099元起</span><del>2099元起</del></p>
						</a>
					</li>
					<li>
						<a href="">
							<img src="images/mi02.webp" alt="" width="160">
							<h3>Xiaomi Watch S1</h3>
							<p class="describe">腕事具备</p>
							<p class="price"><span>1099元起</span><del>2099元起</del></p>
						</a>
					</li>
					<li>
						<a href="">
							<img src="images/mi03.webp" alt="" width="160">
							<h3>Xiaomi Watch S1</h3>
							<p class="describe">腕事具备</p>
							<p class="price"><span>1099元起</span><del>2099元起</del></p>
						</a>
					</li>
					<li>
						<a href="">
							<img src="images/mi04.webp" alt="" width="160">
							<h3>Xiaomi Watch S1</h3>
							<p class="describe">腕事具备</p>
							<p class="price"><span>1099元起</span><del>2099元起</del></p>
						</a>
					</li>
					<li>
						<a href="">
							<img src="images/mi05.webp" alt="" width="160">
							<h3>Xiaomi Watch S1</h3>
							<p class="describe">腕事具备</p>
							<p class="price"><span>1099元起</span><del>2099元起</del></p>
						</a>
					</li>
					<li>
						<a href="">
							<img src="images/mi06.webp" alt="" width="160">
							<h3>Xiaomi Watch S1</h3>
							<p class="describe">腕事具备</p>
							<p class="price"><span>1099元起</span><del>2099元起</del></p>
						</a>
					</li>
					<li>
						<a href="">
							<img src="images/mi07.webp" alt="" width="160">
							<h3>Xiaomi Watch S1</h3>
							<p class="describe">腕事具备</p>
							<p class="price"><span>1099元起</span><del>2099元起</del></p>
						</a>
					</li>
					<li>
						<a href="">
							<div class="txt">
								<h4>Redmi Buds 3 青春版</h4>
								<p>999元</p>
							</div>
							<div class="img">
								<img src="images/mi08.webp" alt="" width="80">
							</div>
						</a>
					</li>
					<li>
						<a href="">
							<div class="txt">
								<h4 class="ti">浏览更多</h4>
								<p class="hot">热门</p>
							</div>
							<div class="img more">
								<img src="images/circle-arrow.svg" alt="" width="48">
							</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259

酷狗精选歌单效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>酷狗精选歌单效果</title>
		<style type="text/css">
			body,
			p,
			h3 {
				margin: 0;
				padding: 0;
			}

			.music {
				width: 480px;
				height: 480px;
				background-color: aqua;
				margin: 50px auto 0;

			}

			a {
				text-decoration: none;
				color: #000;
			}

			.music a {
				/* border: 1px solid red; */
				width: 480px;
				height: 480px;
				display: block;
				position: relative;
				/* 相对定位 */
			}

			.music p.music-number {
				/* border: 2px solid #000; */
				height: 35px;
				width: 200px;
				position: absolute;
				/* 绝对定位 */
				top: 0;
				right: 0;
				background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0));
				/* 设置渐变色 */
				text-align: center;
			}

			/* 添加浮动之后,盒模型自动变为inline-block类型 */
			.music p.music-number span.icon-earphone {
				width: 35px;
				height: 35px;
				/* border: 1px solid red; */
				/* display: inline-block; */
				float: right;
				background: url('images/earphone.svg') no-repeat center;
				background-size: 20px;
				margin-right: 10px;
			}

			.music p.music-number span.musci-number-txt {
				height: 35px;
				/* border: 1px solid red; */
				/* display: inline-block; */
				float: right;
				font-size: 14px;
				color: white;
				line-height: 35px;
				padding-right: 10px;
			}

			.music .music-text {
				width: 100%;
				height: 80px;
				background-color: rgba(0, 0, 0, 0.5);
				position: absolute;
				bottom: 0;
				color: white;
			}

			.music .music-text h3 {
				font-weight: 100;
				padding: 15px 0 5px 10px;
			}

			.music .music-text p {
				color: #ddd;
				padding-left: 10px;
			}

			.music .music-mask {
				/* 遮罩层 */
				/* width: 480px;
				height: 480px; */
				background-color: rgba(0, 0, 0, 0.5);
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				display: none;
			}

			.music .play-button {
				width: 36px;
				height: 36px;
				position: absolute;
				bottom: 22px;
				right: 22px;
				background: url('images/play-button.svg');
				display: none;
			}

			/* 鼠标悬停出现遮罩层 */
			.music a:hover .music-mask,
			.music a:hover .play-button {
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="music">
			<a href="#">
				<img src="images/kugou-img1.jpg" alt="" width="480">
				<p class="music-number">
					<span class="musci-number-txt">679.9万</span>
					<span class="icon-earphone"></span>
				</p>
				<div class="music-text">
					<h3>乡村之旅：安静惬意，与自然同在</h3>
					<p>蔓若</p>
				</div>
				<div class="music-mask">
					<div class="play-button"></div>
				</div>
			</a>
		</div>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/167147