zoukankan      html  css  js  c++  java
  • 智还王项目遇到的问题 布局网页的需要注意的问题

    1.border-radius: 50%; (改变div的形状(变圆))

    2.text-indent:__px; (调节字体缩进(每段文字开头的距离))

    3.点击改变字体:

      var c = document.getElementById('div_0'); (先找到你要改变的字体的位置赋值给一个变量)

             if(id==1){
             c.innerHTML="用户指南"; }(如果点击到这个页面的时候改变文字)

    4.  <iframe id="bb" frameborder="0" src="引入的文件" ></iframe> (框架)

    5.<link rel="shortcut icon" href="图片的路径(比特虫在线制作)" type="image/x-icon"/> (引入网页标志图标)

    6.鼠标监听事件:

    //鼠标监听事件
    function getScrollTop(){
          var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
          if(document.body){
            bodyScrollTop = document.body.scrollTop;
          }
          if(document.documentElement){
            documentScrollTop = document.documentElement.scrollTop;
          }
          scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
          return scrollTop;
        }
    //文档的总高度
    function getScrollHeight(){
      var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
      if(document.body){
        bodyScrollHeight = document.body.scrollHeight;
      }
      if(document.documentElement){
        documentScrollHeight = document.documentElement.scrollHeight;
      }
      scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
      return scrollHeight;
    }
    //浏览器视口的高度
    function getWindowHeight(){
      var windowHeight = 0;
      if(document.compatMode == "CSS1Compat"){
        windowHeight = document.documentElement.clientHeight;
      }else{
        windowHeight = document.body.clientHeight;
      }
      return windowHeight;
    }
    window.onscroll = function(){
        console.log(getScrollTop());
        console.log(getWindowHeight());
        console.log(getScrollHeight());
      if(getScrollTop() + getWindowHeight() >= getScrollHeight()){
         //找到要监听的图片滚动到底部的时候距离底部80px;
        document.getElementById('div8_3').style.bottom="80px";
      }else{
              //找到要监听的图片滚动的时候距离底部0px;
          document.getElementById('div8_3').style.bottom="0px";
      }
    };
    View Code

     布局网页的需要注意的问题:

    1. 先要建好文件夹做好分类 :

             

    2. 做之前先要想好怎样做

    3. 布局先建一个大div设好宽高 在添加内容 这样就不至于内容跑偏

    4.一定要边写代码 边写注释  不然找的时候很麻烦

    注意:

       做出来的网页要站在用户的角度去浏览一下,一切的出发点是为了让用户拥有更好的体验。

                                        

  • 相关阅读:
    idapython常用api记录7.0
    Ubuntu(16.0.4)上编译android8.1源码(资料最全版本)
    Frida常用方法
    Frida Java Hook 详解(安卓9):代码及示例(下)
    Frida Java Hook 详解(安卓9):代码及示例(上)
    windows命令行工具导出系统日志——wevtutil
    帆软 V9 Getshell
    和信创天云桌面命令执行
    天擎越权访问
    天擎-前台SQL注入
  • 原文地址:https://www.cnblogs.com/xzz123-/p/8687946.html
Copyright © 2011-2022 走看看