前端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>Document</title><style>body{background-color: #f5f5f5;}.all{width: 234px;height: 300px;margin: 0 auto;background-color: #fff;text-align: center;}.title{font-weight: bold;font-size: 14px;line-height: 25px;}.thing{font-size: 12px;line-height: 30px;color: #ccc;}.price{font-size: 14px;color: #ffa500; }</style>
</head>
<body><div class="all"><img src="./a.jpeg" alt="" width="160px"><p class="title">漂亮小刺猬</p><p class="thing">成年人的玩具</p><p class="price">1999元</p></div>
</body>
</html>

前端CSS基础之案例--图片相关推荐

前端css基础知识点之PC端项目-规范
前端css基础知识点之PC端项目-规范 1 文件管理文件名用英文命名 css文件夹 reset.css(常用的浏览器样式) public.css(公共的样式.比如页面的头部尾部.重复使用字体.字号等 ...
前端css基础知识点之opacity——透明度
前端css基础知识点之opacity--透明度 opacity opacity:num /*num 0到1*/ 兼容性 ie9及以上和标准浏览器都支持特点设置opacity的元素的所有后代会一起具 ...
前端——CSS基础学习【part 2】
前端--CSS基础学习[part 2] Emmet CSS的复合选择器 CSS的元素显示模式 CSS的背景 CSS的三大特性 CSS 盒子模型 Emmet 快速生成HTML结构语法 (1)生成标签,输 ...
前端css基础知识点之sprite——雪碧（精灵）
前端css基础知识点之sprite--雪碧(精灵) css sprite css精灵或css雪碧把网页中一些背景图片整合到一个大文件中,然后利用 background-image.backgroun ...
从头学前端-CSS基础01
CSS简介: CSS是层叠样式表的简称,有时也会称之为CSS样式表或级联样式表.CSS也是一种标记语言(和html一样,不是个编程语言): Html主要是页面结构,显示元素内容,CSS是美化页面,布局 ...
从头学前端-CSS基础02
一个工具: 前端快速开发插件Emmet Emmet 的前身就是 Zen Coding. 它是一组专门用来提高编写 HTML 和 CSS 代码速度的便利工具.将它整合进文本编辑器,可以提供一些功能和快捷 ...
前端 CSS 基础笔记
CSS入门一.CSS简介 1.什么是CSS CSS:Cascading Style Sheet 层叠样式表是一组样式设置的规则,用于控制页面的外观样式二.基本用法 1.css语法 <hea ...
前端CSS基础7.8
1.css选择器:相当于一个标识,有3种选择器第一种选择器:标签选择器 p{ color:red;} 第二种选择器:class选择器 .c1{ color:green;} 可被多次调用第三种选择器 ...
CSS基础综合案例1-新闻
效果图: 代码: <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...

前端CSS基础之案例--图片

前端CSS基础之案例--图片相关推荐

最新文章

热门文章