zoukankan      html  css  js  c++  java
  • 分辨率判断-13

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>分辨率解决方法一</title>
    <link href="css/styles.css" id="styles" rel="stylesheet" type="text/css">
    </head>

    <body style="overflow-x:hidden">
    <!-- 顶部导航 -->
    <div class="w1_2 color">
          <ul id="ulc">
              <li class="li1 selected"></li>
              <li class="li2"></li>
              <li class="li3"></li>
          </ul>
    </div>
    <div class="w1_2">
              <div class="top">
                   <p id="text">头部w1200_w1000</p>
              </div>
              
              <div class="main cl">
                      <div class="main_left">
                           内容左边w900_w700
                      </div>
                      <div class="main_right">
                            内容右边w280
                      </div>       
              </div>
              <div class="main cl">
                      <div class="main_left">
                           内容左边w900_w700
                      </div>
                      <div class="main_right">
                            内容右边w280
                      </div>       
              </div>
              <div class="main cl">
                      <div class="main_left">
                           内容左边w900_w700
                      </div>
                      <div class="main_right">
                            内容右边w280
                      </div>       
              </div>
              
              <div class="footer">
                    页脚w1200_w1000
                    
              </div>
    </div>
    <script type="text/javascript">
    window.onload=function(){
        var sc=document.getElementById("styles");
        var text=document.getElementById("text");
        if(screen.width>1024)  //获取屏幕的的宽度
        {
          sc.setAttribute("href","css/styles.css");   //设置css引入样式表的路径
          text.innerHTML = "你的电脑屏幕宽度大于1024,宽度是 1200px, 很给力哦";
        }
        else{
         sc.setAttribute("href","css/styles1.css");
         text.innerHTML = "你的电脑屏幕宽度小于或是等于1024,宽度是 1000px, 可以换换显示器了。";
        }
        }
    </script>

    </body>
    </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;}

  • 相关阅读:
    webpack基础
    LeetCode232. 用栈实现队列做题笔记
    mysql 时间加减一个月
    leetcode 1381. 设计一个支持增量操作的栈 思路与算法
    LeetCode 141. 环形链表 做题笔记
    leetcode 707. 设计链表 做题笔记
    leetcode 876. 链表的中间结点 做题笔记
    leetcode 143. 重排链表 做题笔记
    leetcode 1365. 有多少小于当前数字的数字 做题笔记
    LeetCode1360. 日期之间隔几天 做题笔记
  • 原文地址:https://www.cnblogs.com/su1637/p/8203598.html
Copyright © 2011-2022 走看看