html,css,javascript综合案例，适合前端手练习的项目，适合前端大作业，具备多种功能页面的 “幸福西饼设计”

其他 2023-01-28 20:08:36 阅读次数: 0

注:如果需要项目当中的图片，在点击关注点赞之后可以私信我发图片链接，更多前端大作业项目实战可以关注我的专栏

！！！图片记住私信我拿链接

1.页面效果展示:

 

2.代码

先展示一下内容结构，需要的同学可以参考一下

 details.html代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
		<link rel="stylesheet" type="text/css" href="css/details.css"/>
	</head>
	<body>
		<div id="details">
			<!--头部-->
			<div class="xf_header">
				<header>
					<a href="index.html">
						<img src="img/logo_big01.png"/>
					</a>
					<div class="city">
						<img src="img/icon-address.png"/>
						<span>武汉市</span>
						<a href="#">切换城市</a>
					</div>
					<div class="nav">
						<a href="#">全部</a>
						<a href="#">蛋糕</a>
						<a href="#">下午茶</a>
						<a href="#">手信</a>
						<a href="#">团购预约</a>
						<a href="#">关于我们</a>
					</div>
					<div class="link">
						<img src="img/i-search.jpg"/>
						<img src="img/i-cart.jpg"/>
						<img src="img/i-user.jpg"/>
						<a href="#">联系我们</a>
					</div>
				</header>
			</div>
			<div class="xf_content">
				<div class="content">
					<ul class="clear">
						<li>
							<img src="img/cake1.jpg"/>
							<p>爆浆榴莲蛋糕</p>
							<p>￥99.00</p>
						</li>
						<li>
							<img src="img/cake1.jpg"/>
							<p>爆浆榴莲蛋糕</p>
							<p>￥99.00</p>
						</li>
						<li>
							<img src="img/cake1.jpg"/>
							<p>爆浆榴莲蛋糕</p>
							<p>￥99.00</p>
						</li>
						<li>
							<img src="img/cake1.jpg"/>
							<p>爆浆榴莲蛋糕</p>
							<p>￥99.00</p>
						</li>
						<li>
							<img src="img/cake1.jpg"/>
							<p>爆浆榴莲蛋糕</p>
							<p>￥99.00</p>
						</li>
						<li>
							<img src="img/cake1.jpg"/>
							<p>爆浆榴莲蛋糕</p>
							<p>￥99.00</p>
						</li>
						<li>
							<img src="img/cake1.jpg"/>
							<p>爆浆榴莲蛋糕</p>
							<p>￥99.00</p>
						</li>
						<li>
							<img src="img/cake1.jpg"/>
							<p>爆浆榴莲蛋糕</p>
							<p>￥99.00</p>
						</li>
						<li>
							<img src="img/cake1.jpg"/>
							<p>爆浆榴莲蛋糕</p>
							<p>￥99.00</p>
						</li>
						<li>
							<img src="img/cake1.jpg"/>
							<p>爆浆榴莲蛋糕</p>
							<p>￥99.00</p>
						</li>
						<li>
							<img src="img/cake1.jpg"/>
							<p>爆浆榴莲蛋糕</p>
							<p>￥99.00</p>
						</li>
						<li>
							<img src="img/cake1.jpg"/>
							<p>爆浆榴莲蛋糕</p>
							<p>￥99.00</p>
						</li>
						<li>
							<img src="img/cake1.jpg"/>
							<p>爆浆榴莲蛋糕</p>
							<p>￥99.00</p>
						</li>
						<li>
							<img src="img/cake1.jpg"/>
							<p>爆浆榴莲蛋糕</p>
							<p>￥99.00</p>
						</li>
						<li>
							<img src="img/cake1.jpg"/>
							<p>爆浆榴莲蛋糕</p>
							<p>￥99.00</p>
						</li>
					</ul>
					<div class="page clear">
						<img src="img/arrow_03.jpg"/>
						<span>1</span>
						<img src="img/arrow_05.jpg"/>
					</div>
				</div>
			</div>
			<!--footer-->
			<div class="xf_footer">
				<footer>
					<div class="footer1">
						<div class="msg">
							<a href="#">品牌动态</a>
							<a href="#">生产经营资质</a>
							<a href="#">企业合作</a>
							<a href="#">发票申请</a>
							<a href="#">平台规则</a>
							<a href="#">帮助服务</a>
							<a href="#">联系我们</a>
						</div>
						<div class="tel">
							<a href="#">
								<img src="img/tel_03.jpg"/>
								<span>400-999-6665</span>
							</a>
							<a href="#">WEIBO</a>
							<a href="#">WECHAT</a>
							<a href="#">京东商城</a>
						</div>
					</div>
					<div class="footer2">
						<div class="copyright">
							<span>深圳市幸福商城科技股份有限公司</span>
							<span>粤ICP备16039394号-6 </span>
							<span>京公网安备44030702002399</span>
							<span>公司地址：深圳市龙岗区坂田街道布龙339鸿生源工业园A座5楼</span>
						</div>
					</div>
				</footer>
			</div>
		</div>
	</body>
</html>

index.html代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<!--
			页面的版心宽度  1251px
		-->	
		<div id="box">
			<!--头部-->
			<div class="xf_header">
				<header>
					<a href="index.html">
						<img src="img/logo_big01.png"/>
					</a>
					<div class="city">
						<img src="img/icon-address.png"/>
						<span>武汉市</span>
						<a href="#">切换城市</a>
					</div>
					<div class="nav">
						<a href="#">全部</a>
						<a href="#">蛋糕</a>
						<a href="#">下午茶</a>
						<a href="#">手信</a>
						<a href="#">团购预约</a>
						<a href="#">关于我们</a>
					</div>
					<div class="link">
						<img src="img/i-search.jpg"/>
						<img src="img/i-cart.jpg"/>
						<img src="img/i-user.jpg"/>
						<a href="#">联系我们</a>
					</div>
				</header>
			</div>
			<!--banner-->
			<div class="banner">
				<a href="details.html">
					<img src="img/bg.jpg"/>
				</a>
			</div>
			<div class="cake_type">
				<div>
					<a>
						<img src="img/cake_03.jpg"/>
					</a>
					<a>
						<span>AFTERNOON TEA </span>
						<span>下午茶</span>
					</a>
					<p>“一杯咖啡，一份甜点，一抹偷不走的时光”</p>
				</div>
				<div>
					<a>
						<img src="img/cake_05.jpg"/>
					</a>
					<a>
						<span>CAKE  </span>
						<span>蛋糕</span>
					</a>
					<p>“只有国王才有资格拥有的，享受众人给予的祝福”</p>
				</div>
				<div>
					<a>
						<img src="img/cake_07.jpg"/>
					</a>
					<a>
						<span>SOUVENIR </span>
						<span>手信</span>
					</a>
					<p>“不在于贵，一情意，一真诚”</p>
				</div>
			</div>
			<!--footer-->
			<div class="xf_footer">
				<footer>
					<div class="footer1">
						<div class="msg">
							<a href="#">品牌动态</a>
							<a href="#">生产经营资质</a>
							<a href="#">企业合作</a>
							<a href="#">发票申请</a>
							<a href="#">平台规则</a>
							<a href="#">帮助服务</a>
							<a href="#">联系我们</a>
						</div>
						<div class="tel">
							<a href="#">
								<img src="img/tel_03.jpg"/>
								<span>400-999-6665</span>
							</a>
							<a href="#">WEIBO</a>
							<a href="#">WECHAT</a>
							<a href="#">京东商城</a>
						</div>
					</div>
					<div class="footer2">
						<div class="copyright">
							<span>深圳市幸福商城科技股份有限公司</span>
							<span>粤ICP备16039394号-6 </span>
							<span>京公网安备44030702002399</span>
							<span>公司地址：深圳市龙岗区坂田街道布龙339鸿生源工业园A座5楼</span>
						</div>
					</div>
				</footer>
			</div>
		</div>
	</body>
</html>

 common.css代码:

body,h1,h2,h3,h4,h5,h6,p,ul,li,ol,dl,dd,fieldset,legend,button,input,textarea,th,td{padding:0;margin:0;}
html{font-family:"微软雅黑";font-size:12px;background-color:#eeeee;}
.clear:after{content:"";display:block;clear:both;height:0;visibility:hidden;overflow:hidden;}
.clear{zoom:1;}
li{list-style:none;}
a{text-decoration:none;}
img{vertical-align:top;border:0;}
input,select,button,textarea{outline:none;}
textarea{resize:none;}
input[type="button"],input[type="submit"],input[type="file"] {cursor:pointer;} 
input::-webkit-input-placeholder{ /* WebKit browsers */color: #ddd; } 
input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */ color: #ddd; } 
input::-moz-placeholder{ /* Mozilla Firefox 19+ */ color: #ddd; } 
input:-ms-input-placeholder{ /* Internet Explorer 10+ */ color: #ddd; }

details.css代码:

/********content**********/
.xf_content{
	width: 100%;
	padding-bottom: 102px;
}
.content{
	width: 1251px;
	height: auto;
	margin: 0 auto;
	padding-top: 66px;
	margin-top: 78px;
}
.content ul{
	
}
.content ul li{
	width: 290px;
	border: 1px solid #e2e2e2;
	padding: 10px 10px 39px 10px;
	box-sizing: border-box;
	text-align: center;
	float: left;
	margin-right: 29px;
	margin-bottom: 18px;
}
.content ul li:nth-child(4n){
	margin-right: 0;
}
.content ul li >img{
	width: 269px;
	height: 270px;
	
}
.content ul li p:nth-of-type(1){
	font-size: 12px;
	margin-top: 18px;
	margin-bottom: 14px;
	color: #4e6259;
}
.content ul li p:nth-of-type(2){
	color: #7f4b4d;
	font-weight: bolder;
}
.content .page{
	float: right;
	overflow: hidden;
	margin-top: 30px;
}
.content .page img{
	width: 7px;
	height: 7px;
	float: left;
	margin-top: 12px;
}
.content .page span{
	display: block;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	background: #d4b775;
	color: #fff;
	float: left;
	margin-left: 15px;
	margin-right: 15px;
}

index.css代码：

/***********banner************/
.banner{
	height: 662px;
	/*background: red;*/
	margin-top: 78px;
}
.banner a img{
	width: 100%;
	height: 662px;
}
/*************cake_type****************/
.cake_type{
	width: 100%;
	height: 477px;
	/*background: red;*/
}
.cake_type div{
	width: 33.33%;
	height: 477px;
	float: left;
	text-align: center;
	overflow: hidden;
}
.cake_type div:nth-child(1){
	background: #eee2c8;
}
.cake_type div:nth-child(2){
	background: #ddc69d;
}
.cake_type div:nth-child(3){
	background: #eee2c8;
}
.cake_type div img{
	width: 290px;
	height: 191px;
	margin-top: 77px;
}
.cake_type div a:nth-of-type(1){
	margin-bottom: 60px;
	display: block;
}
.cake_type div a:nth-of-type(2){
	font-size: 14px;
	border-bottom: 1px solid #1d181c;
	padding-bottom: 10px;
	display: inline-block;
}
.cake_type div a:nth-of-type(2) span:nth-child(1){
	font-weight: bolder;
}
.cake_type div p{
	font-size: 12px;
	color: #000100;
	margin-top: 25px;
}

public.css代码:

/**********header************/
.xf_header{
	width: 100%;
	height: 77px;
	background: #fff;
	border-bottom: 1px solid #9d9895;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10;
}
header{
	width: 1251px;
	height: 78px;
	/*background: pink;*/
	margin: 0 auto;
	overflow: hidden;
}
header >a{
	float: left;
}
header >a img{
	width: 217px;
	height: 45px;
	margin-top: 15px;
}
header .city{
	float: left;
	margin-top: 29px;
	font-size: 12px;
}
header .city >img{
	width: 11px;
	height: 17px;
	margin-left: 31px;
	margin-right: 7px;
}
header .city >a{
	padding: 9px;
	background: #cccccc;
	color: #fff;
	margin-left: 13px;
}
header .nav{
	float: left;
	height: 78px;
	line-height: 77px;
	margin-left: 66px;
}
header .nav a{
	color: #220e03;
	margin-right: 29px;
}
header .nav a:last-child{
	margin-right: 0;
}
header .nav a:first-child{
	margin-right: 36px;
}
header .link{
	float: right;
	margin-top: 29px;
}
header .link >img{
	width: 23px;
	height: 23px;
	float: left;
	margin-right: 23px;
}
header .link >a{
	padding: 11px 8px 12px 8px;
	border: 1px solid #989898;
	color: #03000e;
}
/**********footer**********/
.xf_footer{
	height: 125px;
	background: #3e2d23;
}
footer{
	width: 1251px;
	height: 125px;
	/*background: red;*/
	margin: 0 auto;
	overflow: hidden;
}
footer .footer1{
	overflow: hidden;
}
footer .footer1 .msg{
	margin-top: 37px;
	margin-left: 8px;
	float: left;
}
footer .footer1 .msg >a{
	color: #fff;
	padding-left: 22px;
	padding-right: 18px;
	border-right: 1px solid #b3a59c;
}
footer .footer1 .msg >a:last-child{
	border: 0;
}
footer .footer1 .tel{
	float: left;
	margin-top: 37px;
	margin-left: 75px;
}
footer .footer1 .tel a{
	margin-right: 45px;
	color: #fff;
}
footer .footer1 .tel a img{
	float: left;
	margin-right: 3px;
}
footer .footer2{
	text-align: center;
	margin-top: 34px;
	color: #fff;
}
footer .footer2 .copyright span{
	margin-right: 40px;
}

猜你喜欢

转载自blog.csdn.net/m0_68997646/article/details/128765383
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022