课程列表:


自定义滚动条课程001-html和样式的编写







为什么开这个课程

只要你真的工作过,这个问题就很好回答,相信你在开发系统或使用系统的过程中经常会被人说项目不美观不高大上,或者你说别人的系统太难看的情况,我们开着个课程也就是尝试去学习解决这个问题,尝试去做些 
努力来提高系统的美观度和体验度。我是一个做政府项目的工程师,其实就是一码荣,不过咋程序员也是有追求的,所以我们要自爱,不应该这么亲践自己是马蓉,我就是工程师高大上咋滴。废话不多说,我想你也知道很多政府机构的人员可能对技术不是很清楚,不过他们对外表还是会有一些要求的。看到别人的系统高大上了你就得跟着高大上,或者说你的系统高大上了你就有资本说服他给你钱。哈哈,废话说了一大堆,其实我们这个课程的目的就是把大家决定非常难看的滚动条给干掉去,然后给浏览器开发一个我们自己觉得很高大上的滚动条,其实这是自己作死,不过作为工程师还是要有点追求的。

  • 我相信看此文章的部分网友还是曾经尝试过或想过自己去做一个自己的滚动条,但是作为不是专业前端的我们要写这么个玩意儿实在是静不下心来,其实我也一样,但是有时前端又总是推脱,说这玩儿意没法改,说ie浏览器不支持,不让改啥的,哎作死程序员(我们)可能就是不相信有做不了的事情,所以就有自己动手的冲动了,于是我也冲动了一把,自己找资料来写写,看看他们是不是在忽悠我。于是有了下文。

  • 以下先呈上个人照着课程写的一个自定义滚动条的HTML页面及CSS,下节课将呈上交互模块,通过此课程我相信你就可以自行的和前端说这玩意儿是可以自己写的是可以高大上,请你不要再忽悠我了。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>scroll</title>
  6. <link rel="stylesheet" type="text/css" href="css/reset.css"/>
  7. <style type="text/css">
  8. body{
  9. background: #ccc;
  10. }
  11. .scroll-demo{
  12. width:540px;
  13. border: 1px solid #e5e5e5;
  14. background: #fff;
  15. margin: 30px auto;
  16. }
  17. /**便签切换区*/
  18. .scroll-tab{
  19. height: 34px;
  20. border-bottom: 1px solid #E5E5E5;
  21. color: #666;
  22. background: #f8f8f8;
  23. }
  24. .scroll-tab .tab-item{
  25. float: left;
  26. font:14px/34px "microsoft yahei";
  27. height: 34px;text-align: center;
  28. border-right: 1px solid #E5E5E5;
  29. padding: 0 20px;
  30. }
  31. .scroll-tab .tab-active{
  32. color: #00be3c;
  33. background: #FFFFFF;
  34. border-top: 2px solid #00BE3C;
  35. margin: -1px 0;
  36. }
  37. /**滚动内容取*/
  38. .scroll-wrap{
  39. position: relative;
  40. width: 100%;
  41. height: 300px;
  42. }
  43. /**滚动内容*/
  44. .scroll-wrap .scroll-cont{
  45. height: 100%;
  46. padding: 0 15px;
  47. overflow: hidden;
  48. }
  49. .scroll-wrap .scroll-cont{
  50. font:14px/3 "microsoft yahei";
  51. margin-bottom: 10px;
  52. text-indent: 2em;
  53. line-height: 20px;
  54. }
  55. .scroll-wrap .scroll-bar{
  56. position: absolute;
  57. top: 0;
  58. right: 0;
  59. width: 10px;
  60. height: 100%;
  61. background-color: #eaeaea;
  62. }
  63. /**滑块*/
  64. .scroll-wrap .scroll-slider{
  65. position: absolute;
  66. top: 0;
  67. left: 1px;
  68. width: 8px;
  69. height: 30px;
  70. background-color: #fff;
  71. }
  72. </style>
  73. </head>
  74. <body>
  75. <!--
  76. 作者:NoteShare
  77. 时间:2016-09-23
  78. 描述:自定义滚动条
  79. -->
  80. <div class="scroll-demo">
  81. <!--标签切换区-->
  82. <ul class="scroll-tab clearfix">
  83. <li class="tab-item tab-active">第一篇</li>
  84. <li class="tab-item">第二篇</li>
  85. <li class="tab-item">第三篇</li>
  86. <li class="tab-item">第四篇</li>
  87. </ul>
  88. <!--滚动内容区-->
  89. <div class="scroll-wrap">
  90. <!--滚动内容-->
  91. <div class="scroll-cont">
  92. 很多新人都很关心的问题,掌握了SEO技术能做什么?下面总结几种SEO赚钱的方式,刚开始做的新手可以先去网络公司打工,等有经验了和一定的人脉资源,可以开办一家网站优化工作室。
  93. 掌握SEO技术盈利覆盖面较广,可以参考以下几点!
  94. 1、提供搜索引擎排名服务赚钱:
  95. 服务对象:中小企业网站
  96. 适合对象:SEO新手
  97. 收费模式:按照关键词收费
  98. 2、利用SEO打造大流量网站:
  99. 适合对象:SEO熟练者+网站制作高手
  100. 赚钱模式:收取广告费
  101. 3、利用SEO和传统贸易公司合作
  102. 适合对象:有传统生意基础的SEO人员
  103. 赚钱模式:销售产品
  104. 4、SEO+CPA销售联盟
  105. 适合对象:SEO人员,英文好的优先
  106. 赚钱模式:赚取佣金
  107. 5、SEO顾问服务:
  108. 服务对象:大中型网站
  109. 适合对象:经验丰富的SEO
  110. 赚钱模式:按照时间收取顾问费、按照项目收入费用。
  111. 6、给别的公司打工:
  112. 服务对象:大型网站或者公司
  113. 适合对象:不想创业的SEO人员
  114. 赚钱模式:按月领取工资
  115. 赚钱流程:听从公司安排做对应的工作。
  116. 总结:掌握好SEO技术不仅能够通过优化企业网站接单赚钱,也可以优化行业网站采取合作的方式赚钱,SEO技术是一个能把任何产品都能够摆到用户面前的一个技术手段,掌握好SEO技术就能免费够获得更多潜在用户,最后实现盈利目的。
  117. 很多新人都很关心的问题,掌握了SEO技术能做什么?下面总结几种SEO赚钱的方式,刚开始做的新手可以先去网络公司打工,等有经验了和一定的人脉资源,可以开办一家网站优化工作室。
  118. 掌握SEO技术盈利覆盖面较广,可以参考以下几点!
  119. 1、提供搜索引擎排名服务赚钱:
  120. 服务对象:中小企业网站
  121. 适合对象:SEO新手
  122. 收费模式:按照关键词收费
  123. 2、利用SEO打造大流量网站:
  124. 适合对象:SEO熟练者+网站制作高手
  125. 赚钱模式:收取广告费
  126. 3、利用SEO和传统贸易公司合作
  127. 适合对象:有传统生意基础的SEO人员
  128. 赚钱模式:销售产品
  129. 4、SEO+CPA销售联盟
  130. 适合对象:SEO人员,英文好的优先
  131. 赚钱模式:赚取佣金
  132. 5、SEO顾问服务:
  133. 服务对象:大中型网站
  134. 适合对象:经验丰富的SEO
  135. 赚钱模式:按照时间收取顾问费、按照项目收入费用。
  136. 6、给别的公司打工:
  137. 服务对象:大型网站或者公司
  138. 适合对象:不想创业的SEO人员
  139. 赚钱模式:按月领取工资
  140. 赚钱流程:听从公司安排做对应的工作。
  141. 总结:掌握好SEO技术不仅能够通过优化企业网站接单赚钱,也可以优化行业网站采取合作的方式赚钱,SEO技术是一个能把任何产品都能够摆到用户面前的一个技术手段,掌握好SEO技术就能免费够获得更多潜在用户,最后实现盈利目的。
  142. </div>
  143. <!--滚动条-->
  144. <div class="scroll-bar">
  145. <!--滚动滑块-->
  146. <div class="scroll-slider"></div>
  147. </div>
  148. </div>
  149. </div>
  150. </body>
  151. </html>

重置css:reset.css

  1. html, body, div, span, applet, object, iframe, h1, h2, h3,
  2. h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
  3. big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
  4. small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
  5. fieldset, form, label, legend, table, caption, tbody, tfoot,
  6. thead, tr, th, td {
  7. margin: 0;
  8. padding: 0;
  9. border: 0;
  10. outline: 0;
  11. font-weight: inherit;
  12. font-style: inherit;
  13. font-size: 100%;
  14. font-family: inherit;
  15. vertical-align: baseline;
  16. }
  17. :focus {
  18. outline: 0;
  19. }
  20. table {
  21. border-collapse: separate;
  22. border-spacing: 0;
  23. }
  24. caption, th, td {
  25. text-align: left;
  26. font-weight: normal;
  27. }
  28. a img, iframe {
  29. border: none;
  30. }
  31. ol, ul {
  32. list-style: none;
  33. }
  34. input, textarea, select, button {
  35. font-size: 100%;
  36. font-family: inherit;
  37. }
  38. select {
  39. margin: inherit;
  40. }
  41. /* Fixes incorrect placement of numbers in ol’s in IE6/7 */
  42. ol { margin-left:2em; }
  43. /* == clearfix == */
  44. .clearfix:after {
  45. content: “.”;
  46. display: block;
  47. height: 0;
  48. clear: both;
  49. visibility: hidden;
  50. }
  51. .clearfix {display: inline-block;}
  52. * html .clearfix {height: 1%;}
  53. .clearfix {display: block;}

效果图

自定义滚动条课程001-html和样式的编写

自定义滚动条课程001-html和样式的编写


下节课将呈上自定义滚动条的交互部分,尽情继续关注!!!


作者:星辰 时间:2016-09-23 浏览 1051评论 0 赞 0砸 0 标签: 课程 前端 demo css
评论
还可以再输入500个字

请您注意

·自觉遵守:爱国、守法、自律、真实、文明的原则
·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在NoteShare上发表的作品,NoteShare有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款