网站建设竣工验收报告,漫画网站做任务给金币,电子商务网站建设的案例分析题,兰州网站设计教程1.CSS精灵
1.什么是CSS精灵
英文叫法 CSS sprites#xff0c;通常被解释为“CSS图像拼合”或“CSS贴图定位”;其实就是把网页中一些背景图片整合到一张图片文件中#xff0c;再利用css“background-image”#xff0c;
“background-repeat”,“background-position”的组…1.CSS精灵
1.什么是CSS精灵
英文叫法 CSS sprites通常被解释为“CSS图像拼合”或“CSS贴图定位”;其实就是把网页中一些背景图片整合到一张图片文件中再利用css“background-image”
“background-repeat”,“background-position”的组合进行背景定位background-position用数字能精确的定位出背景图片的位置。适用于一般小图标不适合大背景大布局背景。 2.CSS精灵优缺点
优点:
1、减少网页的http请求从而大大的提高页面的性能;
2、图片命名上的困扰;
3、更换风格方便。
缺点:
必须要限定容器大小符合背景图元素位置需要计算。
2.CSS滑动门技术
为了使各种特殊形状的背景能够自适应元素中文本内容的多少出现了CSS滑动门技术。它从新的角度构建页面使各种特殊形状的背景能够自由拉伸滑动以适应元素内部的文本内容可用性更强。最常见于各种导航栏的滑动门。如微信官网导航。
滑动门核心技术就是利用CSS精灵(主要是背景位置)和盒子padding撑开宽度以便能适应不同字数的导航栏。
滑动门核心技术就是利用CSS精灵(主要是背景位置)和盒子padding撑开宽度以便能适应不同字数的导
子阴影 航栏。
先给一个a标签用来装背景图的左边圆角a不给宽度由文字撑开宽度再在a里面加一个span 盒子还是用之前的背景图的但是是装背景图的右边圆角字写在 span 里面的span 又是属于a的
3.CSS小箭头
平常在网页中经常会有空心箭头除了用图片外可以用CSS来实现。基本思路是用CSS绘制两个三角形通过绝对定位让两三角形不完全重叠例如制作向右的空心箭头位于前面的三角形border颜色是需要的颜色后面的三角形border颜色与包裹它们的div背景色一致然后设置前面三角形的left值比后者的left多1px这样就可容易生成空心箭头但是在ie8以下浏览器中需要设置父元素和子元素的优先级否则制作的三角形无法显示。
html代码 CSS代码
style*{padding: 0;margin: 0;}.box{width: 100px;height: 500px;margin: 0 auto;border: 1px solid royalblue;background: white;}.arrow-box{width: 30px;height: 30px;margin: 20px auto;position: relative;}.right{width: 20px;height: 20px;position: absolute;left: 0;top: 0;border: 1px solid blue;}.right-arrow1,.right-arrow2{width: 0;height: 0;display: block;position: absolute;left: 0;top: 0;border-top: 10px transparent dashed;border-right: 10px transparent dashed;border-bottom: 10px transparent dashed;border-left: 10px white solid;overflow: hidden;}.right-arrow1{left: 1px;border-left: 10px blue solid;}.right-arrow2{border-left: 10px white solid;}.left{width: 20px;height: 20px;position: absolute;left: 0;top: 0;z-index: 2;border: 1px solid blue;}.left-arrow1,.left-arrow2{width: 0;height: 0;display: block;position: absolute;left: 0;top: 0;z-index: 5;border-top: 10px transparent dashed;border-right: 10px transparent dashed;border-bottom: 10px transparent dashed;border-left: 10px white solid;overflow: hidden;}.left-arrow1{border-right: 10px blue solid;}.left-arrow2{left:1px;border-right: 10px white solid;}/style 3.BFC块级格式化上下文
1.什么是BFC
Formatting Context:指页面中的一个渲染区域并且拥有一套渲染规则他决定了其子标签如何定位以及与其他标签的相互关系和作用。
BFC:块级格式化上下文它是指一个独立的块级渲染区域只有Block-level BOX参与该区域拥有一渲染规则来约束块级盒子的布局且与区域外部无关。
2.怎样生成BFC
既然BF是一块渲染区域那这块染区域到底在它又是有多大这些由生成 BFC 的标签决定 CSS21中规定满足下列CSS声明之一的标签便会生成BFC。
1、根标签
2、float 的值不为none
3、overflow的值不为visible
4、display的值为inline-block
5、position 的值为 absolute 或fixed
3.BFC 的特性
1内部的标签会在重直方向上一个接一个的放置
2、重直方向上的距离由margin 决定属于同一个BFC的两个相邻标签的margin 会发生重叠
3、每个标签的左外边距与包含块的左边界相接触(从左向右)即使浮动标签也是如此。
4、BFC的区域不会与float 的标签区域重叠
5、计算BFC的高度时浮动子标签也参与计算
6、BFC 就是页面上的一个隔离的独立容器容器里面的子标签不会影响到外面标签反之亦然
4.BFC 解决的问题
1、外边距折叠
特性的第2条:垂直方向上的距离由margin决定
在常规文档流中两个兄弟盒子之间的垂直距离是由他们的外边距所决定的但不是他们的两个外边距之和而是以较大的为准。
那么有没有方法让垂直外边距不折叠呢?
特性的第6条就说了:BFC就是页面上的一个独立容器容器里面的子标签不会影响外面标签同样外面的标签不会影响到BFC 内的标签。所以可以让其中的一个标签处于一个BFC中。
2、自适应两栏或三栏布局
左边固定宽度右边不设宽因此右边的宽度自适应随浏览器窗口大小的变化而变化。左右两边固定宽度中间不设宽因此中间的宽度自适应随浏览器的大小变化而变化。浮动的标签会覆盖正常标签根据第④条规则BFC的区域不会与float的标签区域重叠
所以我们只需要创建一个BFC它就会自动缩小以不被浮动的标签遮盖就能够实现右侧栏自适应。
3、防止字体环绕
众所周知浮动的盒子会遮盖下面的盒子但是下面盒子里的文字是不会被遮盖的文字反而还会环绕浮动的
4、清除浮动
利用overflowhidden清除浮动因为浮动的盒子无法撑出处于标准文档流的父盒子的height。根据特性的第5条计算BFC的高度时浮动子标签也会参与计算。
4.CSS导航栏
1.导航栏概念
易用的导航栏对于任何网站都很重要。
导航栏链接列表
导航栏需要标准的HTML作为基础。
在我们实例中将用标准的HTML列表构建导航栏
导航栏基本就是链接列表因此使用ul和li元素会很有意义 2.垂直导航栏
创建背景为灰色基础垂直导航栏并在用户将鼠标移到链接的背景色。 3.水平导航栏
html代码 CSS代码: 6.下拉列表框
使用CSS创建悬停的下拉列表。
html代码 CSS代码
