DIV教程之网页教授教养网代码分享:洁净简便的网页列表代码
这工具比表格好的唯一就是你可以定义一个ID，想怎么玩它就怎么玩他，表格用来处理显示数据，DIV+css+TABLE就行了，都什么年代了，以前没有DIV，而且386的年代不也一样，现在都奔腾4了破洛洛文章简介：网页教授教养网代码分享:洁净简便的网页列表代码.
谁不但愿有一个悦目而又洁净的网页列表？这篇文章中我们给出几个有用的例子，你能够把他们间接用到本人的事情中。我们从一个带有动画效果的垂直列表入手下手，接着是一个图文混排的例子，然后是一个只要图片的list例子跟一个程度菜单的例子，最初是一个以缩小数字开首的列表。关于初学者而言这里能够学到良多器材，关于生手，间接拿来用就是了。
1.helvetica字体的列表
第一个例子的款式看起平铺直叙，不外喜好繁复作风的人大概会感乐趣，这相似于印刷字体作风，简结的同时也不掉灵动的特性（当鼠标滑上往的时分）。注：团体喜好这里的第二个图文混排的例子，可是发明老外更喜好第一个，大概这就是文明差别吧。。。
这里是源码demo地点：CodePen
先看最终效果：
以下是html代码：
<div>/div><h2>HelvetiList</h2><ul><li><ahref=<"#"Zurich</a></li><li><ahref=<"#"Geneva</a></li><li><ahref=<"#"Winterthur</a></li><li><ahref=<"#"Lausanne</a></li><li><ahref=<"#"Lucerne</a></li></ul></div>以下是css代码：
div{width:200px;}h2{font:40040px/1.5Helvetica,Verdana,sans-serif;margin:0;padding:0;}ul{list-style-type:none;margin:0;padding:0;}li{font:20020px/1.5Helvetica,Verdana,sans-serif;border-bottom:1pxsolid#ccc;}li:last-child{border:none;}lia{text-decoration:none;color:#000;display:block;width:200px;-webkit-transition:font-size0.3sease,background-color0.3sease;-moz-transition:font-size0.3sease,background-color0.3sease;-o-transition:font-size0.3sease,background-color0.3sease;-ms-transition:font-size0.3sease,background-color0.3sease;transition:font-size0.3sease,background-color0.3sease;}lia:hover{font-size:30px;background:#f6f6f6;}/strong>
2.图文混排的ThumbnailList
这是一种在良多网站上都用得对照广泛的列表款式，“图文混排”，图文混排常常比单一的笔墨更能吸惹人的眼球，良多wordpress的博客网站都是用图文混排的板式。
这里是源码demo地点：CodePen.
先看最终效果：
以下是html代码：
<div><ul><li><h3>Headline</h3><p>Loremipsumdolorsitamet...</p></li><li><h3>Headline</h3><p>Loremipsumdolorsitamet...</p></li></ul></div>比起下面的例子来，这里的代码要庞大一些。每一个列表元素都有三个子元素：图片，题目，笔墨先容。注重图片的巨细这里需被流动为100px乘以100px，否则加在的图片巨细纷歧会使排版凌乱，你能够在html代码里强迫设置为这个巨细。总的来讲完成起来仍是对照复杂的。
以下是css代码：
*{margin:0;padding:0;}div{margin:20px;}ul{list-style-type:none;width:500px;}h3{font:bold20px/1.5Helvetica,Verdana,sans-serif;}liimg{float:left;margin:015px00;}lip{font:20012px/1.5Georgia,TimesNewRoman,serif;}li{padding:10px;overflow:auto;}li:hover{background:#eee;cursor:pointer;}css代码页很冗长。我们重设了一切元素的margin和padding。这里只需记着将图片向左浮动，如许笔墨就会紧挨着跟在前面。
3.尺度的图片网格StandardThumbnailGrid
这里是源码demo地点：CodePen.
最终效果：
以下是html代码：
<div><ul><li><ahref=<"#"</a></li><li><ahref=<"#"</a></li><li><ahref=<"#"</a></li><li><ahref=<"#"</a></li><li><ahref=<"#"</a></li><li><ahref=<"#"</a></li><li><ahref=<"#"</a></li><li><ahref=<"#"<imgsrc=<"http://placehold.it/150x150"/></a></li></ul></div>/p>
以下是css代码：
*{margin:0;padding:0;}body{background:#333;}div{width:900px;margin:0auto;overflow:auto;}ul{list-style-type:none;}liimg{float:left;margin:10px;border:5pxsolid#fff;-webkit-transition:box-shadow0.5sease;-moz-transition:box-shadow0.5sease;-o-transition:box-shadow0.5sease;-ms-transition:box-shadow0.5sease;transition:box-shadow0.5sease;}liimg:hover{-webkit-box-shadow:0px0px7pxrgba(255,255,255,0.9);box-shadow:0px0px7pxrgba(255,255,255,0.9);}这里的重点是给每张图片加上必定的margin然后向左浮动，然后用over-flow:auto扫除浮动（为保险起见，用了浮动以后必定要扫除浮动）。给全部网格增加玄色背景，给每张图片加上边框。为了让网格更风趣，我加上了一个鼠标画上往显现发光的效果。你能够选择性的利用，不用将这个效果用在每个项目中。
4.程度菜单HorizontalMenu
在这里检察demo和源码CodePen.
html代码：<nav><ul><li><ahref=<"#"Home</a></li><liclass=<"active"<ahref=<"#"About</a></li><li><ahref=<"#"Portfolio</a></li><li><ahref=<"#"Contact</a></li></ul></nav>css代码：
*{margin:0;padding:0;}nav{margin:50px;}ul{overflow:auto;list-style-type:none;}li{height:25px;float:left;margin-right:0px;border-right:1pxsolid#aaa;padding:020px;}li:last-child{border-right:none;}lia{text-decoration:none;color:#ccc;font:25px/1Helvetica,Verdana,sans-serif;text-transform:uppercase;-webkit-transition:all0.5sease;-moz-transition:all0.5sease;-o-transition:all0.5sease;-ms-transition:all0.5sease;transition:all0.5sease;}lia:hover{color:#666;}li.activea{font-weight:bold;color:#333;}5.年夜数字开首的列表BigNumbersOrderedList
下面先容的都是无序的列表，假如我们想要一个有序的列表，在每个列表元素的最开首加上数字能提醒用户这是一个按按次分列的内容。假如能将这个数字的款式显现的分歧，将会有更好的直不雅感觉。
在这里检察demo和源码CodePen.
html代码：
<div><ol><li><span>1.</span><p>Loremipsumdolorsitamet,consecteturadipiscingelit.Praesenteuismodultricesante,aclaoreetnullavestibulumadipiscing.Namquisjustoinaugueauctorimperdiet.Curabituraliquetorcisitametestposuereconsectetur.Fuscenecleoutmassaviverravenenatis.Namaccumsanliberoaelitaliquetquisullamcorperarcutincidunt.Praesentpurusturpis,consecteturquisconguevel,pulvinaratlorem.Vivamusvariuscondimentumdolor,quisultriciesipsumportaquis.</p></li><li><span>2.</span><p>Loremipsumdolorsitamet,consecteturadipiscingelit.Praesenteuismodultricesante,aclaoreetnullavestibulumadipiscing.Namquisjustoinaugueauctorimperdiet.Curabituraliquetorcisitametestposuereconsectetur.</p></li><li><span>3.</span><p>Loremipsumdolorsitamet,consecteturadipiscingelit.Praesenteuismodultricesante,aclaoreetnullavestibulumadipiscing.Namquisjustoinaugueauctorimperdiet.Curabituraliquetorcisitametestposuereconsectetur.</p></li></ol></div>css代码：
div{width:500px;margin:10px}ol{color:#ccc;list-style-type:none;}olli{position:relative;font:bolditalic45px/1.5Helvetica,Verdana,sans-serif;margin-bottom:20px;}lip{font:12px/1.5Helvetica,sans-serif;padding-left:60px;color:#555;}span{position:absolute;}下面就是5个复杂而又有用的列表实例，假如你喜好，能够间接拿往用。
</p>
有了CSS，我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题，改变字体颜色，字体样式等等 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。 我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。 我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。 由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。 还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
页:
[1]