|
|
51CTO旗下网站
|
|
移动端

45个值得收藏的CSS形状

CSS能够生成各种形状。正方形和矩形很容易,因为它们是 web 的自然形状。添加宽度和高度,就得到了所需的精确大小的矩形。

作者:前端小智来源:segmentfault|2019-04-22 15:00

 

CSS能够生成各种形状。正方形和矩形很容易,因为它们是 web 的自然形状。添加宽度和高度,就得到了所需的精确大小的矩形。添加边框半径,你就可以把这个形状变成圆形,足够多的边框半径,你就可以把这些矩形变成圆形和椭圆形。

我们还可以使用 CSS 伪元素中的 ::before 和 ::after,这为我们提供了向原始元素添加另外两个形状的可能性。通过巧妙地使用定位、转换和许多其他技巧,我们可以只用一个 HTML 元素在 CSS 中创建许多形状。

虽然我们现在大都使用字体图标或者svg图片,似乎使用 CSS 来做图标意义不是很大,但怎么实现这些图标用到的一些技巧及思路是很值得我们的学习。

1.正方形

  1. #square {  
  2. width: 100px;  
  3. height: 100px;  
  4. background: red;  
  5.  

2.长方形

  1. #rectangle {  
  2. width: 200px;  
  3. height: 100px;  
  4. background: red;  
  5.  

3.圆形

  1. #circle {  
  2. width: 100px;  
  3. height: 100px;  
  4. background: red;  
  5. border-radius: 50%  
  6.  

4.椭圆形

  1. #oval {  
  2. width: 200px;  
  3. height: 100px;  
  4. background: red;  
  5. border-radius: 100px / 50px;  
  6.  

5.上三角

  1. #triangle-up {  
  2. width: 0;  
  3. height: 0;  
  4. border-left: 50px solid transparent;  
  5. border-right: 50px solid transparent;  
  6. border-bottom: 100px solid red;  
  7.  

6.下三角

  1. #triangle-down {  
  2. width: 0;  
  3. height: 0;  
  4. border-left: 50px solid transparent;  
  5. border-right: 50px solid transparent;  
  6. border-top: 100px solid red;  
  7.  

7.左三角

  1. #triangle-left {  
  2. width: 0;  
  3. height: 0;  
  4. border-top: 50px solid transparent;  
  5. border-right: 100px solid red;  
  6. border-bottom: 50px solid transparent;  
  7.  

8.右三角

  1. #triangle-right {  
  2. width: 0;  
  3. height: 0;  
  4. border-top: 50px solid transparent;  
  5. border-left: 100px solid red;  
  6. border-bottom: 50px solid transparent;  
  7.  

9.左上角

  1. #triangle-topleft {  
  2. width: 0;  
  3. height: 0;  
  4. border-top: 100px solid red;  
  5. border-right: 100px solid transparent;  
  6.  

10.右上角

  1. #triangle-topright {  
  2. width: 0;  
  3. height: 0;  
  4. border-top: 100px solid red;  
  5. border-left: 100px solid transparent;  
  6.  

11.左下角

  1. #triangle-bottomleft {  
  2. width: 0;  
  3. height: 0;  
  4. border-bottom: 100px solid red;  
  5. border-right: 100px solid transparent;  
  6.  

12.右下角

  1. #triangle-bottomright {  
  2. width: 0;  
  3. height: 0;  
  4. border-bottom: 100px solid red;  
  5. border-left: 100px solid transparent;  
  6.  

13.箭头

  1. #curvedarrow {  
  2. position: relative;  
  3. width: 0;  
  4. height: 0;  
  5. border-top: 9px solid transparent;  
  6. border-right: 9px solid red;  
  7. transform: rotate(10deg);  
  8.  
  9. #curvedarrow:after {  
  10. content: "";  
  11. position: absolute;  
  12. border: 0 solid transparent;  
  13. border-top: 3px solid red;  
  14. border-radius: 20px 0 0 0;  
  15. top: -12px;  
  16. left: -9px;  
  17. width: 12px;  
  18. height: 12px;  
  19. transform: rotate(45deg);  
  20.  

14.梯形

  1. #trapezoid {  
  2. border-bottom: 100px solid red;  
  3. border-left: 25px solid transparent;  
  4. border-right: 25px solid transparent;  
  5. height: 0;  
  6. width: 100px;  
  7.  

15.平行四边形

  1. #parallelogram {  
  2. width: 150px;  
  3. height: 100px;  
  4. transform: skew(20deg);  
  5. background: red;  
  6.  

16.星星 (6角)

  1. #star-six {  
  2. width: 0;  
  3. height: 0;  
  4. border-left: 50px solid transparent;  
  5. border-right: 50px solid transparent;  
  6. border-bottom: 100px solid red;  
  7. position: relative;  
  8.  
  9. #star-six:after {  
  10. width: 0;  
  11. height: 0;  
  12. border-left: 50px solid transparent;  
  13. border-right: 50px solid transparent;  
  14. border-top: 100px solid red;  
  15. position: absolute;  
  16. content: "";  
  17. top: 30px;  
  18. left: -50px;  
  19.  

17.星星 (5角)

  1. #star-five {  
  2. margin: 50px 0;  
  3. position: relative;  
  4. display: block;  
  5. color: red;  
  6. width: 0px;  
  7. height: 0px;  
  8. border-right: 100px solid transparent;  
  9. border-bottom: 70px solid red;  
  10. border-left: 100px solid transparent;  
  11. transform: rotate(35deg);  
  12.  
  13. #star-five:before {  
  14. border-bottom: 80px solid red;  
  15. border-left: 30px solid transparent;  
  16. border-right: 30px solid transparent;  
  17. position: absolute;  
  18. height: 0;  
  19. width: 0;  
  20. top: -45px;  
  21. left: -65px;  
  22. display: block;  
  23. content: '';  
  24. transform: rotate(-35deg);  
  25.  
  26. #star-five:after {  
  27. position: absolute;  
  28. display: block;  
  29. color: red;  
  30. top: 3px;  
  31. left: -105px;  
  32. width: 0px;  
  33. height: 0px;  
  34. border-right: 100px solid transparent;  
  35. border-bottom: 70px solid red;  
  36. border-left: 100px solid transparent;  
  37. transform: rotate(-70deg);  
  38. content: '';  
  39.  

18.五边形

  1. #pentagon {  
  2. position: relative;  
  3. width: 54px;  
  4. box-sizing: content-box;  
  5. border-width: 50px 18px 0;  
  6. border-style: solid;  
  7. border-color: red transparent;  
  8.  
  9. #pentagon:before {  
  10. content: "";  
  11. position: absolute;  
  12. height: 0;  
  13. width: 0;  
  14. top: -85px;  
  15. left: -18px;  
  16. border-width: 0 45px 35px;  
  17. border-style: solid;  
  18. border-color: transparent transparent red;  
  19.  

19.六边形

  1. #hexagon {  
  2. width: 100px;  
  3. height: 55px;  
  4. background: red;  
  5. position: relative;  
  6.  
  7. #hexagon:before {  
  8. content: "";  
  9. position: absolute;  
  10. top: -25px;  
  11. left: 0;  
  12. width: 0;  
  13. height: 0;  
  14. border-left: 50px solid transparent;  
  15. border-right: 50px solid transparent;  
  16. border-bottom: 25px solid red;  
  17.  
  18. #hexagon:after {  
  19. content: "";  
  20. position: absolute;  
  21. bottom: -25px;  
  22. left: 0;  
  23. width: 0;  
  24. height: 0;  
  25. border-left: 50px solid transparent;  
  26. border-right: 50px solid transparent;  
  27. border-top: 25px solid red;  
  28.  

20.八边形

  1. #octagon {  
  2. width: 100px;  
  3. height: 100px;  
  4. background: red;  
  5. position: relative;  
  6.  
  7. #octagon:before {  
  8. content: "";  
  9. width: 100px;  
  10. height: 0;  
  11. position: absolute;  
  12. top: 0;  
  13. left: 0;  
  14. border-bottom: 29px solid red;  
  15. border-left: 29px solid #eee;  
  16. border-right: 29px solid #eee;  
  17.  
  18. #octagon:after {  
  19. content: "";  
  20. width: 100px;  
  21. height: 0;  
  22. position: absolute;  
  23. bottom: 0;  
  24. left: 0;  
  25. border-top: 29px solid red;  
  26. border-left: 29px solid #eee;  
  27. border-right: 29px solid #eee;  
  28.  

21.爱心

  1. #heart {  
  2. position: relative;  
  3. width: 100px;  
  4. height: 90px;  
  5.  
  6. #heart:before,  
  7. #heart:after {  
  8. position: absolute;  
  9. content: "";  
  10. left: 50px;  
  11. top: 0;  
  12. width: 50px;  
  13. height: 80px;  
  14. background: red;  
  15. border-radius: 50px 50px 0 0;  
  16. transform: rotate(-45deg);  
  17. transform-origin: 0 100%;  
  18.  
  19. #heart:after {  
  20. left: 0;  
  21. transform: rotate(45deg);  
  22. transform-origin: 100% 100%;  
  23.  

22.无穷大

  1. #infinity {  
  2. position: relative;  
  3. width: 212px;  
  4. height: 100px;  
  5. box-sizing: content-box;  
  6.  
  7. #infinity:before,  
  8. #infinity:after {  
  9. content: "";  
  10. box-sizing: content-box;  
  11. position: absolute;  
  12. top: 0;  
  13. left: 0;  
  14. width: 60px;  
  15. height: 60px;  
  16. border: 20px solid red;  
  17. border-radius: 50px 50px 0 50px;  
  18. transform: rotate(-45deg);  
  19.  
  20. #infinity:after {  
  21. left: auto;  
  22. right: 0;  
  23. border-radius: 50px 50px 50px 0;  
  24. transform: rotate(45deg);  
  25.  

23.菱形

  1. #diamond {  
  2. width: 0;  
  3. height: 0;  
  4. border: 50px solid transparent;  
  5. border-bottom-color: red;  
  6. position: relative;  
  7. top: -50px;  
  8.  
  9. #diamond:after {  
  10. content: '';  
  11. position: absolute;  
  12. left: -50px;  
  13. top: 50px;  
  14. width: 0;  
  15. height: 0;  
  16. border: 50px solid transparent;  
  17. border-top-color: red;  
  18.  

24.钻石

  1. #diamond-shield {  
  2. width: 0;  
  3. height: 0;  
  4. border: 50px solid transparent;  
  5. border-bottom: 20px solid red;  
  6. position: relative;  
  7. top: -50px;  
  8.  
  9. #diamond-shield:after {  
  10. content: '';  
  11. position: absolute;  
  12. left: -50px;  
  13. top: 20px;  
  14. width: 0;  
  15. height: 0;  
  16. border: 50px solid transparent;  
  17. border-top: 70px solid red;  
  18.  

25.钻戒

  1. #diamond-narrow {  
  2. width: 0;  
  3. height: 0;  
  4. border: 50px solid transparent;  
  5. border-bottom: 70px solid red;  
  6. position: relative;  
  7. top: -50px;  
  8.  
  9. #diamond-narrow:after {  
  10. content: '';  
  11. position: absolute;  
  12. left: -50px;  
  13. top: 70px;  
  14. width: 0;  
  15. height: 0;  
  16. border: 50px solid transparent;  
  17. border-top: 70px solid red;  
  18.  

26.钻石2

  1. #cut-diamond {  
  2. border-style: solid;  
  3. border-color: transparent transparent red transparent;  
  4. border-width: 0 25px 25px 25px;  
  5. height: 0;  
  6. width: 50px;  
  7. box-sizing: content-box;  
  8. position: relative;  
  9. margin: 20px 0 50px 0;  
  10.  
  11. #cut-diamond:after {  
  12. content: "";  
  13. position: absolute;  
  14. top: 25px;  
  15. left: -25px;  
  16. width: 0;  
  17. height: 0;  
  18. border-style: solid;  
  19. border-color: red transparent transparent transparent;  
  20. border-width: 70px 50px 0 50px;  
  21.  

27.蛋蛋

  1. #egg {  
  2. display: block;  
  3. width: 126px;  
  4. height: 180px;  
  5. background-color: red;  
  6. border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;  
  7.  

28.吃豆人

  1. #pacman {  
  2. width: 0px;  
  3. height: 0px;  
  4. border-right: 60px solid transparent;  
  5. border-top: 60px solid red;  
  6. border-left: 60px solid red;  
  7. border-bottom: 60px solid red;  
  8. border-top-left-radius: 60px;  
  9. border-top-right-radius: 60px;  
  10. border-bottom-left-radius: 60px;  
  11. border-bottom-right-radius: 60px;  
  12.  

29.对话泡泡

  1. #talkbubble {  
  2. width: 120px;  
  3. height: 80px;  
  4. background: red;  
  5. position: relative;  
  6. -moz-border-radius: 10px;  
  7. -webkit-border-radius: 10px;  
  8. border-radius: 10px;  
  9.  
  10. #talkbubble:before {  
  11. content: "";  
  12. position: absolute;  
  13. right: 100%;  
  14. top: 26px;  
  15. width: 0;  
  16. height: 0;  
  17. border-top: 13px solid transparent;  
  18. border-right: 26px solid red;  
  19. border-bottom: 13px solid transparent;  
  20.  

30. 12点 爆发

  1. #burst-12 {  
  2. background: red;  
  3. width: 80px;  
  4. height: 80px;  
  5. position: relative;  
  6. text-align: center;  
  7.  
  8. #burst-12:before,  
  9. #burst-12:after {  
  10. content: "";  
  11. position: absolute;  
  12. top: 0;  
  13. left: 0;  
  14. height: 80px;  
  15. width: 80px;  
  16. background: red;  
  17.  
  18. #burst-12:before {  
  19. transform: rotate(30deg);  
  20.  
  21. #burst-12:after {  
  22. transform: rotate(60deg);  
  23.  

31. 8点 爆发

  1. #burst-8 {  
  2. background: red;  
  3. width: 80px;  
  4. height: 80px;  
  5. position: relative;  
  6. text-align: center;  
  7. transform: rotate(20deg);  
  8.  
  9. #burst-8:before {  
  10. content: "";  
  11. position: absolute;  
  12. top: 0;  
  13. left: 0;  
  14. height: 80px;  
  15. width: 80px;  
  16. background: red;  
  17. transform: rotate(135deg);  
  18.  

32.太极

  1. #yin-yang {  
  2. width: 96px;  
  3. box-sizing: content-box;  
  4. height: 48px;  
  5. background: #eee;  
  6. border-color: red;  
  7. border-style: solid;  
  8. border-width: 2px 2px 50px 2px;  
  9. border-radius: 100%;  
  10. position: relative;  
  11.  
  12. #yin-yang:before {  
  13. content: "";  
  14. position: absolute;  
  15. top: 50%;  
  16. left: 0;  
  17. background: #eee;  
  18. border: 18px solid red;  
  19. border-radius: 100%;  
  20. width: 12px;  
  21. height: 12px;  
  22. box-sizing: content-box;  
  23.  
  24. #yin-yang:after {  
  25. content: "";  
  26. position: absolute;  
  27. top: 50%;  
  28. left: 50%;  
  29. background: red;  
  30. border: 18px solid #eee;  
  31. border-radius: 100%;  
  32. width: 12px;  
  33. height: 12px;  
  34. box-sizing: content-box;  
  35.  

33.徽章丝带

  1. #badge-ribbon {  
  2. position: relative;  
  3. background: red;  
  4. height: 100px;  
  5. width: 100px;  
  6. border-radius: 50px;  
  7.  
  8. #badge-ribbon:before,  
  9. #badge-ribbon:after {  
  10. content: '';  
  11. position: absolute;  
  12. border-bottom: 70px solid red;  
  13. border-left: 40px solid transparent;  
  14. border-right: 40px solid transparent;  
  15. top: 70px;  
  16. left: -10px;  
  17. transform: rotate(-140deg);  
  18.  
  19. #badge-ribbon:after {  
  20. left: auto;  
  21. right: -10px;  
  22. transform: rotate(140deg);  
  23.  

34.太空入侵者(电脑游戏名)

  1. #space-invader {  
  2. box-shadow: 0 0 0 1em red,  
  3. 0 1em 0 1em red,  
  4. -2.5em 1.5em 0 .5em red,  
  5. 2.5em 1.5em 0 .5em red,  
  6. -3em -3em 0 0 red,  
  7. 3em -3em 0 0 red,  
  8. -2em -2em 0 0 red,  
  9. 2em -2em 0 0 red,  
  10. -3em -1em 0 0 red,  
  11. -2em -1em 0 0 red,  
  12. 2em -1em 0 0 red,  
  13. 3em -1em 0 0 red,  
  14. -4em 0 0 0 red,  
  15. -3em 0 0 0 red,  
  16. 3em 0 0 0 red,  
  17. 4em 0 0 0 red,  
  18. -5em 1em 0 0 red,  
  19. -4em 1em 0 0 red,  
  20. 4em 1em 0 0 red,  
  21. 5em 1em 0 0 red,  
  22. -5em 2em 0 0 red,  
  23. 5em 2em 0 0 red,  
  24. -5em 3em 0 0 red,  
  25. -3em 3em 0 0 red,  
  26. 3em 3em 0 0 red,  
  27. 5em 3em 0 0 red,  
  28. -2em 4em 0 0 red,  
  29. -1em 4em 0 0 red,  
  30. 1em 4em 0 0 red,  
  31. 2em 4em 0 0 red;  
  32. background: red;  
  33. width: 1em;  
  34. height: 1em;  
  35. overflow: hidden;  
  36. margin: 50px 0 70px 65px;  
  37.  

35.电视

  1. #tv {  
  2. position: relative;  
  3. width: 200px;  
  4. height: 150px;  
  5. margin: 20px 0;  
  6. background: red;  
  7. border-radius: 50% / 10%;  
  8. color: white;  
  9. text-align: center;  
  10. text-indent: .1em;  
  11.  
  12. #tv:before {  
  13. content: '';  
  14. position: absolute;  
  15. top: 10%;  
  16. bottom: 10%;  
  17. right: -5%;  
  18. left: -5%;  
  19. background: inherit;  
  20. border-radius: 5% / 50%;  
  21.  

36.雪佛龙

  1. #chevron {  
  2. position: relative;  
  3. text-align: center;  
  4. padding: 12px;  
  5. margin-bottom: 6px;  
  6. height: 60px;  
  7. width: 200px;  
  8.  
  9. #chevron:before {  
  10. content: '';  
  11. position: absolute;  
  12. top: 0;  
  13. left: 0;  
  14. height: 100%;  
  15. width: 51%;  
  16. background: red;  
  17. transform: skew(0deg, 6deg);  
  18.  
  19. #chevron:after {  
  20. content: '';  
  21. position: absolute;  
  22. top: 0;  
  23. right: 0;  
  24. height: 100%;  
  25. width: 50%;  
  26. background: red;  
  27. transform: skew(0deg, -6deg);  
  28.  

37.放大镜

  1. #magnifying-glass {  
  2. font-size: 10em;  
  3. display: inline-block;  
  4. width: 0.4em;  
  5. box-sizing: content-box;  
  6. height: 0.4em;  
  7. border: 0.1em solid red;  
  8. position: relative;  
  9. border-radius: 0.35em;  
  10.  
  11. #magnifying-glass:before {  
  12. content: "";  
  13. display: inline-block;  
  14. position: absolute;  
  15. right: -0.25em;  
  16. bottom: -0.1em;  
  17. border-width: 0;  
  18. background: red;  
  19. width: 0.35em;  
  20. height: 0.08em;  
  21. transform: rotate(45deg);  
  22.  

38.Facebook图标

  1. #facebook-icon {  
  2. background: red;  
  3. text-indent: -999em;  
  4. width: 100px;  
  5. height: 110px;  
  6. box-sizing: content-box;  
  7. border-radius: 5px;  
  8. position: relative;  
  9. overflow: hidden;  
  10. border: 15px solid red;  
  11. border-bottom: 0;  
  12.  
  13. #facebook-icon:before {  
  14. content: "/20";  
  15. position: absolute;  
  16. background: red;  
  17. width: 40px;  
  18. height: 90px;  
  19. bottom: -30px;  
  20. right: -37px;  
  21. border: 20px solid #eee;  
  22. border-radius: 25px;  
  23. box-sizing: content-box;  
  24.  
  25. #facebook-icon:after {  
  26. content: "/20";  
  27. position: absolute;  
  28. width: 55px;  
  29. top: 50px;  
  30. height: 20px;  
  31. background: #eee;  
  32. right: 5px;  
  33. box-sizing: content-box;  
  34.  

39.月亮

  1. #moon {  
  2. width: 80px;  
  3. height: 80px;  
  4. border-radius: 50%;  
  5. box-shadow: 15px 15px 0 0 red;  
  6.  

40.旗

  1. #flag {  
  2. width: 110px;  
  3. height: 56px;  
  4. box-sizing: content-box;  
  5. padding-top: 15px;  
  6. position: relative;  
  7. background: red;  
  8. color: white;  
  9. font-size: 11px;  
  10. letter-spacing: 0.2em;  
  11. text-align: center;  
  12. text-transform: uppercase;  
  13.  
  14. #flag:after {  
  15. content: "";  
  16. position: absolute;  
  17. left: 0;  
  18. bottom: 0;  
  19. width: 0;  
  20. height: 0;  
  21. border-bottom: 13px solid #eee;  
  22. border-left: 55px solid transparent;  
  23. border-right: 55px solid transparent;  
  24.  

41.圆锥

  1. #cone {  
  2. width: 0;  
  3. height: 0;  
  4. border-left: 70px solid transparent;  
  5. border-right: 70px solid transparent;  
  6. border-top: 100px solid red;  
  7. border-radius: 50%;  
  8.  

42.十字架

  1. #cross {  
  2. background: red;  
  3. height: 100px;  
  4. position: relative;  
  5. width: 20px;  
  6.  
  7. #cross:after {  
  8. background: red;  
  9. content: "";  
  10. height: 20px;  
  11. left: -40px;  
  12. position: absolute;  
  13. top: 40px;  
  14. width: 100px;  
  15.  

43.根基

  1. #base {  
  2. background: red;  
  3. display: inline-block;  
  4. height: 55px;  
  5. margin-left: 20px;  
  6. margin-top: 55px;  
  7. position: relative;  
  8. width: 100px;  
  9.  
  10. #base:before {  
  11. border-bottom: 35px solid red;  
  12. border-left: 50px solid transparent;  
  13. border-right: 50px solid transparent;  
  14. content: "";  
  15. height: 0;  
  16. left: 0;  
  17. position: absolute;  
  18. top: -35px;  
  19. width: 0;  
  20.  

44.指示器

  1. #pointer {  
  2. width: 200px;  
  3. height: 40px;  
  4. position: relative;  
  5. background: red;  
  6.  
  7. #pointer:after {  
  8. content: "";  
  9. position: absolute;  
  10. left: 0;  
  11. bottom: 0;  
  12. width: 0;  
  13. height: 0;  
  14. border-left: 20px solid white;  
  15. border-top: 20px solid transparent;  
  16. border-bottom: 20px solid transparent;  
  17.  
  18. #pointer:before {  
  19. content: "";  
  20. position: absolute;  
  21. right: -20px;  
  22. bottom: 0;  
  23. width: 0;  
  24. height: 0;  
  25. border-left: 20px solid red;  
  26. border-top: 20px solid transparent;  
  27. border-bottom: 20px solid transparent;  
  28.  

45.锁

  1. #lock {  
  2. font-size: 8px;  
  3. position: relative;  
  4. width: 18em;  
  5. height: 13em;  
  6. border-radius: 2em;  
  7. top: 10em;  
  8. box-sizing: border-box;  
  9. border: 3.5em solid red;  
  10. border-right-width: 7.5em;  
  11. border-left-width: 7.5em;  
  12. margin: 0 0 6rem 0;  
  13.  
  14. #lock:before {  
  15. content: "";  
  16. box-sizing: border-box;  
  17. position: absolute;  
  18. border: 2.5em solid red;  
  19. width: 14em;  
  20. height: 12em;  
  21. left: 50%;  
  22. margin-left: -7em;  
  23. top: -12em;  
  24. border-top-left-radius: 7em;  
  25. border-top-right-radius: 7em;  
  26.  
  27. #lock:after {  
  28. content: "";  
  29. box-sizing: border-box;  
  30. position: absolute;  
  31. border: 1em solid red;  
  32. width: 5em;  
  33. height: 8em;  
  34. border-radius: 2.5em;  
  35. left: 50%;  
  36. top: -1em;  
  37. margin-left: -2.5em;  

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

【责任编辑:庞桂玉 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

CentOS文件服务的最佳实战

CentOS文件服务的最佳实战

涨薪跳槽必备技能
共15章 | 追风蚂蚁

81人订阅学习

小白网工宝典

小白网工宝典

一次搞定思科华为
共15章 | 思科小牛

304人订阅学习

防火墙大佬修炼手册

防火墙大佬修炼手册

网工达人必备
共20章 | 捷哥CCIE

327人订阅学习

读 书 +更多

计算机网络安全

本书从计算机网络安全的概念入手,分析了单机节点、单一网络、互联网络和开放互联网络的基本安全问题,并对计算机网络安全体系架构和安全机...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO播客