接着之前的[css]我要用css画幅画(七) - 哆啦A梦,这次画的是Hello Kitty。

  1. /*
  2. 开始前先说点废话, 一转眼就2016年了,过完年后一直没更新博客,无他,就是懒得动。 这一转眼,一年就过了1/4多了。
  3.  
  4. 现在依然处在迷茫状态,时间一直浪费下去也是白浪费,在找到新的目标前,暂时先继续之前做的事吧,免得时间过了又觉得可惜。
  5.  
  6. */

一点个人牢骚,可忽略

这个hello kitty画下来,非常拖沓,慢慢调样式实在太沉闷了,而且感觉只是在重复自己,所以没啥动力继续。

这次的hello kitty比哆啦A梦简单很多,本身是可以很快就完成的。 不过由于没啥动力, 画的慢,而且也粗糙。

反正终于是完成了, 先发出来, 以后有动力再调整吧。

Github Demo:http://bee0060.github.io/Css-Paint/pages/carton/hello-kitty.html

Code Pen Demo: http://codepen.io/bee0060/pen/YqePNr

代码:https://github.com/bee0060/Css-Paint

这次要临摹的图片如下:

因为哆啦A梦的经验,这次已经感觉并不困难,而且发现哆啦A梦的CSS中有部分样式可以重用, 于是我把这些样式抽出来做成公用样式,并引用进来,公用样式如下:

  1. /*位置选择器*/
  2. .clearfix {
  3. clear: both;
  4. }
  5.  
  6. .pos-a {
  7. position: absolute;
  8. }
  9.  
  10. .pos-r {
  11. position: relative;
  12. }
  13.  
  14. .pull-left {
  15. float: left;
  16. }
  17.  
  18. .pull-right {
  19. float: right;
  20. }
  21.  
  22. .m-hoz-auto {
  23. margin-left: auto;
  24. margin-right: auto;
  25. }
  26.  
  27. .left-32 {
  28. left: 32px;
  29. }
  30.  
  31. .left-5 {
  32. left: 5px;
  33. }
  34.  
  35. .top-30 {
  36. top: 30px;
  37. }
  38.  
  39. /*形状选择器*/
  40. .circle {
  41. border-radius: 50%;
  42. }
  43.  
  44. /*样式选择器*/
  45. .bacc-white {
  46. background-color: white;
  47. }
  48.  
  49. .bacc-black {
  50. background-color: black;
  51. }
  52.  
  53. .bacc-blue {
  54. background-color: rgb(2, 159, 227);
  55. }
  56.  
  57. .bacc-brown-red {
  58. background-color: rgb(216, 5, 23);
  59. }
  60.  
  61. .bacc-mouse-red {
  62. background-color: #E80115;
  63. }
  64.  
  65. .bacc-mouse-orange {
  66. background-color: #EF6C1C;
  67. }
  68.  
  69. .bacc-bell-yellow {
  70. background-color: #F5D600;
  71. }
  72.  
  73. .border-black-1 {
  74. border: 1px solid black;
  75. }
  76.  
  77. .border-black-2 {
  78. border: 2px solid black;
  79. }
  80.  
  81. .border-black-3 {
  82. border: 3px solid black;
  83. }
  84.  
  85. .oh {
  86. overflow: hidden;
  87. }

common.css

其中有小部分可重用,部分样式就不需要重新写了。 之前颗粒化的写样式,为这次的画带来了一点便利。 但我也感觉到,要让css的重用率更高,还需要更多思考和实践,目前的效果还不算好。

这次画的策略主要是用颜色的遮盖,例如身体,实现步骤如下:

1. 先画一个纯黑的身体形状

  1. <div class="pos-r">
  2. <div class="body-left pos-r pull-left"></div>
  3. <div class="body-right pos-r pull-left"></div>
  4. </div>

html

  1. .body-left {
  2. background-color: #000;
  3. border: 12px solid #000;
  4. border-top-left-radius: 90% 100%;
  5. border-bottom-left-radius: 70% 50%;
  6. border-bottom-right-radius: 60% 20%;
  7.  
  8. height: 240px;
  9. margin-left: 125px;
  10. margin-top: -43px;
  11. width: 135px;
  12. z-index:;
  13. }
  14.  
  15. .body-right {
  16. background-color: #000;
  17. border: 12px solid #000;
  18. border-top-right-radius: 100% 90%;
  19. border-bottom-left-radius: 60% 20%;
  20. border-bottom-right-radius: 70% 50%;
  21.  
  22. height: 240px;
  23. margin-left: -46px;
  24. margin-top: -43px;
  25. width: 135px;
  26. z-index:;
  27. }

css

2. 画粉红色的T恤盖上去

  1. <div class="pos-r">
  2. <div class="shirt-left pos-r pull-left">
  3. </div>
  4. <div class="shirt-right pos-r pull-left">
  5. </div>
  6. </div>

html

  1. .shirt-left {
  2. background-color: rgb(250, 167, 209);
  3. border-top-left-radius: 100% 100%;
  4. border-bottom-left-radius: 70% 50%;
  5. border-bottom-right-radius: 60% 20%;
  6.  
  7. height: 240px;
  8. margin-left: 140px;
  9. margin-top: -254px;
  10. width: 135px;
  11. z-index:;
  12. }
  13.  
  14. .shirt-right {
  15. background-color: rgb(250, 167, 209);
  16. border-top-right-radius: 115% 105%;
  17. border-bottom-left-radius: 60% 20%;
  18. border-bottom-right-radius: 70% 50%;
  19.  
  20. height: 240px;
  21. margin-left: 245px;
  22. margin-top: -254px;
  23. width: 135px;
  24. z-index:;
  25. }

css

3. 画桃红色的领口盖上去

  1. <div class="neck pos-r"></div>

html

  1. .neck {
  2. background-color: rgb(245, 74, 153);
  3. border: 12px solid #000;
  4. border-radius: 50%;
  5.  
  6. height: 110px;
  7. margin-left: 195px;
  8. margin-top: -72px;
  9. width: 100px;
  10. z-index:;
  11. }

css

4. 画白色的双脚盖上去(为了遮盖,放在了右边T恤的div里)

  1. <div class="shirt-right pos-r pull-left">
  2. <div class="feet-left pos-a pull-left"></div>
  3. <div class="feet-right pos-a pull-left"></div>
  4. </div>

html

  1. .feet-left {
  2. background-color: white;
  3. border: 12px solid #000;
  4. border-bottom-left-radius: 60% 100%;
  5. border-bottom-right-radius: 30% 50%;
  6.  
  7. height: 60px;
  8. margin-left: -118px;
  9. margin-top: 170px;
  10. width: 115px;
  11. z-index:;
  12. }
  13.  
  14. .feet-right {
  15. background-color: white;
  16. border: 12px solid #000;
  17. border-bottom-left-radius: 30% 50%;
  18. border-bottom-right-radius: 60% 100%;
  19.  
  20. height: 60px;
  21. margin-left: 10px;
  22. margin-top: 170px;
  23. width: 115px;
  24. z-index:;
  25. }

css

命名也遵照之前的规则,每个组件的命名都尽量可读。

这次画出来的比较粗糙, 和原图的区别还是比较明显的, 希望不会恶心到观众。 哈哈。

关键html:

  1. <div class="container pos-r pull-left">
  2. <div class="ear-left pos-a pull-left"></div>
  3. <div class="ear-right pos-a pull-left"></div>
  4. <div class="flower pos-a">
  5. <div class="leaf leaf-1 pos-a"></div>
  6. <div class="leaf leaf-2 pos-a"></div>
  7. <div class="leaf leaf-3 pos-a"></div>
  8. <div class="leaf leaf-4 pos-a"></div>
  9. <div class="leaf leaf-5 pos-a"></div>
  10. <div class="flower-center pos-a">
  11. <div class="flower-heart"></div>
  12. </div>
  13. </div>
  14. <div class="head pos-r">
  15. <div class="eye eye-left pos-a"></div>
  16. <div class="eye eye-right pos-a"></div>
  17. <div class="nose pos-r"></div>
  18. <div class="bread-left-1 pos-a oh">
  19. <div class="bread-left-1-inside"></div>
  20. </div>
  21. <div class="bread-left-2 pos-a oh">
  22. <div class="bread-left-2-inside"></div>
  23. </div>
  24. <div class="bread-left-3 pos-a oh">
  25. <div class="bread-left-3-inside"></div>
  26. </div>
  27. <div class="bread-right-1 pos-a oh">
  28. <div class="bread-right-1-inside"></div>
  29. </div>
  30. <div class="bread-right-2 pos-a oh">
  31. <div class="bread-right-2-inside"></div>
  32. </div>
  33. <div class="bread-right-3 pos-a oh">
  34. <div class="bread-right-3-inside"></div>
  35. </div>
  36. </div>
  37. <div class="pos-r">
  38. <div class="body-left pos-r pull-left"></div>
  39. <div class="body-right pos-r pull-left"></div>
  40. </div>
  41. <div class="neck pos-r"></div>
  42. <div class="pos-r">
  43. <div class="shirt-left pos-r pull-left">
  44. </div>
  45. <div class="shirt-right pos-r pull-left">
  46. <div class="feet-left pos-a pull-left"></div>
  47. <div class="feet-right pos-a pull-left"></div>
  48. </div>
  49. </div>
  50. <div class="left-hand pos-a">
  51. <div class="left-arm-shirt"></div>
  52. <div class="left-finger">
  53. <div class="left-finger-inside"></div>
  54. </div>
  55. </div>
  56. <div class="right-hand pos-a">
  57. <div class="right-arm-shirt"></div>
  58. <div class="right-finger">
  59. <div class="right-finger-inside"></div>
  60. </div>
  61. </div>
  62. </div>

关键css:

  1. /*卡通组件*/
  2. .container {
  3. height: 700px;
  4. width: 600px;
  5. }
  6.  
  7. .ear-left {
  8. border:15px solid #000;
  9. border-top-left-radius: 30%;
  10. border-top-right-radius: 100%;
  11. border-bottom-left-radius: 90%;
  12. height: 130px;
  13. margin-top: 42px;
  14. margin-left: 80px;
  15. width: 130px;
  16.  
  17. z-index:;
  18. -webkit-transform: rotate(5deg);
  19. -webkit-transform-origin: left top;
  20. }
  21.  
  22. .ear-right {
  23. border:15px solid #000;
  24. border-top-left-radius: 80% 65% ;
  25. border-top-right-radius: 15%;
  26. border-bottom-right-radius: 25% 95%;
  27. height: 100px;
  28. margin-top: 30px;
  29. margin-left: 255px;
  30. width: 130px;
  31.  
  32. z-index:;
  33. -webkit-transform: rotate(-10deg);
  34. -webkit-transform-origin: right top;
  35. }
  36.  
  37. .flower {
  38. margin-top: -8px;
  39. margin-left: 230px;
  40. }
  41.  
  42. .leaf {
  43. background-color: rgb(245, 74, 153);
  44. border: 12px solid #000;
  45. border-top-left-radius: 40px 45px;
  46. border-top-right-radius: 40px 45px;
  47. width: 40px;
  48.  
  49. border-bottom-color: rgb(245, 74, 153);
  50. z-index:;
  51. }
  52.  
  53. .leaf-1 {
  54. height: 55px;
  55. margin-left: 9px;
  56. margin-top: 17px;
  57. -webkit-transform: rotate(-30deg);
  58. }
  59.  
  60. .leaf-2 {
  61. height: 50px;
  62. margin-left: 84px;
  63. margin-top: 30px;
  64. -webkit-transform: rotate(50deg);
  65. }
  66.  
  67. .leaf-3 {
  68. height: 45px;
  69. margin-left: 89px;
  70. margin-top: 98px;
  71. -webkit-transform: rotate(120deg);
  72. }
  73.  
  74. .leaf-4 {
  75. height: 45px;
  76. margin-left: 30px;
  77. margin-top: 125px;
  78. -webkit-transform: rotate(190deg);
  79. }
  80.  
  81. .leaf-5 {
  82. height: 50px;
  83. margin-left: -18px;
  84. margin-top: 78px;
  85. width: 40px;
  86. -webkit-transform: rotate(-105deg);
  87. }
  88.  
  89. .flower-center {
  90. background-color: rgb(245, 74, 153);
  91. border-radius: 50%;
  92. height: 82px;
  93. margin-top: 64px;
  94. margin-left: 21px;
  95. width: 95px;
  96. z-index:;
  97. }
  98.  
  99. .flower-heart {
  100. background-color: rgb(245, 180, 4);
  101. border: 9px solid #000;
  102. border-radius: 50%;
  103. height: 23px;
  104. margin: 20px 25px;
  105. width: 23px;
  106. }
  107.  
  108. .head{
  109. background-color: #fff;
  110. border: 15px solid #000;
  111. border-top-left-radius: 50% 60%;
  112. border-top-right-radius: 50% 60%;
  113. border-bottom-left-radius: 51% 48%;
  114. border-bottom-right-radius: 51% 48%;
  115.  
  116. height: 260px;
  117. margin-top: 60px;
  118. margin-left: 60px;
  119. width: 355px;
  120.  
  121. z-index:;
  122. }
  123.  
  124. .eye {
  125. background-color: #000;
  126. border-radius: 50%;
  127. height: 40px;
  128. width: 30px;
  129. }
  130.  
  131. .eye-left {
  132. margin-top: 125px;
  133. margin-left: 70px;
  134. }
  135.  
  136. .eye-right {
  137. margin-top: 125px;
  138. margin-left: 250px;
  139. }
  140.  
  141. .nose {
  142. background-color: rgb(245, 180, 4);
  143. border: 8px solid #000;
  144. border-radius: 50%;
  145. height: 18px;
  146. left: -20px;
  147. margin-top: 165px;
  148. margin-left: 50%;
  149. top: 10px;
  150. width: 30px;
  151. }
  152.  
  153. .bread-left-1 {
  154. border: 0px solid #fff;
  155. border-radius: 50%;
  156. margin-top: -75px;
  157. margin-left:-70px;
  158. height: 15px;
  159. width: 95px;
  160.  
  161. -webkit-transform: rotate(5deg);
  162. -webkit-transform-origin: right top;
  163. }
  164.  
  165. .bread-left-1-inside {
  166. border: 12px solid #000;
  167. border-radius: 50%;
  168. height: 70px;
  169. margin-left:-70px;
  170. width: 205px;
  171. }
  172.  
  173. .bread-left-2 {
  174. border: 0px solid #fff;
  175. border-radius: 50%;
  176. margin-top: -43px;
  177. margin-left:-60px;
  178. height: 15px;
  179. width: 77px;
  180.  
  181. -webkit-transform: rotate(-5deg);
  182. -webkit-transform-origin: right top;
  183. }
  184.  
  185. .bread-left-2-inside {
  186. border: 12px solid #000;
  187. border-radius: 50%;
  188. height: 70px;
  189. margin-left:-70px;
  190. width: 205px;
  191. }
  192.  
  193. .bread-left-3 {
  194. border: 0px solid #fff;
  195. border-radius: 50%;
  196. margin-top: -15px;
  197. margin-left:-50px;
  198. height: 15px;
  199. width: 78px;
  200.  
  201. -webkit-transform: rotate(-19deg);
  202. -webkit-transform-origin: right top;
  203. }
  204.  
  205. .bread-left-3-inside {
  206. border: 12px solid #000;
  207. border-radius: 50%;
  208. height: 70px;
  209. margin-left:-70px;
  210. width: 205px;
  211. }
  212.  
  213. .bread-right-1 {
  214. border: 0px solid #fff;
  215. border-radius: 50%;
  216. margin-top: -80px;
  217. margin-left:325px;
  218. height: 15px;
  219. width: 95px;
  220.  
  221. -webkit-transform: rotate(-5deg);
  222. -webkit-transform-origin: left top;
  223. }
  224.  
  225. .bread-right-1-inside {
  226. border: 12px solid #000;
  227. border-radius: 50%;
  228. height: 70px;
  229. margin-left:-70px;
  230. width: 205px;
  231. }
  232.  
  233. .bread-right-2 {
  234. border: 0px solid #fff;
  235. border-radius: 50%;
  236. margin-top: -48px;
  237. margin-left:332px;
  238. height: 15px;
  239. width: 72px;
  240.  
  241. -webkit-transform: rotate(4deg);
  242. -webkit-transform-origin: left top;
  243. }
  244.  
  245. .bread-right-2-inside {
  246. border: 12px solid #000;
  247. border-radius: 50%;
  248. height: 70px;
  249. margin-left:-70px;
  250. width: 205px;
  251. }
  252.  
  253. .bread-right-3 {
  254. border: 0px solid #fff;
  255. border-radius: 50%;
  256. margin-top: -14px;
  257. margin-left:325px;
  258. height: 15px;
  259. width: 80px;
  260.  
  261. -webkit-transform: rotate(19deg);
  262. -webkit-transform-origin: left top;
  263. }
  264.  
  265. .bread-right-3-inside {
  266. border: 12px solid #000;
  267. border-radius: 50%;
  268. height: 70px;
  269. margin-left:-70px;
  270. width: 205px;
  271. }
  272.  
  273. .body-left {
  274. background-color: #000;
  275. border: 12px solid #000;
  276. border-top-left-radius: 90% 100%;
  277. border-bottom-left-radius: 70% 50%;
  278. border-bottom-right-radius: 60% 20%;
  279.  
  280. height: 240px;
  281. margin-left: 125px;
  282. margin-top: -43px;
  283. width: 135px;
  284. z-index:;
  285. }
  286.  
  287. .body-right {
  288. background-color: #000;
  289. border: 12px solid #000;
  290. border-top-right-radius: 100% 90%;
  291. border-bottom-left-radius: 60% 20%;
  292. border-bottom-right-radius: 70% 50%;
  293.  
  294. height: 240px;
  295. margin-left: -46px;
  296. margin-top: -43px;
  297. width: 135px;
  298. z-index:;
  299. }
  300.  
  301. .neck {
  302. background-color: rgb(245, 74, 153);
  303. border: 12px solid #000;
  304. border-radius: 50%;
  305.  
  306. height: 110px;
  307. margin-left: 195px;
  308. margin-top: -72px;
  309. width: 100px;
  310. z-index:;
  311. }
  312.  
  313. .shirt-left {
  314. background-color: rgb(250, 167, 209);
  315. border-top-left-radius: 100% 100%;
  316. border-bottom-left-radius: 70% 50%;
  317. border-bottom-right-radius: 60% 20%;
  318.  
  319. height: 240px;
  320. margin-left: 140px;
  321. margin-top: -254px;
  322. width: 135px;
  323. z-index:;
  324. }
  325.  
  326. .shirt-right {
  327. background-color: rgb(250, 167, 209);
  328. border-top-right-radius: 115% 105%;
  329. border-bottom-left-radius: 60% 20%;
  330. border-bottom-right-radius: 70% 50%;
  331.  
  332. height: 240px;
  333. margin-left: 245px;
  334. margin-top: -254px;
  335. width: 135px;
  336. z-index:;
  337. }
  338.  
  339. .feet-left {
  340. background-color: white;
  341. border: 12px solid #000;
  342. border-bottom-left-radius: 60% 100%;
  343. border-bottom-right-radius: 30% 50%;
  344.  
  345. height: 60px;
  346. margin-left: -118px;
  347. margin-top: 170px;
  348. width: 115px;
  349. z-index:;
  350. }
  351.  
  352. .feet-right {
  353. background-color: white;
  354. border: 12px solid #000;
  355. border-bottom-left-radius: 30% 50%;
  356. border-bottom-right-radius: 60% 100%;
  357.  
  358. height: 60px;
  359. margin-left: 10px;
  360. margin-top: 170px;
  361. width: 115px;
  362. z-index:;
  363. }
  364.  
  365. .left-hand {
  366. background-color: white;
  367. border: 12px solid #000;
  368.  
  369. border-radius: 50%;
  370.  
  371. height: 70px;
  372. margin-left: 45px;
  373. margin-top: -30px;
  374. width: 125px;
  375. z-index:;
  376.  
  377. -webkit-transform: rotate(-30deg);
  378. -webkit-transform-origin: left top;
  379. }
  380.  
  381. .left-arm-shirt{
  382. background-color: rgb(245, 74, 153);
  383. border: 12px solid #000;
  384. border-radius: 50%;
  385. border-top-left-radius: 0%;
  386. border-top-right-radius: 100% 60%;
  387.  
  388. height: 70px;
  389. margin-left: 57px;
  390. margin-top: -7px;
  391. width: 60px;
  392. z-index:;
  393. }
  394.  
  395. .left-finger {
  396. height: 32px;
  397. margin-left: -2px;
  398. margin-top: -103px;
  399. overflow: hidden;
  400. width: 50px;
  401.  
  402. -webkit-transform: rotate(-18deg);
  403. -webkit-transform-origin: left top;
  404. }
  405.  
  406. .left-finger-inside {
  407. background-color: white;
  408. border: 12px solid #000;
  409. border-radius: 50%;
  410. height: 30px;
  411. margin-top: 6px;
  412. width: 25px;
  413. z-index:;
  414. }
  415.  
  416. .right-hand {
  417. background-color: white;
  418. border: 12px solid #000;
  419.  
  420. border-radius: 50%;
  421.  
  422. height: 70px;
  423. margin-left: 320px;
  424. margin-top: -37px;
  425. width: 125px;
  426. z-index:;
  427.  
  428. -webkit-transform: rotate(28deg);
  429. -webkit-transform-origin: right top;
  430. }
  431.  
  432. .right-arm-shirt{
  433. background-color: rgb(245, 74, 153);
  434. border: 12px solid #000;
  435. border-radius: 50%;
  436. border-top-right-radius: 0%;
  437. border-top-left-radius: 100% 60%;
  438.  
  439. height: 70px;
  440. margin-left: -15px;
  441. margin-top: -7px;
  442. width: 60px;
  443. z-index:;
  444. }
  445.  
  446. .right-finger {
  447. height: 32px;
  448. margin-left: 78px;
  449. margin-top: -103px;
  450. overflow: hidden;
  451. width: 50px;
  452.  
  453. -webkit-transform: rotate(18deg);
  454. -webkit-transform-origin: right top;
  455. }
  456.  
  457. .right-finger-inside {
  458. background-color: white;
  459. border: 12px solid #000;
  460. border-radius: 50%;
  461. height: 30px;
  462. margin-top: 6px;
  463. width: 25px;
  464. z-index:;
  465. }

Github Demo:http://bee0060.github.io/Css-Paint/pages/carton/hello-kitty.html

CodePen Demo: http://codepen.io/bee0060/pen/YqePNr

代码:https://github.com/bee0060/Css-Paint

有任何问题或意见,欢迎交流。

如果发现本文有什么问题(如错别字),请不吝告知,谢谢。

这次的博客可能有点滥竽充数,请见谅。希望短期内能想到其他有意思的东西来打发时间。:)

转载请注明出处:[css]我要用css画幅画(八) - Hello Kitty

[css]我要用css画幅画(八) - Hello Kitty的更多相关文章

  1. [css]我要用css画幅画(九) - Apple Logo

    接着之前的[css]我要用css画幅画(八) - Hello Kitty,这次画的是苹果公司的logo 这次打算将分析和实现步骤尽量详细的说一说. 其实之前的也打算详细讲分析和设计过程,不过之前的图比 ...

  2. [css]我要用css画幅画(七) - 哆啦A梦

    接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...

  3. [css]我要用css画幅画(六)

    接着之前的[css]我要用css画幅画(五), 由于这个画已经画了很久了,这次一次性加了比较多更新,算是让这幅画告一段落吧. 本次的更新包括: 1. 给云增加动画 2. 画了一棵树 3. 树上画了一个 ...

  4. [css]我要用css画幅画(五)

    接着之前的[css]我要用css画幅画(四), 这次我给小明和静静增加了对话,用了简单的动画效果. github:https://github.com/bee0060/Css-Paint , 完整代码 ...

  5. [css]我要用css画幅画(四)

    接着之前的[css]我要用css画幅画(三), 今天,我画了两朵云,并给小明介绍了个朋友:静静. github:https://github.com/bee0060/Css-Paint , 完整代码在 ...

  6. [css]我要用css画幅画(三)

    接着之前的[css]我要用css画幅画(二), 今天,我画了一个小人,他的名字暂时叫作小明. 以下只列出本次修改增加的内容 html如下: <div class="human left ...

  7. [css]我要用css画幅画(二)

    接着之前的[css]我要用css画幅画(一) , 今天,我又画一个房子,很简单,屋顶.墙壁.门. 现在开始,做得效果都只兼容chrome,所以下面的css3的属性可能只有-webkit-前缀. 我只是 ...

  8. [css]我要用css画幅画(一)

    几年前开始就一直想用css画幅画. 今天才真正开始, 从简单的开始. 作为一个工作压力那么大的程序员,我首先要画一个太阳. html如下: <!DOCTYPE html> <html ...

  9. 【html、CSS、javascript-5】css应用场景补充

    一.CSS全局应用 父标签div下包含两个子标签div,当子标签dvi全部向左float,此时父标签设置的背景色是不显示的 <!DOCTYPE html> <html lang=&q ...

随机推荐

  1. Microsoft Build 2015 汇总

    简要概括(GitHub 完成约 45%): Visual Studio Code Preview(意料之外) Visual Studio 2015 RC Visual Studio 2013 Upda ...

  2. h5直播开发之旅总结

    前言 关于直播,有很多相关技术文章,这里不多说. 作为前端,我们比较关心我们所需要的. 直播的大致流程: APP端调用摄像头 -> 拍摄视频 -> 实时上传视频 -> 服务器端获取视 ...

  3. 使用yield进行异步流程控制

    现状 目前我们对异步回调的解决方案有这么几种:回调,deferred/promise和事件触发.回调的方式自不必说,需要硬编码调用,而且有可能会出现复杂的嵌套关系,造成"回调黑洞" ...

  4. ros::spin() 和 ros::spinOnce() 区别及详解

    版权声明:本文为博主原创文章,转载请标明出处: http://www.cnblogs.com/liu-fa/p/5925381.html 博主提示:本文基于ROS Kinetic Kame,如有更(g ...

  5. CCF——Z字形扫描问题

    试题编号: 201412-2 试题名称: Z字形扫描 时间限制: 2.0s 内存限制: 256.0MB 问题描述: 问题描述 在图像编码的算法中,需要将一个给定的方形矩阵进行Z字形扫描(Zigzag ...

  6. JavaScript的作用域和块级作用域概念理解

    作用域 作用域永远都是任何一门编程语言中的重中之重,因为它控制着变量与参数的可见性与生命周期.说到这里我们需要理解两个概念:块级作用域与函数作用域. 函数作用域 这个应该好理解,函数作用域就是说定义在 ...

  7. 自己封装的一个LoadRes组件

    这两周一直太忙,没有好好处理上上上周遇到的一个让我加班到凌晨的问题,这个问题是判断flash的加载. 之前的思路是让flash的人在制作flash的时候,加入了一个回调方法,该方法再会回调我页面的方法 ...

  8. SQL Server 存储过程遇到“表 '#TT' 没有标识属性。无法执行 SET 操作”错误

    创建临时表,往临时表插入数据的时候报的错误. 一开始提示没有打开主键,后来打开主键就提示上述错误异常. 从网上查找资料没有找到,然后又到群里问各位大牛,一位大牛告诉我是没有设置主键. 我又仔细看看提示 ...

  9. .net源码分析 – List<T>

    通过分析源码可以更好理解List<T>的工作方式,帮助我们写出更稳定的代码. List<T>源码地址: https://github.com/dotnet/corefx/blo ...

  10. NoSQL

    Not Only Sql,弱一致性模型,非关系型.分布式.支持水平扩展的数据库设计模式,区别于传统关系型数据库严格的事务一致性和范式约束.分布式缓存是NoSQL一种实现形式. 参考: