一、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. C# 面向对象1(类和对象的概念)

    1.面向过程-->面向对象 面向过程:面向的是完成这件事儿的过程,强调的是完成这件事儿的动作. 2.面向过程的思想: 以上的,需求一更改,会导致不同的方法,一一去更改. 3.面向对象的思想:找个 ...

  2. 基于EPICS实现西门子S7通信

    (1)       EPICS官网下载Demo并复制文件到指定位置 (2)       创建Modules文件夹,wget https://epics.anl.gov/download/modules ...

  3. JS基础_强制类型转换-String

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. luogu P4755 Beautiful Pair

    luogu 这题有坨区间最大值,考虑最值分治.分治时每次取出最大值,然后考虑统计跨过这个位置的区间答案,然后两边递归处理.如果之枚举左端点,因为最大值确定,右端点权值要满足\(a_r\le \frac ...

  5. 关于redis的几件小事(七)redis缓存雪崩与穿透

    1.缓存雪崩 (1)什么是缓存雪崩 缓存雪崩指的是在同一时刻,缓存大量失效,导致大量的请求直接到了数据库,数据库压力剧增,引起系统崩溃.可能出现的情况有: ①大量的key设置了相同的过期时间,导致在缓 ...

  6. 02 Redis防止入侵

    在使用云服务器时,安装的redis3.0+版本都关闭了protected-mode,因而都遭遇了挖矿病毒的攻击,使得服务器99%的占用率!! 因此我们在使用redis时候,最好更改默认端口,并且使用r ...

  7. mac终端解决很多系统自带命令找不到问题

    node安装提示npm command not found 1.打开终端 2.输入命令如下: touch~/.bash_profile  (创建.bash_profile文件,-表示在-目录下,.表示 ...

  8. python time，calendar，datetime

    time sleep:休眠指定的秒数(可以是小数) localtime:将一个时间戳转换为time.struct_time类型的对象(类似于元组) # 将一个时间戳转换为一个类似于元组的对象,不指定时 ...

  9. docker下进去mysql 编写语句

    设置密码可使用 docker exec -it mysql01 bash        --mysql01:数据库名字 mysql -u root -p ALTER USER 'root'@'%' I ...

  10. jquery ready load

    jq 加载三种写法 $(document).ready(function() { // ...代码... }) //document ready 简写 $(function() { // ...代码. ...