CSS理解之padding--非原创
因为在慕课网观看了张大神的视频，学习到了一点东西，向和大家分享。视频地址
代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS理解之padding</title>
<style type="text/css">
.wrap {
width: 150px;
padding: 20px;
border: 2px solid #ccc;
} .line-tri {
width: 150px;
height: 30px;
padding: 15px 0;
border-top: 30px solid #000;
border-bottom: 30px solid #000;
background-color: #000;
background-clip: content-box;
} .eye {
width: 150px;
height: 150px;
padding: 10px;
border: 10px solid #000;
border-radius: 50%;
background-color: #000;
background-clip: content-box;
}
</style>
</head>
<body>
<!--实现大队长的三道杠，百度网盘里面的切换图案-->
<div class="wrap">
<div class="line-tri"></div>
</div>
<br />
<br />
<br />
<!--实现"白眼"效果-->
<div class="eye"></div>
</body>
</html>
CSS理解之padding--非原创的更多相关文章
- CSS样式命名整理（非原创）
非原创,具体出自哪里忘了,如果侵害您的利益,请联系我. CSS样式命名整理 页面结构 容器: container/wrap 整体宽度:wrapper 页头:header 内容:content 页面主体 ...
- Vue 仿QQ左滑删除功能（非原创）
非原创,摘选来源:http://www.jb51.net/article/136221.htm. 废话不多说,相当实用,先记录. Html代码: <div class="contain ...
- HTML CSS——margin与padding的初学
下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边 ...
- CSS 内边距 padding 属性
CSS padding 属性定义元素边框与元素内容之间的空白区域. ㈠padding(填充) ⑴当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充. ⑵单独使用 p ...
- 老男孩Django笔记(非原创)
.WEB框架 MVC Model View Controller 数据库 模板文件 业务处理 MTV Model Template View 数据库 模板文件 业务处理 ############## ...
- Linux下high CPU分析心得【非原创】
非原创,搬运至此以作笔记, 原地址:http://www.cnitblog.com/houcy/archive/2012/11/28/86801.html 1.用top命令查看哪个进程占用CPU高ga ...
- 【 c语言中无符号和有符号的加法运算】【深入理解】--【sky原创】
原文:[ c语言中无符号和有符号的加法运算][深入理解]--[sky原创] 第一题 #include<stdio.h> int main() { unsigned int a=6; i ...
- CSS 内边距 (padding) 实例
CSS 内边距 (padding) 实例元素的内边距在边框和内容区之间.控制该区域最简单的属性是 padding 属性. CSS padding 属性定义元素边框与元素内容之间的空白区域.CSS 内边 ...
- 非原创。使用ajax加载控件
非原创.来自博客园老赵. public class ViewManager<T> where T : System.Web.UI.UserControl { private System. ...
随机推荐
- UVA 11354 Bond（MST + LCA）
n<=50000, m<=100000的无向图,对于Q<=50000个询问,每次求q->p的瓶颈路. 其实求瓶颈路数组maxcost[u][v]有用邻接矩阵prim的方法.但是 ...
- 关于ssh和ajax小小总结
我是相当的不专业,写给自己看.有什么错误的话,说出来将感激不尽. 有两种方法异步传输 1.通过json字符串: jsp中这么写: $.getJSON( "details_ajaxActio ...
- MVC基本学习
asp.net MVC ViewData详解 http://www.cnblogs.com/gaopin/archive/2012/11/13/2767515.html Asp.net MVC中的Vi ...
- 【转】Java判断是否是整数，小数或实数的正则表达式
经常会遇到这样的情况,需要判断一个字符串是否是一个合法的数,包括整数,小数或者实数. 网上查到很多文章大多是判断这个字符串是否全为数字,比如下面这段来自StringUtils的代码,可以看到,13.2 ...
- Flex友好提示、警告
Flex 自带的Alert带给用户的体验并不好,对于一些简单的提示来说,这个小题大作了. <?xml version="1.0" encoding="utf-8&q ...
- RFID与射频卡电器特性
电气特性: 容量为8K位EEPrOM: ● 分为16个扇区,每个扇区为4块,每块16个字节,以块为存取单位: ● 每个扇区有独立的一组密码及访问控制: ● 每张卡有唯一序列号,为32位: ● 具有防冲 ...
- Java模拟登录系统抓取内容【转载】
没有看考勤的习惯,导致我的一天班白上了,都是钱啊,系统也不发个邮件通知下.... 为了避免以后还有类似状况特别写了个java模拟登录抓取考勤内容的方法(部分代码来自网络),希望有人修改后也可以 ...
- BZOJ 2705: [SDOI2012]Longge的问题 GCD
2705: [SDOI2012]Longge的问题 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnl ...
- delphi 08 HTML组件
///HTML组件///后面的字符串为这个控件的ID号///直线 Line (WebBrowser1.Document as IHTMLDocument2).exec ...
- Node.js 的Web server--Fenix
Fenix 是提供给开发者使用的简单的一个 Web server, 是基于 Node.js 开发. 能够同一时候在上面执行非常多的项目. 最适合前端开发者使用. 能够通过免费的 Node.js 控制台 ...