<CSS>总结:常用分辨率

html-css07

<CSS>总结:常用分辨率,第1张

128x128、128x160、240x320(常见2.0、2.2、2.4、2.8寸屏手机使用)

320x240(常见2.4寸屏手机使用)

240x400(常见3.0寸屏手机使用)

320x480(主流屏常见3.2、3.5寸屏手机)

360x640(诺基亚常见)

480x800(常见4.0寸屏使用)

480x854(常见3.7寸屏使用)

960x540(QHD常见4.0、4.3、4.5寸使用)

960x640(常见苹果机使用)

1136x640(常见苹果5使用)

1280x720(HD主流屏常见4.3、4.5、4.7、5.0、5.5、5.7、6.0寸屏使用)

1280x768(常见4.5寸屏使用)

1280x800(常见三星5.3寸及平板电脑使用)

1024x600(常见7.0寸屏平板电脑使用)

1024x768(常见LG5.0寸屏及7.9寸9.7寸平板电脑使用)

1920x1080(FHD主流屏常见4.7、5.0、5.0、5.7、6.0寸手机及电视使用)

1920x1280 (常见9.0寸平板电脑使用)

1920x1200(常见10.1寸平板电脑及酷派大神7.0使用)

2048x1539(常见苹果iPad 及国产一些平板使用)

2560×1440(2k屏)

4096×2160(4K屏常见电视使用)

1024x600(常见8.9寸电脑使用)

1024x768(常见10.4、12.1、14.1、15寸电脑使用)4:3

1280x1024(常见14.1、15寸电脑使用)5:4

1440x1050(常见14.1、15寸电脑使用)4:3

1600x1200(常见15、16.1寸电脑使用)4:3

1280x800(常见10.8、12.1、15.4寸电脑使用)16:10

1366x768(常见15.2寸电脑使用)15:10

1280x854(不常见)16:9

1440x900(仅苹果17寸电脑使用)16:10

1600x1024(不常见)14:9

1680x1050(常见15.4、20寸电脑使用)16:10

1920x1200(常见20寸电脑使用)16:10

iPhone5尺寸是640x1136px分辨率是326PPI

iPhone4和iPhone4S尺寸是640x960px分辨率是326PPI

iPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px分辨率是163PPI

320dp:一个普通的手机屏幕(240X320,320×480,480X800)

480dp:一个中间平板电脑像(480×800)

600dp:7寸平板电脑(600×1024)

720dp:10寸平板电脑(720×1280,800×1280)

iPad第三代第四代尺寸是2048x1536px分辨率是264PPI

iPad第一代第二代尺寸是1024x768px分辨率是132PPI

iPad Mini尺寸是1024x768px分辨率是163PPI

1、800x600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定。

2、1024x768下,网页宽度保持在1002以内,如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。(在dw里面有设定好的标准值, 1024x768页面的标准大小是955x600,照着它的尺寸做就行了)

3、在ps里面做网页可以在800x600状态下显示全屏,页面的下方又不会出现滑动条,尺寸为740x560左右

4、在PS里做的图到了网上就不一样了,颜色等等方面,因为WEB上面只用到256WEB安全色,而PS中的RGB或者CMYK以及LAB或者HSB的色域很宽颜色范围很广,所以自然会有失色的现象.

页面标准按800x600分辨率制作,实际尺寸为778x434px

页面长度原则上不超过3屏,宽度不超过1屏

每个标准页面为A4幅面大小,即8.5X11英寸

全尺寸banner为468x60px,半尺寸banner为234x60px,小banner为88x31px

另外120x90,120x60也是小图标的标准尺寸

每个非首页静态页面含图片字节不超过60K,全尺寸banner不超过14K

1、120x120,这种广告规格适用于产品或新闻照片展示。

2、120x60,这种广告规格主要用于做LOGO使用。

3、120x90,主要应用于产品演示或大型LOGO。

4、125x125,这种规格适于表现照片效果的图像广告。

5、234x60,这种规格适用于框架或左右形式主页的广告链接。

6、392x72,主要用于有较多图片展示的广告条,用于页眉或页脚。

7、468x60,应用最为广泛的广告条尺寸,用于页眉或页脚。

8、88x31,主要用于网页链接,或网站小型LOGO。

给每个a

标签

一个

class类

.然后分别给每个累设置不同的链接颜色,就可以了。

答案补充

<style

type="text/css">

a.a1

{

color:#f00}

a.a1:hover

{

color:#0f0}

a.a2

{

color:#00f}

a.a2:hover

{

color:#ff0}

我写了a1

跟a1

其他两个自己知道怎么定义了吧..

<a

href="#"

class="a1">不同链接颜色</a>

<a

href="#"

class="a2">不同链接颜色</a>

<a

href="#"

class="a3">不同链接颜色</a>

<a

href="#"

class="a3">不同链接颜色</a>

答案补充

<style

type="text/css">

a.a1

{

color:#f00}

a.a1:hover

{

color:#0f0}

a.a2

{

color:#00f}

a.a2:hover

{

color:#ff0}

a.a3

{

color:#f00}

a.a31:hover

{

color:#0f0}

a.a4

{

color:#00f}

a.a4:hover

{

color:#ff0}

</style>

<a

href="#"

class="a1">不同链接颜色</a>

<a

href="#"

class="a2">不同链接颜色</a>

<a

href="#"

class="a3">不同链接颜色</a>

<a

href="#"

class="a3">不同链接颜色</a>

答案补充

a1

到a4

四个不同的类的链接颜色你改改就可以了..我只是给代码例子..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript" src="jquery.js"></script>

<style>

.{ padding:0 margin:0 list-style:none}

.htmlBox{ width:100% min-width:500px height:500px border:1px solid #A349A4 border-radius:5px}

.sskBox{ width:100% height:35px margin-top:150px border:1px solid #000 border-left:0 border-right:0}

.zc{ width:100px height:35px float:left}

.zj{ width:250px height:35px float:left border-left:1px solid #000 border-right:1px solid #000}

.yc{ height:35px float:right}

</style>

</head>

<body>

<div class="htmlBox">

 <div class="sskBox">

 <div class="zc">左边100</div>

 <div class="zj">中间250</div>

 <div class="yc">右边自适应</div>

</div>

</div>

</body>

<script>

tmntH()//加载的时候执行一次

$(window).resize(function() {tmntH()})//浏览器窗口变化时执行

function tmntH()

{

    var ycw=$(".sskBox").width()-352+'px'//yc的宽度等于sskBox宽度-350-2(边框线)

    //alert(div3)

    $(".yc").css("width",ycw)

    

}

</script>

</body>

</html>