<!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>Document</title>

    <style>

        p{

            margin: 0;

            padding: 0;

        } //清除p标签默认的间隔，或者将p标签换成div标签

        body{

            background-color: #f5f5f5;

        }

        .box{

            width: 234px;

            height: 300px;

            background-color: #ffff;

            /* background-color:blue; */

            text-align: center;

            margin: 0 auto;

        }

        img{

            width: 160px;

        }

        .product {

            height: 25px; //文字顶部到下一行文字的高度

            font-size: 14px;

        }

        .info {

            font-size: 12px;

            height: 30px;

            color: #cccccc;

        }

        .price{

            font-size: 14px;

            color: #ffa500;

        }

    </style>

</head>

<body>

    <div class="box">

        <img src="./images/car.jpg" alt="平衡车">

        <p class="product">九号平衡车</p>

        <p class="info">成人的玩具</p>

        <p class="price">1999元</p>

    </div>

</body>

</html>

　　

css 文本基础 实战 小米官方卡片案例的更多相关文章

  1. 图片与文本基础（html和css）

    图片与文本基础 -----注释添加可以用/**/ 5.1图片 1.gif图片:最大颜色数256,保存时采用无损压缩 2.JPEG图片:可以包含1670万种颜色,保存时采用有损压缩,压缩率小的质量更高. ...

  2. css基础-css选择器和css文本样式相关

    css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 : ...

  3. HTML+CSS提升小实战

    1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html ...

  4. 2天驾驭DIV+CSS （基础篇）（转）

    这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...

  5. MySQL的初次见面礼基础实战篇

    [版权申明] http://blog.csdn.net/javazejian/article/details/61614366 出自[zejian的博客] 关联文章: MySQL的初次见面礼基础实战篇 ...

  6. 3.CSS使用基础(2)

    目录 一.CSS 链接 二.CSS 列表样式(ul) 三.CSS Table(表格) 四.盒子模型 五.CSS Border(边框) 六.CSS 轮廓(outline)属性 七.CSS Margin( ...

  7. 前端工程师面试问题归纳（一、问答类html/css/js基础）

    一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...

  8. CSS 文本字体颜色设置方法(CSS color)

    CSS 文本字体颜色设置方法(CSS color) 一.认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常用颜色地方包含:字体颜色.超链接颜色.网 ...

  9. CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记（1）设定背景图

    技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点 ...

随机推荐

  1. Spring标签库

    spring提供了两个标签库文件:spring-form.tld(表单标签库,用于输出HTML表单)  spring.tld(基础标签库,用于Spring数据绑定等) 使用步骤: 1,配置表单标签库, ...

  2. 锁对象-条件对象-synchronized关键字

    1 import java.util.concurrent.locks.Condition; 2 import java.util.concurrent.locks.Lock; 3 import ja ...

  3. 【Spring Framework】Spring入门教程（三）使用注解配置

    本文主要介绍四个方面: (1) 注解版本IOC和DI (2) Spring纯注解 (3) Spring测试 (4) SpringJDBC - Spring对数据库的操作 使用注解配置Spring入门 ...

  4. 出现 CannotAcquireLockException 异常

    项目出现  CannotAcquireLockException异常 原因: 百度了一下,是由于 Spring 事务嵌套造成死锁 结合自己的, handleWithdraw 方法底层有调用 其他 se ...

  5. 如何使用cURL获得请求/响应具体耗时？

    如何使用cURL一次测量请求和响应时间? cURL支持格式化输出请求的详细信息(请参阅cURL手册页的-w.–write out<format>获取更多信息). 如题,我们将只关注如何知晓 ...

  6. pyecharts简介

    一.概况 Echarts 是一个由百度开源的数据可视化,凭借着良好的交互性,精巧的图表设计,得到了众多开发者的认可. 而 Python 是一门富有表达力的语言,很适合用于数据处理.当数据分析遇上数据可 ...

  7. 【论文笔记】Modeling User Exposure in Recommendation

    Modeling User Exposure in Recommendation [论文作者]Dawen Liang, David M. Blei, etc. WWW'16 Columbia Univ ...

  8. 12 - Vue3 UI Framework - 打包发布

    基础组件库先做到这个阶段,后面我会继续新增.完善 接下来,我们对之前做的组件进行打包发布到 npm 返回阅读列表点击 这里 组件库优化 通用层叠样式表 我想大家都注意到了,前面我们在写组件的时候,sc ...

  9. CF950A Left-handers, Right-handers and Ambidexters 题解

    Content 有 \(l\) 个人是左撇子,有 \(r\) 个人是右撇子,另外有 \(a\) 个人既惯用左手又惯用右手.现在想组成一个队伍,要求队伍中惯用左手的人和惯用右手的人相等,试求出团队里面的 ...

  10. CF1119A Ilya and a Colorful Walk 题解

    Content 有一个长度为 \(n\) 的数组 \(a_1,a_2,a_3,...,a_n\),试求出两个不相等的数之间的距离的最大值. 数据范围:\(3\leqslant n\leqslant 3 ...