HTML+CSS实现商品介绍模考(以Apple14为案例)
2023-09-14 09:14:24 时间
HTML+CSS实现商品介绍模考(以Apple14为案例)
简介:本文以最通俗易懂的语言为读者提供一个经典CSS小案例,商品介绍模块,并且结合时事,以Apple14为案例进行讲解。
第一步:搭建HTML框架
分析HTML框架是第一步,我将我的思路放于下文的代码中。
<body>
<!-- 搭建架构,分析可知,HTML框架属于比较简单的一种,一个大的div中添加各种元素
采取的是垂直的结构
-->
<div class="box">
<!-- 处于上方的img模块 -->
<a href="#"><img src='images/img2.png' alt=''></a>
<!-- 介绍文字使用<p>标签,然后内部包含链接 -->
<p class="re"><a href="#">apple,我们的创造是未来改变这个世界,你也想加入其中吗</a></p>
<!-- 用一个div来包括评价崔志布局 -->
<div class="ap">来自于 132456879 的评价</div>
<!-- 使用一个div来包裹介绍信息 -->
<div class="info">
<!-- 介绍商品部分 -->
<h4><a href="#">灵动岛,软硬件共同结合的UI</a></h4>
<!-- 分割线 -->
<em>|</em>
<!-- 价格 -->
<span>3999.9元</span>
</div>
</div>
</body>
运行结果:
第二步:CSS渲染
下面是我极其详细的CSS样式说明,如有需要修改,只需要根据注释修改参数即可。也写有我的制作思路。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apple14介绍</title>
<style>
/* 先消除所有内外边距 */
* {
margin: 0;
padding: 0;
}
/* 设置最外面的大盒子的大小和背景颜色 */
.box {
/* 设置盒子的大小 */
width: 415px;
height: 645px;
/* 设置盒子中的背景颜色 */
background-color: #3c3d3c;
/* 让块级的盒子水平居中对齐 */
margin: 100px auto;
}
/* 设置图片的宽度 */
.box img {
/* 让自己的宽度等于父亲 */
width: 100%;
}
/* 设置里面出现的所有的链接的样式 */
a {
color: rgb(236, 232, 232);
/* 去除下划线 */
text-decoration: none;
}
/* 设置re段落的样子 */
.re{
/* 盒子的高度 */
height: 85px;
/* 字体的大小 */
font-size: 19px;
/* 设置左右内边距 上下内边距为0 左右为34px */
/* 因为这个段落没有width属性 所以padding不会撑开盒子宽度 */
padding: 0 34px;
/* 设置盒子与上面的距离 */
margin-top: 40px;
}
/* 设置评价的样式 */
.ap {
/* 设置字体 */
font-size: 17px;
/* 上边的外边距 */
margin-top: 10px;
/* 字体颜色 */
color: #c0c7cc;
/* 外边距 */
padding: 0 34px;
}
/* 设置介绍信息的样式 */
.info {
/* 设置字体 */
font-size: 18px;
/* 上外边距 */
margin-top: 22px;
/* 内边距 */
padding: 0 34px;
}
.info h4 {
/* 把行列块标签设置为行内块 */
display: inline-block;
/* 字体的权重为400 为普通字体 默认h4是会加粗 */
font-weight: 400;
}
/* 设置金额颜色 */
.info span {
color: #f77b72;
}
/* 设置中间的分割线 */
.info em {
/* 样式为normal */
font-style: normal;
/* 分割线颜色 */
color: #e4e6e5;
/* margin四个参数是顺时针 上右下左 */
margin: 0 4px 0 10px;
}
</style>
</head>
<body>
<!-- 搭建架构,分析可知,HTML框架属于比较简单的一种,一个大的div中添加各种元素
采取的是垂直的结构
-->
<div class="box">
<!-- 处于上方的img模块 -->
<a href="#"><img src='images/img2.png' alt=''></a>
<!-- 介绍文字使用<p>标签,然后内部包含链接 -->
<p class="re"><a href="#">apple,我们的创造是未来改变这个世界,你也想加入其中吗</a></p>
<!-- 用一个div来包括评价崔志布局 -->
<div class="ap">来自于 132456879 的评价</div>
<!-- 使用一个div来包裹介绍信息 -->
<div class="info">
<!-- 介绍商品部分 -->
<h4><a href="#">灵动岛,软硬件共同结合的UI</a></h4>
<!-- 分割线 -->
<em>|</em>
<!-- 价格 -->
<span>3999.9元</span>
</div>
</div>
</body>
</html>
运行结果:
相关文章
- jQuery选择器案例之——index.html
- Mybatis+mysql动态分页查询数据案例——房屋信息的接口(IHouseDao)
- HTML DOM print() 方法 ,html 打印
- 7.1.4 ScrollView结合案例详解
- MySQL运维---从库线程管理及故障案例
- Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结
- Java ActiveMQ队列模式案例
- ML之SSIM:基于输入图片RGB的三维向量利用SSIM(结构相似性度量)算法实现计算图像相似度案例
- NLP之TEA:自然语言处理之文本情感分析的简介、算法、应用、实现流程方法、案例应用之详细攻略
- ML之LiR:机器学习经典算法之线性回归算法LiR的简介、使用方法、经典案例之详细攻略
- Python:利用pandas对两个dataframe数据进行左联接/左关联(以左边为主体)、右联接/右关联(以右边为主体)、内联接(取交集)、外联接(取并集)操作案例实现代码
- 「github资料」40个Python可视化图表案例(附零基础学习资料)篇幅较长,建议收藏
- 案例解读华为隐私计算产品TICS如何实现城市跨部门数据隐私计算
- 【数字信号处理】线性常系数差分方程 ( 根据 “ 线性常系数差分方程 “ 与 “ 边界条件 “ 确定系统是否是 “ 线性时不变系统 “ 案例 | 根据 “ 线性时不变系统 “ 定义证明 )
- HTML+CSS小实战案例
- HTML(一)html书写规则、基础元素、功能元素
- jquery案例1——jq倒计时、5秒倒计时