页面定制html代码,博客园页面定制CSS代码

最新推荐文章于 2021-11-01 22:06:04 发布

封掣

最新推荐文章于 2021-11-01 22:06:04 发布

阅读量170

点赞数

文章标签：页面定制html代码

本文深入探讨了CSS在网页布局中的应用技巧，包括选择器、盒子模型、定位方式等核心概念，并通过实例展示了如何使用背景图片、阴影效果及响应式设计等增强页面视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 #home{

2 margin:0 auto;

3 width:80%;/*原始65*/

4 min-width:980px;/*页面顶部的宽度*/

5 background-color:rgba(245, 245, 245, 0.7);

6 padding:30px;

7 margin-top:50px;

8 margin-bottom:50px;

9 box-shadow:0 2px 6px rgba(100, 100, 100, 0.3);

10 }

11 body{

12 background:rgba(12, 100, 129, 1) url('http://images.cnblogs.com/cnblogs_com/Penn000/1013849/o_fr.jpg') fixed no-repeat;

13 background-position:50% 5%;

14 background-size:cover;

15 }

16 #blogTitle{

17 height:100px; /*高度*/

18 clear:both;

19 background-color:rgba(245, 245, 245, 0);

20 }

21 #blogTitle h1{

22 font-size:36px;

23 font-weight:bold;

24 line-height:1.8em;/*原始 1.6em*/

25 margin-top:10px;/*原始 15px*/

26 color:#548B54;

27 }

28 #blogTitle h2{

29 font-weight:normal;

30 font-size:17px;/*原始 16px ；font-size: 1.0rem;*/

31 line-height:1.8;

32 color:#111;

33 font-weight:bold;

34 text-align:right;

35 float:right;

36 }

37 #navigator{

38 background-color:rgba(33, 160, 139, 0.9);

39 }

40 #navList a:link, #navList a:visited, #navList a:active{

41 color:#eee;

42 font-size:18px;

43 font-weight:bold;

44 }

45 .blogStats{

46 color:#eee;

47 }

48 .postTitle{

49 border-left:8px solid rgba(33, 160, 139, 0.68);

50 margin-left:10px;

51 margin-bottom:10px;

52 font-size:20px;

53 float:right;

54 width:100%;

55 clear:both;

56 }

57 .postTitle a:link, .postTitle a:visited, .postTitle a:active{

58 color:#21759b;

59 transition:all 0.4s linear 0s;

60 }

61 .postTitle a:hover{

62 margin-left:30px;

63 color:#0f3647;

64 text-decoration:none;

65 }

66 .postCon{

67 float:right;

68 line-height:1.5em;

69 width:100%;

70 clear:both;

71 padding:10px 0;

72 }

74 .day .postTitle a{

75 padding-left:10px;

76 }

77 .day{

78 background:rgba(255, 255, 255, 0.5);

79 }

80 /*文章附加信息*/

81 .postDesc{

82 background:url(images/posted_time.png) no-repeat 0 1px;

83 color:#757575;

84 float:left;

85 width:100%;

86 clear:both;

87 text-align:left;

88 font-family:"微软雅黑" , "宋体" , "黑体" ,Arial;

89 font-size:13px;

90 padding-right:20px;/*5px padding-left: 90px;posted 发表时间左边距离*/

91 margin-top:20px;

92 line-height:1.8;

93 padding-bottom:35px;

94 }

96 .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory,97 .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView,98 .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar99 {

100 background:rgba(255, 255, 255, 0.5);

101 margin-bottom:35px;

102 word-wrap:break-word;

103 }

104

105 .CalTitle{

106 background:rgba(255, 255, 255, 0);

107 }

108 .catListTitle{

109 background-color:rgba(33, 160, 139, 0.9);

110 }

111