# 文档类型<!DOCTYPE>

<!DOCTYPE html>

# 字符集

<meta charset="UTF-8" />

# 换行标签

<br />

# div span标签

后代选择器  子代选择器 >

交集选择器 

div.one{

}

并集选择器

行内元素和块级元素的区别

块级元素：独占一行 能设置大小

行内元素：不能设置大小   display：inline-block可将行内元素转为块级元素

行高 line-height 文字居中

<style>

        div {

            height: 50px;

            width: 200px;

            background-color: pink;

            line-height: 50px;

        }

</style>

<div>我是行高</div>

 权重

　　权重值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    #ya {  /*权重 0,1,0,0*/

        color: blue;

    }

    .yase {   /* 类选择器权重 高于 标签选择器   权重   0, 0, 1, 0*/

        color: green;

    }

    div {

        /* 权重   0, 0, 0, 1*/

        /* 权重   0, 0, 0, 1*/

        color: red;

    }

    div {

        /* 权重   0, 0, 0, 1*/

        /* 权重   0, 0, 0, 1*/

        color: hotpink!important;

    }

    *  {    0 0 0 0 

    }

    /**  0000

    div 0001

    .one 0010

    #two 0100

    行内 1000

    important ∞*/

    </style>

</head>

<body>

    <div class="yase" id="ya" style="color: orange">亚瑟</div>

</body>

</html>

　　权重相同  则就近原则

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    /*div { 0001

        color: red;

    }

    div {  000

        color: green;

    }*/

    div p {/* 0001 + 0001  =  0002*/

        color: green;

    }

    p {  /*0001*/

        color: red;

    }

    .feng { /* 0010*/

        color: blue;

    }

    /*1. 权重相同  则就近原则*/

     /*2. 权重会叠加0001 + 0001  =  0002*/

    </style>

</head>

<body>

    <div>

        <p class="feng"> 凤姐 </p>

    </div>

</body>

</html>

透明

div {

            width: 200px;

            height: 200px;

            /*background-color: #000;*/

            color: #fff;

            background: rgba(0, 0, 0, .3); /* red  green blue  alpha  0~1  */

        }

 表格细线边框

<style>

    table {

        width: 500px;

        height: 300px;

        border: 1px solid red;

    }

    td {

        border: 1px solid red;

        text-align: center;

    }

    table, td {

        border-collapse: collapse;  /*合并相邻边框*/

    }

    </style>

 a链接

a:link {color: #FF0000} /* 未访问时的状态 */

a:visited {color: #00FF00} /* 已访问过的状态 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上时的状态 */

a:active {color: #0000FF} /* 鼠标按下去时的状态 */

 内边距问题

　　padding:0px,5px,10px,15px;就是上为0，右为5，下为10，左为15，

　　padding的顺序是顺时针方向的

　　padding会撑开 带有widht 和height盒子，要记得减去padding值

<style>

    div {

        width: 160px;

        height: 160px;

        border: 1px solid red;

        padding-left: 20px;

        /*非常严重的问题， padding 会撑开 带有 widht 和height盒子*/

    /*    1. 我们要求这个 div 就是标准的 200 * 200

        2. 但是我们给了padding就撑开盒子了  240

        3. 问我们怎样能保证盒子 不超过 200 * 200 */

    }

</style>

 外边距

　　控制盒子与盒子之间的间距

 盒子居中三种方式

 /* margin: 0 auto; 通俗写法 0 auto  上下是 0  左右是auto  自动  水平居中对齐 */

/* margin-left: auto;

margin-right: auto; 自动充满*/

/* margin: auto; 上下左右都是auto*/

 外边距塌陷

　　外边距合并 尽量避免

 圆角边框（border-radius: 150px）

<style>

    div {

        width: 312px;

        height: 312px;

        /*background-color: pink;*/

        margin: 100px auto;

        /*border-radius: 50%; 让一个正方形  变成圆圈*/

        border: 1px solid red;

        border-radius: 150px 0;

    }

</style>

 圆角练习

<style>

    body {

        background-color: #ccc;

    }

    .radius a {

       width: 172px;

       height: 172px;

       background-color: #fff;

       display: inline-block;

       margin: 30px;

       border-radius: 50%;

       text-align: center;

       line-height: 172px;

       color: red;

       text-decoration: none;

       font-weight:;

    }

    .radius a:hover {

        background-color: red;

        color: #fff;

    }

    </style>
<div class="radius">

        <a href="#">文字内容</a>

        <a href="#">文字内容</a>

        <a href="#">文字内容</a>

        <a href="#">文字内容</a>

</div>

效果

 盒子阴影

<style>

    div {

        width: 200px;

        height: 200px;

        /*box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.4);*/

        /*transition: all 1s;*/

    }

    div:hover {  /*鼠标经过div时候的样子。。。*/

        box-shadow: 0 15px 30px rgba(0,0,0,0.1);

    }

</style>

浮动

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        .one {

            width: 300px;

            height: 200px;

            background-color: red;

            float: left;

        }

        .two {

            width: 320px;

            height: 200px;

            float: left;

            background-color: greenyellow;

        }

        .three {

            width: 320px;

            height: 200px;

            float: left;

            background-color: blue;

        }

        .four {

            width: 320px;

            height: 200px;

            float: right;

            background-color: cyan;

        }

    </style>

</head>

<body>

    <div class="one"></div>

    <div class="two"></div>

    <div class="three"></div>

    <div class="four"></div>

</body>

</html>

CSS魔法（二）的更多相关文章

  1. 邓布利多拍了拍你，并递来一份CSS魔法

    校长:阿不思·邓布bai利多 亲爱的少年:我们愉快地通知您,您已获准在CSS魔法学校就读.特此带给你一份CSS魔法秘籍,代码简单,支持个性化定制.学期定于今日开始,我们将在此静候您的猫头鹰带来您的回信 ...

  2. CSS 魔法系列：纯 CSS 绘制各种图形《系列六》

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  3. CSS 魔法系列：纯 CSS 绘制各种图形《系列五》

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  4. CSS 魔法系列：纯 CSS 绘制图形（各种形状的钻石）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  5. CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）

    <CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

  6. CSS 魔法系列：纯 CSS 绘制基本图形（圆、椭圆等）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  7. 前端总结·基础篇·CSS（二）视觉

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...

  8. css入门二-常用样式

    css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...

  9. 基本CSS布局二

    基本CSS布局二------基本页面布局二 /*主面板样式*/ #container { width:100%; margin:0px auto;/*主面板DIV居中*/ } /*顶部面板样式*/ # ...

随机推荐

  1. 如何实现圆形的进度条(ProgressBar)

    在我们实际的工作中可能经常使用到圆形的进度条,但是这是怎么实现的呢?其实这只不过是修改了一下ProgressBar的模板,我们在下面的代码中我们将ProgressBar的Value值绑定到Border ...

  2. 深度学习网络压缩模型方法总结(model compression)

    两派 1. 新的卷机计算方法 这种是直接提出新的卷机计算方式,从而减少参数,达到压缩模型的效果,例如SqueezedNet,mobileNet SqueezeNet: AlexNet-level ac ...

  3. BZOJ3653谈笑风生——可持久化线段树+dfs序

    题目描述 设T 为一棵有根树,我们做如下的定义: ? 设a和b为T 中的两个不同节点.如果a是b的祖先,那么称“a比b不知道 高明到哪里去了”. ? 设a 和 b 为 T 中的两个不同节点.如果 a ...

  4. git各种撤销提交

      Git的几种状态 未修改 工作区 已修改 ↓ 工作区 已暂存 ↓ 暂存区 已提交 ↓ 本地仓库 已推送 ↓ 远程仓库 已修改 未暂存 已经修改了文件,还未进行git add 恢复方法 使用一下任意 ...

  5. 自学Linux Shell9.1-安装软件程序

    点击返回 自学Linux命令行与Shell脚本之路 9.1-linux安装软件程序 PMS利用一个数据库来记录各种相关内容: Linux系统安装了什么软件包 每个包安装什么文件 每个已安装软件包的版本 ...

  6. loj #116. 有源汇有上下界最大流

    题目链接 有源汇有上下界最大流,->上下界网络流 注意细节,重置cur和dis数组时,有n+2个点 #include<cstdio> #include<algorithm> ...

  7. Internet Explorer 10 administration IE10管理

    http://4sysops.com/archives/internet-explorer-10-administration-part-1-overview/ http://4sysops.com/ ...

  8. 洛谷 P4211 [LNOI2014]LCA 解题报告

    [LNOI2014]LCA 题意 给一个\(n(\le 50000)\)节点的有根树,询问\(l,r,z\),求\(\sum_{l\le i\le r}dep[lca(i,z)]\) 一直想启发式合并 ...

  9. 洛谷 P2774 方格取数问题 解题报告

    P2774 方格取数问题 题目背景 none! 题目描述 在一个有 \(m*n\) 个方格的棋盘中,每个方格中有一个正整数.现要从方格中取数,使任意 2 个数所在方格没有公共边,且取出的数的总和最大. ...

  10. ormlite 文档

    目录[-] A Fast, Simple, Typed ORM for .NET Download 8 flavours of OrmLite is on NuGet: Docs and Downlo ...