菜单

CSS布局之列表_javascript技巧_脚本之家

2020年3月16日 - 新闻中心

正文实例为我们享用了Jquery
Easyui日历组件的贯彻代码,供大家仿效,具体内容如下

本文实例为我们享受了Bootstrap
CSS构造中的列表构造,供大家参谋,具体内容如下

加载方式

列表 普通列表ul li 有体系表ol li 去点列表.list-unstyled
内联列表.list-inline 定义列表dl dt dd 水平定义列表dl-horizontal

  $ { //JS 加载调用 $; });
ul,ol { margin-top: 0; margin-bottom: 10px;}ul ul,ol ul,ul ol,ol ol { margin-bottom: 0;}

属性列表

常备列表ul li 有连串表ol li 去点列表class=”list-unstyled”

 $ { //JS 加载调用 $.calendar({ width : 200, height : 200, fit : false, border : false, firstDay : 0, weeks : ['S','M','T','W','T','F','S'], months : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], year : 2016, month : 6, current : new Date;
//源码.list-unstyled { padding-left: 0; list-style: none;}

事件列表

内联列表class=”list-inline”

 $ { //JS 加载调用 $.calendar({ width : 200, height : 200, onSelect : function  { alert + ":" +  + ":" + date.getDate; }, onChange : function  { alert(newDate + '|' + oldDate); }, }); }); 
//源码.list-inline { padding-left: 0; margin-left: -5px; list-style: none;}.list-inline > li { display: inline-block; padding-right: 5px; padding-left: 5px;}

措施列表

定义列表dl dt dd

 //返回属性对象 console.log.calendar;//调整日历大小$.calendar; //移动到指定日期 $.calendar('moveTo', new Date;//可以使用$.fn.calendar.defaults 重写默认值对象。
dl { margin-top: 0; margin-bottom: 20px;}dt,dd { line-height: 1.42857143;}dt { font-weight: bold;}dd { margin-left: 0;}

如上就是本文的全部内容,希望对大家的上学抱有助于,也愿意我们多多点拨脚本之家。

水平定义列表class=”dl-horizontal”

@media  { .dl-horizontal dt { float: left; width: 160px; overflow: hidden; clear: left; text-align: right; //显示省略符号来代表被修剪的文本 text-overflow: ellipsis; white-space: nowrap; } .dl-horizontal dd { margin-left: 180px; }}

以上就是本文的全体内容,希望对大家的学习抱有助于,也期望我们不吝赐教脚本之家。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图