/* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ margin: 0px; /* 与外界元素的距离为0 */ padding: 0px; /* 与内部元素的距离为0 */ width: auto; /* 宽度根据元素内容调整 */ } /* 所有class为menu的div中的ul中的li样式 */ div.menu ul li { float:left; /* 向左漂移,将竖排变为横排 */ } /* 所有class为menu的div中的ul中的a样式(包括尚未点击的和点击过的样式) */ div.menu ul li a, div.menu ul li a:visited { background-color: #465c71; /* 背景色 */ border: 1px #4e667d solid; /* 边框 */ color: #dde4ec; /* 文字颜色 */ display: block; /* 此元素将显示为块级元素,此元素前后会带有换行符 */ line-height: 1.35em; /* 行高 */ padding: 4px 20px; /* 内部填充的距离 */ text-decoration: none; /* 不显示超链接下划线 */ white-space: nowrap; /* 对于文本内的空白处,不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 */ } /* 所有class为menu的div中的ul中的a样式(鼠标移动到元素中的样式) */ div.menu ul li a:hover { background-color: #bfcbd6; /* 背景色 */ color: #465c71; /* 文字颜色 */ text-decoration: none; /* 不显示超链接下划线 */ } /* 所有class为menu的div中的ul中的a样式(鼠标点击元素时的样式) */ div.menu ul li a:active { background-color: #465c71; /* 背景色 */ color: #cfdbe6; /* 文字颜色 */ text-decoration: none; /* 不显示超链接下划线 */ }
<div class="menu"> <ul> <li><a href="javascript:void(0);">主页</a></li> <li><a href="javascript:void(0);">工作日志</a></li> <li><a href="javascript:void(0);">设备运行记录</a></li> <li><a href="javascript:void(0);">其他</a></li> </ul> </div>
相关推荐
目的很简单:有一个 ul>li 列表,默认为单列显示,把它变为两列显示。 方法1,使用DIV+CSS代码: 复制代码代码如下: <style type=”text/css”> .mycode{ width:300px; height:74px; float:left;} .mycode ul...
HTML5+CSS3自制特效 ul li横排显示效果、一闪一闪亮晶晶的动画特效、圆球分支斜线、圆形轨迹移动。博文地址:https://blog.csdn.net/sujin_/article/details/88078719
div+css+ul-li制作横向导航栏,简洁清楚。原理清楚,适合学习。
类似这样的效果: 设为首页 | 加入收藏 | 联系我们 如上:要让LI横排,又要让LI居中,开始我用FLAOT,很麻烦,后来发现在CSS里给LI的样式加个:display:inline就可以了,简单吧!
图片为横排列表,所以我们用ul li对图片进行布局 设计为可重用的组件,假设图片从后台返回,获取图片的宽高 ##html,css部分 canvas部分(图片画布)设置为与屏幕等宽等高。 注意: 本来由于canvas里li的...
在ie7下显示非常完美,用firefox一测试,乖乖一探糊涂 惨不忍睹。经过一番研究发现兼容很 简单。 1、增加 div {overflow: hidden;},目的就是让div自动适应内容高度 2、横排的div外套div 另外设定 ul { margin: 0...
22、seo功能,所有页面都支持后台自定义title,keywords,description,全局内链关键词,整站静态化,静态主路径自定义,外网文章批量采集,以及标题h标签优化,链接ul/li/a链接优化等seo功能。 23、分享功能,...