css样式固定表头表体可以滑动_HTML+CSS+Nginx

1 HTML

1.1 基本概念

 HTML(Hyper Text Markup Language):超文本标记语言网页的构成:        1.HTML:用来制作网页基础内容和基本结构        2.CSS:用来制作网页美化效果        3.JavaScript:用来制作网页动态效果

1.2 HTML组成

 1.标签:用于设置文本样式,图片样式,超链接样式等等.用<>表示2.属性:标签中可以拥有属性,属性可以为标签提供更多的信息,且只能添加到开始标签中总结:        1.HTML是一种标记语言,可以直接被浏览器进行识别        2.HTML由元素,开始标签,结束标签,内容和属性这些元素组成

1.3 HTML基本语法

1.3.1 注释和标签规范

 1.注释格式:2.标签的分类        (1)开始和结束标签 <h1>h1>  <u>u>    (2)自闭和标签 <br />3.标签的嵌套 -> 一个标签包裹另一个标签4.块级元素和行内元素        (1)块级元素(独占一行) <hr> div p ul li h1-h6 dl dt dd    (2)行内元素(不会换行) <b> <i> <u> a span em strong5.div和span    div和span标签都是无具体语义的标签,区别在于div是块级元素,span是行内元素,两者的核心作用都是用做布局页面

1.3.2 常用块级元素,内联元素以及内联块元素

         块级元素和行内元素        1.块级元素(独占一行)     特点:(1)支持全部样式                    (2)默认宽度为父级宽度100%                    (3)盒子占据一行，即使已设置宽度                1.1 <hr> 画一条分隔线                1.2 div 无具体语义                1.3 p 表示段落                1.4 ul li 表示列表                1.5 h1-h6 表示标题                1.6 dl dt dd 表示定义列表        2.行内元素(不会换行)         特点:(1)不支持宽、高、margin上下、padding上下不支持        (2)宽高由内容决定,不能自定义宽高                   (3)代码换行，盒子会产生间距                   (4)子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式                2.1 <b> 表示文档中的关键字或者产品名,自带字体加粗样式                2.2 <i> 表示专业词汇，自带倾斜样式                2.3 <u> 在字体下方加上横线                2.4 a 链接                2.5 span 无具体语义                2.6 em 表示语气中的强调词，自带倾斜样式                2.7 strong 表示非常重要的内容,自带字体加粗样式                3.内联块元素：img input类似于这种元素        特点:            (1)支持全部样式            (2)宽高由内容决定,可以自定义宽高            (3)盒子并在一行            (4)代码换行会产生间距            (5)子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式

1.3.3 属性和特殊字符

1.3.3.1 属性

 1.属性定义格式: 属性名=属性值2.属性的规范            (1)同一个标签中属性的名称必须唯一            (2)不区分大小写,一般小写            (3)属性值使用单引号或者双引号引起来,一般双引号3.常用的属性            (1)class:定义元素的类名,用于选择和访问特定的元素    (2)id:定义元素的唯一标识,在整个文档中必须唯一    (3)name:定义元素的名称,一般用于表单数据提交到服务器            (4)value:定义在元素内显示的默认值,一般常用于表单标签中            (5)style:定义元素的css样式(内联式 -> 不推荐使用)

1.3.3.2 特殊字符

 常用特殊字符:            1.> -> &gt;        2.< -> &lt;        3.空格 -> &nbsp;            4." -> "        5.' -> '        6.& -> &amp;

1.4 HTML常用标签

1.4.1 文本标签

 p // 表示文本的一个段落h //表示文档标题,从h1-h6hr // 表示段落级元素之间的主题切换,一般显示为水平线        属性:size -> 字号 color -> 颜色 例<hr size="5" color = red />ul // 表示一个无序列表        属性:type="disc" disc -> 实心圆 circle -> 空心圆 square -> 实心方块ol // 表示一个有序列表            属性:type="I"(数字,字母或者罗马字符) start=起始位置 例type="1" start = "10"li // 表示列表中的条目em // 强调词,斜体显示i // 专业词汇,斜体显示strong // 重要内容,加粗显示b // 加粗文本font // 表示字体(已过时)        属性:size -> 字号 color -> 颜色 例<font size="5" color = red>font>

1.4.2 图片及超链接标签

 1.图片 <img src="" title="">    属性:src-必需属性,表示图片地址  title-鼠标悬停在图片上展示的文本                        alt-图片加载失败时显示的替换文本  height-高度  width-宽度2.超链接 <a href="#">链接内容a>            属性:href-表示超链接所指向的URL地址 target-设置页面的打开方式- _self当前页(默认) _blank新标签页

1.4.3 表单标签

 <form action="" method="" autocomplete="">form>        action属性：定义表单数据提交地址，不填写默认提交至本地        method属性：定义表单提交的方式，一般有get方式和post方式        autocomplete属性(HTML5新增):联想关键词 一般关掉，不用默认的联想，自己做,设置关闭off属性(on-开启和off-关闭)

1.4.3.1 表单项

 label标签：定义文字标注label中的for属性：必须和input中的id属性保持一致            效果：点击label文字描述即可跳转至输入/选择框            例:<form action="">         <label for="description">label>        <input type="text" name="statement" id="description">    form>input标签：定义通用的表单元素    格式:<input type="" name="" id="" value="" placeholder="" required="">                name属性：键值和键名，有nmae值才会进行提交,用于提交服务器的标识        value属性:默认数据值        placeholder属性(HTML5新增):设置文本框默认提示文字        required属性:定义是否必须有数据 // 无需输入数据值        type属性:数据的类型            text //定义单行文本输入框            <textarea>textarea> //多行文本输入框,rows属性代表行数,cols属性代表列数            password //定义密码输入框            email //定义邮箱输入框,会进行简单校验            radio //定义单选框,name属性值保持一致才能达到单选效果,value表示真正提交的数据 checked属性默认选中            checkbox //定义复选框,name属性值保持一致才能达到多选效果,value表示真正提交的数据 checked属性默认选中            date-日期框 time-时间框 datetime-local - 时间日期框            number 数字框            range - 滚动条数值框,min最小值,max最大值,step步进值            search - 可清除文本框 tel - 电话框  url - 网址框            file //定义上传文件            hidden //定义一个隐藏的表单域，用来存储值                        !!!HTML5新增类型(不常用，浏览器中不统一)：            新增类型：网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索!!!      <select>select>标签：定义下拉表单元素 // 与input常用属性类似      <optgroup>optgroup> // 表示下拉列表分组标签,使用label属性设置分组名称          <option>option>：与select配合使用，定义下拉表单元素做的选项      例:<select>            <optgroup label="分组1">                <option value="2">1option>                                    <option value="3">2option>                            optgroup>            <optgroup label="分组2"  id="name">                <option value="">3option>                                    <option value="">4option>            optgroup>        select>按钮标签            button:type属性,按钮的功能包含submit提交,reset重置和button普通按钮input中的提交重置type属性:    image //定义图片作为提交按钮，用src属性定义图片地址    submit //定义提交按钮    reset //定义重置按钮

1.5 表格标签

 <table>table> //表格标签,width宽度,border边框,align对齐方式    border属性：定义表格标签，设置值为数值    cellpadding属性：定义单元格内容与边框的距离，设置值是数值    cellspacing：定义单元格与单元格之间的距离，设置值是数值    align属性：设置整体表格相对于浏览器窗口的水平对齐方式，设置值有    left|center|right<tr>tr> 定义表格中的一行 //行标签,align对齐方式<td>td>和<th>th>定义一行中的一个单元格 th表示表头(加粗和居中);td为单元格标签(列标签)    colspan属性：设置单元格水平合并    rowspan属性：设置单元格垂直合并，设置值为数值thread表头语义标签  tbody表体语义标签  tfoot表脚语义标签        valign属性：设置垂直对齐方式，top|middle|bottom

 示例:    <table width="400px" border="1px" align="center" cellspacing="0px" cellpadding="10px">        <thead>            <tr align="center">                <th>姓名th>                <th>性别th>                <th>年龄th>                <th>数学th>                <th>语文th>            tr>        thead>        <tbody>            <tr align="center">                <td>张三td>                <td rowspan="2">男td>                <td>24td>                <td colspan="2">90td>                           tr>            <tr align="center">                <td>李四td>                                <td>24td>                <td>95td>                <td>98td>            tr>        tbody>        <tfoot>            <tr align="center">                <td colspan="3">总分:td>                <td>185td>                <td>189td>            tr>        tfoot>    table>

2 CSS

2.1 基本概念

 CSS(Cascading Style Sheets)即层叠样式表,是用于设置和布局网页的一种计算机语言,告知浏览器如何渲染解析页面元素CSS的组成:            (1)选择器:选择HTML元素的方式,分为标签选择器,id选择器,类选择器,层级选择器,组选择器,伪类以及伪元素选择器6种            (2)样式声明用于给HTML元素设置具体的样式,格式是属性名=属性值;

2.2 CSS的引入方式

 1.外联式(外部样式)，通过link标签，新建一个css文件，需要选择器(常用)     <link rel="stylesheet" href="">2.嵌入式(内部样式)，通过style标签<            style type="text/css">h1{}style>3.内联样式, 通过style标签使用的属性(不推荐)                <a href="http://www.itcast.cn" style="font-size: 60px;color: pink">链接地址a>

2.3 CSS的基本语法

2.3.1 注释

 注释格式:    /* 注释的内容 */

2.3.2 选择器

             1.基本选择器    (1)标签选择器(元素选择器):根据标签名匹配元素 // div{}            (2)类选择器(.):根据class属性匹配元素 // .center{}    (3)id选择器(#):根据id属性值匹配元素,id不允许重复 // #username{}    优先级注意:id选择器>类选择器>标签选择器2.属性选择器([]):根据指定属性匹配元素 // [type]{} [type=text]{}3.伪类选择器            (1)link:未访问的状态->标签名:link // a:link{}    (2)visited:已访问的状态->标签名:visited // a:visited{}    (3)hover:鼠标悬浮的状态->标签名:hover // a:hover{}    (4)active:已选中的状态->标签名:active // a:active{}4.伪元素选择器    (1)before:在某个元素之前插入一些内容    (2)after:在某个元素之后插入一些内容                        伪元素选择器：before after和content属性配合使用5.组合选择器            (1)层级选择器(后代选择器 空格表示):使用空格结合多个选择器,基于第一个选择器匹配第二个选择器的所有元素 // .center li{}    (2)组选择器(分组选择器 ,表示):可以同时匹配多个元素,多个类选择器中相同的部分可以提取出来放至组选择器中 // div,span,p{}

2.4 CSS的常用样式

2.4.1 文本样式

     1.color：设置文字的颜色，color:pink    2.font-size：设置字体的大小，font-siez:20px    3.font-family:设置字体的字体，font-family:"微软雅黑"    4.font-style:设置字体是否倾斜，normal设置不倾斜，italic设置文字倾斜    5.font-weight：设置字体是否加粗，normal设置不加粗,bold设置加粗    6.line-height:设置文字的行间距，设置行高相当于在每行文字的上下同时加间距，line-height:24px    7.font可以同时设置文字几个属性，按照是否加粗、字号、行高、字体顺序写，font：normal 12px/36px "微软雅黑"    8.text-decoration:设置文字下划线 // none无文字下划线  underline下划线 overline上划线 line-through删除线    9.text-indent:设置文字首行缩进，text-indent:24px    10.text-align:设置文字水平对齐方式，text-align:center居中 left居左 right居右    11.vertical-align:设置垂直对齐方式 top居上  bottom居下  middle居中  百分比调节

2.4.2 颜色表示

         1.颜色名表示：blue,pink    2.rgb表示，比如rgb(255,0,0)表示红色    3.16进制数值表示，如#ff0000表示红色，可以简写为#f00    4.CMYK印刷色彩表示法(了解)

2.4.3 盒子模型

2.4.3.1 border(边框)

 CSS盒子模型主要分为四个部分：            (1)宽、高等属性            (2)盒子的边框border            (3)内间距 padding，盒子内内容与边框之间的间距                (4)外间距 margin，盒子与盒子之间的距离        border-top-color: green;                border-top-width: 10px;        border-top-style: solid;                        合并写法:border-top:green 20px dotted;                border:green 20px dotted;CSS3新增特性            CSS3圆角：border-radius:10px 20px 30px 40px;

2.4.3.2 padding(内边距)

 padding: 40px 80px 100px 40px;    设置padding时从上顺时针依次进行设置    如果只设置了三个值，第一个值设置上边，第二个值设置左边和右边，第三个值设置下边    如果只设置了两个值，第一个值设置上边、下边，第二个值设置左边和右边    如果只设置了一个值，全部进行统一设置

2.4.3.3margin(外边距)

 1.让盒子相对于浏览器水平居中显示:margin:x auto;x表示上下的值2.margin设置为负值时会让元素位移及边框合并,body默认带有8像素的margin外边距合并存在问题：同时设置两个盒子的上、下边距，当两边距重合时合并后的间距取得是合并的外边距中高度的较大者。            解决方案:        1.使用这种特性                        2.设置一边的外边距，一般设置margin-top        3.将元素浮动或者定位

 margin塌陷:内外两个盒子，当设置里面盒子的margin值时会导致外面盒子的margin值也发生变化(两个margin紧挨着，中间没有border或者padding,margin直接接触，就产生了合并)解决办法:                1.外部盒子设置一个边框    2.外部盒子设置 overflow:hidden;属性，设置元素溢出属性    3.使用伪元素类元素溢出：当子级的内容显示区域超出父级的尺寸时存在该问题，通过设置overflow解决overflow的设置项：    1、 visible 默认值，内容不会被修剪，会呈现在元素框之外。            2、 hidden 溢出部分直接隐藏            3、 scroll 不管内容溢不溢出都显示滚动条    4、 auto 内容溢出滚动条，内容未溢出无滚动条    5、 inherit 规定应该从父元素继承 overflow 属性的值

2.4.4 浮动

 浮动特性(浮动本身会让元素靠在一起)            1、浮动元素有左浮动(float:left)和右浮动(float:right)两种            2、浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来            3、相邻浮动的块元素可以并在一行，超出父级宽度就换行            4、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)            5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果            6、父元素如果没有设置尺寸(一般是高度不设置)，父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动            7、浮动元素之间没有垂直margin的合并使用ul,li时默认margin，padding带有值    list-style: none;//清楚无序列表前面的小圆点清除浮动解决方法(子元素浮动，父元素不给高度):    1.添加属性overflow:hidden;    2.在最后一个子元素的后面加一个空的div，给它样式属性 clear:both(不推荐)                <div style="clear:both">div>            3.使用清除浮动样式类 clearfix                <style type="text/css">        .clearfix:before,.clearfix:after{            content:"";                            display: table;        }        .clearfix:after{                            clear:both;                        }        .clearfix{                                zoom:1;/*专门用于清楚IE浮动问题*/        }                style>

2.4.5 定位和偏移

 1.定位和偏移            文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置    position 属性设置元素定位类型:        (1) relative,生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移        (2) absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位        (3) static 默认值，无定位,相当于取消定位属性或者不设置定位属性        (4) inherit 从父元素继承 position 属性的值        (5) fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位2.设置层级：z-index:10;值越多，显示越靠前3.绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素4.定位技巧：设置为绝对定位，然后left right top bottom均为0即可以保证和浏览器四个边都对齐

2.4.6 CSS3transition动画

 CSS3 transition 动画(和transform配合使用,使用hover伪类)    1、transition-property 设置过渡的属性，比如：all(所有属性) width height background-color    2、transition-duration 设置过渡的时间，比如：1s 500ms    3、transition-timing-function 设置过渡的运动方式，常用有 linear(匀速)|ease(缓冲运动，中间快，两头慢) cubic-bezier(n,n,n,n)  //在 cubic-bezier 函数中定义自己的值, 0 至 1 之间的数值    4、transition-delay 设置动画的延迟    5、transition: property duration timing-function delay 同时设置四个属性

2.4.7 CSS3transform变换

 CSS3 transform变换    1、translate(x,y) 设置盒子位移       translateX、translateY、translateZ 设置三维移动             旋转轴向：Y轴 ----  X轴 |        2、scale(x,y) 设置盒子缩放       scaleX、scaleY、scaleZ 设置三维缩放           3. transform-origin:50% 50% 设置变形的中心点        4、rotate(deg) 设置盒子旋转:类似于绕Z轴旋转 // deg是计量单位表示度,如rotate(9deg)       rotateX、rotateY、rotateZ 设置三维旋转           5、skew(x-angle,y-angle) 设置盒子斜切    5、 perspective 设置透视距离 近大远小 经验值800px，效果最好 建议最好设置初始值，不设置的话容易出现跳转的BUG    6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示    7、    8、 backface-visibility 设置盒子背面是否可见    设置动画次数无穷次:                1.设置@keyframes属性            @keyframes moving{                // 以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。                // 0% 是动画的开始时间，100% 动画的结束时间。                /*from{                    top:0px;                }                to{                    top:100px                }*/                0%{                transform: rotate(50deg);                }                50%{                    animation-play-state: paused; //设置动画暂停                }                100%{                    transform: rotate(360deg);                }            }        2.定义animation -> animation:moving        3.设置动画次数:animation-iteration-count:n|infinite            animation-iteration-count:infinite // 无穷次        4.设置动画交替反向执行:animation-direction:alternate;            定义是否应该轮流反向播放动画:animation-direction:normal|alternate    设置次数无穷次：animation-iteration-count:n|infinite    设置动画运行状态：animation-play-state: paused|running(常用于javascript)

2.4.8 CSS权重值

 CSS权重值计算(值越高优先级越高)：    1、!important，加在样式属性值后，权重值为 10000    2、内联样式，如：style=””，权重值为1000    3、ID选择器，如：#content，权重值为100    4、类，伪类和属性选择器，如：content、:hover 权重值为10    5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1    6、通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)、权重值为0

2.4.9 背景

 CSS2.1    background-color // 设置背景颜色    background-image // 设置背景图片地址background-image:url();    background-repeat // 设置背景图片如何重复平铺 repaet-x reeat-y no-repeat    background-attachment // 设置背景图片是固定还是随着页面滚动条滚动,scroll(默认值滚动) fixed inherit    background-position // 设置背景图片的位置 九个方位，用left等表示 也可以用数值进行表示，以左上角为基准，第一个值设置离左侧的距离，第二个值设置离顶部的距离CSS3(了解)    background-size // 设置图形大小        length：用长度值指定背景图像大小。不允许负值。        percentage：用百分比指定背景图像大小。不允许负值。        auto：背景图像的真实大小。        cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。等比缩放盖住        contain ：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内    background-origin // 规定background-position属性相对于什么位置来定位        背景图像相对于内边距框来定位         border-box  背景图像相对于边框盒来定位        content-box 背景图像相对于内容框来定位    background-clip // 背景的绘制区域        border-box  默认值。背景绘制在边框方框内(剪切成边框方框)        padding-box 背景绘制在衬距方框内(剪切成衬距方框)        content-box 背景绘制在内容方框内(剪切成内容方框)    简写格式:background: color img-url repeat attachment position / size

2.4.10 样式控制

  1.background-repeat // 设置背景图片如何重复平铺 repaet-x reeat-y no-repeat repeat 2.outline(例如控制input输入框):控制轮廓 double双实线,dotted圆点,dashed虚线,none无 3.display    1.none元素隐藏且不占位置    2.block元素以块元素显示(换行)    3.inline元素以内联元素显示(无换行,无法设置长宽,长宽跟随内容)    4.inline-block元素以内联块元素显示(可以设置长和宽)    5.table-cell:类似于td标签 // table的默认属性是：display:table，td、th的默认属性是display:table-cell

3 Nginx

     Nginx是一款服务器软件,核心功能是可以和服务器硬件相结合,从而可以将程序发布到Nginx服务器上让很多用户所浏览

3.1 Nginx安装

 1.上传压缩包至Linux并进行解压2.安装依赖软件包     yum -y install pcre pcre-devel    yum -y install zlib zlib-devel    yum -y install openssl openssl-devel3.在nginx解压目录下安装nginx    ./configure    make            make install(安装完成后在/usr/local下会生成nginx目录)4.启动nginx服务 ./nginx5.关闭linux防火墙    systemctl stop firewalld.service //关闭            systemctl disable firewalld.service // 永久关闭

3.2 项目发布

 1./home下创建一个目录,并上传项目压缩包至该处进行解压2.编辑nginx配置文件nginx.conf 即nginx安装包解压目录中conf下                修改server下location下的root(网站根目录)和index路径(网站入口文件)3.关闭nginx服务 ./nginx -s stop4.启动nginx服务并指定文件加载位置    /usr/local/nginx/sbin/nginx -c nginx.conf配置文件路径