HTML项目案例，适合练手总结。
网页设计
- 四大案例
-
- 某bao
- 咖啡宣传
- 学校
四大案例
某bao
案例素材：链接：https://pan.baidu.com/s/1kCo8L1dpX_cJ-U9NrSpXTg
提取码：qr6t
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.d1{
background-color: orangered;
height: 40px;
width: 1000px;
font-family: "楷体";
font-size: 17px;
padding-top: 20px;
color: aliceblue;
}
form{
margin-left: 50px;
}
.p1{
background-color: yellow;
}
.p1:hover{
background-color: white;
}
style>
head>
<body>
<div class="d2">
<input type="image" src="image/logo.gif">
<input type="image" src="image/reg.gif">
<div class="d1">用户免费注册页面div>
<form action="2.html" method="post">
<p > 会员账号：<input class="p1" type="text" />p>
<p > 登录密码：<input class="p1" type="password" required="required" pattern="^\w{6,16}$"/>p>
<p> 确认密码：<input class="p1" type="password" required="required" pattern="^\w{6,16}$"/>p>
<p>会员性别：
<input type="radio" name="sex" id="man"/><label for="man"><img src="image/Male.gif">label>
<input type="radio" name="sex" id="woman"/><label for="woman"><img src="image/Female.gif">label>
p>
<p>
个人爱好：
<input type="checkbox" name="hobby" id="hb1">运动
<input type="checkbox" name="hobby" id="hb2">聊天
<input type="checkbox" name="hobby" id="hb3">游戏
p>
<p>出生日期：
<select>
<option>2001option>
<option selected>2002option>
<option>2003option>
select><span>年span>
<select>
<option>1option>
<option >2option>
<option>3option>
select><span>月span>
<select>
<option>1option>
<option >2option>
<option>3option>
select><span>日span>
p>
<p>
<input type="button" value="同意以下条款并提交注册">
<input type="reset" value="重置">
p>
<p>
<input type="image" src="image/read.gif">阅读《xxxx服务协议》
p>
<p>
<textarea cols="100" rows="4">本协议由您与xxxxx有限公司共同缔结，本协议具有合同效力。本协议中协议双方合称协议方，xxxxxx有限公司在协议中亦称为“淘宝”。本协议中“xxxx平台”指由浙江淘宝网络有限公司运营的网络交易平台，包括淘宝网，域名为 xxxbao.com.xxxx商城，域名为tmall.com；xxxx网，域名为xxxao.com。
textarea>
p>
form>
<div class="d1" align="center">Copyright © 2003-2011 Taobao.com 版权所有div>
div>
body>
html>
咖啡宣传
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档title>
head>
<style>
*{
margin: 0;
padding: 0;
}
#father{
/* position: fixed;*/
}
.d1{
border: 1px solid ;
width: 960px;
text-align: center;
background: #A29494;
}
.d2{
border: 1px solid ;
width: 960px;
text-align: center;
margin-top: 5px;
background: #D57504;
padding-top: 10px;
padding-bottom: 10px;
}
a{
display: inline-block;
width: 100px;
color: aliceblue;
}
.d4{
margin-top: 5px;
border: 1px solid ;
width: 200px;
height: 300px;
text-align: center;
background: #D57504;
float:left;
border-radius: 10px;
box-shadow: 5px 5px 5px 5px gray;
}
.d5{
margin-top: 5px;
border: 1px solid ;
text-align: center;
background:#E6E0C8;
position: absolute;
left: 305px;
top: 210px;
}
p{
text-indent: 2em;
line-height: 20px;
text-align: left;
}
.d6{
margin-top: 10px;
border: 1px solid ;
width: 730px;
height: 50px;
color: aliceblue;
background: #D57504;
text-align: center;
padding-left:230px;
padding-top: 20px;
}
li{
border-bottom: 1px solid white;
padding-bottom: 10px;
padding-top: 10px;
}
ul{
margin-left: 5px;
margin-right: 5px;
}
#d1{
background:#E6E0C8;
width: 960px;
height: 680px;
padding-top: 10px;
}
.p1{
position: relative;
left: 250px;
top:-300px;
clear: both;
width: 680px;
}
style>
<body>
<div id="father">
<div class="d1">
<img src="images/banner1.jpg"/>
div>
<div class="d2">
<a>走近夏至a>
<a>夏至餐饮a>
<a>闲聊咖啡a>
<a>加盟夏至a>
<a>夏至资讯a>
<a>招聘英才a>
<a>门店地址a>
<a>联系我们a>
div>
<div id="d1">
<div class="d4">
<img src="images/chat.png">
<ul>
<li><a>咖啡起源a>li>
<li><a>咖啡文化a>li>
<li><a>咖啡鉴赏a>li>
<li><a>咖啡文化a>li>
ul>
div>
<div class="p1">
<p>咖啡是用经过烘焙的咖啡豆制作出来的饮料，与可可、茶同为流行于世界的主要饮品。咖啡树是属茜草科常绿小乔木，日常饮用的咖啡是用咖啡豆配合各种不同的烹煮器具制作出来的，而咖啡豆就是指咖啡树果实里面的果仁，再用适当的方法烘焙而成，品尝起来是苦涩味道。p>
<p>咖啡树原产于非洲埃塞俄比亚西南部的高原地区。据说一千多年以前一位牧羊人发现羊吃了一种植物后，变得非常兴奋活泼，进而发现了咖啡。还有说法称是因野火偶然烧毁了一片咖啡林，烧烤咖啡的香味引起周围居民注意。当地土著人经常把咖啡树的果实磨碎，再把它与动物脂肪掺在一起揉捏，做成许多球状的丸子。这些土著部落的人将这些咖啡丸子当成珍贵的食物，专供那些即将出征的战士享用。直到11世纪左右，人们才开始用水煮咖啡做为饮料。13世纪时，埃塞俄比亚军队入侵也门，将咖啡带到了阿拉伯世界。因为伊斯兰教义禁止教徒饮酒，有的宗教界人士认为这种饮料刺激神经，违反教义，曾一度禁止并关闭咖啡店，但埃及苏丹认为咖啡不违反教义，因而解禁，咖啡饮料迅速在阿拉伯地区流行开来。咖啡Coffee这个词，就是来源于阿拉伯语Qahwa，意思是“植物饮料”，后来传到土耳其，成为欧洲语言中这个词的来源。咖啡种植，制作的方法也被阿拉伯人不断地改进而逐渐完善。p>
<p>17世纪咖啡的种植和生产一直为阿拉伯人所垄断。当时主要被使用在医学和宗教上，医生和僧侣们承认咖啡具有提神、醒脑、健胃、强身、止血等功效；15世纪初开始有文献记载咖啡的使用方式，并且在此时期融入宗教仪式中，同时也出现在民间做为日常饮品。因伊斯兰教严禁饮酒，因此咖啡成为当时很重要的社交饮品。1570年，土耳其军队围攻维也纳，失败撤退时，有人在土耳其军队的营房中发现一口袋黑色的种子，谁也不知道是什么东西。一个曾在土耳其生活过的波兰人，拿走了这袋咖啡，在维也纳开了第一家咖啡店。16世纪末，咖啡以“伊斯兰酒”的名义通过意大利开始大规模传入欧洲。相传当时一些天主教人士认为咖啡是“魔鬼饮料”，怂恿当时的教皇克莱门八世禁止这种饮料，但教皇品尝后认为可以饮用，并于祝福了咖啡，因此咖啡在欧洲逐步普及。起初咖啡在欧洲价格不菲，只有贵族才能饮用咖啡，咖啡甚至被称为“黑色金子”。直到1690年，一位荷兰船长航行到也门，得到几棵咖啡苗，在印度尼西亚种植成功。1727年荷属圭亚那的一位外交官的妻子，将几粒咖啡种子送给一位在巴西的西班牙人，他在巴西试种取得很好的效果。巴西的气候非常适宜咖啡生长，从此咖啡在南美洲迅速蔓延。因大量生产而价格下降的咖啡开始成为欧洲人的重要饮料。p>
div>
div>
<div class="d6">
<p>关于我们 | 用户反馈 | 版权所有本书编委 豫ICP备0810898789号p>
<p>地址：xxx西亚黑金大道188号附6号p>
div>
div>
body>
html>
学校
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#container{
width: 949px;
position: relative;
}
header{
width: 949px;
height: 316px;
background: url(./images/banner.gif);
text-align: right;
}
header span{
color: aliceblue;
margin-top: 20px;
margin-right: 20px;
font-size: 14px;
}
nav{
width: 575px;
height: 32px;
margin-top: 50px;
border: 1px solid;
text-align: left;
margin-left: 300px;
background-image: url(./images/navbg.gif);
}
a{
text-decoration: none;
color: #3e7db1;
line-height: 32px;
margin: 0px 7px;
font-size: 15px;
font-weight: 600;
}
#selected,a:hover{
color: #ff6600;
}
#content{
background-color: #D3D3D3;
height: 280px;
font-family: "楷体";
font-size: 15px;
}
label{
position: absolute;
float: left;
right:550px
}
#left{
padding-top: 10px;
}
#left ul li{
width: 400px;
border-bottom: 1px dashed;
list-style-image: url(./images/ico1.gif);
color: black
}
#left a{
color: black;
}
#left p{
padding-left: 50px;
}
#line{
position: absolute;
top: 321px;
left: 450px;
}
#right{
padding-top: 5px;
position: absolute;
top: 321px;
left: 460px
}
#img1{
border: 1px solid;
margin-top: 5px;
width: 150px;
height: 140px;
}
#img2{
border: 1px solid;
margin-top: 5px;
width: 150px;
height: 140px;
}
#img3{
border: 1px solid;
margin-top: 5px;
width: 150px;
height: 140px;
}
em{
color: red;
}
footer{
margin-top: 5px;
border: 1px solid black;
width: 949px;
text-align: center;
background-color: black;
color: aliceblue;
}
#right span{
float: right;
}
style>
head>
<body>
<div id="container">
<header>
<span>中文版|ENGLISHspan><br/>
<nav>
<a href="#" id="selected">首页a>
<a href="#">学院概况a>
<a href="#">机构设置a>
<a href="#">人才培养a>
<a href="#">精品课程a>
<a href="#">师资队伍a>
<a href="#">学生在线a>
nav>
header>
<div id="content">
<div id="left">
<img src="images/ico.gif">学院新闻<label>>>morelabel>
<ul>
<li><a href="#">第八届体育文化节闭幕式暨啦啦操活力舞比赛 (05/17)a>li>
<li><a href="#">市民办高校年检专家组莅临重庆正大软件职技 (05/16a>)li>
<li><a href="#">我院17名同学获“2012年重庆市普通高等教育 (05/15)a>li>
<li><a href="#">图书馆举办CNKI培训讲座为教学科研服务 (05/14)a>li>
<li><a href="#">2012年重庆高校大学生无偿献血演讲比赛我院 (05/10)a>li>
<li><a href="#">软件技术系开展思政教育重感恩(2012-05-10)a> li>
ul>
<p>共<em>10em>页<em>196em>条记录 上一页 1 2 3 4 5 下一页p>
div>
<div id="line">
<img src="images/line.gif">
div>
<div id="right">
<img src="images/ico.gif">学院风景<span>>>morespan><br/>
<img id="img1" src="images/t1.jpg">
<img id="img2" src="images/t2.jpg">
<img id="img3" src="images/t3.jpg">
div>
div>
<footer>
<p>xxxxxxxx职业技术学院 软件技术系 提供技术支持 p>
<p>学院地址：中国.重庆.南温泉 邮编：4XXX56 咨询热线：XXXXXX62846626 62846636 p>
footer>
div>
body>
html>
效果图不做展示，可自行查看，给学习增添点神秘感！