web前端品优购列表页制作

最新推荐文章于 2023-02-01 23:08:16 发布

phoebemeng

最新推荐文章于 2023-02-01 23:08:16 发布

阅读量683

点赞数

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/phoebemeng/article/details/125642639

版权

本文介绍了如何制作品优购的Web前端列表页，包括准备工作，如创建list.html，复制并引入header和footer，以及新建list.css样式表。接着详细讲解了header模块中添加秒杀功能，nav导航模块的调整，以及sk_container列表主体模块的css样式设计。

摘要由CSDN通过智能技术生成

准备工作

1.这是新的页面,需要新建页面文件list.html
2.头部和底部跟首页界面的几乎一致,要复制过来
3.头部和底部的样式(common.css)表不要忘记引入到list.html中
4.新建专门的list.css样式表

header模块添加秒杀

在logo盒子后添加秒杀sk盒子
在这里插入图片描述

	<header class="header w">
			<div class="logo">
				<h1><a href="index.html" title="品优购商城">品优购商城</a></h1>
			</div>
			<!-- 添加秒杀部分 -->
			<div class="sk">
				<img src="images/miaosha.jpg" alt="">
			</div>
			.........

css样式

.header .sk{
	position: absolute;
	left: 190px;
	top: 40px;
	height: 32px;
	padding-left: 14px;
	border-left:1px solid #b1191a ;
}

nav导航模块

跟首页的导航模块相似,稍微修改下

<nav class="nav">
			<div class="w">
				<div class="sk_list">  
					<ul>
						<li><a href="#">品优秒杀</a></li>
						<li><a href="#">即将售罄</a></li>
						<li><a h