Web前端_项目实践02_ins北欧风多肉植本店主网页(纯HTML+CSS静态页面)

众所周知,学前端只看不写等于“我没学过”,正巧,我这儿有份儿合适的练手素材,纯HTML+CSS实现,够简单,页面比某些书本上的陈旧素材好看,有兴趣的话,一起来尝试吧。

先上完整效果图:

ins风网站
禁欲灰撞上优雅白,是不是有种很火的北欧ins风感觉在这里插入图片描述

HTML代码:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/mycss.css" />
	</head>

	<body>
		<div class="body">
			<header>
				<span class="span1">彼岸の花</span>
				<span class="span2">&nbsp;偶安一隅&nbsp;静静生活</span>
				<hr class="hr" />
			</header>
			<div class="content">
				<div class="content_top">商品分类&nbsp;></div>
				<img src="img/banner.jpg" alt="pic1" class="img01" />
				<div class="content_wenzi_1">我喜欢一些花,静静地开放,从不声张。小小的花朵,有着异样的芬芳...</div>
				<div class="content_wenzi_2">I love flowers, quietly open, never quiet. Little flowers, with the same fragrance...</div>
				<img src="img/bestseller1.png" alt="pic2" class="img02" />
				<img src="img/bestseller2.jpg" alt="pic3" class="img03" />
				<div class="content_end">
					<div>&nbsp;&nbsp;&nbsp;多肉植物是指植物营养器官肥大的高等植物,通常具有根、茎、叶三种营养器官和</div>
					<div>花、果实、种子三种繁殖器官。在园艺上,又称肉质植物或多肉花卉,但以多肉植物</div>
					<div>这个名称最为常用。</div>
					<div>&nbsp;&nbsp;&nbsp;<span class="text_under">全世界共有多肉植物一万余种</span>。它们绝大多数属于高等植物(绝大多数是被子植</div>
					<div>物)。植物上隶属几十个科。个别专家认为有67个科中含有多肉植物,但大多数专家</div>
					<div>认为只有50余科。</div>
				</div>
			</div>
			<footer>
				<div class="nav">
					<span>品质保障&nbsp;|</span>
					<span>七天无理由退换货&nbsp;|</span>
					<span>特色服务体验&nbsp;|</span>
					<span>帮助中心&nbsp;</span>
				</div>
				<div class="footer_dianzhang">
					<img src="img/tuxiang.gif" alt="pic" class="img04" />
					<div class="footer_wenzi">
						<div class="wenzi_1">店长:Michael_唐僧</div>
						<i><div class="wenzi_2">飞舞的花儿像一首诗?写着秋天的心事?带着思念?轻轻?飘向大地?</div></i>
						<i><div class="wenzi_3">也许这只是秋季的一场游戏?</div></i>
					</div>
				</div>
			</footer>
		</div>
	</body>

</html>

CSS部分代码:

body {
	background-color: #ededed;
}

.body {
	width: 980px;
	margin: 0 auto;
}

header {
	text-align: center;
}

header span {
	font-family: "微软雅黑";
	color: #a5a5a5;
}

header .span1 {
	font-size: 24px;
}

header .span2 {
	font-size: 10px;
}

.hr {
	margin-top: 20px;
	color: #A5A5A5;
}

.content_top {
	font-family: "微软雅黑";
	color: #a5a5a5;
}

.img01 {
	margin-top: 10px;
}

.content_wenzi_1 {
	font-family: "楷体";
	color: #a5a5a5;
	width: 520px;
	margin: 0 auto;
}

.content_wenzi_2 {
	font-family: "Calibri";
	color: #a5a5a5;
	width: 600px;
	margin: 0 auto;
	font-size: 18px;
}

.img02 {
	width: 600px;
	margin-left: 190px;
	margin-top: 20px;
}

.img03 {
	width: 600px;
	margin-left: 190px;
	margin-top: 20px;
}

.content_end {
	width: 600px;
	margin: 0 auto;
}

.content_end div {
	font-family: "楷体";
	color: #a5a5a5;
	margin-top: 10px;
}

.nav {
	width: 410px;
	margin: 0 auto;
	margin-top: 20px;
	font-family: "微软雅黑";
	color: #a5a5a5;
	font-weight: 700;
}

.footer_dianzhang {
	width: 600px;
	margin: 0 auto;
	margin-top: 20px;
}

.footer_wenzi {
	font-family: "微软雅黑";
	color: #a5a5a5;
}

.footer_wenzi .wenzi_1 {
	position: relative;
	top: -92px;
	left: 130px;
}

.footer_wenzi .wenzi_2 {
	font-family: "calisto mt";
	position: relative;
	top: -78px;
	left: 130px;
	font-size: 10px;
}

.footer_wenzi .wenzi_3 {
	font-family: "calisto mt";
	position: relative;
	top: -78px;
	left: 130px;
	font-size: 14px;
}

好了,这就是全部内容了,完整的图片、代码等素材,都在下面这个链接里,链接:https://pan.baidu.com/s/1ETIUqKzqFeSgm2p6irgaAQ
提取码:2ng7 如有需要,请自行下载。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

夏2同学

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

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

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

打赏作者

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

抵扣说明:

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

余额充值