<!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. [Sdoi2010]星际竞速

    个人对山东省选已经十分无语了,做了三道题,都TM是费用流,这山东省选是要干什么,2009--2011连续三年,只要会费用流,然后建个边,跑一跑就过了. 10 年一度的银河系赛车大赛又要开始了.作为全银 ...

  2. Python文件复制（txt文件）

    功能:这个py脚本是把一个txt文件(源文件)复制到另一个txt文件(目的文件)里面 算法思路: 程序首先判断源文件(用exists函数判断)和目的文件是否存在,如果不存在则输出文件路径不存在,如果存 ...

  3. python中strip函数的用法

    python中往往使用剥除函数strip()来对用户的输入进行清理.strip函数的最一般形式为: str.strip('序列') 其中,序列是一段字符串,该函数表示从头或者从尾部开始进行扫描,如果扫 ...

  4. String+ String.Concat String.Format StringBuilder 之间的性能测试

    找到一篇国外的代码,专门来测试这个, String+ String.Concat String.Format StringBuilder 前三个在100个左右字符串差不多, String.Concat ...

  5. Hadoop就是一个别人造好的轮子

    这个想法源自于我看了<Hadoop: The Definitive Guide>的Part I Ch 2中MapReduce的引入和介绍,书中先说了怎么通过原始的办法处理数据,然后引入到如 ...

  6. Nunit测试工具使用实例

    前言: 本文主要是介绍了Nunit的基本使用,其中参详了很多已有的文章,由于最近要使用其进行测试,所以对网上的文章做了下整理,同时加入了一些自己的实践. NUnit的属性 TestFixture 它标 ...

  7. python模拟登陆 pixiv

    ##---author:wuhao##在QQ群看到有群友在模拟登陆 pivix.cn 这个网站,闲来无事,我也写了一个测试一下,起初我把它想的复杂了,认为我需要获取服务器返回过来的Set-Cookie ...

  8. 数据挖掘 ID3

    本文讲的是数据挖掘中的ID3,这个有很多人做了,我也没有说什么改善,只是要考试,用我考试记录的来写,具有很大主观性,如果看到有觉得不对或感觉不好,请关掉浏览器或和我说,请不要生气或发不良的言论. 决策 ...

  9. php环境搭建工具推荐

    楼楼最近由于一系列原因,使用了几款php环境搭建工具,安装配置方便,所以在这里推荐一下.第一款是XAMPP(网址http://www.xampps.com/),软件包原来的名字是 LAMPP,但是为了 ...

  10. [原创]InnoDB体系结构

    参阅:<innodb存储引擎内幕> innodb整体的体系结构如下图所示:  整体结构分两大部分:内存和进程其中内存包括:buffer_pool\redo log buffer\addit ...