HTML综合实例【月福首页】
1. 首页的布局结构
2. 排版的准备工作
网站的素材：与当前网页放在一起。
创建一个html文件，来进行排版。
网页的背景色
确定主页的宽度：778px
3. HTML注释
<!-- 注释内容-->
注意：注释的内容是不会显示的，注释是为了将来维护方面。
4. 素材的简单应用
背景平铺效果：
5. 网页多媒体（稍作了解）
网页上的视屏一般都是Flash格式的，因为Flash的兼容性比较好。此外，Flash的文件压缩以后体积比较小。
提示：Flash动画的文件扩展名：.swf
以Flash动画为例，播放Flash动画的代码如下。
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="778" height="202">
<param name="movie" value="images/banner.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="data:images/banner.swf" width="778" height="202" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" />
</object>
6. 实现
效果图：
源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>月福汽车装饰有限公司</title>
<style>
body{
font-family:宋体;
font-size:12px;
padding:0;
margin:0;
}
</style>
</head> <body>
<!-- logo -->
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="data:images/index_01.png" /></td>
<td>
<img src="data:images/index_02.jpg" usemap="#Map"/>
<map name="Map" id="Map" >
<area shape="rect" coords="150,12,233,33" href="Javascript:alert('设为首页')" alt="设为首页"/>
<area shape="rect" coords="150,32,233,54" href="javascript:alert('加入收藏')" alt="加入收藏"/>
<area shape="rect" coords="150,53,233,74" href="mailto:274562417@qq.com" alt="E-mail"/>
</map>
</td>
</tr>
</table> <!-- 导航栏 -->
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="data:images/index_03.png" /></td>
<td><img src="data:images/index_04.png" /></td>
<td><img src="data:images/index_05.png" /></td>
<td><img src="data:images/index_06.png" /></td>
<td><img src="data:images/index_07.png" /></td>
<td><img src="data:images/index_08.png" /></td>
<td><img src="data:images/index_09.png" /></td>
<td><img src="data:images/index_10.png" /></td>
<td><img src="data:images/index_11.png" /></td>
<td><img src="data:images/index_12.png" /></td>
</tr>
</table> <!-- Flash模块-->
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="data:images/index_29.jpg"></td>
</tr>
<tr>
<td>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="778" height="202">
<param name="movie" value="images/banner.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="data:images/banner.swf" width="778" height="202" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"/>
</object>
</td>
</tr>
</table> <!-- 月福新闻(和两边) -->
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><img src="data:images/index_21.png" /></td>
<td valign="top"><img src="data:images/index_22.png" /></td>
<td rowspan="2" bgcolor="#D40000" valign="top">
<img src="data:images/index_23.png" />
<ol>
<font color="white"><li style="padding-bottom: 10px">蓝色征途...</li></font>
<font color="white"><li style="padding-bottom: 10px">风挡玻璃清洗剂...</li></font>
<font color="white"><li style="padding-bottom: 10px">月福标准封釉套装...</li></font>
<font color="white"><li style="padding-bottom: 10px">钻石之光...</li></font>
<font color="white"><li style="padding-bottom: 10px">云南蜡染抱枕...</li></font>
<font color="white"><li style="padding-bottom: 10px">龟博士白金蜡...</li></font>
</ol>
</td>
</tr>
<tr>
<td align="center" background="images/line.jpg">
<!-- 嵌套表格 start-->
<table width="90%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="10"></td>
</tr>
<tr>
<td align="center">
<img width="130" src="data:images/200810311354340.jpg" alt=""/><br /><br />
<a href="#" style="text-decoration:none;color:black">月福在北京地图</a>
</td>
</tr>
</table>
<!--嵌套表格 end-->
</td>
<td bgcolor="white" valign="top">
<!-- 嵌套表格 start-->
<table width="100%" align="center" cellpadding="4" cellspacing="0">
<tr>
<td height="20" colspan="3"></td>
</tr>
<tr valign="top" align"center">
<td width="6%" valign="middle" align="center"><img src="data:images/index_30.jpg" alt="" /></td>
<td width="77%">月福机场T2、T3贵宾店即日开业大酬宾...</td>
<td width="17%"><img src="data:images/index_28.jpg" alt="" /></td>
</tr>
<tr valign="top">
<td valign="middle" align="center"><img src="data:images/index_30.jpg" alt="" /></td>
<td>北京月福汽车装饰公司关于销售圣罗膜相关情况的说明...</td>
<td><img src="data:images/index_28.jpg" alt="" /></td>
</tr>
<tr valign="top">
<td valign="middle" align="center"><img src="data:images/index_30.jpg" alt="" /></td>
<td>人才招聘--挑战高薪...</td>
<td><img src="data:images/index_28.jpg" alt="" /></td>
</tr>
<tr valign="top">
<td valign="middle" align="center"><img src="data:images/index_30.jpg" alt="" /></td>
<td colspan="2">月福标准封釉套装...</td>
</tr>
<tr valign="top">
<td valign="middle" align="center"><img src="data:images/index_30.jpg" alt="" /></td>
<td colspan="2">月福漆面镀膜...</td>
</tr>
<tr valign="top">
<td valign="middle" align="center"><img src="data:images/index_30.jpg" alt="" /></td>
<td colspan="2">月福在北京地图...</td>
</tr>
</table>
<!-- 嵌套表格 end-->
</td>
</tr>
</table> <!-- 服务项目模块 -->
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><img src="data:images/index_26.png" alt="" /></td>
<td valign="top"><img src="data:images/index_27.png" alt="" /></td>
<td valign="top"><img src="data:images/index_28.png" alt="" /></td>
</tr>
<tr>
<td bgcolor="#D40000" style="line-height:20px;color:white;padding:30px 10px 0px 10px">
<div>1.北京月福汽车装饰有限公司关于销售圣罗膜先关情况的说明</div><br />
<div>2.月福汽车装饰(机场T3店)开业
地址:北京首都机场T3航站楼(停车场)<br />
电话:64556965 6455696</div><br />
<img src="data:images/index_33.png" alt="" width="100%" />
</td>
<td valign="top">
<!-- 嵌套表格 start -->
<table width="97%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="data:images/index_21.jpg" alt="" /></td>
<td style="padding:0px 5px 0px 5px;line-height:20px">
<div><font color="#FF7F00">月福汽车装饰:</font>防爆太阳膜、汽车音响、车载免提、倒车雷达、真皮座椅、中控锁、防盗器、桃木内饰......竭诚为广大客户提供优质服务。</div>
<div align="right">详细信息...</div>
</td>
</tr>
<tr>
<td colspan="2" height="10px"><img src="data:images/index_24.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="data:images/index_22.jpg" alt="" /></td>
<td style="padding:0px 5px 0px 5px;line-height:20px">
<div><font color="#FF7F00">月福汽车养护:</font>月福汽车养护:五大系统免拆护理、发动机内外清洗、快速换油、更换三滤、底盘装甲、空调加氟......月福全体员工将竭诚为您服务。</div>
<div align="right">详细信息...</div>
</td>
</tr>
<tr>
<td colspan="2" height="10px"><img src="data:images/index_24.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="data:images/index_23.jpg" alt="" /></td>
<td style="padding:0px 5px 0px 5px;line-height:20px">
<div><font color="#FF7F00">月福汽车美容:</font>泡沫洗车、新车开蜡、整车封釉、底盘封塑、底仓桑拿、划痕修复、皮革上光、臭氧消毒......月福全体员工将竭诚为您服务。</div>
<div align="right">详细信息...</div>
</td>
</tr>
</table>
<!-- 嵌套表格 end -->
</td>
<td bgcolor="#D40000" valign="top">
<form action="search.php" method="get" name="form1">
<table width="100%" align="center" cellpadding="0" cellspacing="0">
<tr align="center">
<td height="45px">
<select name="kw" style="width:80%">
<option value="脱水剂">脱水剂</option>
<option value="吸尘器" selected="selected">吸尘器</option>
<option value="松手档">松手档</option>
</select>
</td>
</tr>
<tr align="center">
<td height="45px"><input type="text" name="inputKw" style="width:50%"/></td>
</tr>
<tr align="center">
<td height=<"45px">
<img src="data:images/index_39.png" alt="" />
<input type="image" src="data:images/index_38.png" />
</td>
</tr>
</table>
</form>
<table width="100%" align="center" cellpadding="0" cellspacing="0">
<tr align="center">
<td valign="top"><img src="data:images/index_31.png" alt="" /></td>
</tr>
<tr>
<td style="line-height:30px;color:white;padding:30px 10px 0px 10px">
<div>引擎的保养</div>
<div>冬季用车三大注意事项</div>
<div>四轮定位的概念</div>
<div>汽车冬季保养</div>
<div align="right"><a href="#" style="text-decoration:none;color:white;">more>></a></div>
</td>
</tr>
</table>
</td>
</tr>
</table> <!-- 滚动产品模块 -->
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" bgcolor="#D40000"><img src="data:images/index_35.png" alt=""/></td>
<td bgcolor="#D40000" align="center" width="174px">
<select name="link" style="width:80%">
<option value="友情链接" selected="selected">友情链接</option>
<option value="其他">其他</option>
</select>
</td>
</tr>
<tr>
<td valign="top" bgcolor="white">
<div style="width:100%; height:121px; overflow:hidden;">
<img class="scroll" src="data:images/07datun.jpg" alt="" />
<img class="scroll" src="data:images/08panjiayuan.jpg" alt="" />
<img class="scroll" src="data:images/09aoyuncun.jpg" alt="" />
<img class="scroll" src="data:images/09aoyuncun.jpg" alt="" />
</div>
</td>
<td bgcolor="#D40000"></td>
</tr>
</table> <!-- 页脚模块 -->
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0">
<tr align="center" >
<td height="70px" background="images/index_27.jpg" style="line-height:20px">
<div>
您是本店第385325位客人<br />
版权所有:北京月福汽车装饰有限公司<br />
技术支持:HC360 慧聪网 邮箱:network@hc360.com
</div>
</td>
</tr>
</table>
</body>
</html>
几乎所有的样式，都以标签本身的属性和style属性实现。
HTML综合实例【月福首页】的更多相关文章
- ReportingServies——SQLServer报表开发综合实例
如果我们安装了sqlserver2008 R2,将会自动安装一个报表开发工具 不要以为此报表开发工具只适合于sqlserver2008,其实在sqlserver2012中也是支持的,事实上我现在项目中 ...
- Loadrunner 关联 web_custom_request综合实例
Loadrunner 关联 web_custom_request综合实例 Loadrunner 关联web_custom_request,针对自带的订票系统的一个综合实例,相信看了本文大家对学习loa ...
- 使用VS2012 开发SharePoint 2013 声明式的action(activity) 综合实例
本文讲述使用VS2012 开发SharePoint 2013 声明式的action 综合实例. 需求同: http://blog.csdn.net/abrahamcheng/article/detai ...
- [原创]MongoDB综合实例一
CentOS-6.5单机实现mongoDB分片 环境:1)CentOS 6.5系统 2)IP:本机3)MongoDB:MongoDB-linux-x86_64-2.6.1 实现:两个副本集s ...
- 一个综合实例讲解vue的基础知识点。
本文通过一个简单的实例来讲解一下vue的基本知识点.通过这个综合实例的讲解,vue的基础知识就会掌握的差不多了. 首先看一下项目的效果:
- WebGL多模型光照综合实例
原文地址:WebGL多模型光照综合实例 WebGL是一个非常的接近硬件底层的光栅化API, 从非常类似C/C++风格的API调用方式就可以看出来, 习惯了高级语言的我们会觉得很不友好,觉得特别 ...
- 面向对象：静态属性,静态方法,组合,继承,衍生,继承之mro线性顺序列表,面向对象综合实例
1.静态属性(附有装饰器) class Room: def __init__(self,name,owner,width,length,height): self.name=name self.own ...
- html5-表单的综合实例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- html5--2.10综合实例2-移动端页面练习
html5--2.10综合实例2-移动端页面练习 学习要点 通过一个简单的移动手机页面,复习学过的内容 手机网页的测试 手机布局的屏幕设定 手机网页的测试方法 直接在手机上测试,比较麻烦,效果好 电脑 ...
随机推荐
- Python 源码剖析（五）【DICT对象】
五.DICT对象 1.散列表概述 2.PyDictObject 3.PyDictObject的创建与维护 4.PyDictObject 对象缓冲池 5.Hack PyDictObject 这篇篇幅较长 ...
- css边框以及其他常用样式
1. 边框是1像素,实体的,红色的. <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- html的head内标签
ctrl+?:自动注释 ctrl+/: 注释多行,再按一次,取消注释的多行. 一,*********本地测试的方法:1-找到文件路径,直接浏览器打开:2-pycharm打开测试. 二,模板的解释: ...
- python深浅copy-转自EVA的博客
感谢Eva_J, http://www.cnblogs.com/Eva-J/p/5534037.html,新手上路,转载纯为自己学习. 初学编程的小伙伴都会对于深浅拷贝的用法有些疑问,今天我们就结合p ...
- 未找到与约束ContractName Microsoft.VisualStudio.Text.ITextDocumentFactoryService...匹配的导出
安装微软的windows补丁 KB2781514 ,补丁主要解决“在 .NET Framework 4.5 更新之后,Visual Studio 用户可能无法打开或创建 C++ 或 JavaScrip ...
- [洛谷P1714]切蛋糕
题目大意:给你n个整数,求出其中长度不超过m的最大字段和. 题解:单调队列维护前缀和最小值,然后用当前值减去当前有效最小值即可 C++ Code: #include<cstdio> usi ...
- POJ2976：Dropping tests——题解
http://poj.org/problem?id=2976 题目大意:给定n个二元组(a,b),从中取n-k个,使得100*∑a/∑b最大. 01分数规划裸题,设λ是小于等于最优解的,那么λ< ...
- BZOJ2226 & SPOJ5971：LCMSum——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=2226 题目大意:给定一个n,求lcm(1,n)+lcm(2,n)+……+lcm(n,n). ———— ...
- Codeforces Round #466 (Div. 2) E. Cashback
Codeforces Round #466 (Div. 2) E. Cashback(dp + 贪心) 题意: 给一个长度为\(n\)的序列\(a_i\),给出一个整数\(c\) 定义序列中一段长度为 ...
- extjs gridpanel 操作行 得到选中行
extjs gridpanel 操作行 得到选中行的列 在Extjs 3.2.0上适合 var model = grid.getSelectionModel(); model.selectAll(); ...