CSS学习笔记之练习 2.25
小米官网手机图标盒子的仿照练习
原图:
代码实现图:
附上代码:
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>* {margin: 0;padding: 0;}body{background-color: #f5f5f5;}a{color:black ;text-decoration: none;}.box{width: 300px;height: 500px;background-color: white;margin: 100px auto;}.box img{width: 100%;}.review{font-size: 24px;margin-top: 20px;padding: 0 45px;}.info{font-size: 20px;margin-top: 10px;padding: 0 55px;color: darkgrey;}.price{color: orange;margin-top: 30px;font-size: 27px;padding: 0 90px;}</style>
</head><body><div class="box"><img src="data:images/1.webp" alt=""><p class="review"><a href="#">REDMI K50 电竞版</a> </p><div class="info">全线拉满的冷血旗舰</div><div class="price">3299元起</div></div>
</body>
</html>
CSS学习笔记之练习 2.25相关推荐
- CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
- 前端篇--------1.css学习笔记
1.css 单行文本换行溢出解决方案(css三件套) white-space:nowrap overflow:hidden text-overflow:ellipsis 2.css m ...
- HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
- CSS学习笔记-04 a标签-导航练习
个人练习,各位大神勿笑 .. <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
- div+css学习笔记一(转)
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中 背景图片 ie6 ie7 margin 杂谈 分类: 网页制作 1.IE6中用了float之后导致m ...
- HTML+CSS学习笔记(3)- 认识标签(2)
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
最新文章
- 瓶框(bottle)架学习之模版使用
- 深入讲解配置Cisco路由器日志中的速率限制问题(三)
- springMVC详解以及注解说明
- 《自卑与超越》读书笔记(part5)--如果教育者把性格和智力的发展都归之于遗传,那么教育就没有什么意义了
- 第一次接触万物接对象
- 120分钟React快速扫盲教程
- 在nlog(n)时间里对单链表排序
- pytorch Tensor
- Kali 2021.3安装RTL8192EU(腾达U6)无线网卡
- PS2022丨Photoshop 2022软件下载+Ps安装教程
- 云开发数据库update函数控制台显示更新成功,但数据库中的数据并没有更新(已解决)
- C++:Sqlite调用之增、读、改
- Python刷博客简易版
- 如何使用决策树判断要不要去相亲?
- Android8.1 9.0 10.0 默认开启WLAN热点设置默认热点名称和密码
- 上传遥感图像在地图上自动加载到地图上
- 阿里云--短信服务---开通步骤
- DELL 服务器 PCI-E 6IR 通道卡 6I阵列卡8口SAS SATA (整理)
- 聊聊字符集与字符编码这些事儿
- 杂事记诗-- 读网文《穷鬼的上下两千年》有感
热门文章
- ArcGIS打开影像图显示全黑色解决办法
- 自动钉木箱机器人_一种木箱生产用自动钉装设备的制作方法
- 谈一谈游戏AI - 行为树
- 【JavaSE】接口
- ERROR: 报错分析 phase.raise_objection(this)不能是phase.raise_objection(phase)
- 工作中常用工具推荐及资源分享
- OpenJDK源码赏析之二:java虚拟机启动流程到首函数调用全流程
- 关于开源框架GPUImage 的简单说明
- 我知道很多主播因为以前因为公会的名声不太好,或者不想签约被束缚等原因
- 结合《穹顶之下》看中、美宽带提速