第一个项目：静态购物网站项目制作

最新推荐文章于 2023-12-27 22:52:09 发布

小甜甜的下雨天

最新推荐文章于 2023-12-27 22:52:09 发布

阅读量1k

点赞数 1

分类专栏：初来乍到文章标签：第一个项目商品购物 html 静态网页布局

本文链接：https://blog.csdn.net/qq_41580674/article/details/98192323

版权

初来乍到专栏收录该内容

3 篇文章 0 订阅

订阅专栏

静态网页制作

第一个月的学习基本结束，对于一些CSS样式，html的基础，我已经基本掌握，就这些基础上去进行一个静态网页项目的规划，虽然很简单，但是是我学习html5的一个小里程碑。
屁话不多，上代码：

<!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" />
		<link rel="stylesheet" type="text/css" href="css/guomeishouye.css" />
		<link rel="stylesheet" type="text/css" href="css/resrt.css" />
	</head>
	<body>
		<a class="shouye" href="http://127.0.0.1:8848/Guo/guomeizaixian.html"></a>
		<div class="warp">
			<div class="top clearfix">
				<img class="top_one" src="img/国美logo.png">
				<img class="top_two" src="img/wap-suo.png">
				<a href="denglu.html">登录</a>
				<input type="text" placeholder="拉菲"/>
			</div>
			<a href="">
				<img class="warp_first" src="img/Wap-top.png">
			</a>
			<a class="sousouyemian" href="http://127.0.0.1:8848/Guo/sousuo.html"></a>
			<div class="warp_daohang">
				<div>
					<a href="daily recommendation .html">
						<img style="width: 1.5rem;" src="img/wap-1.png">
						<span>每日推荐</span>
					</a>
				</div>
				<div>
					<a href="">
						<img style="width: 1.4rem;" src="img/wap-2.png">
						<span>限时闪购</span>
					</a>
				</div>
				<div>
					<a href="">
						<img style="width: 1.8rem;" src="img/wap-3.png">
						<span style="padding-top: 0.4rem;">新品上架</span>
					</a>
				</div>
				<div>
					<a href="">
						<img style="width: 1.755rem;" src="img/wap-4.png">
						<span style="padding-top: 0.3rem;">热销推荐</span>
					</a>
				</div>
			</div>
			<div class="warp_huodong clearfix">
				<span></span>
				活动精选
				<span></span>
				<a href="">
					<div class="warp_huodong_meijiu">
						
						<p>国美酒节</p>
						<p>意大利名酒</p>
						<p>19.9元秒</p>
						<img src="img/jiuping.png" >
					</div>
				</a>
				<a href="">
					<div class="warp_huodong_maotai">
						<img src="img/wap-6.png" >
						<p class="warp_huodong_maotai_p1">茅台红色限量版</p>
						<p class="warp_huodong_maotai_p2">799元</p>
					</div>
				</a>	
			</div>
			<div class="warp_qingxin">
				<a href="">
					<div class="warp_qingxin_fist">
						<img src="img/wap-7.png" >
						<div style="border: 0.05rem solid #FFFFFF;">
							<p>LES</p>
							<p>CLANS</p>
							<p>清新 纯净</p>
						</div>
					</div>
				</a>
				<a href="">
					<div class="warp_qingxin_fist">
						<img src="img/wap-8.png" >
						<div>
							<p>LES</p>
							<p>CLANS</p>
							<p>清新 纯净</p>
						</div>
					</div>
				</a>
				<a href="">
					<div class="warp_qingxin_fist">
						<img src="img/wap-9.png" >
						<div>
							<p>LAREINA</p>
							<p>艺术家最爱</p>
						</div>
					</div>
				</a>
				<a href="">
					<div class="warp_qingxin_fist">
						<img src="img/wap-10.png" >
						<div>
							<p>FRENCH</p>
							<p>法兰西之夜</p>
						</div>
					</div>
				</a>
				<a href="">
					<div class="warp_qingxin_fist">
						<img src="img/wap-7.png" >
						<div>
							<p>LES</p>
							<p>CLANS</p>
							<p>清新 纯净</p>
						</div>
					</div>
				</a>
			</div>
			<div class="warp_weini clearfix">
				<span></span>
				为您推荐
				<span></span>
				<a href="">
				<div class="warp_weini_four">
					<img src="img/wap-11.png" >
					<p>澳洲原瓶进口红酒洛神山庄干...</p>
					<p>￥318.00</p>
				</div>
				</a>
				<a href="">
				<div class="warp_weini_four">
					<img src="img/wap-12.png" >
					<p>澳大利亚原装进口红酒整箱...</p>
					<p>￥278.00</p>
				</div>
				</a>
				<a href="">
				<div class="warp_weini_four">
					<img src="img/wap-11.png" >
					<p>澳洲原瓶进口红酒洛神山庄干...</p>
					<p>￥318.00</p>
				</div>
				</a>
				<a href="">
				<div class="warp_weini_four">
					<img src="img/wap-12.png" >
					<p>澳大利亚原装进口红酒整箱...</p>
					<p>￥278.00</p>
				</div>
				</a>
			</div>
		</div>
		<ul class="cellar_fixation">
			<li class="cellar_fixation_1"><a href="guomeizaixian.html"><img src="img/shouyebai.png" ></a></li>
			<li class="cellar_fixation_2"><a href="fenlei.html"><img src="img/分类.png" ></a></li>
			<li class="cellar_fixation_3"><a href="gouwuche.html"><img src="img/购物车.png"></a></li>
			<li class="cellar_fixation_4"><a href="wodejiujiao.html"><img src="img/wode.png" ></a></li>
		</ul>
	</body>
</html>

CSS样式

html,body {
	width: 100%;
	height: 100%;
}
html {
	font-size: 20px;
}
.warp {
	background-color: rgb(249,249,249);
	padding-bottom: 85px;
}
.top {
	width: 18.75rem;
	height: 3.175rem;
	background-color: rgb(192,27,55);
	position: relative;
	z-index: 100;
}
.top_one {
	width: 0.775rem;
	position: absolute;
	top: 0.975rem;
	left: 0.65rem;
}
.top_two {
	width: 13.5rem;
	position: absolute;
	top: 1.4rem;
	left: 2.5rem;
}
.top>a {
	color: #ffffff;
	font-size: 0.6rem;
	font-weight: normal;
	font-family: SYXihei;
	position: absolute;
	top: 1.775rem;
	left: 16.925rem;
	display: inline-block;
	width: 1.2rem;
	height: 0.55rem;
	line-height: 0.5rem;
}

.warp_first {
	width: 18.75rem;
}
.warp_daohang {
	width: 18.75rem;
	height: 4rem;
	position: relative;
}
.warp_daohang>div {
	width: 2.9rem;
	height: 2.9rem;
	background-color: #FFFFFF;
	border-radius: 1.45rem;
}
.warp_daohang>div:nth-child(1) {
	position: absolute;
	top: 0.85rem;
	left: 1.425rem;
}
.warp_daohang>div:nth-child(2) {
	position: absolute;
	top: 0.85rem;
	left: 5.775rem;
}
.warp_daohang>div:nth-child(3) {
	position: absolute;
	top: 0.85rem;
	left: 10.175rem;
}
.top>input {
        border: 0; /* // 去除未选中状态边框 */
        outline: none;/* // 去除选中状态边框 */
        background-color: rgba(0, 0, 0, 0);/* // 透明背景 */
		position: absolute;
		top: 1.775rem;
		left: 4.35rem;
		font-size: 0.75rem;
}
.warp_daohang>div:nth-child(4) {
	position: absolute;
	top: 0.85rem;
	left: 14.55rem;
}
.warp_daohang img {
	margin-top: 0.5rem;
	width: 1.7rem;
}
.warp_daohang a span {
	display: inline-block;
	font-size: 0.5rem;
	color: #333333;
	font-family: SYXihei;
	line-height: 0.6rem;
}
.warp_huodong {
	margin-top: 0.5srem;
}
.warp_huodong>span {
	display: inline-block;
	width: 6.15rem;
	border: 0.02rem solid #cccccc;
	margin: 0.25rem 0.6rem;
}
.warp_huodong {
	color: #666666;
	font-size: 0.7rem;
	margin-top: 1rem;
}
.warp_huodong_meijiu {
	width: 9.825rem;
	height: 5rem;
	background-color: #ffffff;
	margin-left:0.65rem;
	position: relative;
	margin-top: 1rem;
	padding-left: 1.125rem;
	float: left;
}
.warp_huodong_meijiu>p:nth-child(1) {
	font-size: 1rem;
	color: #000000;
	padding-top: 1.15rem;
	
	text-align: left;
}
.warp_huodong_meijiu>p:nth-child(2) {
	height: 0.95rem;
	font-size: 0.6rem;
	line-height: 0.4rem;
	color: #000000;
	text-align: left;
	font-family: PingFangSC-Light;
}
.warp_huodong_meijiu>p:nth-child(3) {
	height: 0.95rem;
	font-size: 0.764rem;
	line-height: 0.5rem;
	color: #e43643;
	text-align: left;
	font-family: PingFangSC-Light;
}
.warp_huodong_meijiu>img {
	width: 6.4rem;
	position: absolute;
	top: -1rem;
	right: 0;
}
.warp_huodong_maotai {
	width: 6.275rem;
	height: 5rem;
	background-color: #FFFFFF;
	float: right;
	margin-right: 0.65rem;
	position: relative;
	margin-top: 1rem;
}
.warp_huodong_maotai>img {
	width: 2.8rem;
	height: 3.05rem;
}
.warp_huodong_maotai_p1 {
	font-size: 0.45rem;
	font-family: PingFangSC-Light;
	color: #000000;
	margin-top: 0.25rem;
}
.warp_huodong_maotai_p2 {
	font-size: 0.5rem;
	font-family: PingFangSC-Medium;
	color: #E43643;
	margin-top: 0.225rem;
}
.warp_qingxin img {
	width: 17.5rem;
	margin-top: 0.275rem;
}
.warp_qingxin_fist {
	position: relative;
}
.warp_qingxin_fist>div {
	width: 4.45rem;
	height: 3rem;
	background-color: rgba(0,0,0,0);
	text-align: left;
	position: absolute;
	top: 0.8rem;
	left: 1.8rem;
	color: #FFFFFF;
	padding-top: 0.55rem;
	padding-left: 0.475rem;
}
.warp_weini {
	margin-top: 1rem;
	color: #666666;
	font-size: 0.7rem;
}
.warp_weini>span {
	display: inline-block;
	width: 6.15rem;
	border: 0.02rem solid #cccccc;
	margin: 0.25rem 0.6rem;
}
.warp_weini_four {
	width: 8.6rem;
	height: 8.7rem; 
	float: left;
	background-color: #FFFFFF;
	margin-left: 0.6rem;
	margin-top: 0.275rem;
}
.warp_weini_four>img {
	width: 5.45rem;
}
.last {
	width: 18.75rem;
	background-color: #f9f9f9;
	position: fixed;
	bottom: 0;
	left: 0;
	border-top: 1xp solid red;
}
.last img {
	padding: 0.35rem 1rem 0.3rem;
}
.sousouyemian {
	width: 2rem;
	height: 2rem;
	display: inline-block;
	position: absolute;
	top: 1rem;
	left: 2.3rem;
	z-index: 1000;
}
.cellar_fixation {
	width: 18.75rem;
	background-color: #FFFFFF;
	position: fixed;
	bottom: 0;
	z-index: 4;
}
.cellar_fixation>li {
	float: left;
	margin: 0.6rem 1.55rem;
}
.cellar_fixation_1 img {
	width: 1.425rem;
}
.cellar_fixation_2 img {
	width: 1.425rem;
}
.cellar_fixation_3 img {
	width: 1.85rem;
}
.cellar_fixation_4 img {
	width: 1.2rem;
}
@media screen and (min-width:411px) {
	html {
		font-size: 21.92px;
	}
}
@media screen and (min-width:414px) {
	html {
		font-size: 22.08px;
	}
} 
@media screen and (min-width:414px) {
	html {
		font-size: 22.08px;
	}
} 
@media screen and (min-width:768px) {
	html {
		font-size: 40.96px;
	}
} 
@media screen and (min-width:1024px) {
	html {
		font-size: 54.61333px;
	}
} 
@media screen and (min-width:1025px) and (max-width:3500px) {
	html {
		font-size: 105px;
	}
}

这个首页是我项目中的一个初始页面，其中跳转都已经实现，具体项目就去这个网页能直接看到我的全部项目
静态购物网页
在做项目之前我发现了一个很有用的reset，在做移动端的时候可以用上这里我直接用代码带上去吧：

body {
font-family:arial,helvetica,sans-serif;
font-size:13px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.4;
text-align:center;
}
body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {
margin:0;
padding:0;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
table {
font-size:inherit;
}
input, select {
font-family:arial,helvetica,clean,sans-serif;
font-size:100%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
.shouye {
	display: inline-block;
	width: 3rem;
	height: 3rem;
	position: absolute;
	top: 0;
	left: 0;
}
button {
overflow:visible;
}
th, em, strong, b, address, cite {
font-style:normal;
font-weight:normal;
}
li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
img, fieldset {
border:0 none;
}
ins {
text-decoration:none;
}
*{
	margin: 0;
	padding: 0;
}
/* 将a标签去下划线,颜色改为黑色 */
a {
	text-decoration: none;
	color: rgb(0,0,0);
}
/* 将无需表格黑点去掉 */
ul {
	list-style: none;
}
/* 设置img上部对齐 */
img {
	vertical-align: top;
}
h2 {
	text-decoration: none;
	color: rgb(0,0,0);
	font-weight: normal;
	padding-bottom: 20px;
}
.clearfix:after {
	content: "";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
}
 input {
       
        border: 0;  
        outline: none; 
        background-color: rgba(0, 0, 0, 0);
		}
		@media screen and (min-width:411px) {
			html {
				font-size: 21.92px;
			}
		}
		@media screen and (min-width:414px) {
			html {
				font-size: 22.08px;
			}
		} 
		@media screen and (min-width:414px) {
			html {
				font-size: 22.08px;
			}
		} 
		@media screen and (min-width:768px) {
			html {
				font-size: 40.96px;
			}
		} 
		@media screen and (min-width:1024px) {
			html {
				font-size: 54.61333px;
			}
		} 
		@media screen and (min-width:1025px) and (max-width:3500px) {
			html {
				font-size: 105px;
			}
		}

这是我刚完成的一个项目，绝对不是最好的，我已经在路上，前往更广泛的大陆，去学习我喜欢的东西，努力！奋斗！

小甜甜的下雨天

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
第一个项目：静态购物网站项目制作

静态网页制作第一个月的学习基本结束，对于一些CSS样式，html的基础，我已经基本掌握，就这些基础上去进行一个静态网页项目的规划，虽然很简单，但是是我学习html5的一个小里程碑。屁话不多，上代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>国...
复制链接

扫一扫