2、html—工作遇到的问题集合

不遵守规则，罚款：2的N次方

一：做页面时要添加下面的样式

*, *::after, *::before {
box-sizing: border-box;
}

二：如何控制图片的大小？（图片超过页面宽度就为100%，如果小于页面宽度就按原来的大小输出）

img{max-width:100%}【注意，maxwidth:100%也是图片自适应使用的方法】

三：制作登陆页面时，提示一句话加一张图片的js写法

四：表格中如果有很长的数字，那么就需要设置th的宽度，并给table添加table-layer:fixted;

五：文字省略和英文字超长换行（word-break:break-all;）

.w-80-percent{

width:80%;

}

.ellipsis{

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}

</style>

注意：看情况，有时a标签可能要加display:block;

可连接内容：<a class="ellipsis w-80-percent" title>XXXX</a>

非连接内容：<div class="ellipsis" title="XXX">XXXX</div>

六：如果是做选项卡的话，需要控制选项卡的个数，如果超过这个个数就隐藏，然后出现三角形点击下一页

七：nodejs(压缩工具)

pdm项目里面有tool文件夹，里面有个pdf介绍的

(1)必须先安装完nodejs—>先运行install.bat—>完了就运行build.bat—>以后你要改pdm的js，就先运行那个build.bat，它会自动监控你修改的文件，只要修改保存就会自动生成那个desktop.min.js文件的

八：class="DeepBlue selected" 如果想只获取第一个class名称，操作如下：

    var themeName = $.trim($(".setTheme").find("a.selected").attr("class"));
    var getThemeNam = themeName.split(' ');
    var getName=getThemeNam[0];

师父范例：

    var themeName = $.trim($(".setTheme").find("a.selected").attr("class"));
    var getThemeNam = themeName.split(' ');
    setFirstUserTheme(getThemeNam[0]);

九：class="menu-top-nextPage menu-top-nextPage_green" 这里没错添加的时候，只改变第二个class的名称，怎么处理呢？

        var addPrePage = $.trim($(".menu-top-prePage").attr("class"));//获取到两个class
        var arryPrePage = addPrePage.split(' ');//以空格为准，用split()方法把他们搞成数组形式
        var newPrePageStr = arryPrePage.pop();//用pop()方法，删除并返回数组的最后一个元素.
        $(".menu-top-prePage").removeClass(newPrePageStr).addClass("menu-top-prePage_green");//移除最后一个class，然后添加新class

十：缩小页面宽度时，如果页面的内容很多的话，内容会掉下来，此时可以用min-width和在body中设置overflow-x:scroll(可设可不设);如果页面内容很少，版权条往上移了，那么就可以设置min-height

body{min-height: 500px; min-width: 1280px;overflow-x:scroll; }

十一：如果firebug提示，$ no define（未定义），那么就说明页面没有引用jq库

解释：弹出这个错误就是有地方用到那个对象，但是那个对象不存在，不存在就要考虑是不是没有引用什么文件，$这个是jq对象，你会认为页面不会用到JQUERY吗

十二：在页面上动态获取当前年，如2014-2015

aspx页面：

<%=DateTime.Parse(DateTime.Now.ToString("yyyy-01-01")).AddYears(-1).ToString("yyyy")%> - <%=DateTime.Now.ToString("yyyy") %>

html页面：

十三：如果制作手机端的网页

（1）图片自适应：max-width：100%;

（2）布局用百分比，如果是列表形式（左边图片，右边文字，那么图片和文字设置的宽度也是百分比，这个百分比是获取父元素的多少px，然后用图片占用多少px/父元素px而得到的百分比）

十四：在页面中有背景图，要在背景图上加两个div，这两个div的位置要与背景图的某个位置一致，当页面缩小时，那两个div的位置会移动

十五：如果有ul li的话，要习惯要清除浮动

十六：编写文档工具

markdown

马克飞象

http://mahua.jser.me/

https://michelf.ca/projects/php-markdown/extra/

十七：在火狐下，下拉菜单飞到右边去的问题

<table>

　　<tr>

　　　　<td>第一个文字

</td>

　　</tr>

</table>

解决方法：给ul外面加个div，然后用相对定位

<table>

　　<tr>

　　　　<td>第一个文字

　　　　</div>

</td>

　　</tr>

</table>

在火狐下，鼠标移到td时，表格会抖动，因为img设置了position：relative，占了一个位置，宽度变大了，所以鼠标以上和离开会动一下，解决方法，给img加个绝对定位，但是这样的话，图标会在文字上面，不好看，因为鼠标点击td的时候，会出现下列菜单，所以给<style>.pro_relative{position:relative; padding-left：10px;}</style>就好了。

十八：火狐的hack

@-moz-document url-prefix() {
    .train-down-wrap .foot {
        padding-bottom: 76px;
    }
}

posted @ 2015-07-01 10:57 MoenyChen 阅读(148) 评论(0) 收藏举报

MoenyChen

2、html—工作遇到的问题集合

公告