<!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>

h5css产品模块设计的更多相关文章

  1. asp.net通用查询模块设计

    asp.net通用查询模块设计 前言 自从上次狂喷了devexpress for asp.net面向互联网的app的各种不合理,好像骂的dev无处容身了,不过说实话,dev在做互联网的app时,生成的 ...

  2. Java开源生鲜电商平台-团购模块设计与架构(源码可下载）

    Java开源生鲜电商平台-团购模块设计与架构(源码可下载) 说明:任何一个电商系统中,对于促销这块是必不可少的,毕竟这块是最吸引用户的,用户也是最爱的模块之一,理由很简单,便宜. 我的经验是无论是大的 ...

  3. app模块设计

    至于app模块设计,要坚持三个原则: 1.放羊,让用户决定模块间的组合与穿插. 2.滥竽充数,对于用户不希望的模块,可以悄悄植入以实现产品目标. 3.照葫芦画瓢,遵守用户在其它APP上的既有习惯,组合 ...

  4. 解析大型.NET ERP系统 权限模块设计与实现

    权限模块是ERP系统的核心模块之一,完善的权限控制机制给系统增色不少.总结我接触过的权限模块,以享读者. 1 权限的简明定义 ERP权限管理用一句简单的话来说就是:谁 能否 做 那些 事. 文句 含义 ...

  5. .NET 缓存模块设计

    上一篇谈了我对缓存的概念,框架上的理解和看法,这篇承接上篇讲讲我自己的缓存模块设计实践. 基本的缓存模块设计 最基础的缓存模块一定有一个统一的CacheHelper,如下: public interf ...

  6. IOS编程 图片缓存模块设计

    手机客户端为什么会留存下来?而不是被一味的Wap替代掉?因为手机客户端有Wap无可替代的优势,就是自身较强的计算能力. 手机中不可避免的一环:图片缓存,在软件的整个运行过程中显得尤为重要. 先简单说一 ...

  7. 15款优秀移动APP产品原型设计工具

    一新来小盆友问:“移动产品原型设计都用啥工具?” 答:“@#￥……&%*” 又问:“能详细说下各个工具吗?我比较一下” “……” 好吧,谁让我那么的爱分享而你又是小美女呢 ———————正文开 ...

  8. 产品原型设计工具 Balsamiq Mockups(转)

    Balsamiq Mockups是产品设计师绘制线框图或产品原型界面的利器.在产品设计的需求阶段,低保真的线框图或者草图设计介于产品流程设计与高保真DEMO设计之间,在Balsamiq Mockups ...

  9. ylbtech-Model-Account(通用账户模块设计)

    ylbtech-DatabaseDesgin:ylbtech-Model-Account(通用账户模块设计) ylbtech-Model-Account(通用账户模块设计) 1.A,数据库关系图(Da ...

随机推荐

  1. CRM【第三篇】: crm业务

    1. 项目背景 crm系统是某某教育公司正在使用的项目,系统主要为 销售部.运营部.教质部门提供管理平台,随着公司规模的扩展,对公司员工的业务信息量化以及信息化建设越来越重要. crm系统为不同角色的 ...

  2. 数据可视化实例（十）： 相关图（matplotlib，pandas）

    相关图 https://datawhalechina.github.io/pms50/#/chapter8/chapter8 导入所需要的库 import numpy as np # 导入numpy库 ...

  3. day2：Number，tuple，str，list，set，dict

    # ### Number ( int float bool complex) 1.int 整型 (正整数 0 负整数)intvar = 1print(intvar) # type 获取值的类型res ...

  4. three.js 曲线

    上几篇说了three.js的曲线,这篇来郭先生来说说three.js曲线,在线案例点击郭先生的博客查看. 1. 了解three.js曲线 之前已经说了一些three.js的几何体,这篇说一说three ...

  5. P1525 关押罪犯（洛谷）

    前几天没做题,神经有点错乱,感觉一片虚无.今天开始继续写博客. 题目描述 S 城现有两座监狱,一共关押着N名罪犯,编号分别为1-N.他们之间的关系自然也极不和谐.很多罪犯之间甚至积怨已久,如果客观条件 ...

  6. 题解 CF1359B 【New Theatre Square】

    题意 有一个 n×m 的广场,其中一部分要铺地砖,地砖有两种, 1 × 1 和 1×2 的,后者只能横着铺,其中, 1 × 1的单价为 x , 1 × 2 的单价为 y , 输入这个广场," ...

  7. Maven配置文件中的版本使用-SNAPSHOT

    SNAPSHOT是什么? SNAPSHOT是快照,是一种特殊的版本,制定了某个当前的开发进度副本.不同于正式版本,Maven每次构建都会在远程仓库中检查新的快照.如此每次发布更新代码的快照到仓库中,新 ...

  8. [日常摘要] -- zookeeper篇

    概览 设计目标 是将那些复杂且容易出错的分布式一致性服务封装起来,构成一个高效可靠的原语集,并以一系列简单易用的接口提供给用户使用 简介 是一个典型的分布式数据一致性解决方案,分布式应用程序可以基于Z ...

  9. 题解 洛谷 P4336 【[SHOI2016]黑暗前的幻想乡】

    生成树计数的问题用矩阵树定理解决. 考虑如何解决去重的问题,也就是如何保证每个公司都修建一条道路. 用容斥来解决,为方便起见,我处理时先将\(n\)减了1. 设\(f(n)\)为用\(n\)个公司,且 ...

  10. 02_HTML02

    学于黑马和传智播客联合做的教学项目 感谢 黑马官网 传智播客官网 微信搜索"艺术行者",关注并回复关键词"软件测试"获取视频和教程资料! b站在线视频 HTML ...