一、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. ACM的一点基础知识

    所摘内容来自于XJTU小学期ACM培训PPT log 默认以2为底 计算机一秒可以看作1e8次 保证数据计算精度及数据所需必要大小 a=1LL*a*a%p//在计算时通过乘以1LL,临时将Int转化为 ...

  2. 学会这 2 点，轻松看懂 MySQL 慢查询日志

    MySQL中的日志包括:错误日志.二进制日志.通用查询日志.慢查询日志等等.这里主要介绍下比较常用的两个功能:通用查询日志和慢查询日志. 1)通用查询日志:记录建立的客户端连接和执行的语句. 2)慢查 ...

  3. TVM安装

    因为现在NNVM的代码都转移到了TVM中,NNVM代码也不再进行更新,因此选择安装的是TVM. git clone --recursive https://github.com/dmlc/tvm su ...

  4. oracle重置dba用户密码

    1.进入sqlplus里面: [oracle@master ~]$ sqlplus / as sysdba SQL*Plus: Release 12.1.0.2.0 Production on Tue ...

  5. deep_learning_Function_LSTM_dynamic_rnn

    一. tf.nn.dynamic_rnn的输出 tf.nn.dynamic_rnn的输入参数如下 tf.nn.dynamic_rnn(    cell,    inputs,    sequence_ ...

  6. mysql安装及加固

    mysql安装 查看是否安装mysql 我们先看一下有没有安装mysql yum list installed mysql | grep mysql 本地只安装了php链接mysql的库,没有安装my ...

  7. 【LOJ 6695】天气之子

    找规律题的典范? OEIS裸题 考场上让你用 OEIS 吗 题意 link 题解 \(n\le 5\) 打表 \(n\le 10^5\) 发现不能直接求最优解,于是二分答案. 验证答案时,先把前 \( ...

  8. 使用maven简单搭建Spring mvc + redis缓存

    注:此文参考并整合了网上的文章 <spring缓存机制>:http://blog.csdn.net/sidongxue2/article/details/30516141 <配置 S ...

  9. JS实现 Tab栏切换案例

    要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...

  10. QT:设置布局边缘

    QHBoxLayout * horizontalLayout = new QHBoxLayout; //setContentsMargins(int left, int top, int right, ...