css布局实现带分页的无限级嵌套评论回复列表及表单效果代码
代码语言:html
所属分类:表格
代码描述:采用css布局实现了带分页的无限级嵌套评论回复列表及评论表单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> body { background: none repeat scroll 0 0 #5c959a; color: #FFFFFF; font-family: 'Lato',Arial,sans-serif; margin:0; padding:0; } .container { padding: 40px; height: auto; } header { text-align: center; margin: 0 auto; max-width: 100%; position: relative; padding-bottom:4em; } h1 { font-size: 2.625em; font-weight: 300; line-height: 1.3; margin: 0; } .menus { padding: 2em 0 3em; } .menus a { display: inline-block; margin: 0.5em; padding: 0.7em 1.1em; outline: none; background:#FFFFFF; color: rgba(0,0,0,0.3); text-decoration: none; font-weight: 700; opacity: 1; -webkit-transition: all 0.2s; transition: all 0.2s; color:#608ebd; } .menus a:hover{ color:#0156ac; } .bottom { padding-top: 6em; color: rgba(0,0,0,0.4); text-align:center; } .bottom a { display: inline-block; margin-top: 0.5em; color:#FFFFFF; text-decoration:none; } /* Feedbacks*/ .diskaform{ width:700px; margin: 0 auto; overflow:auto; } .diskaform .heading{ width:100%; float:left; padding-bottom:20px; border-bottom:solid; margin-bottom:20px; } .diskaform h1 { font-size: 2.625em; margin: 0; float:left; font-weight:bold; } .diskaform h3{ clear:both;} .diskaform h1 small{ font-size:14px; position:relative; bottom:28px; } .diskaform a{ color:#0b666e; text-decoration:none; } .diskaform a:hover, .diskabtn:hover{ background:#064348; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; } .addcomment{ float:right;} /* List comments*/ .diskaform ol{ clear: both; overflow: hidden; margin:0; padding:0; } .diskaform ol li, .diskameta .diskathumb { background-color: #FFFFFF; border: 1px solid #F4F4F4; list-style: none outside none; margin: 0 0 20px 35px; padding: 4px; } .diskaform article { position: relative; } .diskameta { background: none repeat scroll 0 0 #C9C9C9; height: auto; line-height: 37px; min-height: 37px; padding-left: 10px; position: relative; } .diskameta .diskathumb { display: block; left: -40px; margin: 0; position: absolute; top: 50px; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; } .diskameta .diskathumb img { display: block; cursor:pointer; height: auto; max-width: 100%; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; } .diskameta .diskathumb img:hover{ opacity: .7; transform:scale(1.2); -ms-transform:scale(1.2); /* IE 9 */ -moz-transform:scale(1.2); /* Firefox */ -webkit-transform:scale(1.2); /* Safari and Chrome */ -o-transform:scale(1.2); /* Opera */ -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; } .diskaauthorname { color: #333333; font-size: 16px; line-height: 37px; } .diskadate { display: inline; float: right; font-size: 12px; margin-right: 10px; text-transform: uppercase; } .diskadate:hover{ background:none !important;} .diskanumber { bottom: 23px; color:#c9c9c9; font-size: 36px; line-height: 36px; position: absolute; right: 10px; } .diskacontent{ font-size: 0.95em; line-height: 1.5; padding: 20px 55px 30px 45px; position: relative; color:#333333; } .diskareply a { bottom: 3px; display: block; font-size: 12px; position: absolute; right: 12px; text-transform: uppercase; } .diskareply a:hover{ background:none !important; } .diskaform .depth-1{ margin: 12px 0 12px 5px; } .diskaform .depth-2{ margin: 12px 0 12px 30px; } .diskaform .depth-3{ margin: 12px 0 12px 60px; } /* Pagination*/ .diskapagination { padding: 20px 0; display:block; text-align:center; } .diskapagination a { background:#0B666E; padding:10px; color:#FFFFFF; } .diskapagination .active { padding:10px; background:#C9C9C9; color:#0B666E; } /* Form CSS*/ .diska-prepend{ margin-bottom:10px; width:100%; } .diskaddon{ color:#0b666e; float:left; padding:8px; width:5%; background:#FFFFFF; text-align:center; border-right:solid 1px #999999; } .diskafield { color:#000000; background:#FFFFFF; border:none; padding:15.5px; width:87.90%; display:block; font-family: 'Lato',Arial,sans-serif; font-size:14px; } .diskafield { font-family: 'Lato',Arial,sans-serif; } .diskabtn, .addcomment{ display:block; border:none; background:#0b666e; float:right; color:#FFFFFF !important; padding:16px; cursor:pointer; text-decoration:none; } </style> </head> <body> <div class="container"> <header> <h1>Diska - Feedbacks & Comment Form</h1> </header> <div class="diskaform"> <div class="heading"> <h1>Feedback <small>36</small></h1> <a class="addcomment" href="#respond">Leave a comment</a> </div> <ol> <li> <article> <div class="diskameta"> <div class="author"> <span class="diskathumb"> <img src="//repo.bfw.wiki/bfwrepo/icon/5dfc86e11b524.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_50,h_50,/quality,q_90" alt="author"/> </span> <span class="diskaauthorname">Grace Fleming</span> <a href="#" class="diskadate">January 1, 2014 at 10:10</a> </div> </div> <div class="diskanumber">1</div> <div class="diskacontent"> Great! It's look amazing. I love <strong>Diska FCF.</strong> Thanks for making this , now my website look much more better then before. Looking forward more amazing item form you. </div> <div class="diskareply"> <a href="#">Reply</a></div> </article> </li> <li> <article> <div class="diskameta"> <div class="author"> <span class="diskathumb"> <img src="//repo.bfw.wiki/bfwrepo/icon/5dfc86e11b.........完整代码请登录后点击上方下载按钮下载查看
网友评论0