一、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. linux图形界面安装

    1.问题现象 1.1 startx命令不可用 [root@linuxtest2 ~]# startx 1.3 init 5无法执行完成 [root@linuxtest2 ~]#init 5 2.问题原 ...

  2. 第一篇、Python入门

    一 编程与编程语言 python是一门编程语言,作为学习python的开始,需要事先搞明白:编程的目的是什么?什么是编程语言?什么是编程? 编程的目的: #计算机的发明,是为了用机器取代/解放人力,而 ...

  3. Hibrenate实现根据实体类自动创建表或添加字段

    Hibernate支持自动建表,在开发阶段很方便,可以保证hbm与数据库表结构的自动同步. 实现: 在配置hibernate的配置文件中将hbm2ddl.auto设置为update,如:Xml代码&l ...

  4. deepin下挂载的的Windows系统（NTFC）目录怎么是只读的？？？

    关键命令: df-h sudo ntfsfix /dev/sda4 重启 参考博客:深度官网问题之大神回复

  5. height 自适应问题

    何为高度自适应? 高度自适应就是高度能跟随浏览器窗口的大小改变而改变,典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏,下面一栏高度自适应用于显示内容.高度自适应不像宽度自适应那样简单,在 ...

  6. php保留两位小数并且四舍五入 保留两位小数并且不四舍五入

    php保留两位小数并且四舍五入 $num = 5566.56831; echo sprintf("%.2f", $num); php保留两位小数并且不四舍五入 $num = 556 ...

  7. POJ 1734 无向图最小环/有向图最小环

    给定一张图,求图中一个至少包含三个点的环,环上的点不重复,并且环上的边的长度之和最小. 点数不超过100个 输出方案 无向图: /*Huyyt*/ #include<bits/stdc++.h& ...

  8. ESXi与物理交换机静态链路聚合配置过程中的小陷阱

    作者:陆斌文章来自微信公众号:平台人生 内容简介:ESXi与物理交换机之间配置静态链路聚合时,因为静态链路聚合的特点,在进行down网卡和从虚拟交换机移除网卡的操作时,可能会无法完成故障流量切换,影响 ...

  9. Notepad++设置快捷键及外部命令

    <NotepadPlus> <InternalCommands> <Shortcut id="41020" Ctrl="no" A ...

  10. python类内置方法的再学习

    对于__setitem__和__getitem__方法:其入参看来是固定的(__getitem__(self, item),__setitem__(self, key, value)),我们并不需要重 ...