DIV+CSS教程
用css3选择器给你要的第几个元素添加不同样式方法
所属栏目：　时间：　来源：　作者：yecha　点击：
很多时候,我们写网页样式时候会遇到如下面图这种的, 第4个li下面有一行虚线什么的,这样循环,那么,如何很方便的用css实现呢!我们写的html代码 实例如下:&ul&class=&list&&
&&&&&li&&a&href=&#&&１·这里是一流资源网信息标题&/a&&/li&
&&&&&li&&a&href=&#&&２·这里是一流资源网信息标题&/a&&/li&
&&&&&li&&a&href=&#&&３·这里是一流资源网信息标题&/a&&/li&
&&&&&li&&a&href=&#&&４·这里是一流资源网信息标题&/a&&/li&
&&&&&li&&a&href=&#&&５·这里是一流资源网信息标题&/a&&/li&
&&&&&li&&a&href=&#&&６·这里是一流资源网信息标题&/a&&/li&
&&&&&li&&a&href=&#&&７·这里是一流资源网信息标题&/a&&/li&
&&&&&li&&a&href=&#&&８·这里是一流资源网信息标题&/a&&/li&
&/ul&效果如图:下面我们来了解一下css选择器里面的几个:only-childp:only-child选择属于其父元素的唯一子元素的每个 &p& 元素。3:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个 &p& 元素。3:nth-last-child(n)p:nth-last-child(2)同上，从最后一个子元素开始计数。3:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个 &p& 元素的每个 &p& 元素。3:nth-last-of-type(n)p:nth-last-of-type(2)同上，但是从最后一个子元素开始计数。3:last-childp:last-child选择属于其父元素最后一个子元素每个 &p& 元素。3:first-childp:first-child选择属于父元素的第一个子元素的每个 &p& 元素。我们可以使用&:nth-child(n) &来自动判断第4个css代码如下&style&
.list&li:nth-child(4n){&border-bottom:1px&dashed&#}&/*4n就是4的倍数都加这个样式*/
&/style&则效果如图!当然,上面我介绍了一堆选择器,使用方法都差不多,例如 要给第一句加样式,则可以这样&style&
.list&li:first-child{&border-bottom:1px&dashed&#}&/*first-child就是第一个元素*/
&/style&其他用法也是一样的! 大家需要的就学习一下吧 下面给大家个演示!
请站长喝杯咖啡？
站长一直坚持白天工作、晚上熬夜更新素材，付出了巨大的精力和时间，其中的辛酸难以言述。坚持免积分、免登录、无任何限制下载！如果本站素材对你有用，不妨考虑请站长喝杯咖啡鼓励一下！
你应该也喜欢这些吧
给个评价吧
学习最多的
最近更新的
2014全新改版上线
2013全新改版上线4874人阅读
&style & media=&print&& & & .Noprint & { & DISPLAY: &} & & .PageNext & { & PAGE-BREAK-AFTER: & always & }&&&&/style&&&
①、不需要打印的对象要用上&Noprint&样式。
②、需要换页处理的对象要用上&PageNext&样式。
③、因为最后一页不用加入换页符，所以要控制最后一页不要使用该样式。个人感觉用PAGE-BREAK-BEFORE属性控制第一页要方便一些。
=====================================================================================
page-break-before和page-break-after（来自网络）
page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的打印方式。每个打印属性都可以设定4种设定值：auto、always、left和right。
Auto：是默认值，只有在有需要时，才需设定分页符号 (Page breaks)。
page-break-before若设定成always：则是在遇到特定的组件时，打印机会重新开始一个新的打印页。
page-break-before若设定成left：则会插入分页符号，直到指定的组件出现在一个左边的空白页上。
page-break-before若设定成right：则会插入分页符号，直到指定的组件出现在一个右边的空白页上。
page-break-after属性会将分页符号加在指定组件后，而非之前。
设置为left或right 与 设置为alvays究竟有什么区别，上面红色字体的说明看不明白，希望看到贴字的明白人指点一二。
不过用&always&值再加以控制一般的问题都能解决，以下为例子：
&&HTML& &HEAD& &TITLE&Listing 14-4&/TITLE& &/HEAD& &BODY& &DIV&This is the first DIV.&/DIV& &DIV STYLE=&page-break-before:always&&This is the second DIV.&/DIV& &DIV STYLE=&page-break-before:always&&This is the third DIV.&/DIV& &DIV STYLE=&page-break-before:always&&This is the fourth DIV.&/DIV& &/BODY& &/HTML&
&HTML& &HEAD& &TITLE&Listing 14-4&/TITLE& &/HEAD& &BODY& &DIV STYLE=&page-break-after:always&&This is the first DIV.&/DIV& &DIV STYLE=&page-break-after:always&&This is the second DIV.&/DIV& &DIV STYLE=&page-break-after:always&&This is the third DIV.&/DIV& &DIV&This is the fourth DIV.&/DIV& &/BODY& &/HTML&
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：55597次
排名：千里之外
原创：11篇
转载：27篇
(1)(4)(1)(1)(1)(3)(3)(1)(1)(1)(3)(1)(8)(1)(6)(2)(1)前端工程师的未来
2-3年工程经验
30-50万年薪
30-45万年薪
发展前景，期权股票
30-60万年薪
高薪高期权
大牛导师团队
三次创业（易物集、笑你妹、Chasefuture)
15年IT项目经验(雅诗兰黛、雅高企业服务)
香港大学MBA, 现任1KE CTO
华师大留学期间学习中文
并创办Shanghai Web Dev. Club
现任硅谷编程老师
连续创业者，硅谷编程老师
大学路创业公司资深前端
前沿技术GET
前端工程师职业素养
1KE授课方式
1KE学习方法
服务器相关名词解释
工具、代码管理、学习网站介绍
HTML页面初识
HTML 发展史
创建一个HTML文件
PS基础,Dreamweaver基础
实战作业：完成一个EDM页面的制作
HTML、CSS基础
上节作业答疑
JS代码初识
Sublmine编辑器的使用
Chrome调试工具
Bootstrap模板页面的修改
实战作业 ：用Bootstrap模板完成一个商业网站
CSS+DIV布局
上节作业答疑
块级元素 行内元素
DIV 排版布局 （巧用浮动，绝对定位）
居中的实现方式
实战作业：用纯CSS+DIV完成页面布局的几个练习
CSS+DIV布局二
上节作业答疑
CSS选择器详解及优先级
三种定位机制
图片圆角 背景定义
流体布局 弹性布局
IE兼容 Hack
Media Query 在响应式页面上的工作原理
实战作业：用纯CSS+DIV重构Bootstrap模板
JavaScript基础
上节作业答疑
编程基础的思路
JS基础语法
作业实战：99乘法表 和 斐波纳契数列
JavaScript实战
上节作业答疑
按钮事件绑定
页面表单基础GET/POST
常用的DOM操作
作业实战：用原生JS代码实现户注册表单验证 含AJAX请求
jQuery基础
上节作业答疑
jQuery历史和发展
$()函数的实现
jQuery的使用
Window.onload与$(document).ready()
jQuery选择器
用jQuery作动画
callback函数
jQuery常用的DOM操作函数
jQuery的AJAX方法
作业实战：将用户注册表单验证改为用jQuery实现，用jQuery实现一个to do list
jQuery应用
上节作业答疑
jQuery事件绑定 事件冒泡
案例分析1 伸缩菜单的实现
案例分析2 鼠标移上去图片放大效果的实现
案例分析3 图文分页滚动的实现
案例分析4 电商整站代码分析
作业实战：根据素材实现一个电商页面的排版和特效，含添加到购物车的动态效果
上节作业答疑
HTML5的兼容问题
手机端的适配
HMLT5新增标签的介绍
应用程序缓存
Form表单的新特性
作业实战：根据页面设计图完成页面页面排版，要求在页面布局上启用HTML5新标签，实现视频播放；用jQuery实现登录验证，AJAX的登录请求，弹出浮动层
上节作业答疑
CSS3的浏览器兼容写法
CSS3的新特性
HSL和HSLA色彩模式
linear-gradient
利用边框做出三角形
做一个对话气泡
Box-sizing
CSS3兼容原则
作业实战：根据指定视频学习，实现一个完整的H5页面，用CSS3完成滚屏和动画特效
Bootstrap框架
Bootstrap基础
响应式页面实现原理
作业实战：用Bootstrap框架完成之前网站项目的重构
Bootstrap实战
苹果官网的制作过程
作业实战：根据视频做一个山寨版的苹果官网页面
微信H5页面实战
微信接入介绍
手机端页面的排版布局
表单验证AJAX JSON实战
作业实战：实现一个完整的手机版页面
毕业证发放
面试答疑(选)简历指导(选)
第十一周及以后
企业实战项目
实战项目面试
企业带薪(选)项目
第十一周及以后
开始制作自己的第一个网页，你也可以
有任何疑问请关注1KE微信助手咨询
不定期发送福利，还会有大牛现身微信群分享技能如何实现附件中的效果，要求用asp.net(c#)div+css来做，把存在数据库中的图片用DIV显示成一个列表，并可以分页显示。如这个效果一个：
附件:您需要才可以下载或查看附件。没有帐号?
repeater控件,里面放div标签,想怎么摆放就怎么摆放
楼上这位同志正解.
楼主想复杂了
我们站上有很多关于分页的代码&&可以到首页搜索栏 搜索分页 下载几个参考一下吧
积分换礼品：.NET小常识：.NET相关帮助：源码下载：欢迎大家来论坛交流！
我知道楼上说的把DIV放在Repeater里面，但我不知道分页的代码怎么写.
wanglinrita
分页的代码在可以在数据库中用