h5css产品模块设计
2024-08-31 20:51:41
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>产品模块</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
/* 整体页面背景颜色 */
background-color: rgb(245, 245, 245);
}
a {
/* 取消链接下划线 */
text-decoration: none;
color: #000000;
}
.box {
width: 298px;
height: 418px;
/* 盒子水平居中显示 */
margin: 100px auto;
background-color: #ffffff;
}
.box .img {
/* 设置宽为父元素宽度 */
width: 100%;
}
.box .paragraph {
/* 文字与图片，边框的距离设置 */
/* 设置段落左右内边距 */
padding: 0 28px;
/* 设置上外边距 */
margin-top: 30px;
font-size: 14px;
}
.box .evaluation {
font-size: 12px;
color: rgb(176, 176, 176);
padding: 53px 28px 15px 28px;
}
.box .con {
padding: 0px 28px;
font-size: 14px;
}
.box .con .title {
/* 改为行内块元素 */
display: inline-block;
font-weight: 400;
}
.box .con .price {
color: rgb(255, 103, 0);
}
.box .con .ver {
color: rgb(236, 228, 229);
margin: 0px 10px;
}
</style>
</head>
<body>
<div class="box">
<a href="#"><img src="data:images/img.jpg" alt="蓝牙图片" class="img"></a>
<p class="paragraph"><a href="#">快递牛，整体不错蓝牙可以说秒连。红米给力</a></p>
<div class="evaluation">来自于 117384232 的评价</div>
<div class="con">
<h4 class="title"><a href="#">Redmi AirDots真无线蓝... </a></h4>
<span class="ver">|</span>
<span class="price">99.9元</span>
</div>
</div>
</body>
</html>
最新文章
- Java 类的实例变量初始化的过程 静态块、非静态块、构造函数的加载顺序
- python smtp 群发邮件
- Ubuntu14.10下安装JDK 8
- WPS for Linux,系统缺失字体
- Unity Shader IDE — Sublime Text2
- java学习笔记（3）：网络编程
- B:冷血格斗场
- nginx 设置反响代理实现nginx集群
- SQL Server 索引 之 书签查找 <第十一篇>
- 如何配置SSH Keys登录
- [codility]Equi-leader
- UC何小鹏：移动互联网创业需警惕五大“不靠谱
- linux两台server远程copy文件
- Oracle 11g安装攻略
- Javascript:重用之道
- 去掉chrome记住密码后自动填充表单的黄色背景
- HDU1175(dfs)
- maven多环境部署
- 简易promise的实现（一）
- 编译部署 Mysql 5.7