<!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. Linux入门之常用命令（13） date

    在linux shell编程中,经常用到日期的加减运算 以前都是自己通过expr函数计算,很麻烦 其实date命令本身提供了日期的加减运算 非常方便.例如:得到昨天的时间date +%Y%m%d -- ...

  2. 小米2017秋招真题——电话号码分身问题（Java版）

    原题描述如下: 通过对各个数字对应的英文单词的分析,可以发现一些规律: 字母Z为0独占,字母W为2独占,字母U为4独占,字母X为6独占,字母G为8独占: 在过滤一遍0.2.4.6.8后,字母O为1独占 ...

  3. 17.tslib安装以及使用

    1.先在网上下载 tslib-1.4.tar.gz压缩包 2.然后在ubuntu编译: tar xzf tslib-1.4.tar.gz cd tslib ./autogen.sh mkdir tmp ...

  4. bzoj4033（树上染色）

    树上染色 有一棵点数为N的树,树边有边权.给你一个在0~N之内的正整数K,你要在这棵树中选择K个点,将其染成黑色,并 将其他的N-K个点染成白色.将所有点染色后,你会获得黑点两两之间的距离加上白点两两 ...

  5. Flash与 Javascript 交互

    网页加载时立即调用 ExternalInterface.addCallback中定义的函数会失败,放到按键中调用正常. 推测:可能是flash对象加载时间略长,网页加载到js时,flash对象尚未初始 ...

  6. FPGA多时钟处理应用

    FPGA项目设计中,通常会遇到多时钟处理.即一个PLL输出多个时钟,根据条件选择合适的时钟用作系统时钟.方案一: 外部晶振时钟进入PLL,由PLL输出多个时钟,MUX根据外部条件选择时钟输出做为系统使 ...

  7. android中跨线程向控件传值的问题

    activity.oncreate(bundle savedinstancestate)中创建一个handler类的实例, 在这个handler实例的handlemessage回调函数中调用更新界面显 ...

  8. 【转】wireshark基本用法及过虑规则

    Wireshark 基本语法,基本使用方法,及包过虑规则: 1.过滤IP,如来源IP或者目标IP等于某个IP   例子: ip.src eq 192.168.1.107 or ip.dst eq 19 ...

  9. WPF控件 在XP下获得焦点有虚线框

    所有 Button.ListBox等控件获得焦点时有虚线框.如图:选中523这个按钮就出线虚框. 我在App.xaml中添加适应所有按钮的样式,无效 <Style  TargetType=&qu ...

  10. Java IO编程全解（一）——Java的I/O演进之路

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/7419117.html JDK1.4之前的早期版本,Java对I/O的支持并不完善,开发人员在开发高性能I/O ...