<!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. windows下实现linux的远程访问以及linux上文件的上传和下载

    在网络性能.安全性.可管理性上,Linux有着其他系统无法比拟的强大优势,而服务器对这些方面要求特别高,因此Linux常常被用来做服务器使用.而当我们需要维护linux服务器的时候,就需要远程访问li ...

  2. submit text3的激活与使用

    SublimeText3常用快捷键和优秀插件 SublimeText是前端的一个神器,以其精简和可DIY而让广大fans疯狂.好吧不吹了直入正题 -_-!! 首先是安装,如果你有什么软件管家的话搜一下 ...

  3. AngularJS 路由精分

    AngularJS 路由机制是由ngRoute模块提供,它允许我们将视图分解成布局和模板视图,根据url变化动态的将模板视图加载到布局中,从而实现单页面应用的页面跳转功能. AngularJS 路由允 ...

  4. spring框架总结（04）----介绍的是Spring中的JDBC模板

    1.1  Jdbc模板概述 它是spring框架中提供的一个对象,是对原始Jdbc API对象的简单封装.spring框架为我们提供了很多的操作模板类,入下图所示: 我们今天的主角在spring-jd ...

  5. windows无法启动MySQL服务 错误1067

    启动wampmysqld 出现 1067 错误 解决方法:删除在MySQL安装目录下的Data目录中的ib_logfile0和ib_logfile1这两个文件. 重新启动MySQL服务

  6. C-Flex 与 box布局教程

    http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html -阮一峰老师 http://www.w3cplus.com/css3/flexbox- ...

  7. WebApi实现自定义错误日志

    一.Mvc错误处理默认有添加HandleErrorAttribute默认的过滤器,但是我们有可能要捕捉这个错误并记录系统日志那么这个过滤器就不够用了,所以我们要自定义Mvc及Web Api各自的错误处 ...

  8. 结束《Java编程思想》（Thinking in Java）自学的读后感（2017.10.15）

    首先划重点:这是一本Java的入门书. 自学前需要的条件:已经具备基本的计算机基础. 1)已经对一种编程语言比较熟悉: 2)有过四年计算机专业学习,或者三年以上的软件开发经验, 自学的方法: 1)完全 ...

  9. 使用wget做站点镜像及wget的高级用法

    本文为大家介绍 使用wget做站点镜像及wget的高级用法,供大家学习参考. # wget -r -p -np -k http://xxx.edu.cn -r 表示递归下载,会下载所有的链接,不过要注 ...

  10. Android基础知识笔记01—框架结构与四大组件

    -----------Andriod 01--------------->>> Andriod系统架构    linux内核与驱动层. 系统运行库层. 应用框架层. 应用层 内核驱动 ...