0基础学web前端第13天:案例页面制作之详情页

壹灵
壹灵
壹灵
35
文章
0
评论
2021年5月3日11:23:31
评论
2,372

0基础学web前端第13天:案例页面制作之详情页

前面学习了首页与列表页的制作,今天我们继续详情面的制作。首先要分析详情页,我们有哪盒子需要写,什么结构并做出说明。详情页那我们也需要新建个html页与css文件,分别命名为detail.html,detail.css。

名称 说明
主体 de_container
面包屑导航 crumb_wrap
产品介绍 product_intro ( introduction介绍)
预览包 preview_wrap(左侧部分)
预览缩略图 preview_img
预览列表 preview_list
左按钮 arrow_prev
右按钮 arrow_next
小图列表 preview_items
产品详细信息区域 itemInfo_wrap (右侧部分)
头部名称 sku_name skull 头骨
新闻 news
摘要 summary
评价 remark
价格摘要 summary_price
配送至 summary_stock
支持 summary_support
选择 choose
选择按钮组 choose_btns
选择数量 choose_amount
减去 reduce
加入购物车 addshopcar
产品细节 product_detail ( detail描述)
左侧边 aside
详细描述 detail

面包屑导航:crumb_wrap

0基础学web前端第13天:案例页面制作之详情页

<!-- 面包屑导航 -->
		<div class="crumb_wrap">
			<a href="#">手机、数码、通讯</a>   
			〉  <a href="#">手机   </a>
			〉  <a href="#">Apple苹果   </a>
			〉  <a href="#">iphone 6S Plus系类</a> 
		</div>

CSS代码:

.crumb_wrap {
	height: 25px;
}
.crumb_wrap a {
	margin-right: 10px;
}

产品介绍模块product_intro,这个模块一个大盒子里面2个子盒子,不需要给高度,因为右侧内容高度不固定。2号盒子是预览区域preview_wrap,需要给宽度给高度,左浮动。3号盒子为产品详细信息区域itemlnfo_wrap,需要给宽度,不要给高度,左侧浮动。

0基础学web前端第13天:案例页面制作之详情页

2号预览区域里又含了2个盒子,1号盒子为图片预览命名为preview_img注意里面的图片最好是下方形。2号盒子是预览列表命名preview_list。

preview_list预览列表,盒子有左右按钮,arrow_prev,arrow_next。我们用定位就可以,中间用ul命名不list_item给宽度然后水平居中。

itemlnfo_wrap产品详细信息区域:

0基础学web前端第13天:案例页面制作之详情页

可以看出是三个盒子,我们把1号盒子命名为sku_name,2号盒子为最新新闻news,3号盒子为产品详细摘要我们命名为summary。详细命名如下:

名称 说明
头部名称 sku_name skull 头骨
新闻 news
摘要 summary
评价 remark
价格摘要 summary_price
促销摘要 summary_promotion
配送至 summary_stock
支持 summary_support
选择 choose
选择版本 choose_version
选择类型 choose_type
选择按钮组 choose_btns
选择数量 choose_amount add 是加的意思
减去 reduce cursor: not-allowed; 禁止符号
加入购物车 addshopcar

产品细节模块product_detail:大盒子里面有2个子盒子不需要给高度,1为左侧命名aside,有宽度,2为右侧命名为detail,有宽度不给高度。

0基础学web前端第13天:案例页面制作之详情页

左侧盒子aside布局:也含了2个盒子,上面tab_list给个高度,里面放ul与li,就是tab栏切换布局。下面的盒子tab_con里面还包含很多的ul.item与上面的tab_list里的li对应。

右侧detail布局:与左侧一样,上面是tab切换栏命名为detail_tab_list,下面放与上面对应的内容命名为detail_tab_con。

<!-- 产品细节模块 product_detail	 -->
		<div class="product_detail clearfix">	
			<!-- aside -->
			<div class="aside fl">
				<div class="tab_list">
					<ul>
						<li class="first_tab ">相关分类</li>
						<li class="second_tab current">推荐品牌</li>
					</ul>
				</div>
				<div class="tab_con">
					
					<ul>
						<li>
							<img src="upload/aside_img.jpg" alt="">
							<h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5>
							<div class="aside_price">¥19</div>
							<a href="#" class="as_addcar">加入购物车</a>
						</li>
						<li>
							<img src="upload/aside_img.jpg" alt="">
							<h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5>
							<div class="aside_price">¥19</div>
							<a href="#" class="as_addcar">加入购物车</a>
						</li>
						<li>
							<img src="upload/aside_img.jpg" alt="">
							<h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5>
							<div class="aside_price">¥19</div>
							<a href="#" class="as_addcar">加入购物车</a>
						</li>
						<li>
							<img src="upload/aside_img.jpg" alt="">
							<h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5>
							<div class="aside_price">¥19</div>
							<a href="#" class="as_addcar">加入购物车</a>
						</li>
						<li>
							<img src="upload/aside_img.jpg" alt="">
							<h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5>
							<div class="aside_price">¥19</div>
							<a href="#" class="as_addcar">加入购物车</a>
						</li>
						<li>
							<img src="upload/aside_img.jpg" alt="">
							<h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5>
							<div class="aside_price">¥19</div>
							<a href="#" class="as_addcar">加入购物车</a>
						</li>
				
				
					</ul>
				</div>
			</div>
			<!-- detail -->
			<div class="detail fr">
				<div class="detail_tab_list">
					<ul>
						<li class="current">商品介绍</li>
						<li>规格与包装</li>
						<li>售后保障</li>
						<li>商品评价(50000)</li>
						<li>手机社区</li>
					</ul>
				</div>
				<div class="detail_tab_con">
					<div class="item">
						<ul class="item_info">
							<li>分辨率:1920*1080(FHD)</li>
							<li>后置摄像头:1200万像素</li>
							<li>前置摄像头:500万像素</li>
							<li>核      数:其他</li>
							<li>频      率:以官网信息为准</li>
							<li>品牌: Apple ♥关注</li>
							<li>商品名称:APPLEiPhone 6s Plus</li>
							<li>商品编号:1861098</li>
							<li>商品毛重:0.51kg</li>
							<li>商品产地:中国大陆</li>
							<li>热点:指纹识别,Apple Pay,金属机身,拍照神器</li>
							<li>系统:苹果(IOS)</li>
							<li>像素:1000-1600万</li>
							<li>机身内存:64GB</li>
						</ul>
						<p> 
							<a href="#" class="more">查看更多参数</a>
						</p>
						<img src="upload/detail_img1.jpg" alt="">
						<img src="upload/detail_img2.jpg" alt="">
						<img src="upload/detail_img3.jpg" alt="">
					</div>
					<!-- 
					<div class="item">规格与包装</div>
					<div class="item">售后保障</div> 
					-->
				</div>
			</div>
		</div>

CSS样式 :

.preview_wrap {
	width: 400px;
	height: 590px;
}
.preview_img {
	height: 398px;
	border: 1px solid #ccc;
}
.preview_list {
	position: relative;
	height: 60px;
	margin-top: 60px;
}
.list_item {
	width: 320px;
	height: 60px;
	margin: 0 auto;
}
.list_item li {
	float: left;
	width: 56px;
	height: 56px;
	border: 2px solid transparent;
	margin: 0 2px;
}
.list_item li.current {
	border-color: #c81623;
}
.arrow_prev,
.arrow_next {
	position: absolute;
	top: 15px;
	width: 22px;
	height: 32px;
	background-color: purple;
}
.arrow_prev {
	left: 0;
	background: url(../img/arrow-prev.png) no-repeat;
}
.arrow_next {
	right: 0;
	background: url(../img/arrow-next.png) no-repeat;
}
.itemInfo_wrap {
	width: 718px;
}
.sku_name {
	height: 30px;
	font-size: 16px;
	font-weight: 700;
}
.news {
	height: 32px;
	color: #e12228;
}
.summary dl {
	overflow: hidden;
}
.summary dt,
.summary dd {
	float: left;
}
.summary dt {
	width: 60px;
	padding-left: 10px;
	line-height: 36px;
}
.summary_price ,
.summary_promotion {
	position: relative;
	padding: 10px 0;
	background-color: #fee9eb;
}
.price {
	font-size: 24px;
	color: #e12228;
}
.summary_price a {
	color: #c81623;
}
.remark {
	position: absolute;
	right: 10px;
	top: 20px;
}
.summary_promotion {
	padding-top: 0;
}
.summary_promotion dd {
	width: 450px;
	line-height: 36px;
}
.summary_promotion em {
	display: inline-block;
	width: 40px;
	height: 22px;
	background-color: #c81623;
	text-align: center;
	line-height: 22px;
	color: #fff;
}
.summary_support dd {
	line-height: 36px;
}
.choose_color a {
	display: inline-block;
	width: 80px;
	height: 41px;
	background-color: #f7f7f7;
	border: 1px solid #ededed;
	text-align: center;
	line-height: 41px;
}
.summary a.current {
	border-color: #c81623;
}
.choose_version  {
	margin: 10px 0;
}
.choose_version a,
.choose_type a {
	display: inline-block;
	height: 32px;
	padding: 0 12px;
	background-color: #f7f7f7;
	border: 1px solid #ededed;
	text-align: center;
	line-height: 32px;
}
.choose_btns {
	margin-top: 20px;
}
.choose_amount {
	position: relative;
	float: left;
	width: 50px;
	height: 46px;
	background-color: pink;
}
.choose_amount input {
	width: 33px;
	height: 44px;
	border: 1px solid #ccc;
	text-align: center;
}
.add,
.reduce {
	position: absolute;
	right: 0;
	width: 15px;
	height: 22px;
	border: 1px solid #ccc;
	background-color: #f1f1f1;
	text-align: center;
	line-height: 22px;
}
.add {
	top: 0;
	
}
.reduce {
	bottom: 0;
	/*禁止鼠标样式*/
	cursor: not-allowed;   /* pointer  小手  move  移动  */
}
.addcar {
	float: left;
	width: 142px;
	height: 46px;
	background-color: #c81623;
	text-align: center;
	line-height: 46px;
	font-size: 18px;
	color: #fff;
	margin-left: 10px;
	font-weight: 700;
}
.product_detail {
	margin-bottom: 50px;
}
.aside {
	width: 208px;
	border: 1px solid #ccc;
}
.tab_list {
	overflow: hidden;
	height: 34px;
}
/*把背景颜色 底边框都给 li*/
.tab_list li {
	float: left;
	background-color: #f1f1f1;
	border-bottom: 1px solid #ccc;
	height: 33px;
	text-align: center;
	line-height: 33px;
}
/*鼠标单击 li 变化样式   背景变白色 去掉下边框 文字变颜色*/
.tab_list .current {
	background-color: #fff;
	border-bottom: 0;
	color: red;
}
.first_tab {
	width: 104px;
}
.second_tab {
	width: 103px;
	border-left: 1px solid #ccc;
}
.tab_con {
	padding: 0 10px;
}
.tab_con li {
	border-bottom: 1px solid #ccc;
}
.tab_con li h5 {
	/*超出的文字省略号显示*/
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 400;
}
.aside_price {
	font-weight: 700;
	margin: 10px 0;
}
.as_addcar {
	display: block;
	width: 88px;
	height: 26px;
	border: 1px solid #ccc;
	background-color: #f7f7f7;
	margin: 10px auto;
	text-align: center;
	line-height: 26px;
}
.detail {
	width: 978px;
}
.detail_tab_list {
	height: 39px;
	border: 1px solid #ccc;
	background-color: #f1f1f1;
}
.detail_tab_list li {
	float: left;
	height: 39px;
	line-height: 39px;
	padding: 0 20px;
	text-align: center;
	cursor: pointer;
}
.detail_tab_list .current {
	background-color: #c81623;
	color: #fff;
}
.item_info {
	padding: 20px 0 0 20px;
}
.item_info li {
	line-height: 22px;
}
.more {
	float: right;
	font-weight: 700;
	font-family: 'icomoon';
}

最后一个页面的制作:注册页

壹灵
  • 本文由 发表于 2021年5月3日11:23:31
  • 转载请务必保留本文链接:https://www.1ling.net/work/94.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: