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>

代码演示地址

时间: 2024-10-27 03:50:51

CSS理解之padding--非原创的相关文章

CSS样式命名整理(非原创)

非原创,具体出自哪里忘了,如果侵害您的利益,请联系我. CSS样式命名整理 页面结构 容器: container/wrap 整体宽度:wrapper 页头:header 内容:content 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column 中间内容:center 导航 导航:nav 导航:mainbav/globalnav 子导航:subnav 顶导航:topnav 边导航:sidebar 左导航:leftsidebar 右导航:rightside

HTML CSS——margin和padding的学习

你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边距.呵呵呵,刚开始我也有点不理解,后来通过查资料学习总算弄明白了,现在我来谈一下自己对margin和padding的理解: 一.什么是边距 CSS中的边距指的是当前元素border与周围其它元素border的距离(或者称为空间). 二.什么是内边距,什么是外边距 代码2-1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" &

HTML CSS——margin与padding的初学

下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边距.呵呵呵,刚开始我也有点不理解,后来通过查资料学习总算弄明白了,现在我来谈一下自己对margin和padding的理解: 一.什么是边距 CSS中的边距指的是当前元素border与周围其它元素border的距离(或者称为空间). 二.什么是内边距,什么是外边距.(用代码来说明) <!DOCTYPE

无限轮播的实现,未加自动轮播效果(非原创)

最近一直在看视频,学到了一个无限轮播,今天把它给写下来保存,方便日后自己查阅. html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="keywords" content=""> 6 <meta name="description" content="

CSS 内边距 padding 属性

CSS padding 属性定义元素边框与元素内容之间的空白区域. ㈠padding(填充) ⑴当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充. ⑵单独使用 padding 属性可以改变上下左右的填充.   ⑶可能的值: ⑴length    定义一个固定的填充(像素, pt, em,等) ⑵%          使用百分比值定义一个填充 注意:padding 属性接受长度值或百分比值,但不允许使用负值.   ⑷示例1:如果你希望所有 h1 元素的各边都有

有关中小非原创小说网站SEO的思考

晃眼两年过去了,12年后自己开了家小公司,线下实体,网站这块都荒废了,前段时间闲着没事又捡起了闲置的域名,两年多没做了,只剩下不到20个域名,随便选了几个准备做小说网挂着,心不大,服务器和域名的费用收回就够了. 刚开始建了三个,本地调试好,放服务器应该不到3个小时,首页就被百度收录,这一点来说现在百度还是相对做的很不错的,是最快的(未发新外链),其次就是360搜索,大概第二天到第三天陆续收录了首页,最慢的当属搜狗了差不多接近一周才收录(如果不是小说站我是不会考虑搜狗的).其中一个相对比较幸运,开

新辰:SEOer如何降低非原创文章带来的影响?

1.相关资料 官方文档:http://htmlparser.sourceforge.net/samples.html API:http://htmlparser.sourceforge.net/javadoc/index.html 其它HTML 解释器:jsoup等.由于HtmlParser自2006年以后就再没更新,目前很多人推荐使用jsoup代替它. 2.使用HtmlPaser的关键步骤 (1)通过Parser类创建一个解释器 (2)创建Filter或者Visitor (3)使用parser

Linux下high CPU分析心得【非原创】

非原创,搬运至此以作笔记, 原地址:http://www.cnitblog.com/houcy/archive/2012/11/28/86801.html 1.用top命令查看哪个进程占用CPU高gateway网关进程14094占用CPU高达891%,这个数值是进程内各个线程占用CPU的累加值. PID USER      PR  NI  VIRT  RES  SHR S %CPU %MEM    TIME+  COMMAND     14094 root      15   0  315m 

【 c语言中无符号和有符号的加法运算】【深入理解】--【sky原创】

原文:[ c语言中无符号和有符号的加法运算][深入理解]--[sky原创] 第一题 #include<stdio.h> int main() { unsigned int a=6; int b=-20; printf("%d\n",a+b); (a+b)>6? puts(">6"):puts("<=6"); return 0; } 答案是:>6 第二题 #include<stdio.h> int m