一、CSS

1、css选择器

  • css选择器的使用方法
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .c1{
  8.             background-color: #2459a2;
  9.             height: 48px;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div class="c1">内容</div>
  15.     <div class="c1">内容2</div>
  16. </body>
  17. </html>
  • id选择器：#1
  • class选择器：.c1
  • 标签选择器：div
  • 层级选择器：.c1 .c2
  • 组合选择器：.c1,.c2
  • 属性选择器：.c1[type='text']

2、引入css文件

  1. <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

块级标签漂起来堆叠

  1.     <div style="width: 20%;background-color: red;float: left">左侧</div>
  2.     <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属性

  1.     <div style="width: 50px;
  2.     height: 50px;
  3.     background-color: black;
  4.     color: white;
  5.     position: fixed;bottom: 20px;right: 20px;">返回顶部</div>
  6.     <div style="height: 5000px;background-color: #dddddd;"></div>
  • 顶部标题栏
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .pg-header{
  8.             height: 48px;
  9.             background-color: black;
  10.             color: #dddddd;
  11.             position: fixed;
  12.             top: 0;
  13.             right: 0;
  14.             left: 0;
  15.         }
  16.         .pg-body{
  17.             background-color: #dddddd;
  18.             height: 5000px;
  19.             margin-top: 50px;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="pg-header">头部</div>
  25.     <div class="pg-body">内容</div>
  26. </body>
  27. </html>
  • relative+absolute 实现相对定位
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
  9.         <div style="position: absolute;left: 0;bottom: 0;width: 50px;height: 50px;background-color: black;"></div>
  10.     </div>
  11.     <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
  12.         <div style="position: absolute;right: 0;bottom: 0;width: 50px;height: 50px;background-color: black;"></div>
  13.     </div>
  14.     <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
  15.         <div style="position: absolute;right: 0;top: 0;width: 50px;height: 50px;background-color: black;"></div>
  16.     </div>
  17. </body>
  18. </html>
  • 三层
  • z-index: 10;数值最大的在上层
  • opacity: 0.5;透明度50%
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div style="position: fixed;
  9.     background-color: white;
  10.     height: 400px;
  11.     width: 500px;
  12.     top: 50%;
  13.     left: 50%;
  14.     margin-left: -250px;
  15.     margin-top: -200px;
  16.     z-index: 10;
  17.     "></div>
  18.     <div style="position: fixed;background-color: black;
  19.     top: 0;
  20.     bottom: 0;
  21.     right: 0;
  22.     left: 0;
  23.     opacity: 0.5;
  24.     z-index: 9;
  25.     "></div>
  26.     <div style="height: 5000px;background-color: green;">内容</div>
  27. </body>
  28. </html>

8、图片的显示

  1.     <div style="height: 200px;width: 300px;overflow: hidden">  #混动条
  2.         <img src="win.jpg">
  3.     </div>

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .pg-header{
  8.             position: fixed;
  9.             right: 0;
  10.             left: 0;
  11.             top: 0;
  12.             height: 44px;
  13.             background-color: #2459a2;
  14.             line-height: 44px;
  15.         }
  16.         .pg-body{
  17.             margin-top: 50px;
  18.         }
  19.         .w{
  20.             width: 980px;
  21.             margin: 0 auto;
  22.         }
  23.         .menu{
  24.             display: inline-block;
  25.             padding: 0 10px 0 10px;
  26.             color: white;
  27.         }
  28.         /*当鼠标移动到当前标签上时，以下css属性才生效*/
  29.         .pg-header .menu:hover{
  30.             background-color: blue;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <div class="pg-header">
  36.         <div class="w">
  37.             <a class="logo">LOGO</a>
  38.             <a class="menu">全部</a>
  39.             <a class="menu">段子</a>
  40.             <a class="menu">1024</a>
  41.             <a class="menu">小视频</a>
  42.         </div>
  43.     </div>
  44.     <div class="pg-body">
  45.         <div class="w">正文</div>
  46.     </div>
  47. </body>
  48. </html>

10、背景图片以及图标

  • 全写
  1.     <div style="background-image: url(icon_18_118.png);background-repeat: no-repeat;height: 20px;border: 1px solid red;width: 20px;
  2.     background-position-x: 0;
  3.     background-position-y: 2px; /*y轴移动图片*/
  4.     "></div>
  • 简写
  1. <div style="background: url(icon_18_118.png) 0 -79px no-repeat;height: 20px;border: 1px solid red;width: 20px;"></div>

11、带图标的登录框

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div style="width: 400px;height: 35px;position: relative;">
  9.         <input type="text" style="width: 370px;height: 35px;padding-right: 30px;"/>
  10.         <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>
  11.     </div>
  12. </body>
  13. </html>

191121CSS的更多相关文章

随机推荐

  1. sql server case when

    case具有两种格式:简单Case函数和Case搜索函数 简单case函数 实例:CASE sex     when '1' then '男'     when '2' then'女'     els ...

  2. 爬取快代理的免费IP并测试

    各大免费IP的网站的反爬手段往往是封掉在一定时间内访问过于频繁的IP,因此在爬取的时候需要设定一定的时间间隔,不过说实话,免费代理很多时候基本都不能用,可能一千个下来只有十几个可以用,而且几分钟之后估 ...

  3. js中自然日的计算

    需求:前端取后端返回的时间与当前时间进行比较展示,展示规则: 1.返回的时间跟当前时间同年同月同日 显示 今天 2.返回的时间与当前时间相差在7天以内 显示 某天前 3.返回的时间与当前时间相差大于7 ...

  4. JDK1.8中LinkedList的实现原理及源码分析

    详见:https://blog.csdn.net/cb_lcl/article/details/81222394 一.概述           LinkedList底层是基于双向链表(双向链表的特点, ...

  5. mysql truncate 与 delete的相同点和不同点

    相同点 都可以清空表,自增字段将起始值恢复成1 [delete from table_name where 1 可以保持自增的最大值] delete from table_name; truncate ...

  6. 19、Firewalld防火墙

    安全的考虑方向: 安全框架 OSI七层模型 硬件 机架上锁(机柜) 温度 硬件检查 网络 iptables/firewalld 仅允许公司的IP地址能连接服务器的22端口 公有云使用 安全组 系统 没 ...

  7. MyEclipse_10.7安装及破解

    MyEclipse_10.7 0.解压文件如下两图操作:1.运行安装程序,双击myeclipse-10.7-offline-installer-windows.exe进入安装界面,下一步:2.同意协议 ...

  8. 20199319《Linux内核原理与分析》第十二周作业

    SET-UID程序漏洞实验 一.实验简介 Set-UID是Unix系统中的一个重要的安全机制.当一个Set-UID程序运行的时候,它被假设为具有拥有者的权限.例如,如果程序的拥有者是root,那么任何 ...

  9. python之django_form组件笔记

    Form字段 Field required=True, 是否允许为空 widget=None, HTML插件 label=None, 用于生成Label标签或显示内容 initial=None, 初始 ...

  10. switch的参数类型

    switch(expr1)中,expr1是一个整数表达式,整数表达式可以是int基本类型或Integer包装类型,由于,byte,short,char都可以隐含转换为int,所以,这些类型以及这些类型 ...