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

设置固定的图片:

body

  {

  background-image: url(bgimage.gif);

  background-attachment: fixed;

  }

边框设置属性:

效果:

      .c1{

            /* 200*200是正方形 */

            width: 200px;

            height: 200px;

            /*height: 100px;*/

            /*border: 10px dashed blue;*/

            border-left:  10px dashed green;

            border-right:  10px dashed red;

            border-bottom: 10px dashed yellow;

            border-top: 10px solid purple;

            border-radius: 50%;

            /*background: url("xyjy.png") no-repeat;*/

            /*溢出的部分隐藏*/

            overflow: hidden;

        }

        .c1 img{

            /*按照父级标签的宽度来展示,并且进行等比缩放*/

            max-width: 100%;

        }

<div class="c1">

<img src="xyjy.png" alt="">

</div>

关于div浮动

效果:

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

.clearfix:after{

            content: '';

            display: block;

            clear: both;

        }
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>-->

    <!--<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>-->

    <style>

        .c1{

            width: 200px;

            height: 100px;

            border: 1px solid black;

        }

        .c2{

            background-color: red;

            /*display: none;*/

            /*visibility: hidden;*/

        }

        .c3{

            background-color: blue;

        }

        .c3,.c4{

            display: inline-block;

        }

        /*.sp1{*/

            /*border: 1px solid red;*/

            /*display: block;*/

            /*width: 100px;*/

            /*height: 100px;*/

        /*}*/

    </style>

</head>

<body>

    <div class="c1">

    </div>

    <div class="c1 c2">

    </div>

    <div class="c1 c3">

        我是c3标签

    </div>

    <div class="c1 c4">

        我是c4标签

    </div>

    <!--<span class="sp1">-->

        <!--我是span1-->

    <!--</span>-->

    <!--<span class="sp1">-->

        <!--我是span2-->

    <!--</span>-->

</body>

</html>

示例

定位:返回顶部按钮

效果:

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>-->

    <!--<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>-->

    <style>

        body{

            margin:;

            padding:;

        }

        .c1,.c2,.c3{

            width: 100px;

            height: 600px;

            background-color: red;

            border: 1px solid black ;

        }

        /*相对定位*/

        /*.c2{*/

            /*position: relative;*/

            /*left: 102px;*/

            /*!*top:-102px;*!*/

            /*bottom:102px;*/

            /*!*right: ;*!*/

        /*}*/

        /*绝对定位*/

        .c2{

            background-color: yellow;

            position: absolute;

            height: 100px;

            left: 60px;

            top:20px;

        }

        .c4{

            width: 200px;

            height: 200px;

            background-color: pink;

            position: relative;

            left: 100px;

            top:150px;

        }

        .back-top{

            position: fixed;

            bottom: 20px;

            right: 20px;

            width: 80px;

            height: 40px;

            background-color: rgba(255,165,0,0.5);

            text-align: center;

            line-height: 40px;

            border-radius: 5%;

        }

        .back-top:hover{

            background-color: rgba(255,165,0,1);

        }

        .back-top a{

            color: white;

            text-decoration: none;

        }

    </style>

</head>

<body>

<a name="top">顶部位置在这里</a>

<div class="c1">

    c1

</div>

<!--测试一下相对定位和绝对定位的组合使用-->

<div class="c4">

    <div class="c2">

    </div>

</div>

<!--简单测试相对定位和绝对定位的-->

<!--<div class="c2">-->

    <!--c2-->

<!--</div>-->

<div class="c3">

    c3

</div>

<span class="back-top">

    <a href="#top">返回顶部</a>

</span>

</body>

</html>

代码

溢出:

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

效果:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>-->

    <!--<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>-->

    <style>

        div{

            width: 200px;

            height: 200px;

            border: 1px solid red;

            overflow: scroll;

        }

    </style>

</head>

<body>

<div>

    犀一点通.

</div>

</body>

</html>

代码

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

效果

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>-->

    <!--<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>-->

    <style>

        body{

            margin:;

            padding:;

        }

        .content{

            height: 600px;

            width: 600px;

            border:1px solid blue;

            background-color: pink;

        }

        .shadow{

            background-color: black;

            /*整个标签内容的颜色的透明度*/

            opacity: 0.2;

            position: fixed;

            width: 100%;

            height: 900px;

            top:;

            left:;

            color:red;

            z-index:;

        }

        .reg{

            width: 1000px;

            height: 360px;

            background-color: white;

            border-radius: 5%;

            position: fixed;

            top:50%;

            left: 50%;

            margin-left:-500px;

            margin-top: -180px;

            z-index:;

        }

    </style>

</head>

<body>

<div class="content">

 文字

</div>

<div class="content">

    <a href="">金风玉露一相逢,便胜却人家无数</a>

</div>

代码

透明度属性:

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

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

效果:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>-->

    <!--<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>-->

    <style>

        .c1,.c2{

            width: 100px;

            height: 100px;

            /*background-color: red;*/

            border: 1px solid red;

        }

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

        .c1{

            background-color: rgba(255,0,0,0.5);

        }

        /*整个标签的透明度设置*/

        .c2{

            background-color: rgb(255,0,0);

            opacity: 0.5;

        }

    </style>

</head>

<body>

<div class="c1">

    xxxxxx

</div>

<div class="c2">

    ssssss

</div>

</body>

</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. Python 中 logging 日志模块在多进程环境下的使用

    因为我的个人网站 restran.net 已经启用,博客园的内容已经不再更新.请访问我的个人网站获取这篇文章的最新内容,Python 中 logging 日志模块在多进程环境下的使用 使用 Pytho ...

  2. ThreadLocal<T> 类

    using System; using System.Threading; using System.Threading.Tasks; class ThreadLocalDemo { // Demon ...

  3. CHEMISTS DISCOVER A SAFE, GREEN METHOD TO PROCESS RED PHOSPHORUS

                   When it comes to making phosphorus compounds, chemists have traditionally relied on w ...

  4. 07-SSH综合案例：前台用户模块：结构创建及注册页面跳转

    现在就不要直接访问一个JSP,要通过一个Action映射过去.我现在点击要去一个注册的页面 这还不是一个真正的注册,只是一个页面的跳转. 1.5.2 用户模块 注册功能: 在index.jsp页面中点 ...

  5. torque

    torque - 必应词典 美[tɔrk]英[tɔː(r)k] n.(使机器等旋转的)转矩 网络扭矩:扭力:力矩 变形过去分词:torqued:现在分词:torquing:第三人称单数:torques ...

  6. 从值栈获取List集合

    -------------------siwuxie095 从值栈获取 List 集合 1.具体步骤 (1)在 Action 中向值栈放 List 集合 (2)在 JSP 页面中从值栈获取 List ...

  7. 3D 点云特征

    博客参考: https://blog.csdn.net/shaozhenghan/article/details/81346585 和 https://www.cnblogs.com/li-yao77 ...

  8. JavaScript事件 DOMNodeInserted DOMNodeRemoved

    JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定交互的瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码. 13.1 事件流 ...

  9. Zookeeper 目录

    Zookeeper 目录 Zookeeper 致力于提供一个高性能.高可用,且具有严格的顺序访问控制能力(主要是写操作的严格顺序性)的分布式协调服务.以下是我整理的笔记. 一.分布式理论基础 1.1 ...

  10. 如何用word文档在博客里发表文章

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...