html网页设计制作 星巴克咖啡网页设计作业成品模板

html5静态网页设计要是用HTML DIV+CSS JS等来完成页面的排版设计,一般的网页作业需要融入以下知识点：div布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频 视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码可以去猿猿设计官网下载，制作水平和原创度都适合学习或交作业用，记得点赞；

一般html5静态网页设计作业主题有 个人网页设计、 美食网页设计、家乡网页设计、 企业网页设计、 学校、 旅游网页设计、 电商购物网页设计、 宠物网页设计、 茶叶、 家居、 酒店、 舞蹈、 动漫网页设计、 明星、 服装网页设计、 体育网页设计、 化妆品网页设计、 物流、 书籍、 婚纱、 军事网页设计、 游戏网页设计、 节日网页设计、 环保网页设计、 电影、 摄影、 文化网页设计、 鲜花网页设计、 礼品、 汽车网页设计、 其他 等网页设计, 成品网页设计可以达到90分左右水平, 可满足大学生网页大作业网页设计需求, 喜欢的可以联系，我们也可以根据要求进行个性化定制。

 

网页效果图：

网页设计运行效果图

 

 

---

网页HTML代码

• 

  生活需要仪式感

  治愈日子的方法有很多种，能静下心来尝一杯咖啡，翻翻杂志、看看世界上各种美好，都无疑地是一种幸福。

• 

  冷萃咖啡

  生活同这冷萃咖啡瓶子上印的里尔克的短句一样“从这美好的沉静中，我期待着时间的丰富馈赠。

• 

  coffee house

  谢谢你百忙之中抽出时间来犒劳亲爱的自己，也谢谢你选择来瑞琦的小店。

• 

  猫咪咖啡

  咖啡店的老板娘的猫咪，喜欢在客人喝咖啡的时候静静的看着他们。

• 1
• 2
• 3
• 4

• 首页
• 简介
• 杯子
• 饮品品种
• 其他
• diy

欢迎来到星巴克

---

星星陨落人间
一家传统咖啡店，很适合网红打卡拍照。
喜欢和过往的每一位孤独的灵魂谈谈心。

关于星巴克

星巴克的分店多数是总公司直营的，而在大中华区的星巴克大多数是合资的，台湾区星巴克是由统一企业与美国星巴克合资的，上海及华中区的星巴克是由台湾统一企业、上海烟草集团以及美国星巴克合资，北京与天津星巴克是由北京美大星巴克公司经营，而广东、香港及澳门的星巴克则是由美心集团及美国星巴克合资的Coffee Concepts HK Ltd 经营。
星巴克总公司倾向加码这些地区的持股，取得更大的主控权。沈阳、大连等城市的星巴克则是星巴克总公司的直营店。星巴克咖啡国际公司总裁约翰·卡尔弗2011年在2011APEC中小企业峰会表示，希望中国成为星巴克在美国以外最大的国家，在2015年星巴克将在中国大陆开设门店达到1500家门店。 更多

星爸爸

• 企业简介
• 星巴克的杯子
• 星巴克的饮品品种
• 星巴克的其他内容
• diy星巴克
• 网页作业者大头贴
• 

© 星巴克

网页css代码：

*{padding:0; margin:0;}
ul {list-style:none;}
.clear {clear:both;}
h1, h2, h3, h4 {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}

html {display:block; height:100%; width:100%; background:url("../images/htmlbg.jpg") repeat;}
body {background:url("../images/topbg.jpg") left top repeat-x; font: 12px Verdana, Geneva, sans-serif; color:#808080; }
#wrap { width:930px; padding:15px; background:#fefefd; margin:auto;}
#topbanner {width:960px; margin:0 auto 0 auto; height:90px;}
#header {background:url("../images/mainheaderbg.jpg") left bottom repeat-x; height:254px; margin-bottom:3px; position:relative;}
#menu {background:url("../images/menubg.jpg") left top repeat-x; height:46px;}
#slider { width:930px; overflow:hidden; height:254px; position:relative;}
			.container {height:254px; overflow:hidden;  cursor:pointer; }
		ul.slides { display:block; list-style:none; padding:0; margin:0; position:relative; width:930px; height:254px;}
		ul.slides li {display:none; padding:0; margin:0; position:absolute; left:0; top:0; overflow:hidden; width:930px; height:254px;}
ul.slides li .thumbholder {height:254px; width:625px; float:left; position:relative;}
ul.slides li .txtholder { width:250px; float:right; padding-right:20px;}
#slider .pagination {
	display:block;
	list-style:none;
	position:absolute;
	right:14px;
	top:215px;
	z-index:999;
	width:260px;
	text-align:center;
}
 ul.pagination li {display:inline;}

 ul.pagination li a { display:block; float:left; width:19px; height:19px; margin:3px; background:url("../images/slidernav.png") no-repeat; text-indent:-9000px;}
 ul.pagination li.active a {background:url("../images/slidernav-active.png") no-repeat!important; text-indent:-9000px;}
#slider .container  h2 {display:block; font:normal 30px Georgia, "Times New Roman", Times, serif; color:#6e595a; padding-top:30px; margin-bottom:15px;}
#slider .container p {display:block; font:normal 16px Georgia, "Times New Roman", Times, serif; color:#6e595a; line-height:22px;}
h1#sitename {display:block; float:left; font:bold 34px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#fff; padding:20px 10px 0 0; text-shadow:#54494a 1px 1px 1px;}
h1#sitename span {display:block; font:bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#fff; text-shadow:none!important;}

#menu li {display:inline; font:bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif;}
#menu li a {display:block; float:left; color:#957f80; height:38px; padding:8px 22px 0 20px; background:url("../images/menua-normal.jpg") right 3px no-repeat; text-decoration:none; text-shadow:#fff 1px 1px 1px; }
#menu li a:active, #menu li a:visited {color:#957f80; text-decoration:none;}
#menu li a:hover, #menu li.active a {background:url("../images/menuactive.gif") center top no-repeat; color:#fff; text-shadow:#5e494a 1px 1px 1px;}
#submenu {padding:5px; border-bottom:solid 1px #957f80;  border-top:solid 1px #957f80; height:17px;}
#submenu li {display:inline; font:normal 12px Verdana, Geneva, sans-serif;}
#submenu li a {display:block; color:#666; padding:0 15px 0 15px; border-right:solid 1px #ccc; float:left; text-decoration:none;}
#submenu li.last a { border:none!important;}
#submenu li a:hover {color:#222;}
#content {background:url("../images/sidebarbg.gif") left top repeat-y; padding-top:15px;}
#sidebar1 {float:left; width:250px; position:relative;}
#maincontent {
	float:right;
	width:660px;
	position:relative;
	color: #000;
}
#sidebar1 .hotimg {width:250px; margin:auto; position:relative; padding-top:5px; margin-bottom:10px;}

#sidebar1 .subhead {display:block; background:url("../images/sidebarh2bg.png") no-repeat; height:30px; padding:7px 0 0 15px; margin-left:-15px; color:#fff; margin-bottom:10px;}
.menu li {display:block; font:normal 14px Georgia, "Times New Roman", Times, serif; height:28px;}
.menu {margin-bottom:10px; margin-right:10px;}
.menu li a {display:block; height:22px; padding:4px 5px 0 25px; color:#6a5758; border-bottom:dashed 1px #6a5758; text-decoration:none; background:url("../images/menublt.png") 3px 5px no-repeat;}

#maincontent h2 {display:block; font:bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#333; margin-bottom:10px;}
#maincontent p {margin-bottom:15px;}

img.leftalign, img.rightalign {padding:8px; border:solid 1px #ddd; background:#eee; display:block;}
.leftalign {float:left; margin-right:10px;}
.rightalign {float:right; margin-left:10px;}
#footer {background:url("../images/topbg.jpg") repeat-x; padding:35px; text-align:center; color:#fff;}
#footer a { color:#fff; text-decoration:none;}
.credit {font-size:10px; display:block;}#wrap #content #maincontent div p {
	color: #000;
}

网页设计源码获取

猿猿网页设计专注于前端网页设计开发，更多源码联系猿猿网页设计