|
写静态页面首先就是要分析一下页面的布局，只有分析清楚了布局写的时候才能顺利的写出页面。布局分析无非就是看页面可分为多少个盒子（div），理清盒子与盒子之间的关系。 html的结构是必不可少的 <html> <head> <title>标题</tilte> </head> <body> 网页主体内容 </body> </html> 盒子模型组成 内容： 实体化宽高和里面的文字图片等等 边框： border 内边距： padding 拉开内容到盒子边缘的距离； 外边距： margin 拉开盒子与盒子之间的距离； 浮动：浮动布局的原理应用 ： 让元素脱离文档流，进行页面效果的布局； 作用：让多个盒子水平排列一行显示实现网页布局，盒子左右对齐，最早是用来实现文字环绕文字； 属性：float取值：left right none（不浮动默认就是） 浮动的特点浮：浮动之后的元素脱离了标准流； 漏：盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来；特：1、浮动之后的盒子的显示模式会更改为行内块元素的特点；2、浮动之后的元素之间的没有缝隙的，紧贴在一起，顶部对齐；3、如果父级盒子不够宽装不下浮动的盒子，盒子会掉下来另起一行； 浮动和定位能防止外边距合并• 如果盒子有嵌套关系，给子级添加了margin-top就会出现外边距塌陷，但是如果用了浮动或者绝对定位和固定定位，就不会出现这样的问题； 清除浮动的方法：额外标签法、父级加overflow属性法、使用after伪元素法、使用双伪元素清除浮动、固定高度法； after伪元素法 /*声明清除浮动的样式*/ .clearfix:after { content: ""; display: block; height: 0; visibility: hidden; clear: both; } .clearfix { *zoom: 1; /*ie6,7 专门清除浮动的样式*/ } 双伪元素清除浮动/*声明清除浮动的样式*/ .clearfix:before ,.clearfix:after { content: ""; display: table; } .clearfix:after { clear:both; } .clearfix { *zoom: 1; /*ie6,7 专门清除浮动的样式*/ } 谁里面有浮动就在谁的开始标签身上添加class=“clearfix” 定位属性：position 取值不同实现的效果不同，如下： 静态定位：position:static; 相对定位：position:relative; 绝对定位：position:absolute; 固定定位：position:fixed; overflow溢出隐藏• overflow:hideen; 溢出隐藏，将超出固定宽高范围内的内容隐藏起来，不是删除了； • overflow:scroll; 显示横向和竖向的滚动条显示（不用）； • overflow:auto;溢出滚动， 将超出固定宽高范围的内容以滚动条的形式显示（不用）； 用户界面-鼠标样式• 鼠标样式：cursor • 小白（默认） cursor:default; • 小手： cursor:pointer; • 移动： cursor:move; • 文本： cursor:text; • 禁止： cursor:not-allowed; css实现三角形效果第一步 ，设置盒子的宽度高度为0 第二步，设置边框的宽度粗细border-width，最终显示为三角形 边框的线条样式 border-style 第三步，设置边框的颜色 border-color，4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了； 第四步，为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;
| 
收藏
淘帖
踩
