关于css各标签的属性: w3cschool一应俱全

设置固定的图片:

  1. body
  2.   {
  3.   background-image: url(bgimage.gif);
  4.   background-attachment: fixed;
  5.   }

边框设置属性:

效果:

  1.       .c1{
  2.             /* 200*200是正方形 */
  3.             width: 200px;
  4.             height: 200px;
  5.             /*height: 100px;*/
  6.             /*border: 10px dashed blue;*/
  7.             border-left:  10px dashed green;
  8.             border-right:  10px dashed red;
  9.             border-bottom: 10px dashed yellow;
  10.             border-top: 10px solid purple;
  11.             border-radius: 50%;
  12.             /*background: url("xyjy.png") no-repeat;*/
  13.  
  14.             /*溢出的部分隐藏*/
  15.             overflow: hidden;
  16.  
  17.         }
  18.         .c1 img{
  19.             /*按照父级标签的宽度来展示,并且进行等比缩放*/
  20.             max-width: 100%;
  21.         }
  22.  
  23. <div class="c1">
  24. <img src="xyjy.png" alt="">
  25. </div>

关于div浮动

效果:

div使用float进行浮动,浮动后产生异常需要处理一下,将浮动后外面加上一层

  1. .clearfix:after{
  2.             content: '';
  3.             display: block;
  4.             clear: both;
  5.         }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <!--<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>-->
  7.     <!--<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>-->
  8.     <style>
  9.  
  10.         .c1{
  11.             width: 200px;
  12.             height: 100px;
  13.             border: 1px solid black;
  14.  
  15.         }
  16.  
  17.         .c2{
  18.             background-color: red;
  19.             /*display: none;*/
  20.             /*visibility: hidden;*/
  21.         }
  22.  
  23.         .c3{
  24.             background-color: blue;
  25.         }
  26.         .c3,.c4{
  27.             display: inline-block;
  28.         }
  29.  
  30.         /*.sp1{*/
  31.             /*border: 1px solid red;*/
  32.             /*display: block;*/
  33.             /*width: 100px;*/
  34.             /*height: 100px;*/
  35.         /*}*/
  36.  
  37.     </style>
  38.  
  39. </head>
  40. <body>
  41.  
  42.     <div class="c1">
  43.  
  44.     </div>
  45.     <div class="c1 c2">
  46.  
  47.     </div>
  48.     <div class="c1 c3">
  49.         我是c3标签
  50.     </div>
  51.     <div class="c1 c4">
  52.         我是c4标签
  53.     </div>
  54.  
  55.     <!--<span class="sp1">-->
  56.         <!--我是span1-->
  57.     <!--</span>-->
  58.  
  59.     <!--<span class="sp1">-->
  60.         <!--我是span2-->
  61.     <!--</span>-->
  62.  
  63. </body>
  64. </html>

示例

定位:返回顶部按钮

效果:

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Title</title>
  4.     <!--<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>-->
  5.     <!--<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>-->
  6.  
  7.     <style>
  8.         body{
  9.             margin:;
  10.             padding:;
  11.         }
  12.  
  13.         .c1,.c2,.c3{
  14.             width: 100px;
  15.             height: 600px;
  16.             background-color: red;
  17.             border: 1px solid black ;
  18.         }
  19.  
  20.         /*相对定位*/
  21.         /*.c2{*/
  22.             /*position: relative;*/
  23.             /*left: 102px;*/
  24.             /*!*top:-102px;*!*/
  25.             /*bottom:102px;*/
  26.             /*!*right: ;*!*/
  27.         /*}*/
  28.         /*绝对定位*/
  29.         .c2{
  30.             background-color: yellow;
  31.             position: absolute;
  32.             height: 100px;
  33.             left: 60px;
  34.             top:20px;
  35.  
  36.         }
  37.         .c4{
  38.             width: 200px;
  39.             height: 200px;
  40.             background-color: pink;
  41.             position: relative;
  42.             left: 100px;
  43.             top:150px;
  44.  
  45.         }
  46.  
  47.         .back-top{
  48.             position: fixed;
  49.             bottom: 20px;
  50.             right: 20px;
  51.             width: 80px;
  52.             height: 40px;
  53.             background-color: rgba(255,165,0,0.5);
  54.  
  55.             text-align: center;
  56.             line-height: 40px;
  57.             border-radius: 5%;
  58.  
  59.         }
  60.         .back-top:hover{
  61.             background-color: rgba(255,165,0,1);
  62.         }
  63.  
  64.         .back-top a{
  65.             color: white;
  66.             text-decoration: none;
  67.         }
  68.  
  69.     </style>
  70.  
  71. </head>
  72. <body>
  73.  
  74. <a name="top">顶部位置在这里</a>
  75.  
  76. <div class="c1">
  77.     c1
  78. </div>
  79.  
  80. <!--测试一下相对定位和绝对定位的组合使用-->
  81. <div class="c4">
  82.     <div class="c2">
  83.  
  84.     </div>
  85.  
  86. </div>
  87.  
  88. <!--简单测试相对定位和绝对定位的-->
  89. <!--<div class="c2">-->
  90.     <!--c2-->
  91. <!--</div>-->
  92. <div class="c3">
  93.     c3
  94. </div>
  95.  
  96. <span class="back-top">
  97.     <a href="#top">返回顶部</a>
  98. </span>
  99.  
  100. </body>
  101. </html>

代码

溢出:

当文字超过div的大小时,使用overflow:scroll

效果:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <!--<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>-->
  7.     <!--<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>-->
  8.     <style>
  9.  
  10.         div{
  11.             width: 200px;
  12.             height: 200px;
  13.             border: 1px solid red;
  14.             overflow: scroll;
  15.         }
  16.  
  17.     </style>
  18. </head>
  19. <body>
  20.  
  21. <div>
  22.     犀一点通.
  23.  
  24. </div>
  25.  
  26. </body>
  27. </html>

代码

z-index完成模拟注册对话框

效果

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Title</title>
  5.     <!--<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>-->
  6.     <!--<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>-->
  7.     <style>
  8.         body{
  9.             margin:;
  10.             padding:;
  11.         }
  12.  
  13.         .content{
  14.             height: 600px;
  15.             width: 600px;
  16.             border:1px solid blue;
  17.             background-color: pink;
  18.         }
  19.  
  20.         .shadow{
  21.             background-color: black;
  22.             /*整个标签内容的颜色的透明度*/
  23.             opacity: 0.2;
  24.  
  25.             position: fixed;
  26.             width: 100%;
  27.             height: 900px;
  28.             top:;
  29.             left:;
  30.             color:red;
  31.             z-index:;
  32.  
  33.         }
  34.  
  35.         .reg{
  36.             width: 1000px;
  37.             height: 360px;
  38.             background-color: white;
  39.             border-radius: 5%;
  40.             position: fixed;
  41.             top:50%;
  42.             left: 50%;
  43.             margin-left:-500px;
  44.             margin-top: -180px;
  45.             z-index:;
  46.         }
  47.     </style>
  48.  
  49. </head>
  50. <body>
  51.  
  52. <div class="content">
  53.  
  54.  文字
  55. </div>
  56.  
  57. <div class="content">
  58.  
  59.     <a href="">金风玉露一相逢,便胜却人家无数</a>
  60.  
  61. </div>

代码

透明度属性:

rgba设置的是单独属性的透明度

opacity设置的是整个标签的透明度

效果:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <!--<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>-->
  7.     <!--<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>-->
  8.  
  9.     <style>
  10.         .c1,.c2{
  11.             width: 100px;
  12.             height: 100px;
  13.             /*background-color: red;*/
  14.             border: 1px solid red;
  15.         }
  16.  
  17.         /*rgba设置的是单独属性的透明度*/
  18.         .c1{
  19.             background-color: rgba(255,0,0,0.5);
  20.         }
  21.  
  22.         /*整个标签的透明度设置*/
  23.         .c2{
  24.             background-color: rgb(255,0,0);
  25.             opacity: 0.5;
  26.         }
  27.  
  28.     </style>
  29.  
  30. </head>
  31. <body>
  32.  
  33. <div class="c1">
  34.     xxxxxx
  35.  
  36. </div>
  37. <div class="c2">
  38.     ssssss
  39.  
  40. </div>
  41.  
  42. </body>
  43. </html>

透明度代码

css--一些基本属性的更多相关文章

  1. css选择器基本属性

    选择器一,相邻选择器: 1,相邻选择器 1),定义:相邻选择器匹配指定元素的相邻兄弟元素 2),用法:如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器 3),表示符 ...

  2. CSS3条件判断——@supports/window.CSS.supports()（转）

    CSS3条件判断,听起来"不明觉厉",如果你对CSS稍为熟悉一点的话,你会发现CSS中的"@media"就是条件判断之一.是的,在CSS3的条件判断规范文档中包 ...

  3. HTML and CSS学习概述-续

    1,   CSS是层叠样式表(Cascading Style Sheets)的缩写,它用于定义HTML元素的显示形式,是一种格式化网页内容的技术.CSS现在已经被大多数浏览器所支持,成为网页设计者必须 ...

  4. day15 web前端之css

    css的概念以及初体验 概念: CSS(cascading style sheet)也就是层叠样式表:它是一种网页设计的新技术,现在已经被大多数浏览器所支持,层位网页设计必不可少的工具之一.优点:   ...

  5. jquery进阶(1)

    今天我们接着来学习jQuery中的内容,包括css的操作.尺寸的操作.文档的操作.动画(有待补充),事件处理操作. 一.CSS 在css中可以设置css的基本属性 - .css("color ...

  6. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  7. html基础--css基本属性

    HTML基础--css基本属性     <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  8. CSS基础篇之了解CSS和它的基本属性

    CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...

  9. css基本属性

    CSS属性分类(最最常用的属性):颜色和长度文字盒模型布局定位背景文本和其他 常用CSS属性: <style>div{ color:#23729e; /*前景色*/ background: ...

  10. 第二章 CSS基本属性

    1.CSS:层叠样式表 一个元素允许同时应用多种样式,页面元素最终的样式即为多种样式的叠加效果. 2.CSS样式优先级 行内样式表>内部样式表>外部样式表[就近原则] id选择器>类 ...

随机推荐

  1. Windows环境下为PHP5.6安装redis扩展和memcached扩展

    一.php安装redis扩展   1.使用phpinfo()函数查看PHP的版本信息,这会决定扩展文件版本       2.根据PHP版本号,编译器版本号和CPU架构, 选择php_redis-2.2 ...

  2. WordPress部署

    WordPress部署 WordPress是一个门户.博客网站的制作工具,php开发,自带后台,可以很简便的安装主题,还拥有一个庞大的主题网站生态. 软件下载:https://cn.wordpress ...

  3. 在VS2005编程中,有的时候DataGridView数据源有几个表的联合查询,而系统又有限制为一个表,怎么办?

    在VS2005编程中,有的时候DataGridView数据源有几个表的联合查询,而系统又有限制为一个表,怎么办? 解决方法:在SqlServer的企业管理器里增加一个视图吧!!!!!!!!(从来没用过 ...

  4. login oracle as sysdba

  5. consul service

    {      "name": "consul-agent (host:{{ .MONITOR_CONSUL }})",      "command&q ...

  6. 并发包下常见的同步工具类详解(CountDownLatch,CyclicBarrier,Semaphore)

    目录 1. 前言 2. 闭锁CountDownLatch 2.1 CountDownLatch功能简介 2.2 使用CountDownLatch 2.3 CountDownLatch原理浅析 3.循环 ...

  7. sql server 设置用户名和密码

    安全性:security 登录名:Logins 可以双击直接对里面现有的用户权限进行修改 也可以右击新建新用户 并对新用户权限进行设置

  8. bloom

    bloom bloom也能实现和HDR类似的效果,但bloom的是静态的,HDR是动态渐变的, bloom在细节表现.明暗对比不如HDR,但实现HDR效果的系统资源开销也比 bloom大,bloom也 ...

  9. web图形方案比较html5、GML、SVG、VML

    GML.SVG和VML都是基于XML的可用来描述矢量图形的标记语言,都是XML词表,它们的语法并不难理解,但它们都有各自不同的用途和特点,下面简单介绍一下. GML(Geography Markup  ...

  10. js输出/获得Cookie

    js输出/获得Cookie //方法 1 function setCookie(name, value) { var Days = 365; var exp = new Date(); exp.set ...