一、CSS

1、css选择器

  • css选择器的使用方法
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1{

            background-color: #2459a2;

            height: 48px;

        }

    </style>

</head>

<body>

    <div class="c1">内容</div>

    <div class="c1">内容2</div>

</body>

</html>
  • id选择器：#1
  • class选择器：.c1
  • 标签选择器：div
  • 层级选择器：.c1 .c2
  • 组合选择器：.c1,.c2
  • 属性选择器：.c1[type='text']

2、引入css文件

<link rel="stylesheet" href="commons.css">

3、基本样式

  • border: 1px solid red;边框
  • height: 48px;width: 200px;高和宽
  • font-size: 18px;字体大小
  • line-height:垂直居中
  • text-align:ceter:水平居中
  • font-weight:加粗
  • color:字体颜色

4、float

块级标签漂起来堆叠

    <div style="width: 20%;background-color: red;float: left">左侧</div>

    <div style="width: 60%;background-color: yellow;float: right">右侧</div>

5、display

  • display: inline;将div转换为span
  • display: block;将span转换为div
  • display: inline-block;
  • display: none; 让标签消失

6、padding margin 内边距和外边距

  • margin-top: 10px;外边距
  • padding-top: 10px;内边距

7、position属性

    <div style="width: 50px;

    height: 50px;

    background-color: black;

    color: white;

    position: fixed;bottom: 20px;right: 20px;">返回顶部</div>

    <div style="height: 5000px;background-color: #dddddd;"></div>
  • 顶部标题栏
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .pg-header{

            height: 48px;

            background-color: black;

            color: #dddddd;

            position: fixed;

            top: 0;

            right: 0;

            left: 0;

        }

        .pg-body{

            background-color: #dddddd;

            height: 5000px;

            margin-top: 50px;

        }

    </style>

</head>

<body>

    <div class="pg-header">头部</div>

    <div class="pg-body">内容</div>

</body>

</html>
  • relative+absolute 实现相对定位
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">

        <div style="position: absolute;left: 0;bottom: 0;width: 50px;height: 50px;background-color: black;"></div>

    </div>

    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">

        <div style="position: absolute;right: 0;bottom: 0;width: 50px;height: 50px;background-color: black;"></div>

    </div>

    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">

        <div style="position: absolute;right: 0;top: 0;width: 50px;height: 50px;background-color: black;"></div>

    </div>

</body>

</html>
  • 三层
  • z-index: 10;数值最大的在上层
  • opacity: 0.5;透明度50%
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style="position: fixed;

    background-color: white;

    height: 400px;

    width: 500px;

    top: 50%;

    left: 50%;

    margin-left: -250px;

    margin-top: -200px;

    z-index: 10;

    "></div>

    <div style="position: fixed;background-color: black;

    top: 0;

    bottom: 0;

    right: 0;

    left: 0;

    opacity: 0.5;

    z-index: 9;

    "></div>

    <div style="height: 5000px;background-color: green;">内容</div>

</body>

</html>

8、图片的显示

    <div style="height: 200px;width: 300px;overflow: hidden">  #混动条

        <img src="win.jpg">

    </div>

9、鼠标移动到字体变颜色

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .pg-header{

            position: fixed;

            right: 0;

            left: 0;

            top: 0;

            height: 44px;

            background-color: #2459a2;

            line-height: 44px;

        }

        .pg-body{

            margin-top: 50px;

        }

        .w{

            width: 980px;

            margin: 0 auto;

        }

        .menu{

            display: inline-block;

            padding: 0 10px 0 10px;

            color: white;

        }

        /*当鼠标移动到当前标签上时，以下css属性才生效*/

        .pg-header .menu:hover{

            background-color: blue;

        }

    </style>

</head>

<body>

    <div class="pg-header">

        <div class="w">

            <a class="logo">LOGO</a>

            <a class="menu">全部</a>

            <a class="menu">段子</a>

            <a class="menu">1024</a>

            <a class="menu">小视频</a>

        </div>

    </div>

    <div class="pg-body">

        <div class="w">正文</div>

    </div>

</body>

</html>

10、背景图片以及图标

  • 全写
    <div style="background-image: url(icon_18_118.png);background-repeat: no-repeat;height: 20px;border: 1px solid red;width: 20px;

    background-position-x: 0;

    background-position-y: 2px; /*y轴移动图片*/

    "></div>
  • 简写
<div style="background: url(icon_18_118.png) 0 -79px no-repeat;height: 20px;border: 1px solid red;width: 20px;"></div>

11、带图标的登录框

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style="width: 400px;height: 35px;position: relative;">

        <input type="text" style="width: 370px;height: 35px;padding-right: 30px;"/>

        <span style="background: url(icon_18_118.png) 0 -139px no-repeat;width: 20px;height: 20px;display: inline-block;position: absolute;right: 0;top: 10px;"></span>

    </div>

</body>

</html>

191121CSS的更多相关文章

随机推荐

  1. luogu P4437 [HNOI/AHOI2018]排列

    luogu 问题本质是把\(a_i\)作为\(i\)的父亲,然后如果有环就不合法,否则每次要取数,要满足取之前他的父亲都被取过(父亲为0可以直接取),求最大价值 贪心想法显然是要把权值大的尽量放在后面 ...

  2. Dubbo从入门到实战视频教程

    Dubbo是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和 Spring框架无缝集成.这里整理了一套关于dubbo的视频教程分享给大家,包 ...

  3. vue中map组件

    分享一个比较好用的基于百度地图的vue组件.也有react版本的,可以自行选择. 分享链接:点击

  4. N4_75条语法

    1. コ/ソ/ア/ド体系 -(こ.そ.あ.ど)れ/-(こ.そ.あ.ど)の A:-(こ.そ.あ.ど)れ 接续: 指示代词和场所代词,分近称.中称.远称.疑问称. 意思: 这个,那个,那个,哪个 例:これ ...

  5. 升级python导致yum报错的解决方法

    把python从2.7升级到3.6后 , 使用yum报错 File ‘’/usr/bin/yum'', line 30 except KeyboardInterrupt, e: ^ 故障原因:yum采 ...

  6. python 教程（一）

    必须感慨一下,整了一周多的时间才基本理通顺.自己老是不能静心,方法也不对所以走了很多弯路. 1.建议:一定要先去看官方文档. 下面我们来看一周的成果吧: windows下如何下载并安装Python 3 ...

  7. java8学习之Stream源码分析

    上一次已经将Collectors类中的各种系统收集器的源代码进行了完整的学习,而在之前咱们已经花了大量的篇幅对其Stream进行了详细的示例学习,如: 那接下来则通过源代码的角度来对Stream的运作 ...

  8. 【CF 463F】Escape Through Leaf

    题意 给你一棵 \(n\) 个点的树,每个节点有两个权值 \(a_i,b_i\). 从一个点 \(u\) 可以跳到以其为根的子树内的任意一点 \(v\)(不能跳到 \(u\) 自己),代价是 \(a_ ...

  9. fastjson简单使用demo，@JSONField注解属性字段上与set、get方法上。实体类toString()，实体类转json的区别；_下划线-减号大小写智能匹配

    一.demo代码 @JSONField注解属性字段上与set.get方法上.使用@Data注解(lombok插件安装最下方),对属性“笔名”[pseudonym]手动重写setter/getter方法 ...

  10. linux7buffer和cache

    现象:作为hdfs集群的主节点,越来越卡 排查:CPU,mem CPU正常,检查内存情况,发现如下 如上截图:发现程序可用内存为91G,但是部分swap分区被占用.于是引出如下思考,free -h这条 ...