进入我的博客

这里有您在其他地方看不到的web前端方面的技术、知识及资源

这里有您在其他地方看不到的web前端方面的技术、知识及资源

张鑫旭-鑫空间-鑫生活

it's my whole life!

提问交流

回答:1+1=(8888) 新用户?提交问题
 
某同行:
看了博主就职的网站,说实话交互做的不太好,这里提点拙见,“找餐厅”页面,左侧导航有向下箭头的导航,点击之后竟然刷新页面了,应该是下拉显示子菜单啊,右侧为什么不做成ajax动态局部加载,需要改进一下啊,刷页面无论是体验和资源请求都不是很好。
2011-07-26 15:55HTML/CSS相关 回答(0)
某同行:
博主你好我是一个菜鸟刚刚学习这个不久,可以请教你一个问题么 ,你可以抽时间帮我看看么 我问了好多人都没人回答的 希望你能帮帮我 为什么我下面的代码设置的那个CSS伪类没用啊 CSS伪类的使用不是有什么限制的 是不是在什么情况下就是没用的啊??? 希望博主能帮帮我
<head>
  
<style>
   a {
      font-size:1em;
      text-decoration:none;
      font-family:Arial,Verdana,Sans-serif;
      color:white;
   }
   li {
      list-style:none;
      margin:0;
      padding:0;
      float:left;
   }
   .top h3 {
      font-size:1.2em;
   }
   dd a:hover {
      color:#f5dc20;
      font-weight:bold;
   }
   #body {
       text-align:center;
       width:100%;
       margin:0 auto;
      
   }
   .box {
      width:610px;
           
            margin:0 auto;
   
   }
   .lei,dl {
      float:left;
   }
   .lei {
      width:100%;
      margin:0 auto;
   }
   .lei .one {
      width:150px;
      background:url(images/top.gif) #f5dc20 no-repeat left top;
      margin:0 auto;
      margin-left:2px;
   }
   dl,dt,dd,h3 {
      margin:0px;
      padding:0px;
   }
     
   dd {
      background:url(images/arrow.gif) #0a0a0a no-repeat 10px 15px;
      display:none;
   }
   .top {
      font-weight:bold;
      padding:12px 5px;
   }
   .top a {
      color:#000000;
      display:block;
   }
   .one .top a:hover {
      color:red;
   } 
   li dl dt a:hover dd {
      display:block;
   }
   .one .top li:hover dd {
      display:block;
      float:left;
   }
   .lie {
      padding:5px 5px;
      border-top:2px solid white;
   }
   .bottom{
      width:100%;
      height:10px;
      background:url(images/bottom.gif) #f5dc20 no-repeat left bottom;
   }
</style>
</head>
<body>
   <div id="body">
      <div class="box">
             <div class="lei">
                    <li>
                    <dl class="one">
                      <dt class="top"><a href="#"><h3>Programs</h3></a></dt> 
                      <dd class="lie"><a href="">PHP Study</a></dd>
                      <dd class="lie"><a href="">CSS Study</a></dd>
                      <dd class="lie"><a href="">JAVA Study</a></dd>
                      <dd class="lie"><a href="">HTML Study</a></dd>
                      <dd class="lie"><a href="">VB Study</a></dd>
                      <dd class="bottom"></dd>
                    </dl>
                   </li>
                   <li>
                    <dl class="one">
                      <dt class="top"><a href="#"><h3>Programs</h3></a></dt> 
                      <dd class="lie"><a href="">PHP Study</a></dd>
                      <dd class="lie"><a href="">CSS Study</a></dd>
                      <dd class="lie"><a href="">JAVA Study</a></dd>
                      <dd class="lie"><a href="">HTML Study</a></dd>
                      <dd class="lie"><a href="">VB Study</a></dd>
                      <dd class="bottom"></dd>
                    </dl>
                    </li>
                   <li>
                    <dl class="one">
                      <dt class="top"><a href="#"><h3>Programs</h3></a></dt> 
                      <dd class="lie"><a href="">PHP Study</a></dd>
                      <dd class="lie"><a href="">CSS Study</a></dd>
                      <dd class="lie"><a href="">JAVA Study</a></dd>
                      <dd class="lie"><a href="">HTML Study</a></dd>
                      <dd class="lie"><a href="">VB Study</a></dd>
                      <dd class="bottom"></dd>
                    </dl>
                    </li>
                   <li>
                    <dl class="one">
                      <dt class="top"><a href="#"><h3>Programs</h3></a></dt> 
                      <dd class="lie"><a href="">PHP Study</a></dd>
                      <dd class="lie"><a href="">CSS Study</a></dd>
                      <dd class="lie"><a href="">JAVA Study</a></dd>
                      <dd class="lie"><a href="">HTML Study</a></dd>
                      <dd class="lie"><a href="">VB Study</a></dd>
                      <dd class="bottom"></dd>
                    </dl>
                    </li>
                   
             </div>
         </div>
   </div>
</body>
 
</html>
2011-07-26 11:29HTML/CSS相关 回答(2)
li9269391:
博主你好,我是一个热爱前端设计的初学者,非常喜欢你的文章,请教一问题。图片在一个块级元素里只设置了vertical-align:middle;不能垂直居中,算不算是浏览器bug呢?请简单说明一下原理好吗。谢谢
2011-07-26 11:14HTML/CSS相关 回答(1)
某同行:
想问下你博客中的demo页面是怎么生成的,不会每次要写demo就打开一个html模板开始写吧 写完了再补完回到相关链接的链接。。。
2011-07-25 17:07HTML/CSS相关 回答(1)
某同行:
我想问一下关于boxy的,就是我们load的时候,为什么load的html js无效呢
2011-07-19 09:25HTML/CSS相关 回答(0)
某同行:
淘宝下拉菜单的问题能帮我解答一下吗?
2011-07-18 22:00HTML/CSS相关 回答(0)
某同行:
我自己做了一个类似的blog,前端打算使用你blog的样式,算不算侵权呢?哈哈,借我使使呗,前段时间怎么blog 怎么被关闭了?勿谈国事 :(
2011-07-16 10:13HTML/CSS相关 回答(1)
某同行:
http://www.zhangxinxu.com/wordpress/?p=694
你好,看了这篇CSS 实现两栏等高度的文章,很有启发。
有一个疑问,用你的方法做出两栏等高度的效果后,好像不能实现圆角效果,即左栏左下角圆角{border-bottom-left-radius:5px},右栏右下角圆角的效果{border-bottom-left-radius:5px},不知道有办法能实现吗?谢谢
2011-07-15 18:13HTML/CSS相关 回答(1)
某同行:
你好,有个问题可以请教你吗?是淘宝的下拉菜单的问题
这是我的代码:
HTML:
<div id="top">
<div id="topLeft">您好,欢迎来到淘宝!<span><a href="#">请登录</a></span><span><a href="registe.html">免费注册</a></span></div>
<div id="topRight">
<ul id="navigation">
<li><a href="#">淘宝网首页</a></li><li><a href="#">我要买</a></li><li><a href="#">我的淘宝</a>
<div class="subNav">
<a href="#">已买到的宝贝</a>
<a href="#">已卖出的宝贝</a>
</div>
</li>
<li><img src="images/buycar.gif" /><a href="#">购物车&nbsp;<span id="toTgoodsNum">0</span>&nbsp;件</a>
<div class="subNav">
<span id="toTgoodsDetail">您的购物车中没有任何宝贝</sapn><span id="gotoBuycar">查看我的购物车</span>
</div>
</li><li><a href="#">收藏夹</a>
<div class="subNav">
<a href="#">收藏的宝贝</a>
<a href="#">收藏的店铺</a>
</div>
</li>
<li><a href="#">搜索</a>
<div class="subNav">
<input type="text" class="topSearch"/>
<img src="images/ok.gif" />
</div>
</li>
<li><a href="#">帮助中心</a></li>
</ul>
</div>
</div>
CSS:
#top{width:900px;height:30px;margin:0 auto;padding:0;}
#topLeft{padding:0;margin:8px 0;float:left;}
#topLeft span{color:gray;margin:0;padding-left:10px;}
#topRight{float:right;margin:0;padding:0;margin:8px 0;}
#navigation{list-style-type:none;margin:0;padding:0;position:relative;z-index:0;}
#navigation li{padding:0 5px;border-right:1px solid gray;position:relative;z-index:0;float:left;}
.subNav{display:none;position:absolute;background-color:#fff;padding:5px 5px;left:-1px;top:15px;border:1px solid gray;white-space:nowrap;z-index:10;}
.subNav a{display:block;padding:0;margin-down:5px;}
#toTgoodsNum{color:red;}
.topSearch{width:100px;height:20px;}
#gotoBuycar{padding:2px 5px;background-color:orange;color:white;margin-left:5px;cursor:pointer;}
#navigation li img{margin:0;padding:0;vertical-align:bottom;}
.liFocus{border:1px solid gray;border-bottom:none;background-color:#fff;}
#navigation li div img{cursor:pointer;margin-top:5px;display:block;}

JS:
$("#navigation li:has(div)").mouseover(function(){
$(this).addClass("liFocus");
$(this).find("div").css("display","block");
}).mouseout(function(){
$(this).removeClass("liFocus");
$(this).find("div").css("display","none");
})
但是无法实现淘宝的效果,子菜单的上边框不能被父级li元素遮住,请问这是扫描原因?
谢谢
2011-07-15 15:02HTML/CSS相关 回答(0)
某同行:
Hi, 鑫旭, 我是一个web frontend爱好者, 前端设计占到了我40%的工作.前端的水平大致是:看到网上的任何效果, 我能想出怎么实现. 

偶然的机会这几天看到你的博客, 于是就对它着了迷. 看了你的文章, 我觉得我的前端知识正是少的可怜. 钦佩你的执着和专业. 你是HUST毕业的, 我从你隔壁的学校地大毕业的, 不过比你早. 

我正在从后往前看你的CSS相关部分的内容, 才刚翻了三页. 我估计我需要两个月才能把你的blog从头到尾看一遍. 我在你的文章中看你反复提到"包裹"的概念以及与之相关的float, inline-block. 这是我第一次听到"包裹"这个东西. 跨度对我来说无比巨大, 几经周折没有想明白. 想听你的解释(给一个从来没有听过包裹概念的人听). 
我不知道你是怎么答复大家的提问的. 我的email:sunxing007@tom.com.
2011-07-08 16:39HTML/CSS相关 回答(1)

分类查看

1. 注册可获得问题回答的动态提醒,如果注册遇到什么问题,例如收不到激活邮件,可尝试通过邮件zhangxinxu@zhangxinxu.com联系我;
2. 如果您的问题不是三言两语能够说清楚的,建议通过邮件zhangxinxu@zhangxinxu.com联系我。提问时候尽量详尽,最好有截图、源代码或者demo。我会在第一时间回复您的问题的。

抱歉,服务器忙,未能成功提交,稍后重试。