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

30个前端小案例(1-5)

  • 三角形
  • 百度新闻热榜
  • 仿小米商城左侧菜单
  • 产品展示效果
  • 精美分页效果

三角形

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>

百度新闻热榜

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">1span>元宵晚会a>li>
				<li><a href=""><span class="col2">2span>国防部回应美袭击中国民用无人飞艇热a>li>
				<li><a href=""><span class="col3">3span>花开中国 感受春天a>li>
				<li><a href=""><span class="col4">4span>25城平均月薪8203.56元热a>li>
				<li><a href=""><span class="col5">5span>宝宝时隔9个月偶遇月嫂主动求抱a>li>
				<li><a href=""><span class="col6">6span>美前外交官:布林肯推迟访华非常可悲a>li>
				<li><a href=""><span class="col7">7span>武契奇称以被西方制裁而自豪a>li>
				<li><a href=""><span class="col8">8span>新冠病毒去哪儿了?多地疾控研判a>li>
			ul>
		div>
	body>
html>

仿小米商城左侧菜单

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>

产品展示效果

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>¥59p>
				div>
			a>
		div>
	body>
html>

精美分页效果

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=" "><a>
			<span>1span>	
			<a href=" ">2a>	
			<a href=" ">3a>	
			<a href=" ">4a>	
			<a href=" ">5a>	
			<a href=" ">...a>			
			<a href=" ">100a>			
			<a href=" ">>a>
		div>
	body>
html>

你可能感兴趣的:(毕业设计,html,css,前端,web开发)