1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
5 <title>分辨率解决方法一</title>
6 <link href="css/styles.css" id="styles" rel="stylesheet" type="text/css">
7 </head>
8
9 <body style="overflow-x:hidden">
10 <!-- 顶部导航 -->
11 <div class="w1_2 color">
12 <ul id="ulc">
13 <li class="li1 selected"></li>
14 <li class="li2"></li>
15 <li class="li3"></li>
16 </ul>
17 </div>
18 <div class="w1_2">
19 <div class="top">
20 <p id="text">头部w1200_w1000</p>
21 </div>
22
23 <div class="main cl">
24 <div class="main_left">
25 内容左边w900_w700
26 </div>
27 <div class="main_right">
28 内容右边w280
29 </div>
30 </div>
31 <div class="main cl">
32 <div class="main_left">
33 内容左边w900_w700
34 </div>
35 <div class="main_right">
36 内容右边w280
37 </div>
38 </div>
39 <div class="main cl">
40 <div class="main_left">
41 内容左边w900_w700
42 </div>
43 <div class="main_right">
44 内容右边w280
45 </div>
46 </div>
47
48 <div class="footer">
49 页脚w1200_w1000
50 </div>
51 </div>
52 <script type="text/javascript">
53 window.onload=function(){
54 var sc=document.getElementById("styles");
55 var text=document.getElementById("text");
56 if(screen.width>1024) //获取屏幕的的宽度
57 {
58 sc.setAttribute("href","css/styles.css"); //设置css引入样式表的路径
59 text.innerHTML = "你的电脑屏幕宽度大于1024,宽度是 1200px, 很给力哦";
60 }
61 else{
62 sc.setAttribute("href","css/styles1.css");
63 text.innerHTML = "你的电脑屏幕宽度小于或是等于1024，宽度是 1000px, 可以换换显示器了。";
64 }
65 }
66 </script>
67 </body>
68 </html>
@charset "gb2312";
/* CSS Document */
body,div,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,tr,td,input,p,span,img,b,i,em,strong,a{ margin:0; padding:0;}
img{ margin:0; padding:0; border:0; vertical-align:top;}
ul,li{list-style:none;}
body{ font-family:"宋体",Arial,Verdana,Helvetica,sans-serif; font-size:12px;}
a{text-decoration:none;}
table{ 100%; 100% !important;}
.cl:after{content:'20';display:block;height:0;clear:both}
.cl{*zoom:1}
.color{ height:40px; background:#999;}
.color ul{ float:right;}
.color ul li{ 20px; height:20px; float:left; margin:10px; cursor:pointer;}
.color ul li.li1{ background:#333;}
.color ul li.li2{ background:#090;}
.color ul li.li3{ background:#C63;}
.color ul li.selected{box-shadow:2px 2px 2px #999999;}
.w1_2{ clear:both; 1200px; margin:0 auto;}
.top{ height:100px; line-height:100px; background:#060; text-align:center; font-family:"微软雅黑"; font-size:36px; color:#FFF;}
.main{ height:200px; margin-top:20px; clear:both;}
.main_left{ float:left; 900px; height:200px; line-height:200px; background:#063; text-align:center; font-family:"微软雅黑"; font-size:36px; color:#FFF;}
.main_right{ float:right; 280px; height:200px; line-height:200px; background:#066; text-align:center; font-family:"微软雅黑"; font-size:36px; color:#FFF;}
.footer{ height:100px; line-height:100px; background:#069; text-align:center; font-family:"微软雅黑"; font-size:36px; color:#FFF; margin-top:20px;}