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>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 文本基础 实战 小米官方卡片案例的更多相关文章
- 图片与文本基础(html和css)
图片与文本基础 -----注释添加可以用/**/ 5.1图片 1.gif图片:最大颜色数256,保存时采用无损压缩 2.JPEG图片:可以包含1670万种颜色,保存时采用有损压缩,压缩率小的质量更高. ...
- css基础-css选择器和css文本样式相关
css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 : ...
- HTML+CSS提升小实战
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html ...
- 2天驾驭DIV+CSS (基础篇)(转)
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...
- MySQL的初次见面礼基础实战篇
[版权申明] http://blog.csdn.net/javazejian/article/details/61614366 出自[zejian的博客] 关联文章: MySQL的初次见面礼基础实战篇 ...
- 3.CSS使用基础(2)
目录 一.CSS 链接 二.CSS 列表样式(ul) 三.CSS Table(表格) 四.盒子模型 五.CSS Border(边框) 六.CSS 轮廓(outline)属性 七.CSS Margin( ...
- 前端工程师面试问题归纳(一、问答类html/css/js基础)
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
- CSS 文本字体颜色设置方法(CSS color)
CSS 文本字体颜色设置方法(CSS color) 一.认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常用颜色地方包含:字体颜色.超链接颜色.网 ...
- CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(1)设定背景图
技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点 ...
随机推荐
- get请求url参数中有+、空格、=、%、&、#等特殊符号的问题解决
url出现了有+,空格,/,?,%,#,&,=等特殊符号的时候,可能在服务器端无法获得正确的参数值,如何是好?解决办法将这些字符转化成服务器可以识别的字符,对应关系如下:URL字符转义 用其它 ...
- SVM中的软间隔最大化与硬间隔最大化
参考文献:https://blog.csdn.net/Dominic_S/article/details/83002153 1.硬间隔最大化 对于以上的KKT条件可以看出,对于任意的训练样本总有ai= ...
- 05 - Vue3 UI Framework - Button 组件
官网基本做好了,接下来开始做核心组件 返回阅读列表点击 这里 目录准备 在项目 src 目录下创建 lib 文件夹,用来存放所有的核心组件吧.然后再在 lib 文件夹下创建 Button.vue 文件 ...
- 关于导入Eclips Web项目报错的解决方案
1.是一定要有耐心,耐心,耐心,重要的事情说三遍.针对问题一 一破解,一步一步来,不要放弃. 2.其实百度就好了他们有报错的各种问题及解决方案 ,包括导入项目web.xml报错,js文件,jsp文件报 ...
- [BUUCTF]PWN——[HarekazeCTF2019]baby_rop2
[HarekazeCTF2019]baby_rop2 题目附件 步骤: 例行检查,64位,开启了nx保护 运行了一下程序,了解大概的执行情况 64位ida载入,shift+f12检索程序里的字符串,没 ...
- Linux centos 安装Docker
安装docker需要centos7 内核3.1以上 基本上centos7以上的都支持, 然后先更新到最新 sudo yum update 然后直接安装 sudo yum install docker ...
- LuoguP7375 [COCI2018-2019#5] Jarvis 题解
Content 有 \(n\) 架无人机,每架无人机都有一个当前属性值 \(a_i\) 和出战属性值 \(b_i\).你可以给每架无人机的当前属性值同时加一个数 \(x\)(但只能做一次),使得能够出 ...
- tryParse的用法。
tryParse的用法. int.Parse()是一种类容转换:表示将数字内容的字符串转为int类型.如果字符串为空,则抛出ArgumentNullException异常:如果字符串内容不是数字,则抛 ...
- JavaScript扫盲笔记:
JavaScript学习: JavaScript代码存在形式: -Head中 <script> </script> -文件 <script src='代码所在路径'> ...
- 经验:如何使用replace而不丢失数据
背景:replace很好用,的应用场景比较多,但是直接使用可能会造成一引起字段的值丢失. 解决方法: 一.原始数据 select id,f1,f2 ,flag from update_test; id ...