-
qq截图测尺寸
去除表单前面圆点：1.list-styled 2.list-style-type：none；
去除下划线：text-decoration：none
背景不重复：background-repeat：none-repeat
查看全部 -
门户类网站特点查看全部
-
常见的导航栏列表，电商网站可以采用
查看全部 -
出现问题：如何解决悬浮层的内容过少或者过多的问题：
1、内容过少时：
将左侧一级菜单与悬浮层的底部进行高度对比;
首先获取左侧一级菜单所处的高度(一级菜单li的索引*每个高度为30+标题部分的高度)：h0=[this.A-1]*30+42；
其次获取悬浮层的高度（当前活动DIV上部距离顶部的高度+本身DIV的高度）即：
h=this.getElementsByTagName('div')[0].style.top+this.getElementsByTagName('div')[0].offsetHeigth;
这里的this是指向Li标签的指针，
this.getElementsByTagName('div')[0]是获取Li标签下面的第一个div标签，
this.getElementsByTagName('div')[0].style.top是获取当前活动DIV上部距离顶部的高度。
判断语句：if(h<h0){this.getElementsByTagName('div').style.top=h0;}
当悬浮层的高度远远小于一级菜单标签所处的高度时，把一级菜单标签所处高度赋给悬浮层；
2、当内容过多时：
y=this.getElementsByTagName('div')[0].offsetHeigth;
if(y>550){
this.getElementsByTagName("div")[0].style.top="3px";
}
查看全部 -
分类查看全部
-
<!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>
<title></title>
<style type="text/css">
body
{
padding: 0;
font-size: 10pt;
behavior:url(css/csshover.htc);
}
.topmenu
{
display: block;
width: 220px;
border: 2px solid #e4393c;
margin: 0;
padding: 0;
}
.toptitle
{
height: 40px;
line-height: 40px;
text-align: left;
font-size: 11pt;
font-weight: bold;
color: White;
background: #e4393c;
padding-left: 20px;
}
.topmenu li
{
height: 30px;
line-height: 30px;
font-size: 11pt;
list-style-type: none;
text-align: left;
padding-left: 8px;
z-index: 3;
background:url(http://img1.sycdn.imooc.com//5411027300014f0200220030.jpg) no-repeat right;
/* 任务一 */
}
.topmenu li:hover
{
background:none;
}
.topmenu li a
{
text-decoration: none;
color: #313131;
}
.topmenu li a:hover
{
text-decoration: underline;
font-weight: bold;
color: #e4393c;
}
</style>
</head>
<body>
<ul class="topmenu">
<div class="toptitle">
全部商品分类
</div>
<li><a href="#">图书、音像、数字商品</a><span></span> </li>
<li><a href="#">家用电器</a></li>
<li><a href="#">手机、数码</a></li>
<li><a href="#">电脑、办公</a></li>
<li><a href="#">家居、家具、家装、厨具</a></li>
<li><a href="#">服饰内衣、珠宝首饰</a></li>
<li><a href="#">个护化妆</a></li>
<li><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>
<li><a href="#">运动户外</a></li>
<li><a href="#">汽车用品</a></li>
<li><a href="#">母婴、玩具乐器</a></li>
<li><a href="#">食品饮料、酒类、生鲜</a></li>
<li><a href="#">营养保健</a></li>
</ul>
</body>
</html>查看全部 -
IE6不兼容hover：
查看全部 -
定义position：relative；才能定义图片的right 和bottom
查看全部 -
this.i
top 位置
查看全部 -
window.onload = function () {
// 编写JS代码
var lis = document.getElementsByTagName("li");
for(var i = 0; i < lis.length;i++){
lis[i].onmouseover = function(){
this.className = "lihover";
}
lis[i].onmouseout = function(){
this.className = "";
}
}
查看全部 -
1、将原css代码进行修改
li：hover ——> .lihover
2、加入鼠标移入事件、鼠标隐藏移开
window.onload=function（）{
var lis = document.getElementByTagName("li);
for(i = 0; i < lis.length; i++){
lis[i].onmousover = function(){
this.className = "lihover";
}
lis[i].onmouseout = function(){
this.className = "";//由于定义的时候都没有用 li 的 class，而是直接定义的 li
}
}
}
查看全部 -
box-shadow: 0 0 8px #DDD;
-moz-box-shadow: 0 0 8px #DDD;
-webkit-box-shadow: 0 0 8px #DDD;
投影左边距、 右边距、 大小、 颜色
查看全部 -
<dl>
<dt>定义列表中的项目</dt>
<dd>描述列表中的项目</dd>
</dl>
防溢出：overflow：hidden；
右对齐：text-align:right;
在body中写behavior：url（csshover.htc）;为了适应IE浏览器下载的hover补丁文件
查看全部
举报