<!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. 第4章 同步控制 Synchronization ----事件（Event Objects）

    Win32 中最具弹性的同步机制就属 events 对象了.Event 对象是一种核心对象,它的唯一目的就是成为激发状态或未激发状态.这两种状态全由程序来控制,不会成为 Wait...() 函数的副作 ...

  2. 使用Scrapy创建一个爬虫

    使用Scrapy创建一个爬虫 创建项目 您可以使用下面的命令来创建 Scrapy 项目: scrapy startproject 项目名称 例:scrapy startproject scrapy_p ...

  3. Linux修改hostname的几种方法

    修改hostname有几种方式 1:  hostname DB-Server                            --运行后立即生效(新会话生效),但是在系统重启后会丢失所做的修改 ...

  4. vue2购物车ch4-(筛选v-for 点击的那个设置样式 设为默认地址其他 联动 非循环的列表选中和非选中 删除当前选中的列表)

    1 address.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  5. Ghost文件封装说明

    一.先列举目前Windows系统安装方式: 1.光盘安装 1.1 使用可刻录光驱将系统ISO文件刻录至DVD光盘,刻录工具比较多,QA目前使用Ultra ISO. 1.2 安装电脑从DVD光盘启动,无 ...

  6. 【转】python数据格式化之pprint

    pprint – 美观打印 作用:美观打印数据结构 pprint 包含一个“美观打印机”,用于生成数据结构的一个美观视图.格式化工具会生成数据结构的一些表示,不仅可以由解释器正确地解析,而且便于人类阅 ...

  7. python检查IP地址正确性

    一.自动动手,丰衣足食 #encoding=utf-8 import os,sys def check_ip(ipaddr): addr = ipaddr.strip().split('.') #切割 ...

  8. Linux软件安装管理

    1.软件包管理简介 1.软件包分类 源码包 脚本安装包 二进制包(RPM包.系统默认包) 2.源码包 源码包的优点是: 开源,如果有足够的能力,可以修改源代码 可以自由选择所需要的功能 软件设计编译安 ...

  9. 关闭eclipse自动弹出console的功能

    当启动项目后,console有值时就会弹出,挺烦人的,可以如下修改

  10. ubuntu tftp-server 服务器安装与配置

    第一步:安装tftp服务sudo apt-get install tftpd tftp openbsd-inetd第二步:目录配置vi /etc/inetd.conf修改文件夹为根目录下的tftpbo ...