DIV+CSS实现商城首页

最新推荐文章于 2024-02-15 01:02:54 发布
最新推荐文章于 2024-02-15 01:02:54 发布
阅读量3k 收藏 18
点赞数 2
分类专栏： web开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37286282/article/details/75948171
版权

用table可以实现一个布局，但是远没有div+css来的强大。基本上所有的网页开发时的布局都是用的div+css，div知识一个框架，没有css的配合也是不行的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<style>
		#father{
			border: 1px solid red;
			width:1300px;
			height: 2000px;
			margin: auto;
		}
		#logo{
			border: ipx solid black;
			width: 1300px;
			height: 50px;
		}
		.top{
			border: 1px solid blue;
			width: 431px;
			height: 50px;
			float: left;
		}
		#top{
			padding-top: 12px;
			height: 38px;
		}
		#menu{
			border: 1px solid red;
			background-color: black;
		}
		ul li{
			display: inline;
			color: white;
		}
		#product{
			border: 1px solid red;
			width: 1300px;
			height: 558px;
		}
		#product_top{
			border: 1px solid blue;
			width: 100%;
			height: 50px;
		}
		#product_bottom{
			border: 1px solid green;
			width: 100%;
			height: 500px;
		}
		#product_left{
			border: 1px solid red;
			width: 200px;
			height: 500px;
			float: left;
		}
		#product_right{
			border: 1px solid red;
			width: 1094px;
			height: 500px;
			float: left;
		}
		#big{
			border: 1px solid red;
			width: 544px;
			height: 248px;
			float: left;
		}
		.small{
			border: 1px solid blue;
			width: 180px;
			height: 248px;
			float: left;
			text-align: center;
		}
		#lianjie{
			text-align: center;
		}
	</style>
</head>
<body>
	<div id=father>
	<!1--logo-->
		<div id="logo">
				<div class="top">
					<img src="logo2.png" height="46px">
				</div>
				<div class="top">
					<img src="header.png" height="46px">
				</div>
				<div class="top" id="top">
					<a href="#">登陆</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
		</div>
	<!2-->
		<div id="menu">
				<ul>
					<li style="font-size: 20px;">首页</li>
					<li>手机数码</li>
					<li>家用电器</li>
					<li>鞋靴箱包</li>
					<li>孕婴保健</li>
				</ul>
		</div>
	<!3-->
		<div id="">
			<img src="1.jpg" width="100%">
		</div>
	<!4-->
		<div id="product">
			<div id="product_top">
			  
				<span style="font-size: 25px;padding-top: 8px;">最新商品</span>  
				<img src="title2.jpg">
			</div>
			<div id="product_bottom">
				<div id="product_left">
					<img src="big01.jpg" width="100%" height="100%">
				</div>
				<div id="product_right">
					<div id="big">
						<a href="#"><img src="middle01.jpg" width="100%" height="100%">	</a>
					</div>
					<div class="small">
						<a href="#"><img src="small03.jpg" >	</a>
						<a href="#"><p style="color: gray">电炖锅</p></a>
						<p style="color: red">RMB:299</p>
					</div>
					<div class="small">
						<a href="#"><img src="small03.jpg" >	</a>
						<a href="#"><p style="color: gray">电炖锅</p></a>
						<p style="color: red">RMB:299</p>
					</div>
					<div class="small">
						<a href="#"><img src="small03.jpg">	</a>
						<a href="#"><p style="color: gray">电炖锅</p></a>
						<p style="color: red">RMB:299</p>
					</div>
					<div class="small">
						<a href="#"><img src="small03.jpg">	</a>
						<a href="#"><p style="color: gray">电炖锅</p></a>
						<p style="color: red">RMB:299</p>
					</div>
					<div class="small">
						<a href="#"><img src="small03.jpg">	</a>
						<a href="#"><p style="color: gray">电炖锅</p></a>
						<p style="color: red">RMB:299</p>
					</div>
					<div class="small">
						<a href="#"><img src="small03.jpg">	</a>
						<a href="#"><p style="color: gray">电炖锅</p></a>
						<p style="color: red">RMB:299</p>
					</div>
					<div class="small">
						<a href="#"><img src="small03.jpg">	</a>
						<a href="#"><p style="color: gray">电炖锅</p></a>
						<p style="color: red">RMB:299</p>
					</div>
					<div class="small">
						<a href="#"><img src="small03.jpg">	</a>
						<a href="#"><p style="color: gray">电炖锅</p></a>
						<p style="color: red">RMB:299</p>
					</div>
					<div class="small">
						<a href="#"><img src="small03.jpg">	</a>
						<a href="#"><p style="color: gray">电炖锅</p></a>
						<p style="color: red">RMB:299</p>
					</div>
				</div>
			</div>
		</div>
		<!5-->
		<div id="ad">
			<img src="ad.jpg" width="100%">
		</div>
	<!6-->
		<div id="product">
			<div id="product_top">
			  
				<span style="font-size: 25px;padding-top: 8px;">热门商品</span>  
				<img src="title2.jpg">
			</div>
			<div id="product_bottom">
				<div id="product_left">
					<img src="big01.jpg" width="100%" height="100%">
				</div>
				<div id="product_right">
					<div id="big">
						<a href="#"><img src="middle01.jpg" width="100%" height="100%">	</a>
					</div>
					<div class="small">
						<a href="#"><img src="small03.jpg" >	</a>
						<a href="#"><p style="color: gray">电炖锅</p></a>
						<p style="color: red">RMB:299</p>
					</div>
					<div class="small">
						<a href="#"><img src="small03.jpg" >	</a>
						<a href="#"><p style="color: gray">电炖锅</p></a>
						<p style="color: red">RMB:299</p>
					</div>
					<div class="small">
						<a href="#"><img src="small03.jpg">	</a>
						<a href="#"><p style="color: gray">电炖锅</p></a>
						<p style="color: red">RMB:299</p>
					</div>
					<div class="small">
						<a href="#"><img src="small03.jpg">	</a>
						<a href="#"><p style="color: gray">电炖锅</p></a>
						<p style="color: red">RMB:299</p>
					</div>
					<div class="small">
						<a href="#"><img src="small03.jpg">	</a>
						<a href="#"><p style="color: gray">电炖锅</p></a>
						<p style="color: red">RMB:299</p>
					</div>
					<div class="small">
						<a href="#"><img src="small03.jpg">	</a>
						<a href="#"><p style="color: gray">电炖锅</p></a>
						<p style="color: red">RMB:299</p>
					</div>
					<div class="small">
						<a href="#"><img src="small03.jpg">	</a>
						<a href="#"><p style="color: gray">电炖锅</p></a>
						<p style="color: red">RMB:299</p>
					</div>
					<div class="small">
						<a href="#"><img src="small03.jpg">	</a>
						<a href="#"><p style="color: gray">电炖锅</p></a>
						<p style="color: red">RMB:299</p>
					</div>
					<div class="small">
						<a href="#"><img src="small03.jpg">	</a>
						<a href="#"><p style="color: gray">电炖锅</p></a>
						<p style="color: red">RMB:299</p>
					</div>
				</div>
			</div>
		</div>
	<!7-->
		<div id="">
			<img src="footer.jpg" width="100%">
		</div>
	<!8-->
		<div id="lianjie">
			<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>
			<p>
			CopyRight 2017-9999 刘氏商城 版权所有
			</p>
		</div>
	</div>
</body>
</html>

注册表单的练习： 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<script>
		function checkForm()
		{
			// alert("aa");
			var uvalue=document.getElementById("user").value;
			alert("uvalue");
		}
	</script>
</head>
<body>
	<table border="1px" align="center" cellpadding="0px" cellspacing="0px" width="1300px" >
		<tr>
			<td>
				<table border="1px" width="100%">
						<tr height="50px">
								<td width="33.3%">
									<img src="logo2.png" height="47px">
								</td>
								<td width="33.3%">
									<img src="header.png" height="47px">
								</td>
								<td width="33.3%">
									<a href="#">登陆</a>
									<a href="#">注册</a>
									<a href="#">购物车</a>	
								</td>
						</tr>
				</table>
			</td>
		</tr>
		<tr height="50px">
		<td bgcolor="black">
		  
			<a href="#"><font size="5">首页</font></a>  
			<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 height="600px" background="regist_bg.jpg">
			<form action="#" method="get" name="fegForm" οnsubmit="return checkForm();">
				<table border="1px" width="750px" height="400px" align="center" bgcolor="white">
						<tr height="40px">
							<td colspan="2"><font size="4">会员注册 USER REGISTER</font></td>
						</tr>
						<tr>
							<td>
								用户名：
							</td>
							<td>
								<input type="text" name="user" size="45px">
							</td>
						</tr>
						<tr>
							<td>
								密码：
							</td>
							<td>
								<input type="password" name="password">
							</td>
						</tr>
						<tr>
							<td>
								确认密码：
							</td>
							<td>
								<input type="password" name="repassword">
							</td>
						</tr>
						<tr>
							<td>
								Email：
							</td>
							<td>
								<input type="text" name="Email" size="35px">
							</td>
						</tr>
						<tr>
							<td>
								姓名：
							</td>
							<td>
								<input type="text" name="username">
							</td>
						</tr>
						<tr>
							<td>
								性别：
							</td>
							<td>
								<input type="radio" name="sex" value="男">男
								<input type="radio" name="sex" value="女">女
							</td>
						</tr>
						<tr>
							<td>
								出生日期：
							</td>
							<td>
								<input type="text" name="birthday">
							</td>
						</tr>
						<tr>
							<td>
								验证码：
							</td>
							<td>
								<input type="text" name="yzm">
							</td>
						</tr>
						<tr>
							<td colspan="2">
								<input type="submit" value="注册">
							</td>
						</tr>
				</table>
				</form>
			</td>
		</tr>
	<tr>
		<td>
			<img src="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>
			<p>
			CopyRight 2017-9999 丢丢 版权所有
			</p>
		</td>
	</tr>
	</table>
</body>
</html>


没想好叫什么名字
关注
  • 2
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
用DIV+CSS技术设计的个人网页（网页制作课作业）
12-07
关于网页制作课程的作业，使用DIV+CSS技术设计的个人主页，有需要的朋友可以下载，挺简洁的
HTML&CSS——使用DIV和CSS完成网站首页重构
小强博客
01-17 8196
需求分析 技术分析 1、DIV 相关的技术 Div 它是一个 html 标签，一个块级元素(单独显示一行)。它单独使用没有任何意义，必须结合CSS来使用。它主要用于页面的布局。 Span 它是一个 html 标签，一个内联元素(显示一行)。它单独使用没有任何意义，必须结合CSS 来使用。它主要用于对括起来的内容进行样式的修饰。 2、CSS 的作用 HTML：它是整个网站的骨架。 CSS：它是对整...
div+css详解
最新发布
蓝易云
02-15 550
总的来说，"div+css"是一种强大的网页布局方法，它提供了灵活性和可维护性，使得网页设计师和开发人员能够创建各种各样的页面布局和风格，同时确保网站具有一致的外观和良好的用户体验。它已成为现代Web开发中的标准实践之一。元素结合CSS（层叠样式表）来进行页面的排版和样式设置。"div+css" 是一种网页布局的方法，它的核心思想是使用HTML中的。
HTML设计抖音页面,CSS3解析抖音LOGO制作的方法步骤
weixin_29137489的博客
06-03 1194
“抖音”，人气也是非常高，据说拥有7亿用户。今天我们就来研究研究抖音的logo，蹭蹭热度。效果预览：主要用css3新增属性 mix-blend-mode ，”组成，然后有3种颜色，白色、红色、和天蓝色。ok，我们先来完成一个“J”。根据以往的经验，我们把它拆分成3部分。下面我们来分步骤实现。完成单个“J”添加样式.jitter {position: relative;width: 200px;ma...
div+css完成首页布局
weixin_34246551的博客
09-23 701
要完成一个简单的网站首页并不难，我们只要寻找到方法便很容易，完成一个简单的网站首页我们只要将整体的首页布局用div+css写出来然后再填充内容那么一个简单的网站首页便可以完成了，那么我们一步一步来实现他们，首先我们从宏观的角度将首页分成几大块，以下的案例我们将首页分成三大块： 这个首页我们先不管放置大图的部分，我们将这个简单的首页分为三大块，这样我们就需要来一个最大的di...
【使用DIV+CSS重写网站首页案例】步骤分析与代码实现
u012161251的博客
06-02 600
使用DIV+CSS重写网站首页案例 步骤分析： 第一步：先定义一个大的 div（整个页面），然后嵌套 8 个小的 div（共八行）； 第二步：(第一行)在第一个 div 里面嵌套 3 个小的 div； 第三步：(第二行)在小 div 里面写一个列表标签(需要使用 css 的 display 属性的 inline)； 第四步：(第三行)在小 d...
使用HTML5和CSS制作抖音动态首页
t_999888的博客
11-30 3184
可以在谷歌、IE浏览器中显示动态视频播放，在火狐浏览器视频播放不显示，浏览器不同，显示有区别，但是代码无问题，亲测
HTML抖音登录界面的基本代码
qq_45489411的博客
09-15 7678
HTML和CSS的抖音登录界面代码(无跳转) 主代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>〖抖音短视频〗 记录美好生活</title> <link rel="stylesheet" href="...
HTML+CSS+JavaScript仿京东购物商城网站 web前端制作服装购物商城 html电商购物网站
VX_WJ88950106的博客
08-06 2万+
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......
DIV+CSS实现仿京东商城导航条效果
01-21
本文实例讲述了DIV+CSS实现仿京东商城导航条效果。分享给大家供大家参考。具体如下： 这里演示了DIV+CSS实现仿京东商城导航条功能代码，鼠标滑过导航条选项即可弹出对应的子菜单列表，界面简洁大方。 运行效果截图...
使用Div+CSS纯图片实现圆角矩形的方法小结
09-24
主要介绍了使用Div+CSS纯图片实现圆角矩形的方法小结,CSS3中用代码绘制圆角矩形非常方便,而本文要介绍的则是利用图片来实现兼容性更强的方法,需要的朋友可以参考下
div+css table布局实现代码
01-21
下面是我翻译的内容，是根据我对文章的理解意译的，你就别挑哪里翻译的不对了，我的目的只是传达这个CSS技巧 许多网页设计师都喜欢，将两个或者多个容器等高的并排放置，并在里面展示每个容器的内容，就象经典表格...
DIV+CSS实现的懒人图库导航菜单demo
05-19
DIV+CSS实现的懒人图库导航菜单demo
首页网站div制作（div+css概述，css选择器）
cuterabbitbaby的博客
09-14 1784
首页DIV+CSS布局代码 首页 #bodydiv { border: solid 1px blue; width: 90% px; } .logodiv { border: solid 1px blue; width: 33%; float: left; height: 48px; } .clear { clear: both; }
【使用DIV+CSS重写网站首页案例】CSS选择器
u012161251的博客
06-01 197
使用表格<table></table>对网站首页进行布局有缺陷，不能拖动版块，不灵活。 DIV Div是一个html的标签，单独使用没有意义，必须结合CSS使用； 是一个块级元素，单独占一行； 它主要用于页面的布局； Span Div是一个html的标签，单独使用没有意义，必须结合CSS使用； 是一个内联元素，显示一行； 它主要用于对括...
DIV+CSS搭建（淘宝首页）布局图
热门推荐
小柒的前端之旅
03-19 3万+
制作网页时，构建页面布局图很重要。布局前的结构划分避免造成混乱。 下面的代码只有DIV+CSS的网页结构布局。没有将最终的淘宝静态页面的代码放上去，只有布局图和最终页面的比较图。 搭建的布局图与最终效果的一个比较： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&...
基于HTML电商项目的设计与实现—— HTML+CSS+JavaScrip家具网页设计实例 企业网站制作
HTML网页设计
08-24 614
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web...
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
而风不止
11-14 1万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
网站开发之DIV+CSS简单布局网站入门篇（五）
杨秀璋的专栏
11-08 1万+
这篇文章主要介绍如何使用DIV和CSS简单布局一个网站的首页，通常将网站划分为顶部（Logo、导航条）、中部（页面主要内容、左右栏目）、底部（制作方介绍、超链接）。这是非常基础的一篇引入性文章，采用案例的方式进行介绍的，希望对你有所帮助。运行结果如下图所示：main.html主页面代码：主要通过div进行布局的，同时用户设置导航条，鼠标悬停时背景颜色切换。css/main.css代码：该部分代码主
基于css实现各种布局模板用DIV+CSS实现布局
04-20
使用DIV和CSS实现布局是一种非常实用和灵活的方法，可以实现各种复杂的页面布局和设计。通过设置元素的属性和样式，可以实现不同的布局模板，例如栅格布局、弹性布局、浮动布局等等。同时，这种方法也可以提高页面的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

没想好叫什么名字

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值