1、Css的命名规则和Html标签使用规则
1 Css命名规则
1.1 样式文件命名规则
主要的 master.css
布局，版面 layout.css
模块 module.css
主题 themes.css
基本共用 base.css
表单 forms.css
专栏 columns.css
文字 font.css
打印样式 print.css
补丁 mend.css
1.2 样式命名规则
1.2.1 框架
外 套： wrap
主导航： mainnav
子导航： subnav
页 脚： footet
整个页面： content
页 眉： heade
2、r
页 脚： footer
商 标： label
标 题： title
主导航： mainbav
顶导航： topnav
边导航： sidebar
左导航： leftsidebar
右导航： rightsidebar
旗 志： logo
标 语： banner
菜单内容1： menu1 content
菜单容量： menu container
子菜单： submenu
边导航图标：sidebarIcon
注释： note
面包屑： breadcrumb(即页面所处位置导航提示）
容器： container
内容： cont
3、ent
搜索： search
登陆： Login
功能区： shop(如购物车，收银台)
当前的 current
1.2.2 颜色
使用颜色的名称或者16进制代码,如
.red {color:red;}
.f60 {color:#f60;}
.ff8600 {color:#ff8600;}
1.2.3 字体大小
直接使用’font+字体大小’作为名称,如
.font12px {font-size:12px;}
.font9pt {font-size:9pt;}
1.2.4 对齐
使用对齐目标的英文名称,如
.left {float:left;}
4、right {float:right;}
1.2.5 命名方式
使用’类别+功能’的方式命名,如
.barnews {}
.barproduct {}
1.2.6 注意事项
1) 一律小写;
2) 尽量用英文;
3) 不加中杠和下划线;
4) 尽量不缩写，除非一看就明白的单词.
1.3 html标签使用规则
1.3.1 书写规范
1.3.1.1 页头定义
5、">
编码用utf-8
1.3.1.2 所有代码必须小写
和<TITLE>是不同标签
1.3.1.3 标签必须要有一个相应的结束标记
<p>sfdsfds</p>
<img />
1.3.1.4 元素属性值必须包含在双引号中
<p style=”属性值”></p>
1.3.1.5 标签注释
<--信息 Begin -->
内容区
<--信息 End -->
1.3.2 标签概述
一般我们使用的HTML元素包括：div, p, ul, table, span, in</p><p style='height:0px;padding:0;overflow:hidden'>6、put, select。
基本上div, table, ul, p都属于结构性比较强的元素，而span, input则是比较弱的元素，因此不允许有span嵌套div, table等的情况出现，span可以嵌套input, 可以嵌套span。
1.3.3 Seo特殊要求标签
1.3.3.1 标题标签
1) h1、h2、h3每个页面只能出现一次
2) h4、h5、h6单个页面可以多次使用
1.3.3.2 图片标签
一定要加alt属性，alt属性指定了当图片不能显示的时候就显示供替换文本，容最好与关键词相关，如：
<img src="images/logo.gif" alt="杭州房途网" />
</p>
</div>
</div>
<span id="LabelScript"></span>
<script src="https://m.zixin.com.cn/JS/bootstrap-collapse.js"></script>
<div class="siteInner_bg" style="margin-top: 40px; border: solid 0px red; margin-left: 0px; margin-right: 0px;">
<div>
<div style=" margin: auto; overflow:hidden;
text-align: center;">
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?6e2a21bc68316db308b5fdc9a0d11f2e";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</div>
<div style=" height:80px; margin: auto; overflow:hidden;
text-align: center;">
<a target="_blank"
href='https://m.zixin.com.cn/ADMiddle.aspx?t=92ULKnFRa/o='>
<img src="https://www.zixin.com.cn/FileUpload/Images/81dd1a0b-02e3-435a-aa37-fbfccae9a83d.gif" width="100%" height='80'
alt="移动网页_全站_页脚广告1" />
</a>
</div> </div>
<div class="siteInner">
<p style="white-space: normal; text-align: center;"><a href="https://www.zixin.com.cn/h-33.html" target="_blank" title="关于我们" textvalue="关于我们"><span style="text-align: center;">关于我们</span></a> <span style="text-align: center;"> </span><a href="https://www.zixin.com.cn/h-37.html" target="_blank" title="便捷服务" textvalue="便捷服务">便捷服务</a> <span style="text-align: center;"> </span><a href="https://ai.zixin.com.cn/" target="_blank" title="自信AI" textvalue="自信AI">自信AI</a> <span style="text-align: center;"> </span><a href="https://gpt.zixin.com.cn/" target="_blank" title="AI导航" textvalue="AI导航">AI导航</a> <a href="https://www.zixin.com.cn/info/266.html" target="_blank" title="抽奖活动" textvalue="抽奖活动">抽奖活动</a></p><p style="white-space: normal; text-align: center;"><span style="color: rgb(153, 153, 153); font-family: 微软雅黑, 宋体, Arial; font-size: 12px; text-align: center; background-color: rgb(248, 248, 248);"></span><span style="text-align: center;">©2010-2026 宁波自信网络信息技术有限公司 </span><span style="text-align: center;"> </span><span style="text-align: center;">版权所有</span></p><p style="white-space: normal; text-align: center;"><span style="text-align: center;"><span style="text-align: center;"><span style="text-align: center;"><span style="text-align: center;">客服电话：<span style="text-wrap: wrap;">0574-28810668</span> <span style="text-align: center;">投诉</span>电话：18658249818</span></span></span></span></p><p style="white-space: normal; text-align: center;"><span style="text-align: center;"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-6/9/6379033271755225397249870.png" title="gongan.png" alt="gongan.png"/></span><a href="http://www.beian.gov.cn/portal/index.do" target="_blank" textvalue="浙公网安备33021202000488号">浙公网安备33021202000488号</a> </p><p style="white-space: normal; text-align: center;"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-7/4/6379256265460890686562879.png" title="icp.png" alt="icp.png"/><a href="http://beian.miit.gov.cn/" target="_blank" textvalue="浙ICP备2021020529号-1">浙ICP备2021020529号-1</a> <span style="text-align: center;"> | </span> <a href="https://dxzhgl.miit.gov.cn/dxxzsp/xkz/xkzgl/resource/qiyesearch.jsp?num=%E5%AE%81%E6%B3%A2%E8%87%AA%E4%BF%A1%E7%BD%91%E7%BB%9C%E4%BF%A1%E6%81%AF%E6%8A%80%E6%9C%AF%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8&type=xuke" target="_blank" title="浙B2-20240490" textvalue="浙B2-20240490">浙B2-20240490</a><span style="text-align: center;"> </span></p><p style="white-space: normal; text-align: left;"><span style="text-align: center; font-family: 楷体, 楷体_GB2312, SimKai; font-size: 20px;">关注我们</span><span style="text-align: center;"> ：<a href="https://www.zixin.com.cn/news/113.html" target="_blank"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-7/9/6379298231429297878483475.png" title="微信公众号" alt="微信公众号"/></a></span><span style="text-align: center;"> <a href="https://www.zixin.com.cn/news/113.html" target="_blank"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-7/5/6379257739400583672497521.png" title="抖音" alt="抖音"/></a> <a href="https://weibo.com/zixinnetwork" target="_blank" style="color: rgb(217, 83, 79); text-align: center; white-space: normal;"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-7/5/6379257739400583672497523.png" title="微博" alt="微博"/></a> <a href="https://zixinnetwork.lofter.com/" target="_blank"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-7/5/6379257740834991205479163.png" title="LOFTER" alt="LOFTER"/></a> </span></p>
</div>
</div>
<div style="position: fixed; bottom: 100px; right: 15px; z-index: 100000000000000000;">
<a href="https://work.weixin.qq.com/kfid/kfcb5dffb1386b26424"><img src="https://www.zixin.com.cn/FileUpload/Images/c1022425-c464-4203-b6dc-db237b2252d5.gif" style="width:36px" alt="客服"/></a>
</div>
<div class="trnav clearfix" id="navcontent" style="display: none; background-color:#3a71b1; ">
<div class="trlogoside" id="navlogo" style="display: none;">
<a href="https://m.zixin.com.cn/" title="咨信网"><img src="https://www.zixin.com.cn/FileUpload/Images/c4280cd2-fe62-449e-aeca-027ef73439f5.png" alt="咨信网"></a>
<div class="trnavclose" id="navclose">
<span></span>
</div>
</div>
<div class="navcontainer">
<div class="row">
<ul class="nav navbar-nav trnavul headercontent" id="navigation" style="margin:20px 0 0px;">
<li><a target="_parent"href="https://m.zixin.com.cn/login.aspx">登录</a></li>
<li><a target="_parent"href="https://m.zixin.com.cn/">首页 </a></li>
<li><a target="_parent"href="https://m.zixin.com.cn/booklist-0.html">分类 </a></li>
<li><a target="_parent"href="https://m.zixin.com.cn/infos.html">学堂 </a></li>
<li><a target="_parent"href="https://m.zixin.com.cn/newslist.html">公告 </a></li>
<li><a target="_parent"href="https://m.zixin.com.cn/h-0.html">帮助中心 </a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
function stopPropagation(e) {
var ev = e || window.event;
if (ev.stopPropagation) {
ev.stopPropagation();
}
else if (window.event) {
window.event.cancelBubble = true;//兼容IE
}
}
$("#navmore").click(function (e) {
$("#navcontent").show();
$("#navlogo").show();
stopPropagation(e);
var navcontentwidth = $("#navcontent").width();
$('#navcontent').css({ 'right': '-' + navcontentwidth + 'px' });
$("#navcontent").show().animate({ "right": 0 }, 300);
});
$(document).bind('click', function () {
var navcontentwidth = $("#navcontent").width();
$("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); });
$("#navlogo").fadeOut(300);
});
$("#navcontent").click(function (e) {
stopPropagation(e);
});
$("#navclose").click(function (e) {
var navcontentwidth = $("#navcontent").width();
$("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); });
$("#navlogo").fadeOut(300);
});
</script>
<script>
function BaseShare(title, desc, imgUrl) {
var link = "https://m.zixin.com.cn/docdown/7182081.html";
if (wx) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx49d3b0cb6fb382c4', // 必填，公众号的唯一标识
timestamp: '1774794488', // 必填，生成签名的时间戳
nonceStr: '1728EFBDA81692282BA642AAFD57BE3A', // 必填，生成签名的随机串
signature: 'c6fb51690db93932d9e3b29f79ce20b150f7bd27',// 必填，签名，见附录1
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
//openTagList: ["wx-open-launch-weapp"]//H5打开小程序
});
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.hideMenuItems({// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand']
});
var shareData = {
title: title, // 分享标题
desc: desc,//这里请特别注意是要去除html
link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
};
wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
});
}
}
function BaseShare(title, desc, imgUrl, link) {
if (link=="")
link = "https://m.zixin.com.cn/docdown/7182081.html";
if (wx) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx49d3b0cb6fb382c4', // 必填，公众号的唯一标识
timestamp: '1774794488', // 必填，生成签名的时间戳
nonceStr: '1728EFBDA81692282BA642AAFD57BE3A', // 必填，生成签名的随机串
signature: 'c6fb51690db93932d9e3b29f79ce20b150f7bd27',// 必填，签名，见附录1
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
//openTagList: ["wx-open-launch-weapp"]//H5打开小程序
});
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.hideMenuItems({// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand']
});
var shareData = {
title: title, // 分享标题
desc: desc,//这里请特别注意是要去除html
link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
};
wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
});
}
}
</script>
<!--footer-->
<footer class="footer">
<a target="_parent" class="footer-item" href="https://m.zixin.com.cn/">
<img class="footer-item-img" src="/Master/img/tabbar/home.png" alt="首页" />
<div class="footer-item-txt ">首页</div>
</a>
<a target="_parent" class="footer-item" id="classify" href="https://m.zixin.com.cn/bookmap.html">
<img class="footer-item-img" src="/Master/img/tabbar/category.png" alt="分类" />
<div class="footer-item-txt ">分类</div>
</a>
<a target="_parent" class="footer-item" id="case" href="https://m.zixin.com.cn/zhuantilist-.html">
<img class="footer-item-img" src="/Master/img/tabbar/case.png" alt="专题" />
<div class="footer-item-txt ">专题</div>
</a>
<a target="_parent" class="footer-item" id="my" href="https://m.zixin.com.cn/UserDefault.aspx">
<img class="footer-item-img" src="/Master/img/tabbar/my.png" alt="我的" />
<div class="footer-item-txt ">我的</div>
</a>
</footer>
<script>
$(document).ready(function () {
var arr = $(".headercontent");
for (var i = 0; i < arr.length; i++) {
(function (index) {
var url = "https://m.zixin.com.cn/header.aspx";
$.get(url + "?tp=0&t=" + (new Date()).valueOf(), function (d) {
try {
arr.eq(index).empty().html(d);
} catch (e) { }
try {
arr.html(d);
} catch (e) { }
});
})(i);
}
});
</script>
<script src="https://m.zixin.com.cn/js/jquery.lazyload.js"></script>
<script charset="utf-8">
$("img.lazys").lazyload({
threshold: 200,
effect: "fadeIn"
});
</script>
</body>
</html>