- 浏览: 5153999 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
silence19841230:
先拿走看看
SpringBoot2.0开发WebSocket应用完整示例 -
wallimn:
masuweng 写道发下源码下载地址吧!三个相关文件打了个包 ...
SpringBoot2.0开发WebSocket应用完整示例 -
masuweng:
发下源码下载地址吧!
SpringBoot2.0开发WebSocket应用完整示例 -
masuweng:
SpringBoot2.0开发WebSocket应用完整示例 -
wallimn:
水淼火 写道你好,我使用以后,图标不显示,应该怎么引用呢,谢谢 ...
前端框架iviewui使用示例之菜单+多Tab页布局
今天花了点儿时间,琢磨了一下如何简洁的实现网页上常用的栏目。就是下面的这种东西,我称之为栏目,不知道别人叫它什么:
以下是我的HTML文件及CSS文件,可以便捷地进行样式切换。如果谁有更简洁的方式,请留言指教。
HTML文件:
CSS文件:
用到的图片:
标题例如li中确实不优雅
以下是我的HTML文件及CSS文件,可以便捷地进行样式切换。如果谁有更简洁的方式,请留言指教。
HTML文件:
<?xml version="1.0" encoding="UTF-8" ?> <!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert title here</title> <link href="column.css" style="text/css" rel="stylesheet"/> <script type="text/javascript"> var gIndex = 1; function doSwitch(){ var e = document.getElementById('info'); /*下面的变量是e,代码高亮好像有个BUG,阅读请注意。*/ e.className = e.className.split(' ')[0]+' s'+(gIndex%3+1); gIndex++; } </script> </head> <body> <ul class="column s1" id="info"> <li class="title"><div>信息公示</div></li> <li><a href="#">隔壁老王</a></li> <li><a href="http://wallimn.iteye.com">http://wallimn.iteye.com</a></li> <li><a href="#">很长文本自动截断,一切皆有可能,一切皆有可能,一切皆有可能,一切皆有可能</a></li> <li class="tail"><a href="#">更多...</a></li> </ul> <br/> <input type="button" value="样式切换" onclick="doSwitch()" /> </body> </html>
CSS文件:
ul.column{ padding:0; margin:0; font:normal 12px "宋体"; border:1px solid #000; } ul.column li{ height:26px; line-height:26px; margin:0 4px; border-bottom:1px dashed #ccc; vertical-align:middle; padding-left:24px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } ul.column li,ul.column li.title div{ background:url("column.gif") no-repeat; } ul.column li a{ text-decoration:none; } ul.column li a:hover{ color:red; } ul.column li.title,ul.column li.tail{ border-width:0; } ul.column li.title{ background-repeat:repeat-x; margin:0; padding:0; } ul.column li.tail{ text-align:right; padding-right:12px; background-image:none; } /*1*/ ul.s1{ width:300px; } ul.s1,ul.s1 li{ border-color:#2e9803; } ul.s1 li{ background-position: 0 -52px; } ul.s1 li.title{ background-position: 0 -26px; } ul.s1 li.title div{ background-position: 0 0; padding-left:24px; } /*2*/ ul.s2{ width:300px; } ul.s2,ul.s2 li{ border-color:#9438d4; } ul.s2 li{ background-position: 0 -130px; } ul.s2 li.title{ background-position: 0 -104px; } ul.s2 li.title div{ background-position: 0 -78px; padding-left:24px; } /*3*/ ul.s3{ width:300px; } ul.s3,ul.s3 li{ border-color:#9bb8d2; } ul.s3 li{ background-position: 0 -208px; } ul.s3 li.title{ background-position: 0 -182px; } ul.s3 li.title div{ background-position: 0 -156px; padding-left:24px; }
用到的图片:
评论
10 楼
wallimn
2009-12-18
CSS多了点,但有一大部分是另外两种风格的定义。
9 楼
wallimn
2009-12-18
算了,把优雅去掉。简洁总想得上吧。
我的想法是尽量少的使用标签。
语义非得体现在标签的名字上吗?用class体现一下就不行吗??
撕边,SnagIt,抓图,带撕边功能。
我的想法是尽量少的使用标签。
语义非得体现在标签的名字上吗?用class体现一下就不行吗??
撕边,SnagIt,抓图,带撕边功能。
8 楼
bellstar
2009-12-18
我来做会这样弄HTML
<div class="column"> <h3>标题</h3> <ul> <li>数据项1</li> <li>数据项2</li> <li>数据项...</li> </ul> <a href="http://xxx">更多...</a> </div>
7 楼
fhjxp
2009-12-18
caiceclb 写道
感觉有点标题D了。。何为优雅?哪里优雅?个人意见,连标签语义化都没做到,标题和更多完全不该也列入到li列表项目中,css也蛮多的不是吗。仅供讨论。
标题例如li中确实不优雅
6 楼
leiliang
2009-12-18
还行吧,将ul li 改成 dl dt dd,语义结构会好些
5 楼
bookong
2009-12-18
楼主,你那个截图是用什么工具处理的(感觉像撕纸的效果)?
4 楼
amonlei
2009-12-18
最好,弄圆角的,柔一些
3 楼
caiceclb
2009-12-18
感觉有点标题D了。。何为优雅?哪里优雅?个人意见,连标签语义化都没做到,标题和更多完全不该也列入到li列表项目中,css也蛮多的不是吗。仅供讨论。
2 楼
wallimn
2009-12-17
一直上传不了RAR文件,不知为什么?跟我使用chrome浏览器有关吗?
需要DEMO,请到我的网络硬盘下载:wallimn.ys168.com
需要DEMO,请到我的网络硬盘下载:wallimn.ys168.com
1 楼
ustcfxx
2009-12-17
给出Demo吧
发表评论
-
gradle编译错误:Could not find method compile() for arguments
2020-09-19 10:50 18437编译(IDEA+Gradle)一个别人的工程,出现一个 ... -
netty心跳检查之UDP篇
2019-09-15 08:50 2359部分UDP通信场景中,需要客户端定期发送心跳信息,以获取终 ... -
解决tomcat部署两个SpringBoot应用提示InstanceAlreadyExistsException
2019-06-30 11:49 3360两个SpringBoot应用部署在一个Tomcat中,单独 ... -
Eclipse配置MyBatis代码自动化功能
2019-06-29 10:16 17411.安装插件 Eclipse中,Help->Ecli ... -
vue.js中使用qrcode生成二维码
2019-05-20 00:00 7645一、安装包 npm install qrcodejs2 --s ... -
MySQL插入数据报错: Incorrect string value: '\xFD\xDE'
2019-03-31 23:19 1226我MySQL数据库用的uft-8字符集,插入数据一直很正常 ... -
vue自定义组件并双向绑定属性
2019-03-08 22:46 3254做了两个子组件,原理基本一样,一个是使用原生的select ... -
vue-router简单示例
2019-03-05 00:32 1131写个基本完整、稍有借鉴意义的示例,防止自己忘记。 &l ... -
“联通充值系统繁忙”轻松应对
2019-02-06 11:03 3971大过年的,联通充个值一直报“充值系统繁忙”。昨天晚上试了几 ... -
electron.js数据库应用---导航菜单(element-ui+mysql)
2019-02-05 21:33 2359一、环境搭建 略, ... -
electron.js数据库应用---入门(mysql+element-ui)
2019-01-27 23:19 7478我的机器:Windows10,64 ... -
SpringMVC 在controller层中注入成员变量request,是否线程安全
2018-12-17 21:17 2739@RestController public class ... -
VueJS 组件参数名命名与组件属性转化
2018-12-03 00:00 2068转自:https://www.cnblogs.com/meiy ... -
vue-resource拦截器实现token发送及检验自动化
2018-11-16 22:38 3074用了很长时间vue-resource,最近思考$http发 ... -
element-ui试用手记
2018-10-29 20:25 1727element-ui、iviewui都以vue.js为基础 ... -
iviewui中表格控件中render的使用示例
2018-07-07 16:46 9778示例了如何在表格中显示按钮,如何将代码转化为文字。 i ... -
Tomcat错误“Alias name tomcat does not identify a key entry”解决
2018-07-05 21:39 6538申请到了阿里云的证书后,下载、按照说明生成jks格式证书、 ... -
阿里云免费证书“fileauth.txt内容配置错误”解决
2018-07-05 20:43 5282最近研究微信小程序开发,上阿里云申请了个证书,使用文件验证 ... -
springboot2.0跨域配置
2018-07-04 22:11 5279springboot2.0跨域配置: 一、代码 ... -
微信小程序使用code换openid的方法(JAVA、SpringBoot)
2018-07-01 21:52 10388微信小程序序的代码中提示,使用code换取openid,但 ...
相关推荐
【CSS实例(三):全部使用背景生成栏目】 在网页设计中,CSS(层叠样式表)是一种强大的工具,用于定义HTML或XML文档中的元素外观、布局和结构。本实例将探讨如何仅通过背景属性来创建具有特色的栏目,实现丰富的...
通过《Div+CSS布局实例教程》,读者可以逐步掌握网页布局的技巧,实现从理论到实践的跨越,创建出符合现代网页设计标准的优秀作品。教程中的实例涵盖了常见的布局场景,有助于读者深入理解和运用这些知识。
许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就象经典表格布局中的单元格控制几个栏目的位置,也喜欢容器的内容居中或顶部对齐显示。 但是你又不喜欢用table来实现他,...
"鼠标滑过栏目CSS3动画特效"是一个典型的实例,它利用CSS3的特性来实现当鼠标悬停在栏目上时的视觉变化。这个项目可能包含一个HTML文件、CSS样式表和可能的JavaScript脚本来实现这一效果。 1. **CSS3选择器**:CSS3...
`div+css`代码设计是构建网页布局的基础,它结合了HTML中的`div`元素(一个通用的容器)和CSS(层叠样式表)来实现页面的结构与样式分离,从而提高了网页的可维护性和易读性。在这个过程中,我们可以看到以下几个...
- **实例4-16:前台功能设计**:这部分通过一系列具体的实例,展示了如何使用 ASP 实现各种前台功能,包括设计网站首页、顶部页面、CSS 设计、栏目导航、站点公告、Flash 图片轮播、新闻内容、网址导航、站内搜索、...
4. **图片处理**:CSS可以控制图片大小、对齐方式,甚至使用`background-image`和`background-size`属性实现背景图的自适应。 5. **链接和按钮样式**:博客中的链接和按钮通常会定制样式,包括颜色、鼠标悬停效果、...
- 文章通过实例演示了如何将HTML和CSS结合起来实现具体的网页设计,这对于网页前端开发是一个重要的技能。 以上就是文章中提到的制作简单侧边导航栏的知识点。整体来看,通过合理的HTML结构设计和CSS样式定义,...
标签中列出了“js如何实现动态导航 js实现动态导航栏目 css3 3d折纸动画效果”,这些标签点明了文章内容涉及的几个关键方面:JavaScript(js)、CSS3、动态导航以及3D动画效果。动态导航是指能够响应用户操作(如...
实例5展示了如何通过巧妙地使用背景属性,使具有不同内容量的栏目看起来具有相同的高度,从而实现视觉上的平衡。 总的来说,CSS背景属性在网页设计中扮演着至关重要的角色。通过上述五个实例,我们可以更深入地了解...
在网页设计中,`DIV+CSS`是一种常见的布局方式,它通过定义`HTML`元素的类(class)和ID(identifier)来实现页面的样式控制。`DIV`是HTML中的一个通用容器元素,用于组合其他元素,而CSS则是用于设置这些元素的样式...
总的来说,"bps:职业栏目"项目涉及了游戏或竞技类项目的数据展示,采用了Vue.js框架,通过组件化的方式组织UI,可能存在包括DPS和门派天梯在内的多种排行榜,以及一个综合的右侧栏展示。这个项目可以通过解压"bps-...
2、整站采用CSS布局,很多表现层东西都用CSS来实现。 3、本站所有链接采用UrlReWrite实现伪静态,隐藏了扩展名。 4、用AjaxPro.2.dll实现二级栏目联动,并解决了栏目取值问题。(但修改文章时二级栏目在页面加载时...
通过CSS+DIV技术,个人博客的设计不仅实现了视觉上的美感,还确保了页面的结构清晰和交互性。整个过程涉及了网页设计的多个方面,包括色彩搭配、布局规划、代码编写和用户体验优化。通过实际操作,不仅可以提升CSS...
这种效果能够使导航菜单更加吸引人,并提供清晰的视觉指示,帮助用户识别当前选中的页面或栏目。 滑动门技术的核心在于利用CSS的背景图像定位属性,通常涉及到两个背景图像:一个是左侧的图像(例如,一个具有圆角...
通过分析这个源码,我们可以学习到如何使用ASP来实现一个功能完善的问答系统。 首先,源码中包含的"046仿新浪爱问!可做为栏目内部使用!亲测!"可能是项目的主要文件夹或者文件,这表明它包含了整个网站的结构、...
这个项目的核心特性在于其栏目的灵活性和视觉吸引力,利用了CSS技术来实现。 【描述】中提到的关键点有: 1. **动态栏目设置**:在这款小程序中,用户可以灵活地调整和配置不同的栏目,这可能是通过后端接口或者...
5. **实例开发**:这个压缩包提供的实例开发资源,可以帮助开发者了解帝国CMS的架构和实现方式,包括数据库设计、模板制作、后台功能实现等,是学习和开发基于帝国CMS的网站的良好起点。 6. **文件结构分析**:“...
- **col**:设定列表的列数,默认为单列,但在5.3版本中无效,可通过CSS实现多列布局。 - **row**:设置返回的文章数量。 - **typeid**:指定栏目ID,可用于多栏目同时调用。 - **titlelen**:限制标题显示的字符数...