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

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

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';
}

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

新建register.html与register.css两个文件。

注册页面命名:

名称 说明
注册专区 registerarea
注册内容 reg-form
错误的 error
成功的 success
默认的 default

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

头部与尾部加上注册内容。

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册页面</title>
	<!-- 初始化css -->
	<link rel="stylesheet" href="css/base.css">
	<!-- register css文件 -->
	<link rel="stylesheet" href="css/register.css">
</head>
<body>
	<div class="w">
		<!-- header -->
		<div class="header">
			<div class="logo">
				<a href="index.html">
				   <img src="img/logo.png" alt="">
				</a>
			</div>
		</div>
		<!-- registerarea -->
		<div class="registerarea">
			<h3>
				注册新用户
				<em>
					我有账号,去<a href="login.html">登陆</a>
				</em>
			</h3>
			<div class="reg_form">
				
			    <form action="demo.php">
			    	<ul>
					<li>
						<label for="tel">手机号:</label>
						<input type="text" class="inp" id="tel">
						<span class="error">		
							<i class="error_icon"></i>
						手机号码格式不正确,请从新输入  
						</span>
					</li>
					<li>
						<label for="">短信验证码:</label>
						<input type="text" class="inp">
					
					</li>
					<li>
						<label for="">登陆密码:</label>
						<input type="text" class="inp">
						<span class="success">		
							<i class="success_icon"></i>
						恭喜您输入正确  
						</span>
					</li>
					<li class="safe">
						安全程度 
						<em class="ruo">弱</em>
						<em class="zhong">中</em>
						<em class="qiang">强</em>	
					</li>

					<li>
						<label for="">确认密码:</label>
						<input type="text" class="inp">
						<span class="success" >		
							<i class="success_icon"></i>
						恭喜您输入正确  
						</span>
					</li>
					<li class="agree">  

					  <input type="checkbox" >同意协议并注册
					  <a href="#">《知果果用户协议》</a>
					</li>
					<li>
						<input type="submit" value="完成注册" class="over">
					</li>
				</ul>
			    </form>
				
			</div>
		</div>
		<div class="footer">
			<p class="links">
				关于我们  |  联系我们  |  联系客服  |  商家入驻  |  营销中心  |  手机品优购  |  友情链接  |  销售联盟  |  品优购社区  |  品优购公益  |  English Site  |  Contact U
			</p>

			<p class="copyright">
				地址:北京市昌平区建材城西路金燕龙办公楼一层 邮编:100096 电话:400-618-4000 传真:010-82935100 邮箱: zhanghj+itcast.cn <br>
京ICP备08001421号京公网安备110108007702
			</p>
		</div>
	</div>
</body>
</html>

css代码:

.w {
	width: 1200px;
	margin: auto;
}
.header {
	height: 82px;
	border-bottom: 2px solid #b1191a;
}
.logo {
	padding-top: 15px;
}
.registerarea {
	height: 520px;
	border: 1px solid #ccc;
	margin-top: 20px;
}
.registerarea h3 {
	height: 40px;
	border-bottom: 1px solid #ccc;
	background-color: #ececec;
	padding: 0  10px;
	font-weight: 400;
	line-height: 40px;
	font-size: 18px;
}
.registerarea h3 em {
	float: right;
	font-size: 14px;
}
.registerarea a {
	color: #c81623;
}
.reg_form {
	width: 600px;
	height: 400px;
	margin: 40px auto 0;
}
.reg_form li {
	margin-bottom: 15px;
}
.reg_form label {
	display: inline-block;
	width: 100px;
	height: 36px;
	line-height: 36px;
	text-align: right;
}
.inp {
	width: 238px;
	height: 34px;
	border: 1px solid #ccc;
	margin-left: 10px;
} 
.error {
	color: #df3033;
	margin-left: 10px;
}
.error_icon,
.success_icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url(../img/error.png) no-repeat;
	vertical-align: middle;
	margin-top: -2px;
}
.success {
	color: #40b83f;
	margin-left: 10px;
}
.success_icon {
	background-image: url(../img/success.png);
}
.safe {
	padding-left: 187px;
	color: #b2b2b2;
}
.safe em {
	padding: 0 12px;
	color: #fff;
}
.ruo {
	background-color: #de1111;
}

.zhong {
	background-color: #40b83f;
}

.qiang {
	background-color: #f79100;
}
.agree {
	padding-top: 20px;
	padding-left: 100px;
}
.agree  input {
	vertical-align: middle;
	margin-right: 5px;
}
.agree  a {
	color: #1ba1e6;
}
.over {
	width: 200px;
	height: 34px;
	background-color: #c81623;
	margin: 30px 0 0 130px;
	border: none;
	color: #fff;
	font-size: 14px;

}
.footer {
	height: 120px;
	text-align: center;
}
.links {
	margin-top: 20px;
	height: 30px;
}
.copyright {
	line-height: 20px;
}

项目的四个的页面(首页、列表页、详情页、注册页)已完成。html我们学习的就是常用标签,就是基本盒子。css就是要用美化布局网页的,html+css是没有逻辑可言的,基本就是搭积木摆放盒子的过程,需要的只是耐心。多看多写多模仿。

壹灵
  • 本文由 发表于 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: