p{
font-size: 15px; text-indent: 2em;
}
.alexrootdiv>div{
background: #eeeeee; border: 1px solid #aaa;
width: 99%; padding: 5px; margin: 1em 0 1em 0;
}
.alexrootdiv>div>p:first-of-type,.alextitlep{
font-size: 18px; font-weight: bold; color: red;
}
.alexrootdiv span{
color:blue;font-weight:bold;
}
.alexrootdiv table{
margin-top:10px;border-collapse:collapse;
border:1px solid #aaa;width:100%;
}
.alexrootdiv table th{
vertical-align:baseline;padding:5px 15px 5px 6px;
background-color:#d5d5d5;border:1px solid #aaa;text-align:left;
}
.alexrootdiv table td{
vertical-align:text-top;padding:6px 15px 6px 6px;
background-color:#efefef;border:1px solid #aaa;
}
.attentationp{
font-size: 15px; text-indent: 2em;
background: #ee0; color: red; font-weight: bold;
}
-->

1
2
3
4
  1. <style><!--
  2. .col-3{
  3. width: calc(100%/3 - 6px);
  4. float: left;
  5. margin-right: calc(6px*3 /2);
  6. background: #fff;
  7. color: #333;
  8. height: 100px;
  9. text-align: center;
  10. margin-bottom: calc(6px*3 /2);
  11. font-size: 18px;
  12. line-height: 100px;
  13. box-shadow:0 0 10px;
  14. }
  15. .col-3:nth-child(3){
  16. margin-right: 0;
  17. }
  18. .container{
  19. overflow:hidden;
  20. }
  21. .alexrootdiv{
  22. font-family: 微软雅黑;
  23. margin: 0;
  24. padding: 0;
  25. }
  26. .alexrootdiv>p{
  27. font-size: 15px; text-indent: 2em;
  28. }
  29. .alexrootdiv>div{
  30. background: #eeeeee; border: 1px solid #aaa;
  31. width: 99%; padding: 5px; margin: 1em 0 1em 0;
  32. }
  33. .alexrootdiv>div>p:first-of-type,.alextitlep{
  34. font-size: 18px; font-weight: bold; color: red;
  35. }
  36. .alexrootdiv span{
  37. color:blue;font-weight:bold;
  38. }
  39. .alexrootdiv table{
  40. margin-top:10px;border-collapse:collapse;
  41. border:1px solid #aaa;width:100%;
  42. }
  43. .alexrootdiv table th{
  44. vertical-align:baseline;padding:5px 15px 5px 6px;
  45. background-color:#d5d5d5;border:1px solid #aaa;text-align:left;
  46. }
  47. .alexrootdiv table td{
  48. vertical-align:text-top;padding:6px 15px 6px 6px;
  49. background-color:#efefef;border:1px solid #aaa;
  50. }
  51. .attentationp{
  52. font-size: 15px; text-indent: 2em;
  53. background: #ee0; color: red; font-weight: bold;
  54. }
  55. --></style>
  56. <div class="alexrootdiv">
  57. <div class="container">
  58. <div class="col-3">1</div>
  59. <div class="col-3">2</div>
  60. <div class="col-3">3</div>
  61. <div class="col-3">4</div>
  62. </div>
  63. </div>

CSS3学习笔记(4)-CSS3函数的更多相关文章

  1. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  2. CSS3学习笔记(1)-CSS3选择器

    p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...

  3. IOS学习笔记07---C语言函数-printf函数

    IOS学习笔记07---C语言函数-printf函数 0 7.C语言5-printf函数 ------------------------- ----------------------------- ...

  4. IOS学习笔记06---C语言函数

    IOS学习笔记06---C语言函数 --------------------------------------------  qq交流群:创梦技术交流群:251572072              ...

  5. Typescript 学习笔记三:函数

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  6. ES6学习笔记<三> 生成器函数与yield

    为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...

  7. OpenCV 学习笔记03 findContours函数

    opencv-python   4.0.1 1 函数释义 词义:发现轮廓! 从二进制图像中查找轮廓(Finds contours in a binary image):轮廓是形状分析和物体检测和识别的 ...

  8. canvas学习笔记、小函数整理

    http://bbs.csdn.net/topics/391493648 canvas实例分享 2016-3-16 http://bbs.csdn.net/topics/390582151 html5 ...

  9. Go语言学习笔记七: 函数

    Go语言学习笔记七: 函数 Go语言有函数还有方法,神奇不.这有点像python了. 函数定义 func function_name( [parameter list] ) [return_types ...

随机推荐

  1. vue实现图书管理demo

    年后公司的项目要求用到vue.js知识,我angular没有学,node.js和react也只是了解了一点点,所以学起来比较困难.如果你想学vue.js的知识,推荐网址:http://vuejs.or ...

  2. 【异构计算】在Windows下使用OpenCL配置

    前言 目前,NVIDIA 和 AMD 的 Windows driver 均有支持OpenCL(NVIDIA 的正式版 driver 是从自195.62 版开始,而 AMD则是从9.11 版开始).NV ...

  3. masm32V11配置

    本文写给学汇编语言程序设计刚起步的吧友.适用Windows操作系统.已入门的吧友请绕道. (1)masm32开发包的下载 要用汇编语言编程,首先得有个开发工具,汇编语言开发工具有多种,但本文仅介绍ma ...

  4. Android Weekly Notes Issue #245

    Android Weekly Issue #245 February 19th, 2017 Android Weekly Issue #245 本期内容: 写好单元测试的几条原则; 如何mock Ko ...

  5. 子进程 已安装 post-installation 脚本 返回错误状态 1,dpkg: 处理软件包 python-crypto (--configure)时出错: 该软件包正处于非常不稳定的状态;

    这几天在学习redis的时候,装软件总是报错,两个问题都和dpkg有关,上网查阅了些解决办法,发现整体来说执行以下方法均可解决. 虽然每个人需要安装的包不同,但是出现此类问题的不同也只有安装包的名字, ...

  6. 2017-2-23 C#基础 中间变量

    用中间变量做这个题 1."请输入年份:"(1-9999) "请输入月份:"(1-12) "请输入日期:"(要判断大小月,判断闰年) 判断输入 ...

  7. iOS 用Swipe手势和动画实现循环播放图片

    主要想法 添加3个ImageView展示图片,实现图片的无限循环. 使用Swipe手势识别用户向右或向左滑动图片. 使用CATransition给ImageView.layer添加动画,展示图片更换的 ...

  8. 版本管理工具 —— SVN

    想想我们在开发过程中是不是会遇到这样的情况: 今天写了很长的一段代码,觉得不合理,然后删了,第二天突然发现昨天的那段代码才是正确的,那怎么办,也无法撤销删除的代码? 还有团队中多人共同开发一个项目,如 ...

  9. 查看iis对应w3wp.exe显示的进程ID号(转载)

    管理员身份运行cmd,跳转到C:\Windows\System32\inetsrv目录,然后运行appcmd list wp即可查看

  10. .NET Core跨平台:.NET Core项目部署到linux(Centos7)

    1.开篇说明 a 上篇博客简单的说明了一下 使用.NET Core开发的一个总结,地址是:(http://www.cnblogs.com/hanyinglong/p/6442148.html),那么这 ...