张鑫旭-鑫空间-鑫生活
it's my whole life!提问交流
某同行:
看了博主就职的网站,说实话交互做的不太好,这里提点拙见,“找餐厅”页面,左侧导航有向下箭头的导航,点击之后竟然刷新页面了,应该是下拉显示子菜单啊,右侧为什么不做成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>
<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)
某同行:
我自己做了一个类似的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},不知道有办法能实现吗?谢谢
你好,看了这篇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="#">购物车 <span id="toTgoodsNum">0</span> 件</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元素遮住,请问这是扫描原因?
谢谢
这是我的代码:
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="#">购物车 <span id="toTgoodsNum">0</span> 件</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.
偶然的机会这几天看到你的博客, 于是就对它着了迷. 看了你的文章, 我觉得我的前端知识正是少的可怜. 钦佩你的执着和专业. 你是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。我会在第一时间回复您的问题的。