zoukankan      html  css  js  c++  java
  • 转载来的迅雷面试题(网页布局)

          这是今天在网上看到的迅雷面试题及答案,转载到此分享,并让自己时刻学习:原URL:http://topic.csdn.net/u/20091009/11/179bf6c0-437d-4875-b03b-d11211e69779.html?92394

    第一题的答案

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>fenye(wwww.hemin.cn)</title>
    <style type="text/css">
    *
    { margin:0; padding:0; font-size:12px; font-family:"新宋体";}
    div
    { text-align:center;}
    div a
    { display:inline-block; background:url(http://www.hemin.cn/demo/xunleiMS09-6-21/q1.gif) no-repeat left top; text-decoration:none; padding-left:8px; color:#FFF;}
    div a:hover
    { background:url(http://www.hemin.cn/demo/xunleiMS09-6-21/q1.gif) no-repeat left -24px; color:#000;}
    div a span
    {display:inline-block; background:url(http://www.hemin.cn/demo/xunleiMS09-6-21/q1.gif) no-repeat right top;height:24px;line-height:24px;padding-right:8px; cursor:pointer;}
    div a:hover span
    { background:url(http://www.hemin.cn/demo/xunleiMS09-6-21/q1.gif) no-repeat right -24px;}
    </style>
    </head>
    <body>
    <div>
        <href="#"><span>上一页</span></a>
        <href="#"><span>11</span></a>
        <href="#"><span>2</span></a>
        <href="#"><span>33333</span></a>
        <href="#"><span>下一页</span></a>
    </div>
    </body>
    </html>

    第二道题

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>三栏等高(wwww.hemin.cn)</title>
    <style type="text/css">
    *
    { margin:0; padding:0; font-size:18px; font-family:"新宋体";}
    body 
    {min-width: 850px;width:expression((documentElement.clientWidth < 850) ? "850px" : "auto" ); }
    .Top
    {background:#999; height:100px;}
    .Middle,.Left,.Right
    { float:left;padding-bottom: 32767px;margin-bottom:-32767px;}
    .Content
    { overflow:hidden;padding:0 250px 0 300px; zoom:1;position:relative;}
    .Middle
    {background:#090;width:100%;}
    .Left
    {background:#333;width:300px;margin-left:-100%; position:relative; right:300px;_left:250px;}
    .Right
    {background:#666;width:250px;margin-right:-100%;}
    </style>
    </head>
    <body>
    <div class="Top">顶部</div>
    <div class="Content">
        <div class="Middle">中间</div>
        <div class="Left">左边</div>
        <div class="Right">右边<br /><br /><br /></div>
    </div>
    </body>
    </html>

    测试的浏览器:IE6,7,8,FF3,Opera10.(FF2不支持display:inline-block; ,没有安装FF2所以没有测试)

    自我感觉第一题不错。二题就是滑动门而已,3题用了expression不理想。

    超过宽度显示省略号:http://www.hemin.cn/blog/?p=339

    另外:三栏等高暂时只有三种实现还可以的方法
    一种是padding-bottom: 32767px;margin-bottom:-32767px;
    二种是边框实现
    三种是图片实现

  • 相关阅读:
    SQL Server 2005高可用性之镜像功能
    Linux的常见问题解答和管理技巧
    安装sharepoint server 2007步骤
    CISCO 中对OSI的解释
    CISCO 2600 密码恢复
    三层交换机与路由器的比较
    PHP的注释
    php的变量、常量和数据类型
    操作符与控制结构
    【1】淘宝sdk装修入门引言
  • 原文地址:https://www.cnblogs.com/Silvia/p/2434272.html
Copyright © 2011-2022 走看看