HTML CSS 贵美商城网页布局

最新推荐文章于 2020-09-25 12:12:39 发布
最新推荐文章于 2020-09-25 12:12:39 发布
阅读量1.1w 收藏 91
点赞数 17
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42073620/article/details/94127941
版权

HTML CSS 贵美商城网页布局

文章目录


材料：链接： https://pan.baidu.com/s/13wK9ZvSAQ7lLkhYwFGUXdg 提取码：f5it
然后将素材放入img
在这里插入图片描述

效果图

效果图

结果图

结果图

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>欢迎来到 贵美商城</title>
		<style>
			#mid{
				position: absolute;
				left: 30px;
				top: 150px;				
			}
			#topline{
				list-style: none;
				position: absolute;				
				top: 0px;
				left: 525px;
				font-weight: 500;				
			}
			#topline li{
				display: inline;  /*水平*/
				margin: 10px;  /*间距*/
				
			}
			#secondLine{
				list-style: none; /*去除点*/
				position: absolute;				
				top: 95px;
				left: 0px;
			}
			#secondLine li{
				display: inline;  /*水平*/
				margin: 10px;
				text-align: center;
				font-weight: 600;
			}
			#gwc{
				position: absolute;				
				top: 17px;
				left: 550px;
			}
			#bzzx{
				position: absolute;				
				top: 18px;
				left: 625px;
			}
			#jrsc{
				position: absolute;				
				top: 18px;
				left: 715px;
			}
			#swzy{
				position: absolute;				
				top: 17px;
				left: 805px;
			}
			#dl{
				position: absolute;				
				top: 18px;
				left: 892px;
			}
			#zc{
				position: absolute;				
				top: 18px;
				left: 950px;
			}
			#mxzq{
				position: absolute;				
				top: 155px;
				left: 243px;
			}
			#left{
				list-style: none;
				line-height: 147px; /*行高*/
				position: absolute;				
				top: 114px;
				left: 50px;
				text-align: center;
				color: orange;
				font-weight: 900;
			}
			#jydq{
				position: absolute;				
				top: 212px;
				left: 39px;
			}
			#sj{
				position: absolute;				
				top: 360px;
				left: 39px;
			}
			#sjsm{
				position: absolute;				
				top: 505px;
				left: 39px;
			}
			#rybh{
				position: absolute;				
				top: 660px;
				left: 39px;
			}
			#fkqg{
				position: absolute;				
				top: 420px;
				left: 250px;
				text-align: center;
				font-size: small;
			}
			#fkqg img{
				
			}
			#fk1{
				position: absolute;				
				top: 400px;
				left: 300px;
			}
			#fk2{
				position: absolute;				
				top: 400px;
				left: 470px;
			}
			#fk3{
				position: absolute;				
				top: 400px;
				left: 640px;
			}
			#fk4{
				position: absolute;				
				top: 510px;
				left: 300px;
			}
			#fk5{
				position: absolute;				
				top: 510px;
				left: 470px;
			}
			#fk6{
				position: absolute;				
				top: 510px;
				left: 640px;
			}
			#fk7{
				position: absolute;				
				top: 660px;
				left: 300px;
			}
			#fk8{
				position: absolute;				
				top: 660px;
				left: 470px;
			}
			#fk9{
				position: absolute;				
				top: 660px;
				left: 640px;
			}
			#right{
				position: absolute;				
				top: 300px;
				left: 800px;
				line-height: 60px;
				list-style: none;
			}
			
			#r1{
				position: absolute;				
				top: 335px;
				left: 780px;
			}
			#r2{
				position: absolute;				
				top: 395px;
				left: 780px;
			}
			#r3{
				position: absolute;				
				top: 455px;
				left: 780px;
			}
			#r4{
				position: absolute;				
				top: 515px;
				left: 780px;
			}
		</style>
	</head>
	
	<body>		
		<div id="header">
			<img src="img/h_bg.jpg" />
			<ul id="topline">
				<li>购物车</li>
				<li>帮助中心</li>
				<li>加入收藏</li>
				<li>设为主页</li>
				<li>登陆</li>
				<li>注册</li>
			</ul>
			<ul id="secondLine">
				<li>&nbsp;首页&nbsp;</li>
				<li>家用电器</li>
				<li>手机数码</li>
				<li>日用百货</li>
				<li>&nbsp;书籍&nbsp;</li>
				<li>帮助中心</li>
				<li>免费开店</li>
				<li>全球资讯</li>
			</ul>
			<img id="gwc" src="img/xiazai3.png"/>
			<img id="bzzx"src="img/bangzhuzhongxin.png"/>
			<img id="jrsc"src="img/jiarushoucang.png" />
			<img id="swzy"src="img/zhuye.png" />
			<img id="dl"  src="img/denglu.png"/>
			<img id="zc"  src="img/zhuce.png"/> 
		</div>
		<div id="section">
			<img src="img/bg.gif" id="mid"/>
			<img id="mxzq" src="img/adv_2.jpg" />
			<ul id="left">
				<li>家用电器</li>
				<li>书籍</li>
				<li>手机数码</li>
				<li>日用百货</li>
			</ul>
			<table id="jydq" width="190px" height="100px">
				<tr>
					<td>大家电</td>
					<td>大家电</td>
					<td>大家电</td>
				</tr>
				<tr>
					<td>大家电</td>
					<td>大家电</td>
					<td>大家电</td>
				</tr>
				<tr>
					<td>大家电</td>
					<td>大家电</td>
					<td>大家电</td>
				</tr>
				<tr>
					<td>大家电</td>
					<td>大家电</td>
					<td>大家电</td>
				</tr>
				<tr>
					<td>大家电</td>
					<td>大家电</td>
					<td>大家电</td>
				</tr>
			</table>
			<table id="sj" width="190px" height="90px">
				<tr>
					<td>大家电</td>
					<td>大家电</td>
					<td>大家电</td>
				</tr>
				<tr>
					<td>大家电</td>
					<td>大家电</td>
					<td>大家电</td>
				</tr>
				<tr>
					<td>大家电</td>
					<td>大家电</td>
					<td>大家电</td>
				</tr>
				<tr>
					<td>大家电</td>
					<td>大家电</td>
					<td>大家电</td>
				</tr>
				<tr>
					<td>大家电</td>
					<td>大家电</td>
					<td>大家电</td>
				</tr>
			</table>
			<table id="sjsm" width="190px" height="90px">
				<tr>
					<td>大家电</td>
					<td>大家电</td>
					<td>大家电</td>
				</tr>
				<tr>
					<td>大家电</td>
					<td>大家电</td>
					<td>大家电</td>
				</tr>
				<tr>
					<td>大家电</td>
					<td>大家电</td>
					<td>大家电</td>
				</tr>
				<tr>
					<td>大家电</td>
					<td>大家电</td>
					<td>大家电</td>
				</tr>
				<tr>
					<td>大家电</td>
					<td>大家电</td>
					<td>大家电</td>
				</tr>
			</table>
			<table id="rybh" width="190px" height="100px">
				<tr>
					<td>大家电</td>
					<td>大家电</td>
					<td>大家电</td>
				</tr>
				<tr>
					<td>大家电</td>
					<td>大家电</td>
					<td>大家电</td>
				</tr>
				<tr>
					<td>大家电</td>
					<td>大家电</td>
					<td>大家电</td>
				</tr>
				<tr>
					<td>大家电</td>
					<td>大家电</td>
					<td>大家电</td>
				</tr>
				<tr>
					<td>大家电</td>
					<td>大家电</td>
					<td>大家电</td>
				</tr>
			</table>
			<table id="fkqg" width="510px" height="420px">
				<tr>
					<td>惠普商务移动应用英寸笔记本</td>
					<td>夏新N6 GPS真人语音导航手机 超低特价疯抢 数量有限！</td>
					<td>三星家庭影院 HT-TZ325 购机送好礼（超值性价比）</td>
				</tr>
				<tr>
					<td>明基MP512投影机 2899元 送100元京券 SVGA 2200流明</td>
					<td>罗技数据1TB移动鼠标729元开抢了！</td>
					<td>海森那尔极品耳机绝对不容错过</td>
				</tr>
				<tr>
					<td>亚马逊随时阅读，随时记录，时尚最佳选择！</td>
					<td>优雅相框</td>
					<td>IBM 2009最新上网本，特色尽显</td>
				</tr>
			</table>
			<img id="fk1"src="img/promote-1.jpg" border="1"/>
			<img id="fk2"src="img/promote-2.jpg" border="1" />
			<img id="fk3"src="img/promote-3.jpg" border="1" />
			<img id="fk4"src="img/laser-pen.jpg" border="1" />
			<img id="fk5"src="img/mouse.jpg" border="1" />
			<img id="fk6"src="img/earphone.jpg" border="1" />
			<img id="fk7"src="img/notebook.jpg" border="1" />
			<img id="fk8"src="img/Frame.jpg" border="1" />
			<img id="fk9"src="img/Wancom.jpg" border="1" />
			<ul id="right">
				<li>大牌狂降价，三折直送</li>
				<li>大学要求老师开网店</li>
				<li>黑眼圈推荐，美白不停</li>
				<li>瘦身狂潮，修形之选</li>
			</ul>
			<img id="r1"src="img/show1.jpg" border="1"/>
			<img id="r2"src="img/show2.jpg" border="1"/>
			<img id="r3"src="img/show5.jpg" border="1"/>
			<img id="r4"src="img/show4.jpg" border="1"/>
		</div>
	</body>
</html>
一只技术白
关注
  • 17
    点赞
  • 踩
  • 91
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML总结（贵美商城项目）
qq_43956225的博客
09-24 2182
HTML总结（贵美商城项目） 时隔一年多，终于又上手了一次Html项目，最大的感觉就是如果让自己来写一个项目的话，自己可以搞定！ 这次完成这个项目大概用了七天。这次完成的这个项目也是检验一下了自己，很庆幸自我感觉良好。心得主要分为以下两个方面： 布局 布局真的非常重要，一个合理的布局，真的可以省去很多不必要的麻烦。写一个项目，网页要从格局入手，先摆好框架，再去慢慢填充。每一个布局可以用醒目的边框，背景颜色来填充，这样可以快速区分每一个的网页的布局。CSS样式需要慢慢的改动，真的不能着急。 ifra
贵美注册页面
qq_43689043的博客
04-13 1895
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贵美注册页面</title> </head> <body> <form auction="login.html" method="post"> <table> <tr> <td>登录名:&
bootstrap 实现商城布局
dxm809的博客
09-07 874
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!--声明文档兼容模式，表示使用IE浏览器的最新模式--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>--> .
贵美商城网页的源代码
11-17
本人制作的贵美商城网页的源代码。呵呵！学习时制作的网页要求项目。
贵美商城项目
02-12
贵美商城，可以实现跳转的。
【贵美商城】首页设计
qq_44759710的博客
05-16 2010
<!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=ut
使用html+css实现贵美商城网页的设计.zip
最新发布
10-19
在本项目中，“使用html+css实现贵美商城网页的设计.zip”是一个包含了使用HTML和CSS技术构建贵美商城网页的设计资源。这个压缩包文件“Guimei-Mall-master”可能包含了项目的所有源代码、图片和其他相关素材，用于...
贵美商城htmlcssjs完整示例代码_贵美商城完整源代码htmI,贵美商城的html网页制作代码
06-07
贵美商城的HTML网页制作代码是一套涵盖了前端开发核心技术的示例项目，包括了HTML结构、CSS样式以及JavaScript交互功能。这个项目为开发者提供了一个实战性的学习平台，帮助理解如何构建一个完整的电子商务网站的...
贵美商城html+css+js完整示例代码
05-13
4. **响应式设计**：鉴于现代网站需要适应各种屏幕尺寸，贵美商城的HTML和CSS可能采用了媒体查询（media queries）来实现响应式布局，确保在手机、平板电脑和桌面电脑上都能正常显示和操作。 5. **库和框架**：为了...
htmlcss编写的贵美商城
03-05
在本项目中，“htmlcss编写的贵美商城”是一个基于HTML和CSS技术构建的电子商务平台。这个商城网站包含了多个核心页面，旨在提供完整的购物体验，包括主页、购物车、用户登录与注册、帮助中心以及商品列表等。接下来...
贵美商城HTML
03-03
贵美商城HTML，包含所有功能，有14个网络页面。里面包含注册、登录、首页、家用电器、购买、购物车、购物计算、帮助中心等14个面
贵美商城静态网页（javascript）
04-01
贵美商城静态网页，里面相当于一个大型的html，css，javascript等语言的运用，下载双击即可打开。 适合初学javascript和希望布局的美观的人。使用价值极高。绝对一分钱一分货。
贵美商城完整项目
05-28
div+css布局，贵美商城完整项目，适合初学者学
贵美商城网站首页
10-10
贵美网站首页，要的自已去下
贵美商城源代码（包含素材）
09-17
贵美商城源代码（包含素材）这是我们上机课做的项目，分享一下。
贵美商城html+css+js完整示例代码,可运行
06-14
贵美商城的HTML+CSS+JS完整示例代码是一个实际的电商网站前端实现，它包含了网页结构、样式设计以及交互功能等多个方面，是学习和实践Web开发的重要资源。在这个项目中，我们可以深入理解Web前端开发的各个环节，...
【贵美商城】制作商品分类列表页
qq_44759710的博客
05-14 1364
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .background { background-image: url("images/list_bg.gif"); background-repeat: no-repeat; background-size: 100% au
贵美商城总结
l3579的博客
09-25 3141
HTML总结 从9月15日开始到昨天23号，用HTML写了一个简单的项目，贵美商城的网页。 总共8个页面，每个页面的头和尾用标签插入到每个页面。 当点击首尾的超链接进行网页跳转需要在超链接后面target="_blank"。 <ul> <li><a href="../boss.html" target="view_window">首页</a></li> <li><a href="../list_of_goods
贵美商城网页HTML代码
08-16
【贵美商城网页HTML代码】是北大青鸟培训机构1期项目的一部分，主要涵盖了网页构建的基础知识，特别是针对电商网站的设计和实现。HTML（HyperText Markup Language）是网页内容的基石，用于定义页面结构和内容。在这...
HTML5+CSS3网页设计-第七章 浮动.pptx
12-21
本资源主要聚焦于HTML5和CSS3在网页设计中的应用，特别是关于浮动和排版技术的学习。第七章详细介绍了浮动物体的概念，包括块元素（如`<h1>`至`<div>`，以及列表）和行内元素（如`<span>`、`<a>`等）的特性和区别。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值