电商网站学习demo(一)--首页

最新推荐文章于 2024-04-29 23:16:51 发布

意聆

最新推荐文章于 2024-04-29 23:16:51 发布

阅读量861

点赞数

分类专栏： web前端编程学习

本文链接：https://blog.csdn.net/weixin_43836947/article/details/102500571

版权

电商网站学习demo

网页效果

在这里插入图片描述

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>香菇街</title>
		<base target="_blank">
		<link href="https://cdn.bootcss.com/normalize/8.0.1/normalize.min.css" rel="stylesheet" type="text/css"/>
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<link href="css/main.css" rel="stylesheet" type="text/css"/>
	</head>
	<body>
		<div class="top-nav">
			<div class="contanier clear-float">
				<div class="fl">
					<a class="item" href="#">首页</a>
				</div>
				<div class="fr">
					<a class="item" href="#">我的订单</a>
					<a class="item" href="#">收藏夹</a>
					<a class="item" href="#">登录</a>
					<a class="item" href="#">注册</a>				
				</div>
			</div>
		</div>
		<div class="header clear-float">
			<div class="contanier clear-float">
				<div class="logo col-2">香菇街</div>
				<div class="search col-6">
					<input type="text" name="kw" placeholder="请输入您所需要的商品"/>
					<button>搜索</button>
				</div>
				<div class="cart col-2">
					<a href="#">购物车</a>
				</div>
				<div class="hotwords col-6" id="hotwords">
					<a class="specHotWord" href="#">双十一</a>
					<a href="#">母婴好货</a>
					<a href="#">秋装上新</a>
					<a href="#">华为手机</a>
					<a href="#">美味零食</a>
					<a href="#">品质男装</a>
				</div>
				<div></div>
			</div>

		</div>
		<div class="contanier">
			<div class="main-promate clear-float">
				<div class="col-2 cat">
					<a class="item">item / item</a>
					<a

最低0.47元/天解锁文章

意聆

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
电商网站学习demo(一)--首页

电商网站学习demo网页效果HTML代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>香菇街</title> <base target="_blank"> <link href="https://cdn.boo...
复制链接

扫一扫

专栏目录