HTML .CSS实现商品详情(detail)

这篇具有很好参考价值的文章主要介绍了HTML .CSS实现商品详情(detail)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、知识点

1、无序列表<ul></ul>

2、float浮动

(1)why浮动的作用:排版布局

(2)原理:两个盒子,默认上下排列,给第二个盒子就会浮上去(跟第一个盒子同一水平线)

(3)how怎么用:

(4)clear:清除浮动

3、CSS精灵图

4、详情页面用到的CSS属性:

(1)、border-radius:边框圆角半径

(2)、text-decoration:line-through:文本划线(a标签去掉下划线、none)

5、table标签

(1)、包含字标签:

caption表的标签

tr表的行

td表的列

th表头(黑体)

(2)、常用属性:border-spacing、colspan、rowspan

(3)、作用:布局

二·、商品详情 html  .css

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品详情</title>
		<link rel="stylesheet" href="css/common.css">
		<link rel="stylesheet" href="css/detail.css">
	</head>
	<body>
		<div id="all">
			<iframe class="iheader" src="header.html"></iframe>
			<div style="clear: both;"></div>
			<div id="content">
					<div class="a1">
						<img class="big" src="img/cake1_big.jpg">
						<div class="a11">
							<ul>
								<li><img src="img/cake1_s1.jpg"></li>
								<li><img src="img/cake1_s2.jpg"></li>
								<li><img src="img/cake1_s3.jpg"></li>
								<li><img src="img/cake1_s4.jpg"></li>
							</ul>
						</div>
					</div>									
				<div class="a2">
					<h2>提拉米苏(约2磅)</h2>
					<div class="a21">
						<div class="a211">
							<span class="color">售价</span>
							<span class="prices">¥198</span>
							<span class="shic">市场价<span class="prices2">¥338</span></span>
							<span class="yis">已售6264件</span>
						</div>
						<div class="a22">
							<p></p>
							<span class="color">材料</span>
							<span class="neir">鸡蛋、奶油、小麦粉、芒果、榴莲肉、巧克力、干酪</span>
							<p></p>
							<span class="color">包装</span>
							<span class="neir">一次性蛋糕用具一套</span>
							<p></p>
							<span class="color">备注</span>
							<span class="neir">品牌:悦轩饼家</span>
						</div>
						<div class="a23">
							<p></p>
							<span class="color">配送说明</span>
							<p>北京、上海、广州、深圳、天津、重庆、南京、长沙</p>
							<span class="color">配送至</span>
							<p>郑州</p>
							<span class="color">说明</span>
							<p>深圳大鹏新区暂不配送</p>
						</div>
						<div class="a24">
							<span class="color">选择</span>
							<p></p>
							<span class="bang">2磅</span>
							<span class="bang">3磅</span>
							<span class="bang">4磅</span>
						</div>
						<div class="a25">
							<a href="#"><button class="a25color1">加入购物车</button></a>
							<a href="#"><button class="a25color2">加入购物车</button></a>
						</div>
					</div>
				</div>
			</div>
			<div style="clear: both;"></div>
			<iframe class="ifooter" src="footer.html"></iframe>
		</div>
	</body>
</html>

.css样式

iframe{
	width: 1200px;
	margin: auto;
}
.all{
	width: 100%;
	height: 810px;
	padding-bottom: 50px;
	margin-top: -80px;
	margin-bottom: 1px;
}
.all .content{
	margin-top: 0px;
	float: left;
}
.all iframe{
	/* border: 2px solid red; */
}
#content{
/* 	border: 1px solid red; */
	width: 1200px;
	margin-top: -80px;
	margin: auto;
}
#content .a1{
	float: left;
	margin-left: 10px;
}
#content .a1 .big{
	/* float: left; */
	width: 450px;
	height: 400px;
}
#content .a11 ul li{
	list-style: none;
	float: left;
	margin: 20px 15px;
}
.a11 ul li img{
	border: 3px white solid;
	width: 80px;
	height: 80px;
}
.a11 ul li img:hover{
	border: 3px #FF4F0D solid;
}
.a2{
	float: left;
	margin-left: 90px;	
}
.a21 .color{
	color: #758188;
}
.a21 .a211{
	background-color: #F2F5F8;
	color: #758188;
}
.a21 .a211 .prices,.shic{
	margin-left: 40px;
}
.a21 .a211 .prices{
	color: #FF4F0D;
	font-size: 35px;
	font-weight: bold;
}
.a21 .a211 .prices2{
	text-decoration: line-through;
}
.a21 .a211 .yis{
	margin-left: 230px;
}
.a22{
	background-color: #F6F9FB;
}
.a22 span,p{
	margin-top: 10px;
}
.a22 .neir{
	margin-left: 50px;
}
.a23{
	margin-top: 10px;
}
.a24{
	margin-top: 10px;
}
.a24 .bang{
	display: inline-block;
	border: 3px #EDF0F5 solid;
	width: 50px;
	line-height: 40px;
	margin-left: 30px;
	text-align: center;
}
.a24 .bang:hover{
	border: 3px #FF4F0D solid;
}
.a25{
	margin-top: 30px;
}
.a25 button{
	display: inline-block;
	width: 200px;
	height: 60px;
	border-radius: 30px;
	margin-left: 30px;
}
.a25 .a25color1{
	background-color: #FFEEE8;
	color: #FF4F0D;
	font-size: 20px;
	font-weight: bolder;
	border: 1px #FF4F0D solid;
}
.a25 .a25color2{
	background-color: #FF4F0D;
	color: white;
	font-size: 20px;
	font-weight: bolder;
	border: 1px #FF4F0D solid;
}
/* .all .iheader{
	margin: auto;
} */

实现样式

HTML .CSS实现商品详情(detail)

 文章来源地址https://www.toymoban.com/news/detail-511192.html

到了这里,关于HTML .CSS实现商品详情(detail)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS基础知识点

    目录 ​编辑一、基本语法规范 二、CSS 选择器 1、简单选择器  (1)标签选择器 (2)类选择器 (3)ID 选择器 2、复合选择器 (1)后代选择器 (2)子选择器 (3)并集选择器 三、CSS常用属性值 1、设置字体家族 2、设置字体大小 3、设置字体的粗细 4、文字倾斜设置 5、文字

    2024年02月11日
    浏览(59)
  • CSS知识点汇总(四)

    避免过度约束 避免后代选择符 避免链式选择符 使用紧凑的语法 避免不必要的命名空间 避免不必要的重复 最好使用表示语义的名字。 避免!important,可以选择其他选择器 尽可能的精简规则,合并不同类里的重复规则 1. 概念: 将多个小图片拼接到一个图片中。通过 backgro

    2024年02月11日
    浏览(44)
  • CSS知识点汇总(二)

    选择器有: 可继承: font-size font-family color, ul li dl dd dt ; 不可继承 : border、 padding、 margin、 width、 height ; 优先级: 优先级就近原则,样式定义最近者为准; 载入样式以最后载入的定位为准; 优先级为: !importantidclasstag, impoertant比内联优先级高 CSS3新增伪类举例: p:first-of-

    2024年02月11日
    浏览(37)
  • CSS知识点汇总(五)

    什么是 Fouc(文档样式短暂失效)? 在引用 css 的过程中,如果方法不当或者位置引用不对,会导致某些页面在 windows 下的 ie 出现一些奇怪的现象,以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效,简称 FOCU。 原因大致为: 使用 import 方法导入样式表 将样

    2024年02月11日
    浏览(43)
  • CSS3 知识点

    一、【圆角效果】 border-radius: 5px 4px 3px 2px; border-top-right-radius:10px 右上解圆滑 二、【阴影效果】 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; box-shadow: 0 0 15px blue inset; 内阴影 三、【颜色之RGBA】 color:rgba(R,G,B,A) 或 background-color:rgba(100

    2024年02月10日
    浏览(42)
  • 最全前端 HTML 面试知识点

    1.1.1 定义 超文本标记语言(英语:HyperTextMarkupLanguage,简称:HTML)是一种用于创建网页的标准标记语言 HTML元素是构建网站的基石 标记语言 (markup language ) 由无数个标记(标签、tag)组成 是对某些内容进行特殊的标记,以供其他解释器识别处理 使用标记的文本会被识别为“

    2024年02月20日
    浏览(43)
  • css知识学习系列(15)-每天10个知识点

    👍 点赞,你的认可是我创作的动力! ⭐️ 收藏,你的青睐是我努力的方向! ✏️ 评论,你的意见是我进步的财富! transition 属性用于创建元素状态变化的平滑过渡效果。您可以指定要过渡的属性、持续时间和过渡类型。 示例: transition: width 0.5s ease; 会使元素的宽度在0.

    2024年02月07日
    浏览(47)
  • css知识学习系列(11)-每天10个知识点

    👍 点赞,你的认可是我创作的动力! ⭐️ 收藏,你的青睐是我努力的方向! ✏️ 评论,你的意见是我进步的财富! 使用 position 属性可以定义元素的定位方式,如 position: relative; 、 position: absolute; 等。 使用 z-index 属性可以定义元素在层叠上下文中的层级关系,值较大的元

    2024年02月07日
    浏览(34)
  • css知识学习系列(16)-每天10个知识点

    👍 点赞,你的认可是我创作的动力! ⭐️ 收藏,你的青睐是我努力的方向! ✏️ 评论,你的意见是我进步的财富! margin 是元素外边距,用于控制元素与其周围元素之间的间距,影响元素与其他元素的距离。 padding 是元素内边距,用于控制元素内部内容与元素边框之间的

    2024年02月07日
    浏览(51)
  • CSS知识点汇总(十)--移动端适配

    在移动端虽然整体来说大部分浏览器内核都是 webkit,而且大部分都支持 css3 的所有语法。但手机屏幕尺寸不一样,分辨率不一样,或者有时需要考虑横竖屏的问题,或者考虑到各式各样的移动端兼容性问题。 1、方案选择 1、使用 css 的媒体查询 @media 基于 css 的媒体查询属性

    2024年02月11日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包