作者文章归档:zuojie@88.com

8-CSS-布局总结


目录内容

图片

16 网页布局总结

  1. 标准流:垂直的块级盒子显示就用标准流(上下排列)
  2. 浮动:多个块级盒子水平显示就用浮动(左右排列)
  3. 如果元素在某个盒子内自由移动就用定位布局(自由定位)

17 元素的隐藏与显示

让一个元素在页面中隐藏或者显示出来:类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现。

  • display 显示隐藏
  • visibility 显示隐藏
  • overflow 溢出部分显示隐藏

17.1 display 属性 display:non``e

display属性:设置一个元素如何显示

  • display:none; 隐藏对象(对象也不占有原来位置)
  • dis...

Read more

6-CSS-浮动


笔记目录

图片

13 浮动 float:none|left|right;

传统PC端网页布局(摆盒子)的三种方式

  • 标准流(普通流):标签按照规定好默认方式排列(最基本的布局方式)

    1. 块级元素独占一行,从上到下顺序排列
    2. 行内元素会按照顺序,从左到右顺序排列,碰到父类元素边缘则自动换行。
  • 浮动:可以改变元素标签默认的排列方式

    典型应用:让多个块级元素一行内排列显示

  • 定位:网页布局的第一准则:多个块级元素纵向排列标准流,多个块级元素横向排列浮动

float属性:用于创建浮动框,将其移动到一边,直到左边缘/右边缘/另一个浮动框的边缘(贴在一起)

floatnone(默...

Read more

4.CSS-基础3


笔记目录

图片

9. CSS的元素显示模式

元素显示模式分为:块元素;行内元素

9.1 块元素 <h1>~<h6>, <p>, <div>, <ul>, <ol>, <li>

常见的块元素为:<h1>~<h6>, <p>, <div>, <ul>, <ol>, <li>

其中<div>是最经典的块元素。

块元素的特点

  • 自己独占一行
  • 高度,宽度,外边距,及内边距,都可以控制
  • 宽度默认,为父级宽度的10...

Read more

5.CSS-盒子模型


笔记目录

图片

12. 盒子模型

12.1 盒子模型的组成

盒子模型:本质是一个盒子,用来装内容

组成:边框,外边距,内边距和内容

  • content:内容

  • padding:内边距(内容与盒子之间的距离)

  • border:边框

  • margin:外边距(盒子之间距离)

    图片

12.2 盒子边框 border:1px solid red;

border:边框粗细、边框样式、边框颜色

盒子边框的属性

  • border-width:边框粗细,单位px
  • border-style:边框样式(常用的:solid实线边框,dashed虚线边框,dotted点线边框)

图片

  • border-color...

Read more

3.CSS-基础2


笔记目录

图片

5.CSS的引入方式

  1. 内部样式表(嵌入式)
  2. 行内样式表(行内式)
  3. 外部样式表(链接式)

5.1 内部样式表

内部样式表:将CSS代码写在html内部,放到了<style>标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">...

Read more

1.HTML语法规范


1.HTML语法规范

1.1 基本语法概述

  • HTML标签由尖括号包围的关键词,例如<html>
  • HTML标签通常是成对出现的,例如<html></html>,我们称为双标签。标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 有些特殊的标签必须是单标签(极少情况),例如<br/>

1.2 标签关系

包含关系;并列关系

1.3 第一个HTML网页

每个网页都会有一个基本的结构标签(骨架标签) , 页面内容也是在这些基本标签上书写。HTML页面也称为HTML文档

<html>    # HTML标签:页面中最大的标签,根标...

Read more

2.CSS-基础1


图片

1.CSS入门

1.1 CSS简介

CSS层叠样式表( Cascading Style Sheets ),也为CSS样式表或级联样式表,是一种标记语言。

html主要做结构,css主要做样式,美化html网页布局,使得结构与样式相分离

1.2 CSS基础语法规范

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" ...

Read more

构建可视化数据分析系统-ELK


Read more

ELK-收集mysql slow 日志


案例分析

开发和DBA为了能够实时掌握mysql的运行情况,需要对mysql中执行的sql指令大于1秒的统计出来,并且通过ELK分析,统计,实时查看。通过分析可以让DBA能够优化数据库,能够提升运行速度。

一、MySQL设置

a、mysql安装

安装脚本

mysql默认root密码更改

[root@node4 mysql]# mysql_secure_installation

b、mysql slow日志开启

#开启slow log
slow_query_log=1
slow_query_log_file=/usr/local/mysql/mysql-slow.log
long-...

Read more

分布式存储-GlusterFS


一、分布式存储介绍

我们知道NAS是远程通过网络共享目录, SAN是远程通过网络共享块设备。那么分布式存储你可以看作拥有多台存储服务器连接起来的存储输出端。把这多台存储服务器的存储合起来做成一个整体再通过网络进行远程共享,共享的方式有目录(文件存储),块设备(块存储),对象网关或者说一个程序接口(对象存储)。

常见的分布式存储开源软件有:GlusterFS,Ceph,HDFS,MooseFS,FastDFS等。

分布式存储一般都有以下几个优点:

  1. 扩容方便,轻松达到PB级别或以上
  2. 提升读写性能或数据高可用
  3. 避免单个节点故障导致整个架构问题
  4. 价格相对便宜,大量的廉价设备就可以组成,比光纤S...

Read more