码迷,mamicode.com
首页 > 其他好文 > 详细

视觉差

时间:2015-06-01 18:28:18      阅读:124      评论:0      收藏:0      [点我收藏+]

标签:

html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://www.miaov.com/student/lyq/style.css"/>
</head>
<body>
<div id="nav">
    <a id="logo" href="index.html"></a>
    <ul id="menu">
        <li id="bg" >
            <ul id="ul-list">
                <li ><a href="index.html">Home</a></li>
                <li ><a href="javascript:;" target="_self" >About</a></li>
                <li><a href="javascript:;"  target="_self">News</a></li>
                <li ><a href="javascript:;" target="_self">wroks</a></li>
                <li ><a href="javascript:;"  target="_self">Photo</a></li>
                <li ><a href="javascript:;"  target="_self">hof</a></li>
                <li ><a href="javascript:;"  target="_self">contact</a></li>
            </ul>
        </li>

        <li class="box" ><a href="index.html" >Home</a></li>
        <li class="box" ><a href="javascript:;" target="_self">About</a></li>
        <li class="box" ><a href="javascript:;" target="_self">News</a></li>
        <li class="box" ><a href="javascript:;" target="_self">wroks</a></li>
        <li class="box" ><a href="javascript:;" target="_self">Photo</a></li>
        <li class="box" ><a href="javascript:;" target="_self">hof</a></li>
        <li class="box" ><a href="javascript:;" target="_self">contact</a></li>

    </ul>

</div>

<div id="max-box">
    <div id="home"  style=" background-position:50% 0px">
        <div class="handImg" style=" background-position:50% 0px"></div>
        <div class="textImg" style=" background-position:50% 0px"></div>
        <div class="penImg"></div>
    </div>
    <!--首页-->
    <div id="about" style="background-position:50% 20px">
        <div class="contents">
            <div class="aboutRound">
                <div class="columnSpace">
                    <div class="border">
                        <div class="borderRight">
                            <div class="top"></div>
                        </div>
                        <div class="bordermind">
                            <div class="borderContens">
                                <div class="show">
                                    <div class="comptitle_05 ">
                                        <em>
                                                    <span class="extendLink">
                                                        <a href="index.html#home" target="_self">更多详细+</a>
                                                    </span>

                                        </em>
                                    </div>
                                    <div class="dit">
                                        <div class="aboutText">
                                            李艳秋
                                            </br>

                                            女|26岁|1988年8月26日
                                            </br>

                                            </br>

                                            </br>
                                            对研究Html5+CSS3+JavaScript有浓厚兴趣。
                                            </br>
                                            精通Html+CSS|熟练JavaScript
                                            </br>
                                            熟练浏览器兼容性调试、了解简单的html5和css3
                                            </br>
                                            .......
                                        </div>
                                    </div>
                                </div>
                                <div class="clearBoth"></div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>

        </div>
        <div class="balloon" style="background-position:50% 0"></div>
        <div class="compasses" style="background-position:50% -50px"></div>
    </div>
    <div id="about-cont" style="background-position:50% 4px">
        <div class="contents">
            <div class="aboutRound">
                <iframe allowtransparency="true" frameborder="0" height="500" marginheight="0" 		marginwidth="0" scrolling="no"  width="600">#document</iframe>
                <a class="close_btu" href="#about">关闭 ×</a>
            </div>
        </div>
        <div class="balloon" style="background-position:50% 0"></div>
        <div class="compasses" style="background-position:50% -19px"></div>
        <div class="compasses1" style="background-position:50% -4px"></div>
    </div>
    <div id="new" style="background-position:50% 0">
        <div class="contents">
            <div id="left-news">
                <iframe allowtransparency="true" frameborder="0" height="650" marginheight="0" marginwidth="0" scrolling="no" src="new.html" width="800">#docuemnt</iframe>

            </div>

        </div>
    </div>
    <div id="Project" style=" background-position:50% 23px">
        <div class="pro_img">
            <iframe allowtransparency="true" frameborder="0" height="700" marginheight="0" marginwidth="0" scrolling="no" src="Project.html" width="720">
                #document
            </iframe>
        </div>
        <div class="bulb1" style=" background-position:60% 0px"></div>
        <div class="bulbl2" style=" background-position:60% -26px"></div>
    </div>
    <div id="sector" style=" background-position:50% -17px">
        <div class="contents">
            <div class="sector_img">
                <iframe allowtransparency="true" frameborder="0" height="680" marginheight="0" marginwidth="0" scrolling="no"  src="sector.html" width="600"></iframe>
            </div>

        </div>
        <div class="pop" style="background-position:50% 84px;"></div>
        <div class="clock" style=" background-position:50% 0"></div>


    </div>
    <div id="tree">
        <div  class="contents">
            <iframe allowtransparency="true" frameborder="0" height="500" marginheight="0" marginwidth="0" scrolling="no" src="tree.html" width="500"></iframe>
        </div>
        <div class="Horse" style=" background-position:50% 0"></div>

    </div>

</body>
</html>

 视差原理就是背景图 fix

 

视觉差

标签:

原文地址:http://www.cnblogs.com/webskill/p/4544540.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!