Python学习第74天(抽屉习题笔记)
css听的有点腻了,感觉还是需求带动求知的渴望吧,不多说,把今天这部分内容说了我决定跳过他开始js的学习。
假设下面存在页码和乱七八糟的东西。其实就是这些:
先按照上面的找到文档原有的html部分先,跟着写了一下,大致就是下面这个样子
可以分为这些部分,然后我们就加上style,主要就是练习这个,学的慢,看的都要吐了
<style> .main-content-box{ background-color: lightgrey; padding-top: 44px; } .main-content{ background-color: white; margin: 0 auto; width:1016px; height: auto!important; min-height: 700px; overflow: hidden; } .main-content .content-L{ float: left; width: 630px; margin-top: 10px; margin-left: 5px; } .content-L .top-area{ border-bottom: 1px solid #b4b4b4; height: 40px; } .top-area .child-nav{ float: left; } .top-area .child-nav a{ display: inline-block; width: 60px; height: 26px; line-height: 26px; color: #369; text-align: center; } .top-area .child-nav .active{ background: url("images/tip.png") no-repeat 0 -299px; color: black; font-weight: bolder; } .sort-nav{ float: left; margin-left: 120px; margin-top: 7px; } .sort-nav a{ display: inline-block; text-align: center; color: #390; margin-left: 10px; } .sort-nav .active{ color: #b4b4b4; } .publish-btn{ float: right; display: inline-block; width: 136px; height: 32px; background-color: #84a42b; color: white; font-size: 16px; text-align: center; line-height: 32px; } .content-list .item{ border-bottom: 1px solid #b4b4b4; padding-top: 10px; } .content-list .item .news-pic{ float: right; } .content-list .item .part1{ line-height: 20px; } .content-list .item .part1:hover a.show-content{ text-decoration: underline; } .content-list .item .part2{ padding: 10px 0; color: #99aecb; } .part2 .hand-icon{ background: url("images/icon_18_118.png") no-repeat 0 0; display: inline-block; width: 18px; height: 18px; } .part2 .icon-recommend{ background-position: 0 -40px; } .part2 .recommend:hover .icon-recommend{ background-position: 0 -20px; } .part2 .icon-discuss{ background-position: 0 -100px; } .part2 .discuss:hover .icon-discuss{ background-position: 0 -80px; } .part2 .icon-collect{ background-position: 0 -160px; } .part2 .collect:hover .icon-collect{ background-position: 0 -140px; } .part2 a{ margin-left: 8px; } .part2 a b,.part2 span i{ vertical-align: 4px; font-size: 14px; } .share-site-to{ float: right; } .share-site-to .share-icon a{ display: inline-block; background: url("images/share_icon.png") no-repeat 0 0; opacity: .3; } .share-icon a.icon-sina{ background-position: 0 -90px; width: 17px; height: 14px; } .share-icon a.icon-douban{ background-position: 0 -105px; width: 17px; height: 14px; } .share-icon a.icon-qqzone{ background-position: 0 -120px; width: 17px; height: 14px; } .share-icon a.icon-renren{ background-position: 0 -151px; width: 17px; height: 14px; } .share-icon a.icon-tenxun{ background-position: 0 -136px; width: 17px; height: 14px; } .share-site-to { display: none; } .item:hover .share-site-to{ display: inline-block; } .share-site-to .share-icon a:hover{ opacity: 1; } .page-area ul li{ display: inline-block; } .page-area ul li a{ display: inline-block; /*float: left;*/ color: #369; height: 34px; line-height: 34px; text-align: center; width: 34px; border: 1px solid #e1e1e1; border-radius: 15%; margin-left: 5px; } .page-area ul li a.page-next{ width: 90px; } .page-area ul li a:hover{ background-color: #369; color: white; } .page-area{ margin-left: 50px; } .main-content .content-R{ float: left; } .footer-box { clear: both; margin: 0 auto; width: 960px; background-color: #fff; border-top:1px solid #dce7f4;; } .footer-box .foot-nav { padding-top: 15px; text-align: center; border-top: 1px solid #ccdcef; /*position: relative;*/ } .footer-box .foot-nav2 { margin-top: 6px; margin-bottom: 15px; text-align: center; } .foot_b { color: #999; font-size: 12px; } </style>
就是上面这些了,我决定了,跳过css部分,因为我暂时用不上这么多花里胡哨的功能,明天正式开始js部分。