第八到十章

day 08-10
图片常用格式
触点
色彩丰富，文件小 有损压缩，反复保存图片质量下
降明显 色彩丰富的图片/渐支图像
gif 文件小，支持动画、透明，无兼容性问题 只支持 256 种颜色 色彩简单的logoficon/动图
png 无损压缩，支持透明，简单图片尺寸小 不支持动画，色彩丰富的图片尺
寸大 logo/icon/透明圈
webp 文件小，支持有损和无损压缩，支持动画、
透明 浏苑器兼容性不好 支持webp 格式的app和
webview
合理嵌套HTML标签
合理嵌套 HTML 标签，ul和li 是固定嵌套，ul 直接子元素必须是 li，dl 和 dt、dd 是固定嵌套，dl 的直接子
元素必须是dl和dd。p标签不允许嵌套p标签。a标签不允许嵌套a标签和其他交互性元素，比如button.
尽可能的控制元素嵌套层级，不合理的嵌套会影响页面性能。
为什么需要样式重置?
规划重置样式表：
因为浏览器的兼容问题，不同浏览器对某些标签默认值的解析是不同的，如果没对 CSS 初始化往往会出现不
同浏览器之间的页面显示差异。为了避免这种差异需要使用样式重置。
命名参考
登录条：loginBar
标志：logo
侧边栏：sideBar
广告：banner
导航：nav
子导航：subNav
菜单：menu
子菜单：subMenu
搜索：search
滚动：scroll
页面主体：main
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
新闻：news
按钮：btn
投票：vote
状态：status
合作伙伴：partner
外 套：wrap
商 标：label
标 题：title
顶导航：topnav
左导航：leftsideBar
右导航：rightsideBar
横幅：banner
菜单内容：menuConat
菜单容器：menuContainer
子菜单： subMenu
边导航图标：sidebarlcon
注释： note
版权：copyRight
友情链接：friendLink
容器：container
页脚：footer
当前：current
激活：active
购物车：shop
搜索：search
登陆：login
注册：register
下载：download
面包屑：breadCrumb
logo优化
logo在整个页面中非常重要，使用h1标签，目的是为了提高权重，告诉搜索引擎，这个地方很重要
• h1里面放一个链接，将logo作为链接的背景图片插入
• 链接里面要放文字内容(一般为网站名称)，为了搜索引擎收录，但是文字不要显示出来
。 用text-indent移到盒子外面(text-indent:-9999px)，然后overflow.hidden (淘宝)
。 直接font-size：0(京东)
最后给链接一个title，鼠标悬停时显示提示文字。
二、浏览器常见兼容问题
1、图片下间隙问题
<div class="box">
<img src="./images/1.png" alt="">
</div>
<style>
.box {
border: 1px solid red;
/*解决方案三：*/
font-size: 0;
img {
width：300px;
/* 解决方案一*/
/* vertical-align: top;*/
/* vertical-align: bottom;
verti align: middle;★/
/* 解决方案二 */
/#display: block;★
</style>
2、IE8中图片边框问题
a标签中嵌套img，在ie8下图片会有蓝色边框
1、图片下间隙问题
<div class="box">
<img src="./images/1.png" alt="">
</div>
<style>
.box {
border: 1px solid red;
/*解决方案三：*/
font-size: 0;
img {
width：300px;
/* 解决方案一*/
/* vertical-align: top;*/
/* vertical-align: bottom;
verti align: middle;★/
/* 解决方案二 */
/#display: block;★
</style>
2、IE8中图片边框问题
a标签中嵌套img，在ie8下图片会有蓝色边框
<a href="#">
<img src="./images/1.png" alt="">
</a>
<style>
img {
width：300px;
/* border：0；*/
border:none;
</style>
3、ie8中背景复合属性写法问题
背景属性简写时，如果背景图片与背景图片是否重置中间没有空格隔开，在ie8下背景图片将不能显示
<style>
.box [
width：500px;
height: 500px；
/“宁已下以下代码不显示背景图片*/
/*_ackground: ur1("./images/1.png")no-repeat;*/
background:url("./images/1.png") no-repeat;
</style>
4、在IE6及更早版本浏览器中，定义小高度的容器
.box {
height:5px；
background-color:aqua;
/*解决方案 ★/
font-size: 0；
line-height: 0；
</style>
4、在IE6及更早版本浏览器中，定义小高度的容器
.box {
height: 5px；
background-color: aqua;
/* 解决方案*/
font-size: 0;
line-height: 0;
3
5、IE6 及更早版本浏览器下，浮动时产生双倍边距的 BUG
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<style>
★ (
margin: 0；
padding:0;
.box {
float: left;
width: 200px；
height: 200px；
border: 1px solid red;
margin-left: 20px;
_display:inline;
</style>
6、IE7及更早版本浏览器下，子标签相对定位时父标签overflow 属性的auto |hidden 失效的问题
<div class="wrap">
<div class="box"></div>
</div>
<style>
.wrap {
width: 500px；
height:500px；
background：aqua;
overflow: hidden;
/* 解决方案*/
position: relative;
.box 
position: relative;
left：400px；
width:200px；
height：200px;
background-color:pink;
</style>
7、块转内联块 ie7- 不在一行显示问题
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<style>
.box {
width:200px；
height:200px；
border: 1px solid red;
display: inline-block;
/* 解决方案 */
*display: inline;
zoom：1；
</style>
8、IE7 及更早版本浏览器下，当li中出现2个或以上的浮动时，li之间产生的空白间隙。
<ul class="nav">
<1i>
<a href="#">首页</a>
<span>></span>
</1i>
<1i>
<a href="#">首页</a>
<span>></span>
</1i>
<1i>
<a href="#">首页</a>
<span>></span>
</1i>
</u1>
<style>
.nav 1i [
height: 30px；
line-height: 30px;
width: 200px；
background: aqua;
list-style: none;
/ 解决方案*/
/* vertical-align: top; /
/* vertical-align: middle; */
vertical-aligr,bottom;
a{
text-decoration: none;
float：left;
)
span {
float：right;
</style>
6/8 单页阅读√ PDF转Word 国图片转文字 水印 合井拆分~
三、css Hack
使用CSS Hack可以控制不同浏览器及版本之间的显示差异，某些情况下处理兼容问题可以事半功倍，但滥用会影响页面性能，也会导致后期维护困难，因此尽可能减少对CSS Hack的使用。
1、条件Hack：
用于选择IE浏览器及IE的不同版本
if条件Hack是HTML级别的(包含但不仅是CSS的Hack，可以选择任何HTML代码块)
if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本
•大于：选择大于指定版本的IE版本。关键字：gt(greater than)
·大于或等于：选择大于或等于指定版本的IE版本。关键字：gte(greater than or equal )• 小于：选择小于指定版本的IE版本。关键字：It(less than )
•小于或等于；选择小于或等于指定版本的IE版本。关键字：Ite( less than or equal )
•非指定版本：选择除指定版本外的所有IE版本。关键字：!
<!--[if lte IE 8]>
<p>能不能看到这个p标签</p>
<![endif]-->
<1--[if lte IE 8]>
<link rel="stylesheet" href="../小u商城/css/index.css">
<![endif]-->
条件hack在标准浏览器下会当做注释进行处理
2、属性级hack
CSS 样式属性名前或值后面加上一些只有特定浏览器才能识别的 hack 前缀或后缀，以达到预期的页面展 现效果。
下划线：选择IE6及以下 ★：选择IE7及以下
\9：选择IE6+ \O：选择IE8+和Opera15以下的浏览器
.box {
color: red;
_color:pink;
*color:orange;
color:aqua\0;
3、选择符级Hack
★ html /*IE6及更早浏览器*/
* + html /*IE7*/
<style>
.box {
width：200px;
height：200px;
/* 在ie6下显示粉色的背景★
★ html .box {
background: pink;
</style>
四、项目测试
1、静态banner大图的处理
-有效区填白，降低图片大小
-有效区的图片根据情况划分为三到五部分，注意不要切断文字
-图片间隙处理