关于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. CentOS 环境下基于 Nginx uwsgi 搭建 Django 站点

    因为我的个人网站 restran.net 已经启用,博客园的内容已经不再更新.请访问我的个人网站获取这篇文章的最新内容,CentOS 环境下基于 Nginx uwsgi 搭建 Django 站点 以下 ...

  2. centos7 ping www.baidu.com ping 不通。

    centos7 ping www.baidu.com ping 不通. 记录下,在搭建NodeJS服务器遇到的坑:centos7 ping www.baidu.com ping 不通. 1. 配置网卡 ...

  3. 小学生福利V2.0.1

    211606320刘佳&211506332熊哲琛 一.预估与实际 PSP2.1 Personal Software Process Stages 预估耗时(分钟) 实际耗时(分钟) Plann ...

  4. python portia

    docker run -i -t --rm -v <PROJECTS_FOLDER>:/app/data/projects:rw -p 9001:9001 scrapinghub/port ...

  5. Multithread之为什么spinlock必须是volatile？

    [Multithread之为什么spinlock必须是volatile?] 1.编译器的优化 在本次线程内,当读取一个变量时,为提高存取速度,编译器优化时有时会先把变量读取到一个寄存器中:以后再取变量 ...

  6. 76. Minimum Window Substring (String, Map)

    Given a string S and a string T, find the minimum window in S which will contain all the characters ...

  7. DevExress笔记

    最近用DevExpress的WPF图表控件做柱形图看板,总结记录了一些笔记: 1.显示图例: <dxc:ChartControl.Legend> <dxc:Legend /> ...

  8. Disruptor 系列（一）快速入门

    Disruptor 系列(一)快速入门 Disruptor:是一个开源的并发框架,能够在 无锁 的情况下实现网络的 Queue 并发操作,所以处理数据的能力比 Java 本身提供的并发类容器要大的多, ...

  9. asp.net 在自己指定的文件夹下面弄个App.config来读取配置

    .注意首先你要在你的应用程序的根目录下面新建一个Config的文件夹,然后在你新建的Config文件夹下面建立一个MyApp.config文件,根据标准的App.config复制一个过来稍作修改就好, ...

  10. BFS入门

    #include<iostream> #include<cstring> #include<queue> using namespace std; #define ...