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>

效果图不做展示,可自行查看,给学习增添点神秘感!

你可能感兴趣的:(html,html,前端,css3)