在前端开发的过程中,总是遇到这种情况,有时候写了一些样式,在用浏览器做测试的时候,样式就是死活不出来。在我手速8000的条件下时断时续的出来样式,百度了好久也没有什么具体的答复。
个人猜想:应该适合浏览器的缓存有关,或者和js代码引入得到位置有关,我一般是在<head>标签内引入的,还有一些则写在<body>底部,然而就是这样,我写的样式时断时续的出现。(苦恼。。。)
就在前几天逛贴吧的时候看到一条评论,说在公司上班的时候,写外部js调入的代码写在</body>前面。开始没怎么注意,现在遇到这样的情况,死活不出来的那种,试了一下果然有用。
自定义js文件调入位置:
<body>
<script src="自定义的js文件"></script>
</body>
下面是我样式无论怎样刷新样式都能出来的例子:
<!doctype html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>作业管理主页</title>
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" href="/css/font.css" th:href="@{/css/font.css}">
<link rel="stylesheet" href="/css/xadmin.css" th:href="@{/css/xadmin.css}">
<link rel="stylesheet" href="/lib/layui/css/layui.css" th:href="@{/lib/layui/css/layui.css}">
<!-- <link rel="stylesheet" href="./css/theme5.css"> -->
<!-- 让IE8/9支持媒体查询,从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script>
// 是否开启刷新记忆tab功能
// var is_remember = false;
</script>
</head>
<body class="index">
<!-- 顶部开始 -->
<div class="container">
<div class="logo">
<a href="./index.html">作业管理系统</a></div>
<div class="left_open">
<a><i title="展开左侧栏" class="layui-icon"></i> </a>
</div>
<ul class="layui-nav left fast-add" lay-filter="">
<li class="layui-nav-item">
<a href="javascript:;">+新增</a>
<dl class="layui-nav-child">
<!-- 二级菜单 -->
<dd>
<a onclick="xadmin.open('最大化','http://www.baidu.com','','',true)">
<i class="layui-icon"></i>弹出最大化</a></dd>
<dd>
<a onclick="xadmin.open('弹出自动宽高','http://www.baidu.com')">
<i class="layui-icon"></i>弹出自动宽高</a></dd>
<dd>
<a onclick="xadmin.open('弹出指定宽高','http://www.baidu.com',500,300)">
<i class="layui-icon"></i>弹出指定宽高</a></dd>
<dd>
<a onclick="xadmin.add_tab('在tab打开','member-list.html')">
<i class="layui-icon"></i>在tab打开</a></dd>
<dd>
<a onclick="xadmin.add_tab('在tab打开刷新','member-del.html',true)">
<i class="layui-icon"></i>在tab打开刷新</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav right" lay-filter="">
<li class="layui-nav-item">
<a href="javascript:;" id="judge"><i class="layui-icon" style="font-size:20px;"></i>消息</a>
<dl class="layui-nav-child" id="messageBox">
<!--<!– 二级菜单 –>-->
<!--<dd>-->
<!--<a onclick="xadmin.open('个人信息','http://www.baidu.com')">个人信息</a></dd>-->
<!--<dd>-->
<!--<a onclick="xadmin.open('切换帐号','http://www.baidu.com')">切换帐号</a></dd>-->
<!--<dd>-->
<!--<a href="./login.html">退出</a></dd>-->
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;" th:text="${session.user.name}"></a>
<dl class="layui-nav-child">
<!-- 二级菜单 -->
<dd>
<a onclick="xadmin.open('个人信息','http://www.baidu.com')">个人信息</a></dd>
<dd>
<a onclick="xadmin.open('切换帐号','http://www.baidu.com')">切换帐号</a></dd>
<dd>
<a href="./login.html">退出</a></dd>
</dl>
</li>
<li class="layui-nav-item to-index">
<a href="javascript:void(0);">回到主页</a></li>
</ul>
</div>
<!-- 顶部结束 -->
<!-- 中部开始 -->
<!-- 左侧菜单开始 -->
<div class="left-nav">
<div id="side-nav">
<ul id="nav">
<li>
<a href="javascript:;">
<i class="layui-icon left-nav-li" lay-tips="作业管理"></i>
<cite>作业管理</cite>
<i class="layui-icon "></i></a>
<ul class="sub-menu">
<li>
<a onclick="xadmin.add_tab('发布作业','publishomework')">
<i class="layui-icon"></i>
<cite>发布作业</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('修改作业','edithomeworkwork')">
<i class="layui-icon"></i>
<cite>修改作业</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('批改作业','checkhomeworkwork',true)">
<i class="layui-icon"></i>
<cite>批改作业</cite></a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="layui-icon left-nav-li" lay-tips="教师通知管理模块"></i>
<cite>教师通知管理模块</cite>
<i class="layui-icon "></i></a>
<ul class="sub-menu">
<li>
<a onclick="xadmin.add_tab('发布通知','order-list.html')">
<i class="layui-icon"></i>
<cite>发布通知</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('查看通知','order-list1.html')">
<i class="layui-icon"></i>
<cite>查看通知</cite></a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="layui-icon left-nav-li" lay-tips="学生通知管理模块"></i>
<cite>学生通知管理模块</cite>
<i class="layui-icon "></i></a>
<ul class="sub-menu">
<li>
<a onclick="xadmin.add_tab('查看消息','studentReceiveMessages')">
<i class="layui-icon"></i>
<cite>查看消息</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('查看作业','StudentReceiveHomeworks')">
<i class="layui-icon"></i>
<cite>查看作业</cite></a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- <div class="x-slide_left"></div> -->
<!-- 左侧菜单结束 -->
<!-- 右侧主体开始 -->
<div class="page-content">
<div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false">
<ul class="layui-tab-title">
<li class="home">
<i class="layui-icon"></i>我的桌面</li></ul>
<div class="layui-unselect layui-form-select layui-form-selected" id="tab_right">
<dl>
<dd data-type="this">关闭当前</dd>
<dd data-type="other">关闭其它</dd>
<dd data-type="all">关闭全部</dd></dl>
</div>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<iframe src='/welcome' frameborder="0" scrolling="yes" class="x-iframe"></iframe>
<!--<iframe th:src='@{/welcome.html}' frameborder="0" scrolling="yes" class="x-iframe"></iframe>-->
</div>
</div>
<div id="tab_show"></div>
</div>
</div>
<div class="page-content-bg"></div>
<style id="theme_style"></style>
<script src="/my_js/mywebscoket.js"></script>
<script src="/lib/layui/layui.js" charset="utf-8" th:src="@{/lib/layui/layui.js}"></script>
<script type="text/javascript" src="/js/xadmin.js" th:src="@{/js/xadmin.js}"></script>
<script th:src="@{/webjars/jquery/jquery.min.js}" type="text/javascript"></script>
<script th:src="@{/webjars/sockjs-client/sockjs.min.js}" type="text/javascript"></script>
<script th:src="@{/webjars/jquery/jquery.min.js}" type="text/javascript"></script>
<script th:src="@{/webjars/stomp-websocket/stomp.min.js}" type="text/javascript"></script>
<script>
window.onload=function () {
/*
*
* 进行用户角色的判断
*
* */
// 注意:导航 依赖 element 模块,否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
});
var state='[[${session.user.photo}]]'; // --获取session中的值
var id='[[${session.user.id}]]';
if (state.length>3)// 学生连接
{
studentconnect(id);
}
else {// 教师连接
teacherconnect(id);
}
}
/*
*
*
* 自定义定时器 为存在消息的图标添加样式
*
*
* */
layui.use(['layer','jquery'],function(){
var $ = layui.$;
function check(){
if ($("#messageBox").children().length>0)
{
// 有新消息
var info='<i class="layui-icon" style="font-size:25px;color:red;"></i><font style="color:red;">'+$("#messageBox").children().length+'</font>新消息';
$("#judge").html(info);
}
else{
// 无新消息
var info='<i class="layui-icon" style="font-size:20px;"></i>消息';
$("#judge").html(info);
// console.log("replypoint无消息");
}
}
window.setInterval(check, 1000);
});
</script>
</body>
</html>