怎么将table靠在页面最顶端-CSDN社区

1.css的概述 1.问题 HTML属性修饰有一定局限，是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式行内样式特点：将css样式定义在HTML标记中语法：中先增加一对<style></style>,在<style>标记写样式规则样式规则：由选择器和样式声明组成 3.外部样式独立于任何网页位置处，声明一个样式文件(.css为后缀)，在文件中声明样式，在使用的网页中引入.css文件。使用步骤： 1.创建样式表文件（.css） 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 <link rel="stylesheet" href="URL../.css"> 3.CSS样式特征 1.继承性必须是父子（有层叠嵌套的关系）结构大部分的css效果是可以 2.优先级 1.浏览器默认样式 2.内部样式和外部样式（就近原则） 3.内联样式 4.!important; 绝对优先使用（）格式 p{ color:red !important; } 2.css选择器 1.选择器的作用规范页面中那些元素能够使用定义好的样式。 2.选择器详解 1.通用选择器 *{样式} 2.元素选择器 p{样式} 3.类选择器 1. 声明 .class名{样式} 2.引用可以引用多个类名用空格隔开 4.id选择器 #id名{样式} 3.特殊选择器 1.群组选择器 #id ,.class{样式} 1.子选择器 #id>.class{样式} 1.分类选择器 div .class{样式} 4.伪类选择器作用：匹配元素不同状态的选择器语法：所有的伪类都是以 : 作为开始选择器：伪类选择器{样式} 伪类分类 1.伪类链接 :link 匹配尚未访问的超级链接状态 :visited 匹配访问过的元素的状态 2.动态伪类 :hover 匹配鼠标悬停在元素上时的状态 :active匹配鼠标激活时元素的状态超链接、文本框、密码框点击的时候，就是active。 :focus匹配元素获取焦点时的状态文本框和密码框 5.尺寸与边框 1.单位 1.尺寸单位 1.px 像素 1024*768 2.in 英寸 1in=2.54cm 3.pt 磅（1pt=1/72in） 4.cm 厘米 5.mm 毫米 6.em 相对父元素乘以倍数 7.rem 相对于根元素(html,body)乘以倍数 8.% 相对单位 2.颜色单位（取值） 1.颜色英文单词 blue,red,green,yellow.... 2.rgb（r,g,b） r:red; g:green; b:blue; r,g,b:0-255 rgb(0-255,0-255,0-255) 3.rgb(r%,g%,b%) 4.rgba(r,g,b,aplha) aplha:透明度，0-1之间的小数，值越大，不透明度越高 5.#rgb 16位数字：0-9和a-f 2.尺寸属性 1.作用改变元素的宽度和高度 2.语法 width:宽度取值：px % min-width:最小宽度 max-width:最大宽度 height:高度取值：px % min-height:最小高度 max-height：最大高度 3.页面中允许修改尺寸的元素 1.所有的块元素允许修改尺寸 ex:div,h1-h6,p,ul,li,ol,dl,dt,dd 2.行内元素允许修改尺寸表单控件元素 3.本身具备width和height属性的元素 ex:img,table 注意：大部分行内元素不能修改 span,a,i,u,b,s 3.溢出处理当内容多，元素区域小的时候，会产生溢出的效果，默认都是纵向溢出属性：overflow,overflow-x,overflow-y 取值： 1.visible 可见的，默认值，溢出可见 2.hidden 隐藏的，溢出的内容全部隐藏，不可见溢出 3.scroll 显示滚动条，溢出时可用 4.auto 自动，溢出时自动显示滚动条并且可用 ============================== 9.29 1、边框线属性：border：取值： 2、边框倒角属性：border-radius: 取值： px % 3、边框阴影属性：box-shadow: 取值： inset h-shadow v-shadow blur spread color; 1、 h-shadow:阴影的水平偏移距离 px 正值为右偏移负值为做偏移 2、v-shadow:阴影的垂直偏移方向 px 正值为下偏移负值为上偏移 3、blur :模糊距离，取值越大模糊距离越远越模糊 4、spread:阴影的大小，指定要在基础阴影上扩充出来的大小距离，取值以px为单位的数值 5、color：阴影颜色 6、inset:将默认外阴影转为内阴影在第一位 4、轮廓轮廓指的是边框的边框，绘制于边框外的线条。属性：outline:width style color; width:宽度 style:线条样式 color:线条颜色 outline:none/0; 取消轮廓 5、框模型保持设置的宽高 box-sizing:border-box; 1、内边距 padding 取值：left左 right右 top上 bottom下 px (%)少用取值：auto 则内容居中 2、外边距margin 6、背景颜色 1.背景色属性：background: 取值：颜色 2.背景图片属性：background-image：url(); 取值：url() 3.背景图像平铺属性：background-repeat 取值： 1.repeat 默认值，横向和纵向同时平铺 2..repeat-x 纵向平铺 4.背景图像尺寸属性：background-size: 取值： 1.width hegiht 2.width% height% 3.cover 将背景图等比放大，直到背景图完全覆盖到元素的所有区域为止 4.contain 将背景图等比放大；直到背景图片碰到某个边缘位置 5.背景图片固定作用：将普片固定在网页在某个位置，一直在可视区域内，不会随着 background-attachment: 取值： 1.scroll 默认值滚动 2.fixed 固定 6.背景图片定位作用：改变背景图片的位置属性：background-position: 取值： 1.x y x: 背景图片水平偏移距离取正向下右取负向左 y: 背景图片垂直偏移距离取值为正向下取负为上 2.% 0%为起始 50%为中间 ============================================ 9.30 1、渐变 1、什么是渐变多种颜色平缓变化的一种显示效果 2、渐变的主要因素色标：一种颜色及其出现的位置一个渐变由多个色标组成（至少两个） 3、渐变分类 1.线性渐变一直显得方向来填充渐变色 2。径向渐变以圆形的方式实现填充的效果 3.重复渐变将线性渐变或径向渐变重复几次实现效果 4、线性渐变属性：background-image：取值： liner-gradient(angle,color-point 1.....); 1.angle 1.关键字 to top:从下向上填充 to right:从左向右填充 to bottom:从上向下填充 to left:从右向左填充 2.角度值 0deg :从下向上填充 90deg:从左向右填充 180deg:从上向下填充 270deg:从右向左填充 2.color-point 色标：颜色及其位置取值：颜色以及位置的组合，中间用空格分开 ex: red 0% 在填充方向的开始位置用红色 5、径向渐变 background-image:radial-gradient(100px at center center,red,yellow,blue); 6、重复渐变 1.重复线性渐变 background-image:repeating-linear-gradient(angle,color-point 1,color-point 2...); 2.重复径向渐变 background-image:radial-gradient() 2、文本格式化属性 1、指定字体属性：font-family 取值：用逗号隔开字体名称列表 ex font-fmily:"微软雅黑","Arial","黑体"; 2、字体大小属性：font-size 取值：以px或pt为单位的数值 3、字体加粗属性：font-weight 取值： bold：加粗（b，h1~h6） normal:正常 value:400-900整百的数字 4、字体样式属性：font-style 取值： italic：斜体（i） nromal:正常 5、小型大写字母将小写字符变称答谢，但大小与小写字符一致属性：font-variant 取值： mormal 正常 small-caps 小型大写字符 -------------------------------------------------------------- 10.10日 1、定位 1、堆叠顺序 1、属性属性：Z-index 取值：无单位的数字，数字越大越靠前（数字越大在上面） 2、注意 1、只要已定位元素才能修改堆叠顺序 2、默认堆叠顺序是后来者居上 3、父级元素无法修改堆叠顺序，子级永远在父级之上 2、固定定位 1、语法 position:fixed; 配合着偏移属性实现元素的位置初始化 2、注意 1、固定定位元素会变成块级 2、固定定位元素永远都是相对于body实现位置初始化的 3、固定定位元素也会脱离文档流 ==================== CSS3 Core (css3 核心) 1、复杂选择器 1、兄弟选择器兄弟元素：具备相同父元素的平级的元素称之为兄弟元素兄弟选择器，只能向后找，不能向前找 1、相邻兄弟选择器作用：获取紧紧挨在某元素后的兄弟元素语法：选择器1+选择器2{} 2、通用兄弟选择器作用：获取某元素后所有满足条件的兄弟元素语法：选择1~选择器2{} 2、属性选择器 1、 elem[attr] elem:表示任意元素 attr:表示任意属性作用：匹配页面中所有附带attr属性的elem元素 2、p[class]{} 3、p[id]{} 4、[attr=value] 作用：匹配attr属性值为 value的元素 3、伪类选择器以学过的伪类：动态伪类：焦点 :hover,点击 :active,:focus, 链接伪类：:link,:visited 1、目标伪类作用：突出显示活动的HTML锚点元素。匹配被激活的锚点语法： selector:target{} div:target{} div作为锚点被激活是的样式 2、结构伪类作用：通过元素的结构关系匹配元素 1、:first-child 匹配的元素是属于其父元素中的第一个子元素 p:first-child{} 2、:last-child 匹配的元素是属于其父元素中的最后一个子元素 3、 :nth-child(n){} 匹配的元素是属于其父元素中第n个子元素 table tr:nth-child(n); 4、:empty 匹配没有子元素的元素 5、 :only-child 匹配的元素是属于父元素中唯一的子元素 3、否定伪类将满足指定选择器的元素给排除出去语法: :ont(selector){} table tr:not(:first-child){ font-size:48px; //除第一行以外所有行的文字大小为48px } 4、伪元素选择器 1、 :first-letter 或 ::first-letter 作用：匹配某个元素的首字符 2、 :first-line 或 ::first-line 作用：匹配某个元素的首行 3、 ::selection 作用：匹配被用户选取的内容注意：只能修改文本颜色和背景颜色 2、内容生成 1、什么是内容生产使用css动态的向某个元素中插入一段能容 2、伪元素选择器 1、:before 或 ::before 作用：匹配到某元素的内容区域之前 (:before)内容 2、:after 或 ::after 作用：匹配到某元素的内容区域之后内容(:after) 3、属性属性：content 作用：相匹配到的位置处增加内容取值： 1、用 "" 引起来的普通文本 2、 url():生成一副图像 4、解决问题 1、浮动元素父元素高度问题 .clear:after{ content:""; display:block; clear:both; } 2、子元素的外边距溢出问题 1、#d1的最后一个子元素位置处 : :after 2、增加一个 "空"元素 3、必须是一个块级或 table 的元素 #d2:before{ content:""; /*解决上外边距溢出属性值加 table*/ display:table; clear:both; } 3、弹性布局(Flexible Layout) 1、什么是弹性布局弹性布局(Flexible Layout),是一种布局方式，只要是解决某元素中 "子元素" 的布局方式。为布局提供最大的灵活性 2、弹性布局的相关概念 1、弹性布局的容器简称为 "容器"，子元素的父元素，称为“容器” 2、弹性布局的项目简称为“项目”，要实现布局效果的元素，称为“项目” 3、主轴（main axis）项目们排列方向的一根轴，就称之为主轴如果项目们按x轴排列（横向排列），那么x轴就是主轴如果项目们按y轴排列（纵向排列），那么y轴就是主轴 4、交叉轴(cross axis) 与主轴交叉的一根轴就是交叉轴如果主轴是X轴，那么y轴就是交叉轴如果主轴是y轴，那么x轴就是交叉轴 3、语法 1、flex的容器将元素变为flex容器后，那么所有的子元素都浆变为flex项目，都允许按照弹性布局的方式排列如何将元素变为flex容器？？属性：display 取值： 1、flex将块级元素变为容器 2、inline-flex :将行内元素变为容器注意： 1、元素设置为flex容器之后，子元素的 float,clear,vertical-align将失效 2、元素设置为flex 容器之后，子元素的尺寸允许被修改 3、容器的text-align 属性失效 2、容器的属性 1、flex-direction 作用：指定容器的主轴及其排列方向取值： 1、row 默认值，即主轴为x轴，起点在左端 2、row-reverse 主轴为x轴,起点在右端 3、column 主轴为y轴，起点在顶端 4、column-reverse 主轴为y轴，起点在底端 2、flex-wrap 作用：当主轴排列不下所有项目时如何换行取值： 1、nowrap 默认值，即空间不够时，也不换换行，项目会自动缩小 2、wrap 换行 3、wrap-reverse 反换行 3、flex-flow 作用：是flex-direction 和 flex-wrap的缩写形式取值： 1、row nowrap;（默认值） 2、direction wrap; 4、justify-content 作用：定义项目在主轴上的对齐方式取值： 1、flex-start 在主轴的起点对齐 2、flex-end 在主轴的终点对齐 3、center 在主轴上居中对齐 4、space-between 两端对齐 5、space-around 项目两边的外边距相同，但是中间的元素外边距叠加 5、align-items 作用：项目在交叉轴上的对齐方式取值： 1、flex-start 交叉轴起点对齐 2、flex-end 交叉轴的终点对齐 3、center 交叉轴的居中对齐 4、baseline 交叉 5、stretch 3、项目属性该组属性只能设置在某一项目元素上，只控制一个项目，是不影响容器以及其他项目的效果 1、order 作用：定义项目的排列顺序，值越小，越靠近起点，默认为0 取值：整数数字，无单位 2、flex-grow 作用：定义项目的放大比例，如果容器有足够的剩余空间，项目将如何放大取值：整数数字，无单位数字越大，占据的剩余空间越多 3、flex-shrink 作用：定义项目的缩写比例，即容器空间不足时，项目该如何缩小取值：默认值为1，空间不足时，则等比缩小取值为0，则不缩小 4、align-self 作用：定义当前项目在交叉轴的对齐方式取值： 1、flex-start 2、flex-end 3、center 4、baseline 5、stretch 6、auto 继承自父元素的align-items属性 ===================================== 10.13 1、css Hack 1、解决问题解决 IE 浏览器的兼容性问题针对不同的浏览器编写不同的css代码 2、CSSHack 的原理使用css样式的优先级来解决兼容性问题的 3、CSSHack 的实现方式 1、css类内部 Hack 在样式属性名称前或属性后增加前后缀，以识别不同的浏览器 + ： IE6,7 的前缀 - ：IE6 的前缀两者都出现时+号支持IE7，-号支持IE6 2、css选择器Hack 在选择器的前面增加前缀以便识别不同的浏览器 *：识别IE6 *+：识别IE7 *div{IE6的显示效果} *+div{IE7的显示效果} 3、HTML头部引用Hack 使用IE条件注释来判断IE浏览器的版本，从而执行不同的代码语法： <!--[if 条件 IE 版本号]> 满足条件要执行的HTML代码改段代码只在IE6以上的浏览器中执行 1：放大 <1: 缩小负数：物极必反 2、scale(x,y) x:横向缩放比例 y:纵向缩放比例 3、单向缩放scale(x) scale(y); 3、旋转 /*背向的元素隐藏*/ backface-visibility:hidden; 1、什么是旋转改变元素在页面上的角度 2、语法属性：transform 取值：rotate(ndeg) n取值为正，顺时针旋转 n取值为负，逆时针旋转注意： 1、转换原点会影响最终的转换效果 2、元素旋转时是连同坐标轴一起旋转，会影响后续的位移 4、倾斜 1、什么是倾斜改变元素在页面中的形状 2、语法属性：transform 取值： 1、skewX(xdeg); 让元素向着x轴的方向产生倾斜效果，实际上是改变y轴的倾斜角度值 x 取值为正，y轴逆时针倾斜 x 取值为正，y轴顺时针倾斜 2、skewY(ydeg) 让元素向着y轴的方向产生倾斜效果，实际上是改变x轴的倾斜角度值 y取值为正，x轴顺时针倾斜 y取值为负，x轴逆时针倾斜 4、3D转换 /*背向的元素隐藏*/ backface-visibility:hidden; 1、透视距离模拟人的眼睛到3D转换元素之间的距离属性：perspective 注意：该属性要加在3D转换元素的父元素上 2、3D的旋转属性：transform 取值： 1、rotateX(xdeg) 以x轴为中心轴，旋转元素的角度 2、rotateY(xdeg) 以Y轴为中心轴，旋转元素的角度 3、rotateZ(xdeg) 以Z轴为中心轴，旋转元素的角度 4、rotate3D(x,y,z,ndeg) x,y,z取值为大于0的数字时，表示该轴要参与旋转，取值为0则不参与旋转 rotate3d(1,0,0,45deg); 3、过渡 1、什么是过渡使得css的属性值，在一段时间内平缓变化的效果 2、过渡的语法 - 4个属性 1、指定过渡属性作用：指定那个属性值在变化的时候需要使用过渡的效果来体现属性：transition-property 取值： 1、all （所有）能使用过渡的属性，一律用过渡 2、具体属性名 ex: 1.transition-property:background;背景颜色变化时用过渡 2.transition-property:border-radius;边框倒角变化时用过渡 3.transition-property:all;所有可以过渡的元素都用过渡允许设置过渡效果的属性 1.颜色属性 2.取值的数字属性 3.转换属性 - transform 4.阴影属性 5.渐变属性 6.visibility属性，可见属性 2、过渡的时长作用：指定在多长时间曲线函数属性：transition-duration 取值：以 s 或 ms 为单位的数值 1000ms = 1s 3、指定过渡速度时间曲线函数属性：transition-timing-function 取值： 1。ease 默认值，慢速开始，快速变快，慢速结束 2.linear 匀速 3.ease-in 慢速开始，加速结束 4.ease-out 快速开始，慢速结束 5.ease-in-out 慢速开始和结束，中间先加速后减速 4、指定过渡延迟时间属性：transition-delay 取值：以 s 或 ms 为单位的数值 3、过渡属性编写位置 1、将过渡声明在元素声明的样式中即管去，又管会 2、将过渡声明在触发的操作中（hover）只管去，不管回 4、过渡的缩写 transition:property duration timing-function delay; transition:background 2s linear,border-raidus 2s; transition:all 2s; 4、动画 1、什么是动画使元素从一种样式逐渐变化为另一种样式即将多个过渡效果放在一起动画是通过 “关键帧”，来控制动画的每一步关键帧： 1、动画执行的时间点 2、在该时间点上的样式是什么 2、动画的使用步骤 1、声明动画为动画起名定义关键帧 2、为元素调用动画指定元素调用的动画名称以及各个参数属性 3、声明动画 @keyframes 动画名称{ /*定义该动画的所有的关键帧 */ 0%{ /*动画开始时元素的样式*/ } 25%{ /*动画执行到1/4时元素的样式*/ } 50%{ /*动画执行到1/2时元素的样式*/ } 100%{ /*动画结束时的样式*/ } } 兼容问题 -webk- -o- -ms- @-webk-keyframes 动画名称{ /*定义该动画的所有的关键帧 */ 0%{ /*动画开始时元素的样式*/ } 25%{ /*动画执行到1/4时元素的样式*/ } 50%{ /*动画执行到1/2时元素的样式*/ } 100%{ /*动画结束时的样式*/ } } 4、动画属性（调用动画） 1、animation-name 作用：指定调用动画的名称 2、animation-duration 作用：指定动画执行一个周期的时长取值：以 s 和 ms 3、animation-timing-function 作用：指定动画的速度时间曲线函数取值： :ease,linear,ease-in,ease-out,ease-out 4、animation-delay 指定动画的延迟时间 5、animation-iteration-count 作用：指定动画的播放次数取值： 1、具体数值 2、infinite 6、animation-direction 作用：指定动画的播放方向 1、normal 默认值，正常播放 0%~100% 2、reverse 逆向播放 100%~0% 3、alternate 轮流播放奇数次数播放时，正向播放偶数次数播放时，逆向播放 7、动画的简写方法 animation:name duration timing-function delay iteration-count animation-direction; 8、animation-fill-mode 作用：规定动画在播放前或播放后的状态取值： 1.none :默认值 2.forwards 动画播放完成停留在最后 3.backwards 动画播放器，延迟时间内，动画保存在第一个帧状态 4.both forwards和backwards的结合 9、animation-play-state 作用：指定动画是处与什么状态取值： 1.paused 暂停 2、running ：播放 CSS3 Filter（滤镜）属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。 -webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。下面咱们就学习一下filter这个属性吧。现在规范中支持的效果有： grayscale 灰度值为0-1之间的小数 sepia 褐色　　　　　　值为0-1之间的小数 saturate 饱和度　　　　值为num hue-rotate 色相旋转　　值为angle invert 反色　　　　　　值为0-1之间的小数 opacity 透明度　　　　　值为0-1之间的小数 brightness 亮度　　　　值为0-1之间的小数 contrast 对比度　　　　值为num blur 模糊　　　　　　值为length drop-shadow 阴影例子 1.灰色 -webkit-filter: grayscale(1); filter: grayscale(1); 2.饱和度 -webkit-filter: saturate(3.6); filter: saturate(3.6); 3.

http://www.cnblogs.com/hanfeng/articles/89318.html 最近有一个读者问到，怎样用CSS创建一个居中的页面布局。该读者所追求的，是要达到这样一种效果，就如同在一个1024象素宽的页面上设计出一个800象素宽的表格。这是一种使用很广泛的页面设计方法，按照传统，它要靠嵌套表格才能达到这一效果，因此，这位读者追寻一种用CSS来达到这一效果的方法并不让人惊讶...

目录 1.问题：怎么在双栏排版中，让占据两栏的表格出现在页面顶端？ 2.解决： 1）图片：（占据两栏显示在页面顶端） 2）表格：（占据两栏显示在页面顶端） 1.问题：怎么在双栏排版中，让通栏的表格出现在页面顶端？ [！b]等等的一些命令都不行啊图片或表格的位置一般用参数【htbp】控制。但是，在双栏模板中，当表格或者图片占据双栏模板的两栏时（即在 \begin{table*}、\begin{figure*} 时），控制选项【htbp】失效了。比如，如下图所示，使用\begin.

之前工作的时候碰到一个问题，做滚动时因为html的select这个控件会显示在任何控件之前，式样一直做不好，当时的解决方法是用js写了个控件代替了单纯的select标签，让它在影响界面时做些处理。后来和一个前台高手共事，我发现了最好的解决方法就是用iframe去框住这个select标签使之不会超出其他控件，方法如此，具体百度，这边只是做个记号以免以后忘记.

你知道表格能做成网页吗?如果你知道，那你又知不知道怎么做呢?下面是小编为你整理的，希望对你有用!利实验目标该网页将利用设计页面的布局，制楚雄师院的页面简介。通过该种制作，我们可以体会到表格在布局设计中的实际运用，体会如何使用表格来控制页面中的元素对象，已达到自然，生动的配置构成元素的目的。实验过程《1》在dreamweaver中执行《文件》中的《新建》命令，创建一个HTML文档。然后在《文件》中保...