前端页面标准
Posted 另一种感觉
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端页面标准相关的知识，希望对你有一定的参考价值。
初使化标签定义
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}
del,ins{text-decoration:none;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:‘‘;}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;}
legend{color:#000;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
input,button,textarea,select{*font-size:100%;}
body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
select,input,button,textarea,button{font:99% arial,helvetica,clean,sans-serif;}
table{font-size:inherit;font:100%;}
pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
常用的CSS命名规则
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
未知大小的图片在已知容器内水平垂直居中显示
#imgList{width: 650px;margin: 0 auto;}
.box{height:200px;width:200px;border: solid 1px #666;text-align:center; line-height:200px;font-size:12px;float: left;margin-right: 10px; overflow: hidden;}
* html .box{font-size: 180px}
*>html body .box{font-size: 180px;}
*>html body .box img{margin: -35px 0 0;}
img{vertical-align:middle;}-->
</style>
刷新页面，广告随机变化
<style> .hidden{display:none;}</style>
<script type="text/javascript">
window.onload = function(){var i=Math.floor(Math.random()*5)+1;
document.getElementById("g0"+i).className = ‘‘;}
</script>
<div class="hidden" id="g01"> 000</div>
<div class="hidden" id="g02">111</div>
<div class="hidden" id="g03"> 222</div>
<div class="hidden" id="g04">333</div>
鼠标滑动时触及背景颜色
<style>
.on-over{ background:#ccc;}
.on-out{ background:#fff;}
</style>
<ul>
<li onMouseOver=‘this.className=‘on-over‘‘ onMouseOut=‘this.className=‘on-out‘‘>
<img src=‘/newhome/2.gif‘ />
</li>
</ul>
表单输入效果
<style>
.input_Gray{border:1px solid #C0C1C6;height:18px;color:#999;width:100px;}
.input_Blue{border:1px solid #598EB9;height:18px;color:#000;width:100px;}
</style>
</head>
<body id="ajaxpool">
<input id="testInput" class="inputgray" type="text" value="" name="" />
</div>
<script>
~function(){
var input = document. getElementById_r("testInput");
input.value = ‘请输入内容‘;
input.className = "inputgray";
input.onfocus = function(i){
input.value = "";
input.className = "inputblue";
};
input.onblur = function(i){
if(!input.value.length){
input.value = ‘请输入内容‘;
input.className = "inputgray";
}
};
}();
</script>
用div做表格
<style>
.table{border-top:1px solid #ccc;border-left:1px solid #ccc; width:400px;margin:0px; padding:0px;}
.table li div{border-right:1px solid #ccc; border-bottom:1px solid #ccc; float:left; width:99px; height:30px; padding-top:10px;}
#wholebody{ font-size:12px; color:#000; font-family:"Arial","新宋体"; margin:0px; text-align:center; }
ul{list-style:none;float:left;list-style-type:margin:0px;padding:0px;*margin:0px; padding:0px;}
</style>
<body id="wholebody">
<ul class="table">
<li style="float:left"><div>dfdf</div><div>dfdf</div><div>dfdf</div><div>dfdf</div></li>
<li style="float:left"><div>dfdf</div><div>dfdf</div><div>dfdf</div><div>dfdf</div></li>
<li style="float:left"><div>dfdf</div><div>dfdf</div><div>dfdf</div><div>dfdf</div></li>
<li style="float:left"><div>dfdf</div><div>dfdf</div><div>dfdf</div><div>dfdf</div></li>
</ul>
</body>
弹出层随鼠标移动或是固定位置
<ul id="listUlId">
<li>
<a href="#"><img src="images/icon-listImg.gif" /></a>
<p><a href="#">AK特暴宝袄</a></p>
<p>主演:<span>范冰冰,王宝强</span></p>
//这里是放弹出层里的内容的
<div class="hidden-info">
<p>
内容：55 56 57 58
</p>
</div>
</li>
</ul>
这个是弹出层的代码:
<div class="windowBg" style="display:none" id="windowOpen">
<div class="cont">fdsaf</div><em></em>
</div>
下面这个是YUI-JS：
<script type="text/javascript">
loader.require([‘dom‘, ‘event‘]);
loader.onSuccess = function(){
var _D = YAHOO.util.Dom;
var _E = YAHOO.util.Event;
//获取取ul里的img
var IMG = _D. get_r(‘listUlId‘). getElementsByTagName_r(‘img‘);
//获取弹出层的ID
var windowOpen=_D. get_r(‘windowOpen‘);
//获取li里div的内容和坐标
var hndMove = function(e){
var oInfo = _D. getElementsByClassName_r(‘hidden-info‘, ‘div‘, this.parentNode.parentNode)[0];//找到li里的div
//用li里div里的内容替代弹出层里的内容
_D. getElementsByClassName_r(‘cont‘, ‘div‘, windowOpen)[0].innerHTML = oInfo.innerHTML;
//当鼠标触发时弹出层显示出来
windowOpen.style.display = ‘‘;
var xy = _E. getXY_r(e);//取鼠标的坐标
//var xy = _D. getXY_r(this); 如果不随鼠标移动在固定的位置，那就取图片的坐标
windowOpen.style.top = xy[1]-80 + ‘px‘;
windowOpen.style.left = xy[0]-10 + ‘px‘;
};
//当鼠标移走时弹出层消失
var hndOut = function(e){
windowOpen.style.display = ‘none‘;
};
//执行函数
_E.addListener(IMG, ‘mouseover‘, hndMove);//当鼠标停在IMG上时所执行的样式为hndMove
_E.addListener(IMG, ‘mousemove‘, hndMove);//如果不需要弹出层随鼠标移动就把这个去掉
_E.addListener(IMG, ‘mouseout‘,hndOut);//当鼠标停在IMG上时所执行的样式为hndOut
};
loader.insert();
</script>
点击“全部”内容展示或缩回。
<p class="allinfo">剧情：次郎是个寂莫的大学生（小出会儿），到了生日也没人为他祝福。他自己跑到百货商场给自己买20岁生日礼物次 郎是个寂莫的大学生（小出会儿），到了生日也没人为他祝福。他自己跑到百货商场给自己买20岁生日礼物次郎是个寂莫的大学生（小出会儿），到了生日也没人 为他祝福。他自己跑到百货商场给
<span id="opencloseInfo" class="closeinfo"> // 给最外面的span加一个ID
<span class="sp1">...</span>
<span class="sp2">后半部份：次郎是个寂莫的大学生（小出会儿），到了生日也没人为他祝福。他自己跑到百货商场给自己买20岁 生日礼物次郎是个寂莫的大学生（小出会儿），到了生日也没人为他祝福。他自己跑到百货商场给自己买20岁生日礼物次郎是个寂莫的大学生（小出会儿），到了 生日也没人为他祝福。他自己跑到百货商场给
</span>
</span>
<a id="showallBtn" href="#">展开全部</a> //给展开全部加一个ID
<a id="shownoneBtn" href="#" style="display:none">缩回</a> //给缩回加一个ID
</p>
这是我的代码结构，外面用一个p ,需要显示与隐藏的部份包含在“<span id="opencloseInfo" class="closeinfo">”里 用样式 closeinfo 与openinfo来控制！看下样式结构
p span.closeinfo{}
p span.closeinfo .sp1{display:inline;}
p span.closeinfo .sp2{display:none;}
p span.openinfo{}
p span.openinfo .sp1{display:none;}
p span.openinfo .sp2{display:inline;}
这样只要用JS来控制 closeinfo 与openinfo 就可以了！ sp1 里是用来放那个省略点的 sp2 是用来放需要隐藏与显示的内容的~
JS代码如下：
<script type="text/javascript">
loader.require([‘dom‘, ‘event‘]);
loader.onSuccess = function(){
var _D = YAHOO.util.Dom;
var _E = YAHOO.util.Event;
var showallbtn = _D. get_r(‘showallBtn‘); //找到显示的ID
var shownonebtn = _D. get_r(‘shownoneBtn‘); //找到缩回的ID
var showinfo = function(e){
var showbox = _D. get_r(‘opencloseInfo‘); //找到最外面的span，然后设一个变量
_D.addClass(showbox,‘openinfo‘); //给最外面的样span加一个样式 ‘openinfo‘
_D.removeClass(showbox,‘closeinfo‘); //移除原有的样式 ‘closeinfo‘
showallbtn.style.display = ‘none‘; // 显示全部的文字链隐藏
shownonebtn.style.display = ‘inline‘; // 缩回的文字链显示
}
var closeinfo = function(e){
var showbox = _D. get_r(‘opencloseInfo‘);
_D.addClass(showbox,‘closeinfo‘);
_D.removeClass(showbox,‘openinfo‘);
showallbtn.style.display = ‘inline‘;
shownonebtn.style.display = ‘none‘;
}
_E.addListener(showallbtn,‘click‘,showinfo); 当点击 显示全部时则执行 showinfo里的功能
_E.addListener(shownonebtn,‘click‘,closeinfo); 当点击缩回时，则执行 closeinfo 里的功能
}
loader.insert();
</script>
鼠标滑过，显示
代码如下:简写下
<ul class="rangelist" id="hotlist">
<li class="r1 alllsitli">
<a class="alllsita" href="http://taobao.joy.cn/play.html?vid=11340">非诚勿扰<em class="emlist hidden">9.4</em></a>
<div class="ranginfo clearfix">
<div class="fl">
<a target="_blank" href="http://taobao.joy.cn/play.html?vid=11340">
<img src="http://img05.taobaocdn.com/video/i5/T1kk4nXnRAXXb1upjX"/>
</a>
</div>
<div class="fr">
<p>
<span>评分：</span>
<em>8.6</em>
</p>
<p>
<span>类型：</span>
爱情 喜剧
</p>
<p>
<span>主演：</span>
葛优 舒淇
</p>
</div>
</div>
</li>
<li class="r2 alllsitli">
<a class="alllsita" target="_blank" href="http://taobao.joy.cn/play.html?vid=11293">我的机器人女友<em class="emlist">9.4</em></a>
<div class="ranginfo clearfix hidden">
<div class="fl">
<a target="_blank" href="http://taobao.joy.cn/play.html?vid=11340">
<img src="http://img05.taobaocdn.com/video/i5/T1kk4nXnRAXXb1upjX"/>
</a>
</div>
<div class="fr">
<p>
<span>评分：</span>
<em>8.6</em>
</p>
<p>
<span>类型：</span>
爱情 喜剧
</p>
<p>
<span>主演：</span>
葛优 舒淇
</p>
</div>
</div>
</li>
<ul>
这里我只写了两个li,大家可以注意下这个li里的div我标色的，由于默认的第一个是展开的状态，所以我标色的第一个div 没有加样式"hidden"这个样式是.hidden{display:none;}把我标色的div里的内容隐藏~
这样移到li列表上div就显示出来！这样JS也好写！大家注意一下，列表右侧有个em评分，当鼠标移上去时评分隐藏，移走时评份再显示!
样式:
.tvhotplay ul{}
.tvhotplay ul.rangelist{}
.tvhotplay ul.rangelist li{background:url(http://img01.taobaocdn.com/tps/i1/T1Tk8qXapsXXXXXXXX-13-250.gif) no-repeat 0 0;line-height:21px;}
.tvhotplay ul.rangelist li.r1{background-position:0 5px;}
.tvhotplay ul.rangelist li.r2{background-position:0 -19px;}
.tvhotplay ul.rangelist li.r3{background-position:0 -43px;}
.tvhotplay ul.rangelist li.r4{background-position:0 -71px;}
.tvhotplay ul.rangelist li.r5{background-position:0 -98px;}
.tvhotplay ul.rangelist li.r6{background-position:0 -127px;}
.tvhotplay ul.rangelist li.r7{background-position:0 -157px;}
.tvhotplay ul.rangelist li.r8{background-position:0 -185px;}
.tvhotplay ul.rangelist li.r9{background-position:0 -209px;}
.tvhotplay ul.rangelist li.r10{background-position:0 -234px;}
.tvhotplay ul.rangelist li .alllsita{margin-left:20px;position:relative;display:block;height:21px;}
.tvhotplay ul.rangelist li .alllsita .emlist{position:absolute;right:5px;top:0px;}
.tvhotplay ul.rangelist li .alllsita .out{display:none;}
.tvhotplay ul.rangelist li .alllsita:hover{text-decoration:none;}
.tvhotplay ul .ranginfo{background:none repeat 0 0;height:85px;overflow:hidden;}
.tvhotplay ul .ranginfo .fl{width:70px;float:left;}
.tvhotplay ul .ranginfo .fl a{display:block;}
.tvhotplay ul .ranginfo .fl img{border:1px solid #d4d4d4;height:80px;width:60px;}
.tvhotplay ul .ranginfo p{color:#404040;line-height:18px;}
.tvhotplay ul .ranginfo span{color:#666;}
.tvhotplay ul em{color:#f06022;font-weight:800;}
以下是JS代码
<script type="text/javascript">
(function() {
var _D = YAHOO.util.Dom;
var _E = YAHOO.util.Event;
var listli = _D. get_r(‘hotlist‘). getElementsByTagName_r(‘li‘);
var showem = function(){
var emlist =_D. getElementsByClassName_r(‘emlist‘, ‘em‘, this)[0];
_D.removeClass(emlist,‘hidden‘);
var showdiv = _D. getElementsByClassName_r(‘ranginfo‘, ‘div‘, this)[0];
_D.addClass(showdiv, ‘hidden‘);
}
var listdiv = function() {
var showdiv = _D. getElementsByClassName_r(‘ranginfo‘, ‘div‘, this)[0];
var em =_D. getElementsByClassName_r(‘emlist‘, ‘em‘, this)[0];
var lists = _D. getElementsByClassName_r(‘ranginfo‘, ‘div‘, _D. get_r(‘hotlist‘));
var emlist =_D. getElementsByClassName_r(‘emlist‘, ‘em‘, _D. get_r(‘hotlist‘));
for (var i = 0; i < lists.length; i++) {
_D.addClass(lists[i], ‘hidden‘);
}
for (var i = 0; i < emlist.length; i++) {
_D.removeClass(emlist[i], ‘hidden‘);
}
_D.removeClass(showdiv, ‘hidden‘);
_D.addClass(em,‘hidden‘);
};
_E.addListener(listli, ‘mouseover‘, listdiv);
})();
</script>
幻灯效果
首先分析下代码结构，灰色的png半透明背景是不会变的~小黄色按妞也不会变！按妞和文字都不会有动画的渐变效果，就只有图片之间切换时有动画效果！
所以我的代码结构是，一个大的容器，里面的一个ul里放的是图片，然后把半透明的灰色背景定位到图片上方！然后用一个ul里面放相应的图片文字信息和按 妞，然后下方的小圆点也position定位到相对应的位置
以下是代码
<!--幻灯-->
<div class="tvd-mainblock slideshow">
<ul id="movieimginfolist" class="imginfo">
<li>
<img src="i/titu.jpg"/>
</li>
<li>
<img src="http://cache.tv.qq.com/images/wuyechuzuche959110614.jpg"/>
</li>
<li>
<img src="http://cache.tv.qq.com/images/shengsixian959092328.jpg"/>
</li>
<li>
<img src="http://cache.tv.qq.com/images/zongyi-959180209.jpg"/>
</li>
<li>
<img src="http://cache.tv.qq.com/images/daikelaoshi-959153018.jpg"/>
</li>
</ul>
<div class="divpng"></div>
<ul id="movietextinfolist" class="textinfo">
<li>
<h1>美国科幻大片《暮光城市》1111</h1>
<h2>让未来到来，让过去过去，做到淡何容易，有一天老去，有一天离去，以僻还是在心底，我可以决口不提，所有和你的曾 经，111...</h2>
<p><a class="btn" href="#" target="_blank"></a></p>
</li>
<li>
<h1>美国科幻大片《暮光城市》2222</h1>
<h2>让未来到来，让过去过去，做到淡何容易，有一天老去，有一天离去，以僻还是在心底，我可以决口不提，所有和你的曾 经，222...</h2>
<p><a class="btn" href="#" target="_blank"></a></p>
</li>
<li>
<h1>美国科幻大片《暮光城市》3333</h1>
<h2>让未来到来，让过去过去，做到淡何容易，有一天老去，有一天离去，以僻还是在心底，我可以决口不提，所有和你的曾 经，333...</h2>
<p><a class="btn" href="#" target="_blank"></a></p>
</li>
<li>
<h1>美国科幻大片《暮光城市》4444</h1>
<h2>让未来到来，让过去过去，做到淡何容易，有一天老去，有一天离去，以僻还是在心底，我可以决口不提，所有和你的曾 经，444...</h2>
<p><a class="btn" href="#" target="_blank"></a></p>
</li>
<li>
<h1>美国科幻大片《暮光城市》5555</h1>
<h2>让未来到来，让过去过去，做到淡何容易，有一天老去，有一天离去，以僻还是在心底，我可以决口不提，所有和你的曾 经，555...</h2>
<p><a class="btn" href="#" target="_blank"></a></p>
</li>
</ul>
<div id="movielistpoint" class="listpoint">
<a class="on" href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<div id="moviealphaCover"></div>
</div>
<!--end-->
样式
.slideshow{height:270px;position:relative;width:750px;overflow:hidden;}
.slideshow ul.imginfo li{width:750px;height:270px;}
.slideshow ul.imginfo li img{width:750px;height:270px;}
.slideshow .divpng{width:213px;background:url(http://img04.taobaocdn.com/tps/i4/T1mvRsXotxXXXXXXXX-222-23.png);_background: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="http://img04.taobaocdn.com/tps/i4/T1mvRsXotxXXXXXXXX-222-23.png");overflow:hidden;height:230px;position:absolute;left:454px;top:0;padding:0 10px;padding-top:40px;}
.slideshow ul.textinfo{position:absolute;left:454px;top:0;padding:0 10px;padding-top:40px;width:213px;height:230px;}
.slideshow ul.textinfo li{height:250px;}
.slideshow ul.textinfo li .btn{width:100px;height:33px;background:url(http://img03.taobaocdn.com/tps/i3/T1jgJsXbhdXXXXXXXX-800-500.gif) no-repeat -534px 0;margin-top:22px;border:none;cursor:pointer;display:block;}
.slideshow ul.textinfo li h1{font-size:16px;font-weight:bold;color:#ef6c00;}
.slideshow ul.textinfo li h2{margin-top:15px; color:#b6b7bb;}
.slideshow .listpoint{position:absolute;left:604px;top:242px;width:70px;height:7px;font-size:0px;}
.slideshow .listpoint a{width:7px;height:7px;float:left; background:url(http://img03.taobaocdn.com/tps/i3/T1jgJsXbhdXXXXXXXX-800-500.gif) no-repeat -674px -13px;margin-right:7px;float:left;}
.slideshow .listpoint a:hover{background-position:-660px -13px;}
.slideshow .listpoint a.on{background-position:-660px -13px;}
.textinfo, .listpoint{z-index:10;}
JS 代码
(function() {
//from jstween
function easeNone(t, b, c, d) {
return c * t / d + b;
}
//滤镜渐变
function alphaFilter() {
var obj = document. getElementById_r(‘moviealphaCover‘);
var isFilter = false;
if (window.navigator.userAgent.indexOf("MSIE") != -1)
isFilter = true;
var during = 500;
var frame = 10;
var distant = parseInt(during / frame);
obj.style.display = ‘block‘;
if (isFilter)
obj.style.filter = "alpha(opacity=100)";
else
obj.style.opacity = 1;
for (var i = 1; i <= frame; i++) {
(function() {
var j = i;
setTimeout(function() {
if (isFilter)
obj.style.filter = "alpha(opacity=" + easeNone(j * distant, 100, -100, during) + ")";
else
obj.style.opacity = easeNone(j * distant, 1, -1, during);
if (j == frame)
obj.style.display = "none";
}, j * distant);
})();
}
}
//切换图片
function switchImage(list, index) {
//隐藏所有图层
for (var i = 0; i < list.length; i++) {
list[i].style.display = ‘none‘;
}
//显示指定图层
var img = list[index];
alphaFilter();
img.style.display = ‘‘;
}
//点高亮
function switchPoint(list, index) {
//还原所有点
for (var i = 0; i < list.length; i++) {
list[i].className = ‘‘;
}
//高亮指定点
var point = list[index];
point.className = ‘on‘;
}
//切换图片文字信息
function switchText(list, index) {
//隐藏所有文字
for (i = 0; i < list.length; i++) {
list[i].style.display = ‘none‘;
}
//显示指定文字
var showtext = list[index];
showtext.style.display = ‘‘;
}
//装载动画程序
function startCartoon() {
var imageContainer = document. getElementById_r("movieimginfolist");
var pointContainer = document. getElementById_r("movielistpoint");
var textContainer = document. getElementById_r("movietextinfolist");
var imageList = imageContainer. getElementsByTagName_r("li");
var pointList = pointContainer. getElementsByTagName_r("a");
var textList = textContainer. getElementsByTagName_r(‘li‘)
var index = 1;
var lastIndex = 0;
function switchAction() {
if (lastIndex == index)
return;
lastIndex = index;
switchImage(imageList, index);
switchPoint(pointList, index);
switchText(textList, index);
index = index + 1;
if (index >= 5)
index = 0;
}
function startTimer() {
return setInterval(switchAction, 5000);
}
function stopTimer() {
clearInterval(timer);
}
for (var i = 0; i < pointList.length; i++) {
(function() {
var j = i;
pointList[j].onclick = function() {
stopTimer();
index = j;
switchAction();
timer = startTimer();
this.blur();
};
})();
}
var timer = startTimer();
}
//test
startCartoon（）
})();
鼠标触击背景效果
<style>
.on-over{ background:#ccc;}
.on-out{ background:#fff;}
</style>
<ul>
<li onMouseOver="this.className=‘on-over‘" onMouseOut="this.className=‘on-out‘">
<img src="/newhome/2.gif" />
</li>
</ul>
onMouseOver:触击时
onMouseOut：离开时
几种固定搭配
蓝白橙——蓝为主调。白底，蓝标题栏，橙色按钮或ICON做点缀。
绿白兰——绿为主调。白底，绿标题栏，兰色或橙色按钮或ICON做点缀。
橙白红——橙为主调。白底，橙标题栏，暗红或桔红色按钮或ICON做点缀。
暗红黑——暗红主调。黑或灰底，暗红标题栏，文字内容背景为浅灰色。
以上是关于前端页面标准的主要内容，如果未能解决你的问题，请参考以下文章