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

业界资讯 2023-09-18 23:40:08 阅读次数: 0

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>

网页框架布局

<!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>

酷狗音乐热榜

<!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>

小米商城首页产品栏

<!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>

酷狗精选歌单效果

<!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>

猜你喜欢

转载自blog.csdn.net/pipihan21/article/details/128914255
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022