CSS实例(五)：简洁的栏目实现方式

最新推荐文章于 2022-09-06 16:28:35 发布
最新推荐文章于 2022-09-06 16:28:35 发布
阅读量1.7k 收藏
点赞数
分类专栏： div/css
今天花了点儿时间，琢磨了一下如何简洁的实现网页上常用的栏目。就是下面的这种东西，我称之为栏目，不知道别人叫它什么：



　　以下是我的HTML文件及CSS文件，可以便捷地进行样式切换。如果谁有更简洁的方式，请留言指教。

　　 HTML文件：
Html代码   收藏代码
  1. <?xml version="1.0" encoding="UTF-8" ?>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  6. <title>Insert title here</title>  
  7. <link href="column.css" style="text/css" rel="stylesheet"/>  
  8. <script type="text/javascript">  
  9.     var gIndex = 1;  
  10.     function doSwitch(){  
  11.         var e = document.getElementById('info');  
  12.         /*下面的变量是e，代码高亮好像有个BUG，阅读请注意。*/  
  13.         ee.className = e.className.split(' ')[0]+' s'+(gIndex%3+1);  
  14.         gIndex++;  
  15.     }  
  16. </script>  
  17. </head>  
  18. <body>  
  19. <ul class="column s1" id="info">  
  20.     <li class="title"><div>信息公示</div></li>  
  21.     <li><a href="#">CSS</a></li>  
  22.     <li><a href="http://wallimn.iteye.com">http://wallimn.iteye.com</a></li>  
  23.     <li><a href="#">很长文本自动截断，一切皆有可能，一切皆有可能，一切皆有可能，一切皆有可能</a></li>  
  24.     <li class="tail"><a href="#">更多...</a></li>  
  25. </ul>  
  26. <br/>  
  27. <input type="button" value="样式切换" onclick="doSwitch()" />  
  28. </body>  
  29. </html>  


　　 CSS文件：
Html代码   收藏代码
  1. ul.column{  
  2.     padding:0;  
  3.     margin:0;  
  4.     font:normal 12px "宋体";  
  5.     border:1px solid #000;  
  6. }  
  7. ul.column li{  
  8.     height:26px;  
  9.     line-height:26px;  
  10.     margin:0 4px;  
  11.     border-bottom:1px dashed #ccc;  
  12.     vertical-align:middle;  
  13.     padding-left:24px;  
  14.     white-space:nowrap;  
  15.     text-overflow:ellipsis;  
  16.     overflow:hidden;  
  17. }  
  18. ul.column li,ul.column li.title div{  
  19.     background:url("column.gif") no-repeat;  
  20. }  
  21. ul.column li a{  
  22.     text-decoration:none;  
  23. }  
  24. ul.column li a:hover{  
  25.     color:red;  
  26. }  
  27. ul.column li.title,ul.column li.tail{  
  28.     border-width:0;  
  29. }  
  30. ul.column li.title{  
  31.     background-repeat:repeat-x;  
  32.     margin:0;  
  33.     padding:0;  
  34. }  
  35. ul.column li.tail{  
  36.     text-align:right;  
  37.     padding-right:12px;  
  38.     background-image:none;  
  39. }  
  40.   
  41. /*1*/  
  42. ul.s1{  
  43.     width:300px;  
  44. }  
  45. ul.s1,ul.s1 li{  
  46.     border-color:#2e9803;  
  47. }  
  48. ul.s1 li{  
  49.     background-position: 0 -52px;  
  50. }  
  51. ul.s1 li.title{  
  52.     background-position: 0 -26px;  
  53. }  
  54. ul.s1 li.title div{  
  55.     background-position: 0 0;  
  56.     padding-left:24px;  
  57. }  
  58. /*2*/  
  59. ul.s2{  
  60.     width:300px;  
  61. }  
  62. ul.s2,ul.s2 li{  
  63.     border-color:#9438d4;  
  64. }  
  65. ul.s2 li{  
  66.     background-position: 0 -130px;  
  67. }  
  68. ul.s2 li.title{  
  69.     background-position: 0 -104px;  
  70. }  
  71. ul.s2 li.title div{  
  72.     background-position: 0 -78px;  
  73.     padding-left:24px;  
  74. }  
  75. /*3*/  
  76. ul.s3{  
  77.     width:300px;  
  78. }  
  79. ul.s3,ul.s3 li{  
  80.     border-color:#9bb8d2;  
  81. }  
  82. ul.s3 li{  
  83.     background-position: 0 -208px;  
  84. }  
  85. ul.s3 li.title{  
  86.     background-position: 0 -182px;  
  87. }  
  88. ul.s3 li.title div{  
  89.     background-position: 0 -156px;  
  90.     padding-left:24px;  
  91. }  


　　 用到的图片：


心在忍耐
关注
专栏目录
新闻栏目设计css 样式
08-11
新闻栏目设计css 样式 新闻标题类型新闻发布最立项的选择
CSS设计栏目
petterp的博客
08-22 963
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;css设计栏目&lt;/title&gt; &lt;style type="text/css"&gt; body{ /*页面初始化*/ background-co
实现简单弹出栏目js+css
wtfsb的博客
09-17 326
Document ul{padding:0;margin:0;} li{list-style: none;} .lis{ width:80px;height:30px;border:1px solid #333;position:relative;} ul ul{padding:0;margin:0;width:140px;border:1px solid #333;position:
CSS超链接之列表栏目（一）
高星雨的博客
11-02 322
你好，欢迎打开我的博客，阿雨每天与你分享许多有趣新鲜的knowledge！ 最近给大家带来的是WEB前端中重要的一部分，一些有关CSS的基础知识，俗话说的好“万丈高楼平地起”，要想做一个优秀的前端人员，必须打好基础哦。 废话不多说，上干货 首先尼，新建个HTML文档（这里就省略了啊），然后在编写Tab选项结构。 然后呢，跟你们解释一下，框包含的内容是菜单栏，框包含的是面板内容。 其次呢，在样式表中...
css布局实例:网页布局的方法
12-09
许多网页设计师都喜欢，将两个或者多个容器等高的并排放置，并在里面展示每个容器的内容，就象经典表格布局中的单元格控制几个栏目的位置，也喜欢容器的内容居中或顶部对齐显示。 　但是你又不喜欢用table来实现他，...
CSS实例(三)：全部使用背景生成栏目
03-15
【CSS实例(三)：全部使用背景生成栏目】 在网页设计中，CSS（层叠样式表）是一种强大的工具，用于定义HTML或XML文档中的元素外观、布局和结构。本实例将探讨如何仅通过背景属性来创建具有特色的栏目，实现丰富的...
图文混排作品HTML5利用css样式,DivCSS布局实例：很实用的图文混排CSS列表
weixin_32440005的博客
06-02 1597
CSS网页布局的一大特点就是列表元素的应用，在传统的表格布局中往往将列表元素作为表格来处理，这样的方式非但不具有语义还产生了许多不必要的代码。　　今天我们共同学习一款“图文混排CSS列表”的制作。首先从分析一下此列表的特点，然后编写HTML代码，最终应用CSS样式实现最终的效果。列表的效果如图所示：　　最顶部是栏目名称“模板无忧 MB5U.com ”与栏目导航“CSS酷站欣赏 DivCSS教程 C...
利用Js+Css实现折纸动态导航效果实例
10-20
标签中列出了“js如何实现动态导航 js实现动态导航栏目 css3 3d折纸动画效果”，这些标签点明了文章内容涉及的几个关键方面：JavaScript（js）、CSS3、动态导航以及3D动画效果。动态导航是指能够响应用户操作（如...
2020-11-07 css实例：滑动门实例及样式解释
Amanda&Rachel的博客
11-07 349
滑动门长啥样 像我们经常浏览的网站，京东，淘宝等，首页都会有一个购买引导的分类栏目，鼠标移动到某一个关键词时，右侧会展示一个更详细的分类导航，如上图。 css实例 滑动门 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> /*reset样式*/ *{ margin: 0;
比较好看的css 自定义样式（标题 h1 h2 h3）
11-21
效果图 博客园中常用的样式 /*标题h1 h2 h3样式*/ #content { color: black; font: 0.875em/1.5em"微软雅黑", "PTSans", "Arial", sans-serif; font-size: 16px; } #content h1 { background: #2B6695; border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); c
CSS3之栏目column
梦龙小站
10-18 3127
CSS3之栏目column是之前CSS2没有的属性，和背景边框等属性不一样，是之前没有的属性。这个属性是设置有关栏目的一系列数值的属性。CSS3之栏目column的属性主要有五个：column-width(栏目宽度)、column-count(栏目列数)、column-rule(栏目间隔线)、column-span(横跨栏目)和column-gap(栏目距离)。
css超链接之列表栏目（二）
高星雨的博客
11-03 226
你好，欢迎打开我的博客，阿雨每天与你分享许多有趣新鲜的knowledge！ 最近给大家带来的是WEB前端中重要的一部分，一些有关CSS的基础知识，俗话说的好“万丈高楼平地起”，要想做一个优秀的前端人员，必须打好基础哦。 废话不多说，上干货 今天给大家带来的是列表栏目里的图片预览，展示一下效果。 图片在默认状态情况下以缩略图的形式给浏览者，但是不压缩属性，光标悬停效果在CSS3主要利用.hover...
不知道栏目该叫什么名字怎么办？在线等，急！——CSS+DIV
Rephilo
12-12 891
拖拖拉拉，拖拖拉拉，经过4、5天的毕业设计泥潭，可算是基本完成了，刚刚恢复到牛腩的进度中，幸好之前敲得东西都是B层和D层。        这两天刚刚接触CSS+DIV，这俩玩意都是以前没听说过的，或是上课老师讲过我都没听。。。一开始听到CSS我还以为是cs：source，后来知道是Cascading Style Sheets，级联样式表。        好了，废话少说，接着往下写。CSS的意义
纯CSS实现tab栏切换，简易轮播图
BambooStrip的博客
09-06 1977
纯CSS，tab栏切换，简易轮播图
30个酷毙的交互式网站(HTML5+CSS3)
各研发管理
10-11 6073
很久前就像找些文章来翻译，and这是第一篇，刚开始翻译着很有兴致，但中间就开始累了，感觉好多好多，因为不仅要翻译，还要看网站，还要排版，花了两天空闲时间还是硬着头皮翻译下来了，虽然翻译质量还是好渣，不少单词还得看词典~~ ----------------------------------------------------------------------------------------...
js+html+css实现简单页面交互功能（2015知乎前端笔试题）http://v.youku.com/v_show/id_XMTI0ODQ5NTAyOA==.html?from=y1.7-1.2
悟已往之不谏，知来者之可追
06-04 5455
js+html+css实现简单页面交互功能（2015知乎前端笔试题） http://v.youku.com/v_show/id_XMTI0ODQ5NTAyOA==.html?from=y1.7-1.2 密码：hellozhihu
css选择的样式（三）：常用的css样式命名
橙子的博客
05-01 199
常用的CSS样式命名 1）页面结构 页头：header 页面主体：main页尾：footer 内容：content/container 容器: container 导航：nav侧栏：sidebar栏目：column 页面外围控制：wrapper左右中：left right center 2）导航 导航：nav 主导航：mainnav子导航：subnav顶导航：topnav边导航：sidebar 左导航：leftsidebar右导航：rightsidebar菜单：menu 子菜单：s...
整理css（二）动态效果样式
farmerXU的博客
11-23 2857
样式一：触摸，线朝两端拉长 #newslist .newstitem .newsbody .date:after { content: ''; display: block; width: 10%; height: 2px; background: #4a4a4a; position: absolute; left: 0; top: -16px; transition: all 0.6s cubic-bezier(0.215, 0.
CSS滑动门切换栏目经典教程：免费资源分享
本文档主要探讨的是"比较经典的CSS滑动门切换栏目"，它是一种在网页设计中常见的交互效果，特别是在展示多栏内容时，通过CSS和可能的JavaScript实现的导航方式。滑动门切换允许用户平滑地切换不同的内容区域，通常...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值