前端页面标准

初使化标签定义

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做点缀。

暗红黑——暗红主调。黑或灰底，暗红标题栏，文字内容背景为浅灰色。

时间： 2024-10-11 01:43:14

前端页面标准的相关文章

web前端页面性能优化小结

转自blueidear:http://bbs.blueidea.com/thread-2936073-1-1.html PS:结合了精英的思想和自己的一些小小的总结~ 影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的. 除了后台需要在性能上做优化外,

servlet自动获取前端页面提交数据

servlet自动获取前端页面jsp提交数据 以下是本人在学习过程中,因前端页面提交参数过多,后台servlet封装实体类过于麻烦而写的一个工具类,应用于jsp/servlet数据提交后,基于MVC+MyBatis进行数据持久化的过程.这里只介绍页面到servlet(controller)提交数据封装对象的过程,MVC+MyBatis访问数据库不在这里介绍. 1.前端页面及代码 1)前端表单页面构建(用于测试简单构建的页面有点丑陋哦~) 2)前端jsp页面代码   这里使用了Ajax异步 get

前端页面有哪三层构成 兼容性

[HTML && CSS]1.Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? 首先我讲讲如何触发两种模式:        加入xml头部声明可以触发IE浏览器的Quirks mode,触发之后,浏览器解析方式就和IE5.5一样,拥有IE5.5一样的bug和其他问题,行为(Javascript)也是如此.          IE6的触发        在XHTML的DOCTYPE前加入XML声明  <?xml version="1.0"

web 前端页面性能优化总结

影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的. 除了后台需要在性能上做优化外,其实前端的页面更需要在性能优化上下功夫,只有这样才能给我们的用户带来更好的用户体验.不仅仅如此,如果前端优化 得好,他不仅可以为企业节约成本,他还能给用户带来更多的用户

前端页面优化

影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的.除了后台需要在性能上做优化外,其实前端的页面更需要在性能优化上下功夫,只有这样才能给我们的用户带来更好的用户体验.不仅仅如此,如果前端优化得好,他不仅可以为企业节约成本,他还能给用户带来更多的用户,因

前端技术-前端页面优化

前端页面优化 时间花哪里去了? 只有10%-20%的最终用户响应时间花在了下载html文档上,其余80%-90%时间花在了下载页面的相关组件上.如:图片.Flash等. 所以主要优化: 减少http请求缓存减少文件大小:压缩文件+优化代码 健康的优化因该是根据页面的加载过程,全面的优化过程 第一步.浏览器预处理 查询Cache:读取Cache 或者发送304请求 第二步.查询DNS 优化规则--减少DNS查找 DNS缓存浏览器DNS缓存 计算机DNS缓存 服务器DNS缓存(TTL) 使用Keep

基于jQuery.i18n.propertieschajian实现前端页面国际化

一.简介 在介绍 jQuery.i18n.properties 之前,我们先来看一下什么是国际化.国际化英文单词为:Internationalization,又称 i18n,"i"为单词的第一个字母,"18"为"i"和"n"之间单词的个数,而"n"代表这个单词的最后一个字母.在计算机领域,国际化是指设计能够适应各种区域和语言环境的软件的过程. jQuery.i18n.properties 是一款轻量级的 j

ASP.NET网站前端页面的复制

网络普及的时代,遇到问题的首要解决方案并不是问人,而是找度娘.当我们找一些技术性的问题时,会发现很多解决方案在博客里,看看博主发表的博客总是惊叹不已,想要自己也有这么一个好习惯,把学到的东西以自己的方式记录下来,下次用到类似的问题直接翻自己的博客岂不是更好,不需要再重新百度了:然而,我只是想想,相信同辈的小伙伴们和我是一样的,思想上的巨人,行动上的矮子.于是,今天良心发现,想要从今天开始记录自己的所感所悟,希望养成这样的一个好习惯. 然而把这一页放在.NET的分类下,是想要分享自己的一个小本领(

iwebshop里面前端页面query标签如何传递api数据

开发中遇到了前台页面用query标签查出来的数据,需要通过api获取数据,那么接下来就给大家说一下如何通过api里的方法来传递数据到前端! 首先前端页面必须是query标签获取的数据 例子: {set:$queryObj=Api::run('getSellerList',$flag);$resultData=$queryObj->find()} {if:$resultData} {foreach:items=$resultData} 例子中 注意自己定义的 api方法 给一个自定义参数,此$fl