大学生WEB前端HTML网页毕业设计,咖啡动态网站设计

最新推荐文章于 2024-10-05 00:00:00 发布

黑白说程序

最新推荐文章于 2024-10-05 00:00:00 发布

阅读量593

点赞数 12

分类专栏： HTML网页作业美食文章标签：美食 css 前端 html5

本文链接：https://blog.csdn.net/qq_19465203/article/details/141937057

版权

HTML网页作业同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

美食

4 篇文章 0 订阅

订阅专栏

网站简介

网站介绍：咖啡网站,一共8个页面，分别包括首页、二级页面包括品牌故事、咖啡产品、我们的服务、新闻资讯、联系我们5个页面，咖啡产品和新闻资讯各包含2个三级详细介绍页面

网站布局：网站使用div+css布局页面，网站使用div,ul,li,a,p,h1,h2,h3,h4,form,input,button,table,tr,td等标签，css使用margin，border，padding，font-weight，font-family，color，width，line-height，overflow，float，text-align，background，display等样式

网站JS效果：首页banner广告图片切换

网站编辑器：网站是最简单的页面布局，任何编辑器都可以打开网站代码进行编辑，包括Dreamweaver，vs code，HBuilds，sublime，记事本等软件都可以进行编辑

网站布局代码


<div class="fudong">欢迎访问遇见咖啡官网！</div>
<div class="neirong">
<header>
	<div class="head_c">
    	<div class="logo"><img src="images/1.png" alt=""/></div>
        <nav>
        	<ul>
            <li><a href="index.html" id="on">网站首页</a></li>
            <li><a href="about.html">品牌故事</a></li>
            <li><a href="kafei.html">咖啡产品</a></li>
            <li><a href="fuwu.html">我们的服务</a></li>
            <li><a href="new.html">新闻资讯</a></li>
            <li><a href="lianxi.html">联系我们</a></li>
            </ul>
        </nav>
    </div>
</header>

<div class="box">
	<div class="box-1">
		<ul>
			<li>
				<img src="images/2.png" ></img>
			</li>
			<li>
				<img src="images/2_1.png" ></img>
			</li>
			
		</ul>
	</div>
	<div class="box-2">
		<ul>
		</ul>
	</div>
	<div class="box-3">
		<span class="prev"> < </span>
		<span class="next"> > </span>
	</div>
</div>
<div class="gg">
	<div class="gg_one">
    	<span>精选咖啡豆</span>
        <p>拥有精致优雅的花果香气</p>
    </div>
    <div class="gg_two">
    	<span>手磨咖啡</span>
        <p>香味更浓郁,口感更加细腻柔和</p>
    </div>
</div>


<div class="pinpai">
	<div class="pinpai_c">
    	<div class="pinpai_left"><img src="images/5.png" alt=""/></div>
        <div class="pinpai_right">
       </div>
    </div>
</div>

<div class="index_kafei">
	<div class="index_kafei_left"><img src="images/6.png" alt=""/></div>
	<div class="index_kafei_right">
    	<div class="index_kafei_title">卡布奇诺</div>
        <span>意大利特浓咖啡和蒸汽泡沫牛奶相混合的意大利咖啡</span>
       
    </div>
</div>


<div class="index_kafei2">
	<div class="index_kafei2_left">
    	<div class="index_kafei_title">蓝山咖啡</div>
        <span>香味十分浓郁，有持久水果味</span>
        <span>颗粒较饱满</span>
        <p>蓝山咖啡的咖啡因含量很低，还不到其它咖啡的一半，符合现代人的健康观念</p>
        <p>蓝山咖啡的味道非常微妙，酸，香，醇，甘味均匀而强烈，略带苦味，口感调和，风味极佳，适合做单品咖啡</p>
        <p>强烈诱人的优雅气息，是其它咖啡望尘莫及的</p>
       
        <div class="more">立即购买</div>
    </div>
    <div class="index_kafei2_right"><img src="images/7.png" alt=""/></div>
</div>

<div class="fenxiang">
	<ul>
    <li><img src="images/9.png" alt=""/><p>官方公众号</p></li>
    <li><img src="images/10.png" alt=""/><p>官方抖音</p></li>
    <li><img src="images/11.png" alt=""/><p>官方小红书</p></li>
    <li><img src="images/12.png" alt=""/><p>官方微博</p></li>
    </ul>
</div>

网站css代码

.neirong{
	width:100%;
	height:auto;
	float:left;
}
header{
	width:100%;
	height:90px;
	background:#291414;
	border-bottom:1px solid #888888;
	float:left;
}
.head_c{
	width:1200px;
	height:auto;
	margin:0 auto;
}
.logo{
	width:231px;
	height:52px;
	float:left;
	margin-top:20px;
}

nav{
	width:889px;
	height:auto;
	float:right;
	
}
nav li{
	width:148px;
	height:auto;
	float:left;
	text-align:center;
}
nav li a{
	font-size:16px;
	color:#fff;
	text-align:center;
	line-height:90px;
}
nav li a:hover{
	font-size:16px;
	color:#dabc6e;
	text-align:center;
	line-height:90px;
}
#on{
	font-size:16px;
	color:#dabc6e;
	text-align:center;
	line-height:90px;
}
.box{
	width:100%;
	height:769px;
	position: relative;
   overflow:hidden;
	}
.box-1 ul{}
.box-1 ul li{
	width:100%;
	height:769px;
	position: relative;
	overflow: hidden;
	}
.box-1 ul li img{
	display:block;
	width:100%;
	height:769px;
	}
.box-2{
	position: absolute;
	right: 10px;
	bottom: 14px;
	}
.box-2 ul li{
	float:left;
	width: 12px;
	height: 12px;
	overflow: hidden;
	margin: 0 5px;
	border-radius: 50%;
	background: rgba(0,0,0,0.5);
	text-indent: 100px;
	cursor: pointer;
	}
.box-2 ul .on{
	background: rgba(255,255,255,0.6)
	;}
.box-3 span{
	position: absolute;
	color: white;
	background: rgba(125,125,120,.3);
	width: 50px;
	height: 80px;
	top:50%; 
	font-family: "宋体";
	line-height: 80px;
	font-size:60px;
	margin-top: -40px;
	text-align: center;
	cursor: pointer;
	}
.box-3 .prev{left: 10px;}
.box-3 .next{right: 10px;}
.box-3 span::selection{
	background: transparent;
	}
.box-3 span:hover{
	background: rgba(125,125,120,.8);
	}
.gg{
	width:1200px;
	height:367px;
	margin:0 auto;
	margin-top:40px;
}

.gg_one{
	width:584px;
	height:227px;
	background:url(../images/3.png) no-repeat top center;
	float:left;
	margin-right:32px;
	padding-top:140px;
}
.gg_one span{
	font-size:32px;
	color:#fff;
	text-align:center;
	display:block;
	font-weight:600;
}
.gg_one p{
	font-size:24px;
	color:#fff;
	text-align:center;
	margin-top:15px;
}
.gg_two{
	width:584px;
	height:227px;
	background:url(../images/4.png) no-repeat top center;
	float:left;
	padding-top:140px;
}
.gg_two span{
	font-size:32px;
	color:#fff;
	text-align:center;
	display:block;
	font-weight:600;
}
.gg_two p{
	font-size:24px;
	color:#fff;
	text-align:center;
	margin-top:15px;
}


.pinpai{
	width:100%;
	height:567px;
	background:url(../images/13.png) no-repeat top center;
	margin-top:40px;
	padding-top:80px;
}
.pinpai_c{
	width:1156px;
	height:446px;
	background:#fff;
	margin:0 auto;
	padding:22px;
}
.pinpai_left{
	width:557px;
	height:445px;
	float:left;
}
.pinpai_right{
	width:540px;
	height:auto;
	float:right;
}
.pinpai_right span{
	font-size:25px;
	font-weight:600;
	display:block;
	margin-bottom:15px;
}
.pinpai_right p{
	font-size:15px;
	text-indent:2em;
	line-height:30px;
}

.index_kafei{
	width:1200px;
	height:423px;
	margin:0 auto;
	margin-top:40px;
}
.index_kafei_left{
	width:829px;
	height:423px;
	float:left;
}
.index_kafei_right{
	width:330px;
	height:auto;
	float:right;
}
.index_kafei_title{
	width:330px;
	height:50px;
	background:#5d242b;
	font-size:20px;
	color:#fff;
	text-align:center;
	line-height:50px;
	margin-bottom:20px;
}
.index_kafei_right span{
	font-size:20px;
	display:block;
	margin-bottom:10px;
}
.index_kafei_right p{
	font-size:15px;
	line-height:30px;
}
.index_kafei_right o{
	font-size:20px;
	display:block;
	margin-top:20px;
}
.more{
	width:110px;
	height:45px;
	background:#000;
	font-size:15px;
	color:#fff;
	text-align:center;
	line-height:45px;
	margin-top:20px;
}

.index_kafei2{
	width:1200px;
	height:423px;
	margin:0 auto;
	margin-top:40px;
}
.index_kafei2_left{
	width:330px;
	height:auto;
	float:left;
}
.index_kafei2_title{
	width:330px;
	height:50px;
	background:#5d242b;
	font-size:20px;
	color:#fff;
	text-align:center;
	line-height:50px;
	margin-bottom:20px;
}
.index_kafei2_left span{
	font-size:20px;
	display:block;
	margin-bottom:10px;
}
.index_kafei2_left p{
	font-size:15px;
	line-height:30px;
}
.index_kafei2_left o{
	font-size:20px;
	display:block;
	margin-top:20px;
}
.index_kafei2_right{
	width:829px;
	height:423px;
	float:right;
}
.fenxiang{
	width:1200px;
	height:200px;
	margin:0 auto;
	margin-top:40px
}
.fenxiang li{
	width:280px;
	height:200px;
	background:#f7f7f7;
	float:left;
	margin-right:26px;
}
.fenxiang li:nth-child(4n){
	margin-right:0px;
	}
.fenxiang li img{
	margin:0 auto;
	margin-top:10px;
}
.fenxiang li p{
	font-size:18px;
	text-align:center;
	margin-top:10px;
}
footer{
	width:100%;
	height:180px;
	background:#000;
	margin-top:40px;
	padding-top:20px;
}

footer img{
	width:231px;
	height:52px;
	margin:0 auto;
	margin-bottom:10px;
}
footer p{
	font-size:14px;
	color:#fff;
	text-align:center;
	line-height:30px;
}

.banner2{
	width:100%;
	height:769px;
	background:url(../images/15.png) no-repeat top center;
}
.about{
	width:1200px;
	height:auto;
	margin:0 auto;
	margin-top:40px;
}
.about_title{
	font-size:30px;
	font-weight:600;
	text-align:center;
	margin-bottom:40px;
}
.about p{
	font-size:14px;
	text-indent:2em;
	line-height:30px;
}

.about_tu{
	width:1200px;
	height:245px;
	margin:0 auto;
	margin-top:20px;
}
.about_gg{
	width:100%;
	height:381px;
	background:url(../images/19.png) no-repeat top center;
	margin-top:40px;
}
.about_tu img{
	width:377px;
	height:245px;
	float:left;
	margin-right:34px;
}
.about_tu img:nth-child(3n){
	margin-right:0px;
	}
.about h3{
	text-align:center;
	margin-bottom:20px;
}

.banner3{
	width:100%;
	height:769px;
	background:url(../images/20.png) no-repeat top center;
}

.coffee{
	width:1200px;
	height:860px;
	margin:0 auto;
	}
.coffee li{
	width:391px;
	height:395px;
	border:1px solid #ccc;
	float:left;
	margin-right:10px;
	margin-bottom:30px;
}
.coffee li:nth-child(3n){
	margin-right:0px;
	}
.coffee li span{
	font-size:21px;
	margin-left:15px;
	margin-top:20px;
	display:block;
	font-weight:600;
}
.coffee li p{
	font-size:15px;
	text-indent:0em;
	margin-left:15px;
	margin-top:15px;
}
.tansuo{
	width:130px;
	height:50px;
	border:1px solid #ccc;
	margin-top:20px;
	margin-left:15px;
	font-size:16px;
	text-align:center;
	line-height:50px;
}

.coffee_gg{
	width:100%;
	height:642px;
	background:url(../images/27.png) no-repeat top center;
}
.coffee_gg2{
	width:100%;
	height:556px;
	background:url(../images/28.png) no-repeat top center;
}
.banner4{
	width:100%;
	height:769px;
	background:url(../images/34.png) no-repeat top center;
}
.new_list{
	width:1200px;
	height:auto;
	margin-top:50px;
}
.new_one{
	width:1200px;
	height:363px;
	margin-bottom:40px;
}
.new_one_left{
	width:599px;
	height:363px;
	float:left;
}


.new_one_right{
	width:560px;
	height:auto;
	float:right;
}
.new_one_right span{
	font-size:18px;
	color:#000000;
	line-height:40px;
	font-weight:550;
}
.new_one_right p{
	font-size:15px;
	color:#5f5f5f;
	text-indent:2em;
	line-height:30px;
}

.new_two{
	width:1200px;
	height:363px;
	margin-bottom:40px;
}
.new_two_left{
	width:560px;
	height:auto;
	float:left;
}

.new_two_right{
	width:599px;
	height:363px;
	float:right;
}


.new_two_left span{
	font-size:18px;
	color:#000000;
	line-height:40px;
	font-weight:550;
}
.new_two_left p{
	font-size:15px;
	color:#5f5f5f;
	text-indent:2em;
	line-height:30px;
}
.banner5{
	width:100%;
	height:769px;
	background:url(../images/38.png) no-repeat top center;
}
.new_xq_tu{
	width:1200px;
	height:307px;
	margin-bottom:10px;
}
.new_xq_tu img{
	width:567px;
	height:307px;
	float:left;
	margin-right:66px;
}
.new_xq_tu img:nth-child(2n){
	margin-right:0px;
	}

.banner6{
	width:100%;
	height:769px;
	background:url(../images/37.png) no-repeat top center;
}

.fuwu{
	width:1200px;
	height:auto;
	margin:0 auto;
}
.fuwu_one{
	width:1200px;
	height:484px;
	margin:0 auto;
	margin-bottom:50px;
}
.fuwu_one_left{
	width:816px;
	height:484px;
	float:left;
}
.fuwu_one_right{
	width:384px;
	height:auto;
	float:right;
	margin-top:110px;
	
}
.fuwu_one_right o{
	display:block;
	font-size:18px;
	text-align:center;
	margin-bottom:40px;
}
.fuwu_one_right span{
	font-size:35px;
	text-align:center;
	display:block;
	margin-bottom:40px;
}
.fuwu_one_right p{
	font-size:15px;
	text-align:center;
}
.fuwu_two{
	width:1200px;
	height:484px;
	margin:0 auto;
	margin-bottom:50px;
}
.fuwu_two_right{
	width:816px;
	height:484px;
	float:right;
}
.fuwu_two_left{
	width:384px;
	height:auto;
	float:left;
	margin-top:110px;
	
}
.fuwu_two_left o{
	display:block;
	font-size:18px;
	text-align:center;
	margin-bottom:40px;
}
.fuwu_two_left span{
	font-size:35px;
	text-align:center;
	display:block;
	margin-bottom:40px;
}
.fuwu_two_left p{
	font-size:15px;
	text-align:center;
}

.fuwu_last{
	width:1200px;
	height:auto;
	margin:0 auto;
}
.fuwu_last p{
	font-size:15px;
	text-align:center;
	line-height:40px;
}


.banner7{
	width:100%;
	height:769px;
	background:url(../images/42.png) no-repeat top center;
}
.kafei_xq{
	width:1200px;
	height:auto;
	margin:0 auto;
	margin-top:40px;
}

.kafei_xq_top{
	width:1200px;
	height:430px;
}
.kafei_xq_top_left{
	width:581px;
	height:43px;
	float:left;
}
.kafei_xq_top_right{
	width:550px;
	height:auto;
	float:right;
}
.kafei_xq_top_right span{
	font-size:18px;
	display:block;
	margin-top:20px;
	margin-bottom:20px;
}