HTML+CSS大作业HTML5期末大作业`生活类购物商城网站设计——生活类购物商城模板(2页)

最新推荐文章于 2024-06-14 14:22:01 发布
最新推荐文章于 2024-06-14 14:22:01 发布
阅读量729 收藏 6
点赞数
分类专栏： web大学生个人网站作业模 HTML5期末大作业 html网页设计作业 文章标签： css html html5 商城 购物
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_524614081/article/details/122349290
版权

HTML5期末大作业

文章目录

一、作品展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、文件目录

在这里插入图片描述

三、代码实现


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>列表页</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<link href="css/list.css" rel="stylesheet" >
	<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
	<div class="content clear">
		<div class="left">
			<div class="sidebar">
				<h2>全部搜索分类</h2>
				<dl class="category">
					<dt><i class="tree"></i>男装</dt>
					<dd>
						<ul class="sub">
							<li><a href="">男士T恤</a></li>
							<li><a href="">男士T恤</a></li>
							<li><a href="">男士T恤</a></li>
							<li><a href="">男士T恤</a></li>
						</ul>
					</dd>
				</dl>
			</div>
			<div class="sidebar">
				<h2>店连店热卖</h2>
				<ul class="hotbox">
					<li class="hotlist">
						<div class="hotpic"><a href="#"><img width="150" src="images/default_goods_image.gif_small.gif"></a></div>
						<div class="hotinfo">
							<div class="hot-name"><a href="#">一尘佛珠印度老料高油密小叶紫檀手串手链佛珠男女款</a></div>
							<div class="hot-price"><a href="#"><i>¥</i><span>129.90</span></a></div>
						</div>
					</li>
					<li class="hotlist">
						<div class="hotpic"><a href="#"><img width="150" src="images/default_goods_image.gif_small.gif"></a></div>
						<div class="hotinfo">
							<div class="hot-name"><a href="#">一尘佛珠印度老料高油密小叶紫檀手串手链佛珠男女款</a></div>
							<div class="hot-price"><a href="#"><i>¥</i><span>129.90</span></a></div>
						</div>
					</li>
				</ul>				
			</div>
		</div>
		<div class="right">
			<div class="sidebar rec">
				<h2>今日推荐</h2>
				<div class="rec_goods clear">
					<ul>
						<li style="padding-left:0;">
							<dl>
								<dt class="goodname">
									<a href="">女童公主裙纱裙 儿童礼服连衣裙蛋糕裙 2015新款童装花童蓬蓬裙子</a>
								</dt>
								<dd class="goodpic"><a href="#"><img src="images/default_goods_image.gif_small.gif"></a></dd>
								<dd class="goodprice"><em>59</em></dd>
							</dl>
						</li>
						<li>
							<dl>
								<dt class="goodname">
									<a href="">女童公主裙纱裙 儿童礼服连衣裙蛋糕裙 2015新款童装花童蓬蓬裙子</a>
								</dt>
								<dd class="goodpic"><a href="#"><img src="images/default_goods_image.gif_small.gif"></a></dd>
								<dd class="goodprice"><em>59</em></dd>
							</dl>
						</li>
						<li>
							<dl>
								<dt class="goodname">
									<a href="">女童公主裙纱裙 儿童礼服连衣裙蛋糕裙 2015新款童装花童蓬蓬裙子</a>
								</dt>
								<dd class="goodpic"><a href=
最低0.47元/天 解锁文章
优质内容贡献
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
最全的商城网页模板html
04-19
有登录，注册，个人中心，收藏夹，购物车，订单详情，待付款，售后，商品详情等等大大小小三十几个页面
基于html5电商购物平台网站的设计 毕业论文.docx
05-14
基于html5电商购物平台网站的设计 毕业论文.docx
大学生HTML期末大作业——HTML+CSS+JavaScript旅游网站
最新发布
...
06-14 1627
HTML+CSS+JS【旅游网站】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
前端开发_HTML5_模块化-图文混排效果实现
u013185175的博客
12-22 3252
图文混排效果实现 1.引入 上一次课程，我们使用栅格布局和ul-li标签实现了简单的导航栏目和菜单栏目的实现，接下来我们使用栅格布局和定义列表标签实现简单的图文混排的效果，这一个效果再电商项目或图片显示较多的项目中应用较为广泛。 2.图文混排效果实现 我们再实现效果的时候还是按照上一次课程讲解的操作步骤一样。 3.代码以及实现效果 代码实现以及效果截图 <meta name="viewport" content="width=device-width,initial-scal...
分享7款颜色的CSS表格样式美化网页表格用户体验
热门推荐
shenxiaomo1688的博客
06-03 2万+
转载自：https://www.laozuo.org/4631.html 今天老左在浏览几个海外前端博客时候，看到以下7款颜色CSS表格样式的整理还是比较好的，尤其是需要在网页中添加表格时候，看似简单的样式，但是在需要使用的时候就直接复制，节省很多时间。 第一种： CSS样式代码部分： /* Border styles */ #table-1 thead, #table-1 tr...
html使用图片、列表和CSS实现图文横排_具有滚动效果
weixin_45099830的博客
11-09 2743
这是大学网页设计与制作（html5+csss3+js）课程中使用图片、列表和CSS实现图文横排_具有滚动效果。/* 实现 div 内容在浏览器窗口中水平居中 *//* 将块级元素的li修改为行内块元素 *//*ul默认的上、下边距为12px*//*ul的左内边距默认为40px*//* 取消列表项前面的标记符号 */
Web App 开发----图文表格
m0_58760840的博客
03-31 237
1.图文表格---默认效果 <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&g
大二学生HTML期末大作业——HTML+CSS+JavaScript食品网上超市购物商城网页与制作
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
期末前端web大作业——HTML+CSS+JavaScript仿京东购物商城网页制作(7md
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
简单的网页制作期末作业——HTML+CSS+JavaScript小礼品购物商城网站
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
大二Web课程设计期末考试——基于HTML+CSS+JavaScript+jQuery电商类化妆品购物商城
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
基于HTML电商购物项目的设计与实现——html+css+javascript+jquery+bootstarp响应式图书商城
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
2020年Web前端工程师需要掌握的10款H5开发工具推荐
weixin_43703144的博客
12-01 866
正所谓“工欲善其事必先利其器”，一名合格的Web前端开发工程师自然会用到不少能使其工作高效的工具。下面，就给大家分享Web前端开发需要掌握的10款H5开发工具！ 1、Lungo Lungo是一款基于HTML5的开发框架，专为想要设计、构建和共享跨设备应用的开发者而准备。支持开放的Web标准，如HTML5、CSS3和JavaScript；支持手机、电视以及桌面设备。拥有强大的JavaScript API：开发WebAPP应用有很多种方式，而不是一味的优化。Lungo提供了一个强大的API，这样你可以完全掌控自
echarts 一个dom重复生成图表
Weather_的博客
09-18 752
清空之前的图表 var myChart = null; document.getElementById(name).innerHTML = ""; document.getElementById(name).removeAttribute("_echarts_instance_"); myChart = echarts.init(document.getElementById(name));
html表格设置图片主题,9个经典华丽的HTML5图表应用
weixin_33279929的博客
05-31 242
在前面的文章中，我们已经有分享过8个很不错的Java图表应用，但是提及图表应用，用HTML5和jQuery制作的网页图表更加方便和使用，而且无论是功能还是外观，定制起来都比较灵活。本文就向大家分享9个经典华丽的HTML5图表应用，也许对你的前端开发会有帮助，一起来看看吧。1、超酷HTML5 Canvas图表应用Chart.js今天我们要介绍一款基于HTML5 Canvas的图表应用Chart.js...
html表格内图片填充颜色设置,使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作...
weixin_33743292的博客
06-07 1164
行颜色设置的简便方法昨天我们在《使用HTML添加表格3(间距与颜色)——零基础自学网页制作》中学习了设置单元格以及其中内容的空间间距和背景颜色。其中添加列向单元格背景颜色只需要修改对应的标签中的style属性，而修改行向标签需要修改不同标签中的标签的style属性，这样操作起来就非常的麻烦，那有没有简便的修改行向单元格背景颜色的方法呢？当然有！开发团队给出了这样的组合来解决这个问题，下面让我们详细...
随手记：
weixin_33946020的博客
12-21 247
var num = 1; var str = '1'; var test = 1; test == num //true　相同类型　相同值 test === num //true　相同类型　相同值 test !== num //false test与num类型相同，其值也相同,　非运算肯定是false num == str //true 　把str转换为数字...
html卡片布局样式,基于bootstrap卡片图文列表布局样式
weixin_42099936的博客
06-16 1361
特效描述：基于bootstrap 卡片图文列表 布局样式。bootstrap卡片图文列表布局代码是一款基于jQuery跟Bootstrap实现的3种列表布局样式代码。代码结构1. 引入CSS2. 引入JS3. HTML代码普通的卡片布局Card titleSome quick example text to build on the card title and make up the bulk ...
html5 漂亮的左右布局_图文列表 纯css布局
weixin_39628160的博客
11-29 1439
说说图文列表的布局没错，就是这样简单的布局。分了4列，你会想到什么呢？百分比？还是PX我自己还是喜欢用百分比，不知你们是如何使用。接下来说说我的做法！！顶部的排序，就弄个色块吧。默认|价格|销量|人气这里是列表CSS:.container {width: 1200px;margin: auto;}.sort-warp {height: 40px;margin: 40px 0;background:...
html5期末大作业:商城网页设计——仿京东商城网页端模板(8页面) html+css+javascr
11-17
作为HTML5期末大作业的一部分，我设计了一个商城网页，仿照京东商城的网页端模板，一共设计了8个页面。这个网页是用HTML、CSS和JavaScript来完成的。 首先，我设计了一个主页，用来展示商城的一些热门商品和促销...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值