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. ...
随机推荐
- UIImageView旋转任意角度
-(UIImageView *) makeRotation:(UIImageView *)image speedX:(float)X speedY:(float)Y { // 头文件中需要定义 ...
- Oracle超出最大连接数问题及解决
用过Oracle的应该都熟悉如何查看和设置Oracle数据库的最大连接数.这里就再啰嗦一遍. 查看当前的连接数,可以用select count(*) from v$process;设置的最大连接数(默 ...
- Netty4.x分析
官网定义: netty是一个异步.事件驱动的网络应用框架,用于快速开发可维护的.高性能的服务端和客户端程序. 原理分析 Architecture Overview 网络模型:netty采用了Reac ...
- contiki-main.c 一 打印观察 <contiki学习之五>
说明: 本文依赖于 contiki/platform/native/contiki-main.c 文件. 在项目工程目录下的hello-world.c 文件里面,有许多的宏,但没有最关键的main() ...
- Lua学习教程之 可变參数数据打包与解包
利用table的pack与unpack进行数据打包与解包.測试代码例如以下: print("Test table.pack()----------------"); functio ...
- [MODX] 2. Chunks $
Chunk in Modx can cut your template into samll pieces to make code reuseable. [[$chunk_name]] For ex ...
- NDK环境配置
1.下载安装插件:com.android.ide.eclipse.ndk_23.0.2.1259578.jar copy到E:\eclipse\adt-bundle-windows-x86- ...
- JS来推断文本框内容改变事件
oninput,onpropertychange,onchange的使用方法 onchange触发事件必须满足两个条件: a)当前对象属性改变,而且是由键盘或鼠标事件激发的(脚本触发无效) b) ...
- iOS开发——UI篇&文字渐变效果：图层中的mask属性
文字渐变效果:图层中的mask属性 本次文章,主要讲述的是图层中的mask属性,利用它,可以做出文字渐变效果! 一.文字渐变效果: 二.文字渐变实现思路: 1.创建一个颜色渐变层,渐变图层跟文字控件一 ...
- Mac OS X 10.10 Yosemite下安装java、jdk、mysql、maven、idea
Mac OS X Yosemite已经在2014年10月17日正式发布了. 作为一个java开发者,尝鲜第一时间安装了最新版本. 和之前的OS X系统还是有很多不同的.下面主要在java开发环境方面做 ...