网站首页案例

最新推荐文章于 2022-10-03 13:48:50 发布
最新推荐文章于 2022-10-03 13:48:50 发布
阅读量3k 收藏 36
点赞数 4
分类专栏： web前端 文章标签： HTML 基本标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woaixuexihhh/article/details/83819162
版权

目标网站

目标网站

分析

		1. 创建一个8行一列的表格
		2. 第一部份: LOGO部分: 嵌套一个一行三列的表格
		3. 第二部分: 导航栏部分 : 放置5个超链接
		4. 第三部分: 轮播图 
		5. 第四部分: 嵌套一个三行7列表格
		6. 第五部分: 直接放一张图片
		7. 第六部分: 抄第四部分的
		8. 第七部分: 放置一张图片
		9. 第八部分: 放一堆超链接

代码

<!DOCTYPE html>
<html>
   <head>
   	<meta charset="UTF-8">
   	<title></title>
   </head>
   <body>
   	<table>
   		<!--第一部分-->
   		<tr>
   			<td>
   				<table width="100%" >
   					<tr>
   						<td>
   							<img src="../img/logo2.png"/>
   						</td>
   						<td>
   							<img src="../img/header.jpg" />
   						</td>
   						<td width="300px">
   							<a href="#">登录</a>
   							<a href="#">注册</a>
   							<a href="#">购物车</a>
   						</td>
   					</tr>
   				</table>
   			</td>
   		</tr>
   		<!--第二部分-->
   		<tr bgcolor="black">
   			<td width="100%">
   				<a href="#"><font color="white">首页</font></a>
   				<a href="#"><font color="white">鞋子</font></a>
   				<a href="#"><font color="white">电脑</font></a>
   				<a href="#"><font color="white">背包</font></a>
   			</td>
   		</tr>
   		<!--第三部分-->
   		<tr>
   			<td>
   				<img src="../img/1.jpg" width="100%"/>
   			</td>
   		</tr>
   		<!--第四部分-->
   		<tr>
   			<td>
   				<table  width="100%" height="500px">
   					<tr>
   						<td colspan="7">
   							<h3>最新商品<img src="../img/title2.jpg"/></h3>
   						</td>
   					</tr>
   					<tr align="center">
   						<td rowspan="2">
   							<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
   						</td>
   						<td colspan="3">
   							<img src="../products/hao/middle01.jpg" width="100%" height="100%"/>
   						</td>
   						<td>
   							<img src="../products/hao/small06.jpg" />
   							<p>洗衣机</p>
   							<p><font color="red">$998</font></p>
   						</td>
   						<td>
   							<img src="../products/hao/small06.jpg" />
   							<p>洗衣机</p>
   							<p><font color="red">$998</font></p>
   						</td>
   						<td>
   							<img src="../products/hao/small06.jpg" />
   							<p>洗衣机</p>
   							<p><font color="red">$998</font></p>
   						</td>
   						
   					</tr>
   					<tr align="center">
   						<td>
   							<img src="../products/hao/small06.jpg" />
   							<p>洗衣机</p>
   							<p><font color="red">$998</font></p>
   						</td>
   						<td>
   							<img src="../products/hao/small06.jpg" />
   							<p>洗衣机</p>
   							<p><font color="red">$998</font></p>
   						</td>
   						<td>
   							<img src="../products/hao/small06.jpg" />
   							<p>洗衣机</p>
   							<p><font color="red">$998</font></p>
   						</td>
   						<td>
   							<img src="../products/hao/small06.jpg" />
   							<p>洗衣机</p>
   							<p><font color="red">$998</font></p>
   						</td>
   						<td>
   							<img src="../products/hao/small06.jpg" />
   							<p>洗衣机</p>
   							<p><font color="red">$998</font></p>
   						</td>
   						<td>
   							<img src="../products/hao/small06.jpg" />
   							<p>洗衣机</p>
   							<p><font color="red">$998</font></p>
   						</td>
   					</tr>
   				</table>
   			</td>
   		</tr>
   		<!--第五部分-->
   		<tr>
   			<td>
   				<img src="../products/hao/ad.jpg" width="100%" />
   			</td>
   		</tr>
   		<!--第六部分-->
   		<tr>
   			<td>
   				<table  width="100%" height="500px">
   					<tr>
   						<td colspan="7">
   							<h3>最新商品<img src="../img/title2.jpg"/></h3>
   						</td>
   					</tr>
   					<tr align="center">
   						<td rowspan="2">
   							<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
   						</td>
   						<td colspan="3">
   							<img src="../products/hao/middle01.jpg" width="100%" height="100%"/>
   						</td>
   						<td>
   							<img src="../products/hao/small06.jpg" />
   							<p>洗衣机</p>
   							<p><font color="red">$998</font></p>
   						</td>
   						<td>
   							<img src="../products/hao/small06.jpg" />
   							<p>洗衣机</p>
   							<p><font color="red">$998</font></p>
   						</td>
   						<td>
   							<img src="../products/hao/small06.jpg" />
   							<p>洗衣机</p>
   							<p><font color="red">$998</font></p>
   						</td>
   						
   					</tr>
   					<tr align="center">
   						<td>
   							<img src="../products/hao/small06.jpg" />
   							<p>洗衣机</p>
   							<p><font color="red">$998</font></p>
   						</td>
   						<td>
   							<img src="../products/hao/small06.jpg" />
   							<p>洗衣机</p>
   							<p><font color="red">$998</font></p>
   						</td>
   						<td>
   							<img src="../products/hao/small06.jpg" />
   							<p>洗衣机</p>
   							<p><font color="red">$998</font></p>
   						</td>
   						<td>
   							<img src="../products/hao/small06.jpg" />
   							<p>洗衣机</p>
   							<p><font color="red">$998</font></p>
   						</td>
   						<td>
   							<img src="../products/hao/small06.jpg" />
   							<p>洗衣机</p>
   							<p><font color="red">$998</font></p>
   						</td>
   						<td>
   							<img src="../products/hao/small06.jpg" />
   							<p>洗衣机</p>
   							<p><font color="red">$998</font></p>
   						</td>
   					</tr>
   				</table>
   			</td>
   		</tr>
   		<!--第七部分-->
   		<tr>
   			<td>
   				<img src="../img/footer.jpg" width="100%"/>
   			</td>
   		</tr>
   		<!--第八部分-->
   		<tr>
   			<td align="center">
   				        
   				<a href="#">关于我们</a>
   				<a href="#">联系我们</a>
   				<a href="#">招贤纳士</a>
   				<a href="#">法律声明</a>
   				<a href="#">友情链接</a>
   				<a href="#">支付方式</a>
   				<a href="#">配送方式</a>
   				<a href="#">服务声明</a>
   				<a href="#">广告声明</a>
   				<br />
Copyright © 2005-2016 传智商城 版权所有
   			</td>
   		</tr>
   	</table>
   </body>
</html>

运行结果：
在这里插入图片描述

Happy祥子
关注
  • 4
    点赞
  • 踩
  • 36
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页部分案例
ice_yr的博客
08-17 218
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的第一个网页（仿）</title> <style type="text/css"> /*样式*/ /*css初始化*/ * { margin: 0; ...
网站项目案例展示网站模板
04-02
网站项目案例展示网站模板是一种专为呈现各类项目案例而设计的网页模板，它通常包含精心组织的布局、吸引人的视觉效果以及易于导航的功能，旨在帮助用户有效地展示他们的作品集或项目成果。这样的模板对于设计师、...
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
热门推荐
HTML网页设计
10-03 24万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
10个2018年度最佳网站设计实例赏析及原型分享
aimeeth的博客
01-21 6169
在高速发展的互联网时代，网站设计的重要性不言而喻。对于设计师来说，一个好的个人网站可以很好的为自己展示UI/UX设计作品集；对于企业来说，一个好的网站可以为自己持续带来流量以及品牌曝光；网页设计师们总会热衷于追随最新的设计趋势，因为在这些优秀的网站设计实例中可以看到某些趋势，诸如：扁平化设计、视差滚动、响应式设计、流行配色设计等等。那么接下来我们就一起来剖析看看2018年年度最佳的10个优秀网站设...
HTML案例：旅游网站首页
weiyoo55的博客
09-02 6526
案例：旅游网站首页 1.确定使用table来完成布局 2.如果某一行只有一个单元格，则使用 3.如果某一行有多个单元格 <tr> ​ <td> ​ <table> </table> ​ </td> </tr> 代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &
个人主页网站实例
12-31
自己大一写的小小web实例，写的不好，但是还是挺有意思的，有兴趣的可以下下来看看（可以当作业哦）....
案例四：网站首页显示页面
小强博客
01-15 449
知识点笔记—表格标签 案例四：网站首页显示页面 1.表格标签 &amp;amp;lt;table border=&amp;quot;&amp;quot; width=&amp;quot;&amp;quot; height=&amp;quot;&amp;quot; align=&amp;quot;&amp;quot; bgcolor=&amp;quot;&amp;quot; cellpadding=&
HTML+CSS+JavaScript原生购物网站首页案例
04-14
在构建一个基于HTML+CSS+JavaScript的原生购物网站首页案例时，我们需要理解这三个技术的核心概念以及它们如何协同工作来创建动态、交互式的网页。以下是一些相关知识点的详细说明： 1. **HTML（HyperText Markup ...
网站改版十大精彩案例分享
02-03
无论对网站，还是对用户来说，网站改版看起来似乎是一个令人兴奋且十分有趣的项目。创建一个新设计的同时继续保持网站原有的品牌与内容，也是相当刺激与富有挑战性的。这种类型的挑战对于大部分Web设计师来说很具有...
网站诊断分析案例.ppt
11-16
"网站诊断分析案例.ppt" 本资源是一个有关网站诊断分析的案例分析报告，涵盖了企业网站的八大功能、目标、要素、常见内容、常见功能、常见服务、建立原则、诊断建议等方面的内容。报告还提供了网站诊断的实施建议，...
网站首页实例
02-28
使用DIV+CSS布局，网站首页实模板例，布局简单大方，可直接套用
100个网页实例
09-06
100个网页实例，可以为web学习提供资料，有大部分的布局
50个简单的网页制作案例
06-12
50个简单的网页制作案例，利用DIV+CSS完成，包括各种类型的网站
个人网站实例，大家可以参考参考啊。呵呵，分享一下
05-10
个人网站实例，大家可以参考参考啊。呵呵，分享一下，采用了 css+div控制格式，以及javascript的简单应用 采用了 css+DIV+Table布局，谢谢啊
[案例源码]HTML 5网页案例大全
08-17
内容提要 HTML 5作为新一代Web技术开发标准，目前已经获得众多浏览器厂商的支持，同时在多数手机端平台上得到充分的发挥利用，先学会HTML 5无疑是开发者在未来职场上的一把金钥匙。 本书分3大部分，分为从宏观上认识HTML 5、从微观上应用HTML 5和HTML 5完美实战案例，共14章。第1部分介绍了HTML 5和浏览器的发展史、HTML 5整理新特性的使用，还介绍了目前最新的前端设计概念和第三方流行应用框架，比如响应式设计、移动端框架、MVC、图形库、游戏库、Node.js；第2部分从表单、Canvas、多媒体、地理、拖拽、存储、通信、离线应用等多个方向给出大量实战例子并细致分析，讲解实际的开发应用场景；最后部分通过2个完整的大型现实应用场景示例，帮助读者加深对HTML 5认识，提高读者编码能力。 本书从实际的应用场景出发，结合当下热门技术（如响应式设计、MVC、Node.js、移动），深入浅出的介绍HTML 5各项新技术，使读者在不知不觉中掌握HTML 5的使用，是前端开发初学者绝佳的首选，也可供大专院校相关师生、行业技能培训学校作为相关教材和参考书。
网站设计案例主题模板
04-02
“整站”概念是指设计不仅局限于首页，而是涵盖整个网站的所有页面，确保整体一致性。这要求设计师对每个页面的细节都有深入理解和把握，如内页、联系我们页、产品介绍页等，都要有统一的风格和调性。 “案例”通常...
web前端编程实战实例：制作静态京东首页
qq_37358422的博客
08-07 6068
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;京东_曾柯伟&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="京东.css"&gt; &lt;/head&gt; &lt;bod
大二学生web期末大作业 在线电影网站 HTML+CSS+JS
HTML网页设计 专注大学生网页设计
09-18 6万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
HTML小网页案例
java后台, 安卓App, 微信小程序都会, 有需要的可以联系!
11-03 1万+
无标题文档 var a = 15; alert(a); --> *{ margin:0; padding:0;} ul,li{ list-style:none;} .clear:after{/*在每个.class之后插入新内容*/ content:"\200B"; display:block;/*使段落生成行内框,每个框是一个块级元素*/ hei
vue element网站首页案例
最新发布
05-01
Vue Element是一款基于Vue.js 2.0的UI框架，提供了丰富的UI组件，为我们开发前端页面带来了...总之，Vue Element的网站首页是一个非常好的案例，它使得我们开发前端页面变得更加便捷，让我们对设计的重视达到新的高度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值