HTML学习笔记 w3sCss盒子模型(阴影)(div的一些使用)案例 第十节 (原创) 参考使用表
2024-09-13 14:05:14
<!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; }
最新文章
- 【代码笔记】iOS-UIView的placeholder的效果
- Python之路 day3 递归函数
- session204 imessageApp sticker part I要点
- AngularJS directive 指令相关记录
- 登陆sqlserver及修改端口号 (转)
- ARM Mysql c 通信
- 【转】UVa Problem 100 The 3n+1 problem (3n+1 问题)——(离线计算)
- final static T
- 一道c++小编程题,
- Asp.NET路由管道处理过程 【重要】
- HDU 2489 Minimal Ratio Tree 最小生成树+DFS
- 浅谈viewport
- jstl的表达式不能解析
- Kafka并不难学
- power designer的安装
- 关于在ROS kinetic下arbotix报错的问题
- Failed while installing JAX-RS (REST Web Services) 1.1. org.osgi.service.prefs.BackingStoreException: Resource &#39;/.settings&#39; does not exist.
- canvas实现时钟
- Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11.0) like Gecko
- 【C++】operator new/new operator/placement new之间的区别
热门文章
- 【转载】关于api-ms-win-crt-runtimel1-1-0.dll缺失的解决方案
- C++拷贝构造函数专题
- 集 降噪 美颜 虚化 增强 为一体的极速图像润色算法 附Demo程序
- [mysql]ERROR 1364 (HY000): Field &#39;ssl_cipher&#39; doesn&#39;t have a default value 解决方法
- 面向对象编程笔记--static
- 【原创】自用css reset
- 2017年十大奇葩画风的H5页面案例,原来脑洞可以这样大
- [js高手之路]html5 canvas动画教程 - 下雪效果
- 表单处理的方案与注意事项(servlet)
- Xcode9 FFmpeg冲突问题