<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>W3sCSS盒子模型</title>
    <!--其实就是div加css样式设计出一些逻辑页面-->
    <link rel="stylesheet" href="tzy.css" type="text/css">
</head>
<body style="margin: 0px">
<!--取消身体外层的外边框-->
<img src="http://images.cnblogs.com/cnblogs_com/ttzzyy/1076163/o_8L7BYYH7PD%606Z@3F4X]2V8H.png" alt="盒子模型图片">
<!--padding设置所有内边距————padding-botton设置内低边距--left设置内左边距-->
<!--right设置内右边距————top设置内上边距-->
<table border="1" cellpadding="100px"cellspacing="10">
    <tr>
        <td>0</td>
    </tr>
</table>
<table border="1">
    <tr>
        <td id="td1">1</td>
    </tr>
</table>
<table border="1">
    <tr>
        <td id="td2">2</td>
    </tr>
</table>
<table border="1">
    <tr>
        <td id="td3">3</td>
    </tr>
</table>
<table border="1">
    <tr>
        <td id="td4">4</td>
    </tr>
</table>
<p>边框效果</p>
<div class="tzy">阴影效果</div>
<div class="ttzy">外边距</div>

<div class="container">
    <div class="bd">
        <div class="pd">
            <div class="content">Hello</div>
        </div>
    </div>
</div>

</body>
</html>
#td1{
    padding-bottom: 100px;
}
#td2{
    padding-left: 100px;
}
#td3{
    padding-right: 100px;
}
#td4{
    padding-top: 100px;
}
p{
    border-style: double;
    border-top-style: solid;
    border-bottom-style: hidden;
    border-left-style: dotted;
    border-right-color: aqua;
    border-bottom-width: 10px;
    /*border-style 定义了10个不同的非继承的样式边框包括none（空）*/
    /*单边加上下左右就可以设置*/
    /*border-width边框宽度*/
    /*单边加上下左右就可以设置*/
    /*border-color边框颜色 */
    /*单边加上下左右就可以设置*/
    border-radius:50px;
    width: 100px;
    height: 50px;
    /*设置圆角  边框四角弧度*/
    background-color: bisque;
    text-align: center;
    /*border: 2px solid blue;*/
    /*一般设置方法*/
}
.tzy{
    color: blue;
    background-color: aqua;
    width: 100px;
    height: 100px;
    text-align: center;
    box-shadow: 10px 10px 15px #FF00FF;
    /*阴影效果*/
}
.ttzy{
    background-color: bisque;
    width: 100px;
    height: 100px;
    margin: 100px;
    /*margin居上和左为100PX margin也有上下左右属性*/
}
.container{
    /*外边框*/
    margin: 100px;
}
.bd{
    /*边框*/
    border-style: double;
}
.pd{
    /*内边距*/
    padding: 100px;
}
.content{
    background-color: #FF00FF;
}

HTML学习笔记 w3sCss盒子模型（阴影）（div的一些使用）案例 第十节 （原创） 参考使用表的更多相关文章

  1. HTML学习笔记 w3sCss盒子模型应用案例（div布局） 第十一节 （原创） 参考使用表

    * { margin: 0px; padding: 0px; } .top { width: 100%; height: 50px; background-color: antiquewhite; } ...

  2. [CSS3] 学习笔记--CSS盒子模型

    1.CSS盒子模型概述 盒子模型的内容范围包括:margin(外边距).border(边框).padding(内边距).content(内容)部分组成. 2.内边距 内边距在content外,bord ...

  3. CSS学习笔记07 盒子模型

    1.盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. ...

  4. CSS学习笔记：盒子模型

    盒子模型(CSS basic box model):When laying out a document, the browser's rendering engine represents each ...

  5. 操作系统学习笔记----进程/线程模型----Coursera课程笔记

    操作系统学习笔记----进程/线程模型----Coursera课程笔记 进程/线程模型 0. 概述 0.1 进程模型 多道程序设计 进程的概念.进程控制块 进程状态及转换.进程队列 进程控制----进 ...

  6. V-rep学习笔记：机器人模型创建3—搭建动力学模型

    接着之前写的V-rep学习笔记:机器人模型创建2—添加关节继续机器人创建流程.如果已经添加好关节,那么就可以进入流程的最后一步:搭建层次结构模型和模型定义(build the model hierar ...

  7. V-rep学习笔记：机器人模型创建2—添加关节

    下面接着之前经过简化并调整好视觉效果的模型继续工作流,为了使模型能受控制运动起来必须在合适的位置上添加相应的运动副/关节.一般情况下我们可以查阅手册或根据设计图纸获得这些关节的准确位置和姿态,知道这些 ...

  8. ArcGIS模型构建器案例学习笔记-字段处理模型集

    ArcGIS模型构建器案例学习笔记-字段处理模型集 联系方式:谢老师,135-4855-4328,xiexiaokui@qq.com 由四个子模型组成 子模型1:判断字段是否存在 方法:python工 ...

  9. [CSS3] 学习笔记-CSS3盒子样式

    1.盒子的类型 在CSS3中,使用display来定义盒子的类型,包括block,inline,inline-block类型.div元素和P元素,属于block类型,span元素和a元素,属于inli ...

随机推荐

  1. Highway Networks Pytorch

    导读 本文讨论了深层神经网络训练困难的原因以及如何使用Highway Networks去解决深层神经网络训练的困难,并且在pytorch上实现了Highway Networks. 一 .Highway ...

  2. Sublimetext3安装Emmet插件步骤

    看清楚哦~~这是Sublime text 3不是2的版本,两者的安装还是有区别的,下面的方法是我感觉比较简单的,其他的要命令什么的感觉太复杂了,经测试是OK的. 先关闭Sublime text 3: ...

  3. Problem 2144 Shooting Game fzu

    Problem 2144 Shooting Game Accept: 99    Submit: 465Time Limit: 1000 mSec    Memory Limit : 32768 KB ...

  4. Mac上搭建基于Github的Hexo博客

    Mac 上搭建基于Github的hexo博客 博客地址:往事亦如风的博客 hexo官方文档 本来想搭一个自己的博客,但是因为服务器真心买不起,所以就使用gitpages搭建一个免费的博客. 环境配置 ...

  5. Weave Scope 容器地图 - 每天5分钟玩转 Docker 容器技术（80）

    Weave Scope 的最大特点是会自动生成一张 Docker 容器地图,让我们能够直观地理解.监控和控制容器.千言万语不及一张图,先感受一下. 下面开始实践 Weave Scope. 安装 执行如 ...

  6. asp.net中kindeditor配置

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>KindEditor< ...

  7. web 导出 csv

    public void ProcessRequest(HttpContext context)        {            //DownloadFile("教程.csv" ...

  8. 浅谈前后端分离与实践 之 nodejs 中间层服务（二）

    一.背景 书接上文,浅谈前后端分离与实践(一) 我们用mock服务器搭建起来了自己的前端数据模拟服务,前后端开发过程中只需定义好接口规范,便可以相互进行各自的开发任务.联调的时候,按照之前定义的开发规 ...

  9. LINUX 笔记-特定shell变量

    $# 传递到脚本的参数个数 $* 以一个单字符串显示所有向脚本传递的参数.与位置变量不同,此选项参数可超过9个 $$ 脚本运行的当前进程ID号 $! 后台运行的最后一个进程的进程ID号 $@ 与$*相 ...

  10. 博客志第一天——判断一个整数N是否是完全平方数？

    关注博客园很久,今天是第一次写博客.先附上一个C题目:写一个函数判断一个整数是否为完全平方数,同时是否该数的各位数至少两个相同的数字 #include <stdio.h> #include ...