当前位置:   article > 正文

30个HTML+CSS前端开发案例(一)_前端简洁案例

前端简洁案例

三角形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>三角形</title>
		<style type="text/css">
			.box{
				width: 0px;
				height: 0px;
				border-top:10px solid transparent;
				border-right:10px solid transparent;
				border-bottom:10px solid transparent;
				border-left:10px solid black;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

百度新闻热榜

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度热榜</title>
		<style type="text/css">
			 body,h3,ul{
				 margin: 0px;
				 padding: 0px;
			 }
			.news{
				width: 360px;
				/* height: 400px; */
				/* background-color: red; */
				margin: 50px auto 0px;/*上 左右 下*/
				border:1px solid #ddd;
				padding: 15px;
			}
			.news h3 {
				/* border: 1px solid red; */
				font-size: 20px;
				margin-bottom: 20px;
			}
			.news ul {
				/* border: 1px solid #000; */
				list-style: none;
			}
			.news ul li {
				border-bottom: 1px dotted #ddd;
				height: 35px;
				line-height: 35px;
				font-size: 15px;
				color: #333;
			}
			.news ul li a{
				color: #333;
				text-decoration: none;/* 去掉下划线 */
			}
			.news ul li a:hover{
				color: red;
			}
			.news ul li a span{
				/* border: 1px solid red; */
				margin-right: 10px;
				font-weight: bold;
			}
				
			.col1{
				color: red;
			}
			.col2{
				color: #ff5c55;
			}
			.col3{
				color: #ffa552;
			}
		</style>
	</head>
	<body>
		<div class="news">
			<h3>百度新闻热榜</h3>
			<ul>
				<li><a href=""><span class="col1">1</span>元宵晚会</a></li>
				<li><a href=""><span class="col2">2</span>国防部回应美袭击中国民用无人飞艇热</a></li>
				<li><a href=""><span class="col3">3</span>花开中国 感受春天</a></li>
				<li><a href=""><span class="col4">4</span>25城平均月薪8203.56元热</a></li>
				<li><a href=""><span class="col5">5</span>宝宝时隔9个月偶遇月嫂主动求抱</a></li>
				<li><a href=""><span class="col6">6</span>美前外交官:布林肯推迟访华非常可悲</a></li>
				<li><a href=""><span class="col7">7</span>武契奇称以被西方制裁而自豪</a></li>
				<li><a href=""><span class="col8">8</span>新冠病毒去哪儿了?多地疾控研判</a></li>
			</ul>
		</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

仿小米商城左侧菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>仿小米商城左侧菜单</title>
		<style type="text/css">
			body{
				background-image: linear-gradient(to right,#fbd787,#c6ffdd);
				margin: 0;
			}
			.menu{
				width: 300px;
				/* height: 700px; */
				background-color: rgba(225, 255, 255, 0.6);
				margin: 50px auto 0px;
			}
			ul{
				list-style: none;/* 去掉圆点 */
				margin: 0;
				padding: 0;
			}
			a{
				text-decoration: none;
			}
			.menu ul{
				/* border: 1px solid red; */
				/* padding: 20px 0; */
			}
			.menu ul li{
				/* border: 1px solid blue; */
				height: 42px;
				line-height: 42px;
			}
			.menu ul li a{
				/* border: 1px solid #000; */
				display: block;
				/* padding-left: 20px;*/
				text-indent: 2em;
				color: #000;
				/* background-image: url('images/right.png');
				background-repeat: no-repeat;
				background-position: 255px 11px;
				background-size: 10px; */
				background: url('images/right1.png') no-repeat 255px 15px;
				background-size: 10px;
			}
			.menu ul li a:hover{
				background-color: #ff6700;
				color: white;
				background-image: url('images/right2.png');
			}
		</style>
	</head>
	<body>
		<div class="menu">
			<ul>
				<li><a href="" target="_blank">手机</a></li>
				<li><a href="" target="_blank">电视</a></li>
				<li><a href="" target="_blank">笔记本 平板</a></li>
				<li><a href="" target="_blank">家电</a></li>
				<li><a href="" target="_blank">出行 穿戴</a></li>
				<li><a href="" target="_blank">智能 路由器</a></li>
				<li><a href="" target="_blank">电源 配件</a></li>
				<li><a href="" target="_blank">健康 儿童</a></li>
				<li><a href="" target="_blank">耳机 音箱</a></li>
				<li><a href="" target="_blank">生活 箱包</a></li>
			</ul>
		</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

产品展示效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>产品展示效果</title>
		<style type="text/css">
			body,
			p,
			h3 {
				margin: 0;
			}
			a{
				text-decoration: none;
				/* border: 1px solid red; */
				display: block;/* 干掉bug */
			}
			.product {
				width: 268px;
				/* height: 500px; */
				/* background-color: red; */
				margin: 50px auto 0;
				border: 1px solid #ddd;
				text-align: center;
				/* 水平居中 */

			}

			.product p.describe {
				/* border: 1px solid red; */
				color: #845f3f;
				font-size: 16px;
			}

			.product-text {
				height: 100px;
				background-color: #f8f8f8;
				margin-top: 20px;
				padding: 5px;
			}

			.product-mark img {
				margin-left: 20px;
			}

			/* 去除图片空隙 */
			/* .product .product-text .product-mark{
				font-size: 0;
			} */
			.product .product-text h3 {
				font-size: 20px;
				font-weight: 400;
				/* border: 1px solid red; */
				/* margin-top: 10px;s */
				color: #000;
			}

			.product .product-text p {
				color: #a92112;
				font-size: 20px;
				margin-top: 5px;
			}
		</style>
	</head>
	<body>
		<div class="product">
			<a href="" target="_blank">
				<img src="images/kettle.png" alt="电水壶" width="195px">
				<p class="describe">快速煮水,放心饮用</p>
				<div class="product-text">
					<div class="product-mark">
						<img src="images/live.png" alt="直播中" height="30">
						<img src="images/tehui.png" alt="特惠" height="30">
						<img src="images/baojia.png" alt="30天保价" height="30">
						<img src="images/shouhou.png" alt="售后免邮" height="30">
					</div>
					<h3>云米电水壶</h3>
					<p>¥59</p>
				</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

精美分页效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>精美的分页效果</title>
		<style type="text/css">
			body{
				margin: 0;
			}
			.page{
				width: 100%;
				/* height: 200px; */
				background-color: azure;
				text-align: center;
				font-size: 0px;
				padding: 20px 0;
			}
			.page a,.page span{
				border: 1px solid #ddd;
				background-color: #fff;
				display: inline-block;
				/* width: 30px; */
				height: 30px;
				text-decoration: none;
				line-height: 30px;
				color: #333;
				padding: 0 10px;
				font-size: 14px;
				margin: 0 2px;
			}
			.page span{
				background-color: red;
				color: white;
			}
		</style>
	</head>
	<body>
		<div class="page">
			<a href=" ">&lt;</a>
			<span>1</span>	
			<a href=" ">2</a>	
			<a href=" ">3</a>	
			<a href=" ">4</a>	
			<a href=" ">5</a>	
			<a href=" ">...</a>			
			<a href=" ">100</a>			
			<a href=" ">&gt;</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
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小蓝xlanll/article/detail/167186
推荐阅读
相关标签
  

闽ICP备14008679号