-
- Ocio 2020-07-31
qq截图测尺寸
去除表单前面圆点：1.list-styled 2.list-style-type：none；
去除下划线：text-decoration：none
背景不重复：background-repeat：none-repeat
- 0赞 · 0采集
-
- 楠烟3690350 2020-03-08
- 门户类网站特点
-
截图0赞 · 0采集
-
- 一刀斩2333 2019-07-25
常见的导航栏列表，电商网站可以采用
- 0赞 · 0采集
-
- little_frog 2019-05-29
出现问题：如何解决悬浮层的内容过少或者过多的问题：
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";
}
-
截图0赞 · 0采集
-
- 幕布斯7201726 2019-04-25
- 分类
- 0赞 · 0采集
-
- 慕斯卡9108040 2018-12-03
<!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://img.mukewang.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>- 0赞 · 0采集
-
- 手刻CPU 2018-11-20
IE6不兼容hover：
- 0赞 · 0采集
-
- 慕粉2308425049 2018-07-19
定义position：relative；才能定义图片的right 和bottom
- 0赞 · 0采集
-
- 慕粉2308425049 2018-07-19
this.i
top 位置
-
截图0赞 · 0采集
-
- 慕粉2308425049 2018-07-18
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 = "";
}
}
- 0赞 · 1采集
-
- 慕粉2308425049 2018-07-18
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
}
}
}
- 0赞 · 0采集
-
- 慕粉2308425049 2018-07-18
box-shadow: 0 0 8px #DDD;
-moz-box-shadow: 0 0 8px #DDD;
-webkit-box-shadow: 0 0 8px #DDD;
投影左边距、 右边距、 大小、 颜色
- 0赞 · 0采集
-
- 慕粉2308425049 2018-07-18
<dl>
<dt>定义列表中的项目</dt>
<dd>描述列表中的项目</dd>
</dl>
防溢出：overflow：hidden；
右对齐：text-align:right;
在body中写behavior：url（csshover.htc）;为了适应IE浏览器下载的hover补丁文件
- 0赞 · 0采集
-
- 慕粉2308425049 2018-07-18
text-decoration：underline；//a 标签的下划线
font-weight:bold;//字体加粗
box-shadow : 0 0 8px #DDD; // li 的外阴影
Firefox浏览器：-moz-box-shadow : 0 0 8px #DDD;
Chrome浏览器：-webkit-box-shadow : 0 0 8px #DDD;
display：block 显示 none 隐藏
position：absolute； 绝对定位
z-index：num ； 数值大的悬浮在上面
- 0赞 · 0采集
-
- 慕粉2308425049 2018-07-18
background-position:right; //设置背景在li右边
- 0赞 · 0采集
-
- 慕粉2308425049 2018-07-18
list-style-type:none; //去掉里标签前面的黑点
text-decoration：none；//去掉a标签的下划线
background-image：url（。。。jpg/png）//li标签的背景图片
background-repeat:no-repeat;//背景图像不重复只出现一个（不定义的话会默认repeat，将在水平方向和垂直方向都重复）
- 0赞 · 0采集
-
- 半世烟云落 2018-04-08
- 0赞 · 0采集
-
- 半世烟云落 2018-04-08
解决IE6兼容性问题
- 0赞 · 0采集
-
- 半世烟云落 2018-04-08
设置边框阴影（以上三个分别兼容不同的浏览器）
- 0赞 · 0采集
-
- 半世烟云落 2018-04-08
当鼠标移动到 li 上时，class 为 submenu 的 div 显示（display改为block）
- 0赞 · 0采集
-
- GYNexus 2018-03-24
<dl>标签在列表中的应用 <dt>定义列表分类 <dd>定义列表项目利用a元素制作竖线“ ▏” display:block;float:left;border-left:1px solid grey;height:14px;line-height:14px;padding:0px 5px;
- 0赞 · 0采集
-
- GYNexus 2018-03-24
relative的有两个属性①是以自身为参照基准进行定位，也就是相对于<自身原有位置>进行偏移 。并不是相对于其他元素进行定位，这个要理解好。②一旦设置了relative，那么随即就会产生z-index属性，就是空间层堆叠，由于二级菜单的包裹层的z-index默认是小于10的，那么span标签设置了z-index：10 那么就是从顶层往下面遮盖住了二级菜单border。就是这个原理，理解清楚relative的两个属性是关键！
- 0赞 · 0采集
-
- GYNexus 2018-03-24
文字跟左边的距离用padding可能会影响父元素的宽度，如果用text—indent：**px；就不会有什么隐患；
- 1赞 · 0采集
-
- GYNexus 2018-03-24
height，line-height(同一个元素设置，使内容垂直居中
- 0赞 · 0采集
-
- xccll 2018-02-26
- dt用来定义列表中的项目，dd用来描述列表中的项目，常用于网站分类菜单，对搜索引擎友好，可以分别设置样式，而ul和li列表做不到，a标签对搜索引擎不友好
-
截图0赞 · 0采集
-
- xccll 2018-02-26
- 用background设置一系列属性的时候，不同属性之间不能加逗号！！！可以用空格隔开，否则无效
- 0赞 · 0采集
-
- 白鹿max 2018-02-06
- 判断大类菜单高度距离的办法
-
截图0赞 · 0采集
-
- 白鹿max 2018-02-06
- 京东二级菜单导航效果实现代码
-
截图0赞 · 0采集
-
- 向世界问好 2018-02-04
- .lihover b{} 在js里面写 this.className="lihover" ,子元素b也会执行。 即相当于css里面的 .li:hover b{}
- 0赞 · 0采集
-
- 向世界问好 2018-02-04
- 小知识点： 1、line-height与height相等：可以垂直居中； 2、左右字体不在一水平线：左右字体大小不同，用margin的垂直方向等于字体差的一半即可，例如：字体1：4px ，字体2:8px ，对字体2设置margin：2px 0； 3、导航栏中间的分隔栏：直接用a标签的border-left； 4、ul本身是块元素 display又设置为block：因为ul里面有a等行内元素，而display可以继承，使a变成块元素。
- 0赞 · 0采集
