웹 프론트엔드 HTML 튜토리얼 博客美化(三):手机完美浏览博客 - 六月天空的芬芳

博客美化(三):手机完美浏览博客 - 六月天空的芬芳

May 20, 2016 pm 01:48 PM

本文参考吕大豹的博客

博客园在手机端的浏览效果并不是很好,所以我们来通过两步来修改一下

第一步:

在页首html代码中添加js代码

1

2

3

4

5

6

7

<span style="color: #008080;">1</span> <script>

<span style="color: #008080;">2 <span style="color: #0000ff;">var content = 'width=device-width, initial-scale=1 user-scalable=no'<span style="color: #000000;">;

<span style="color: #008080;">3 <span style="color: #0000ff;">var viewport = document.createElement('meta'<span style="color: #000000;">);

<span style="color: #008080;">4 viewport.setAttribute('name', 'viewport'<span style="color: #000000;">);

<span style="color: #008080;">5 viewport.setAttribute('content'<span style="color: #000000;">, content);

<span style="color: #008080;">6 <span style="color: #000000;">document.head.appendChild( viewport );

<span style="color: #008080;">7 </script>

로그인 후 복사

第二步:

修改css代码

可以使用谷歌浏览器f12进行手机模式的浏览,然后再进行修改

1

2

3

4

5

<span style="color: #008080;">1</span> <span style="color: #800000;">@media screen and (max-width: 768px)</span>{

<span style="color: #008080;">2</span>

<span style="color: #008080;">3</span>             <span style="color: #008000;">/*</span><span style="color: #008000;">手机显示css代码</span><span style="color: #008000;">*/</span>

<span style="color: #008080;">4</span>

<span style="color: #008080;">5</span> }

로그인 후 복사

由于模板的不同所以css代码也就不同,贴出我自己的代码让大家参考一下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

<span style="color: #008080;">  1</span> <span style="color: #800000;">@media screen and (max-width: 768px)</span>{

<span style="color: #008080;">  2</span>

<span style="color: #008080;">  3</span> <span style="color: #ff0000;">  #main

</span><span style="color: #008080;">  4</span> <span style="color: #ff0000;">  {

</span><span style="color: #008080;">  5</span> <span style="color: #ff0000;">  min-width</span>:<span style="color: #0000ff;"> 300px</span>;

<span style="color: #008080;">  6</span> <span style="color: #ff0000;">  padding-right</span>:<span style="color: #0000ff;"> 10px</span>;

<span style="color: #008080;">  7</span>

<span style="color: #008080;">  8</span>   }

<span style="color: #008080;">  9</span> <span style="color: #800000;"> #mainContent .forFlow</span>{

<span style="color: #008080;"> 10</span> <span style="color: #ff0000;">    margin-left</span>:<span style="color: #0000ff;">20em</span>;

<span style="color: #008080;"> 11</span> <span style="color: #ff0000;">    float</span>:<span style="color: #0000ff;"> none</span>;

<span style="color: #008080;"> 12</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> auto</span>;

<span style="color: #008080;"> 13</span> <span style="color: #ff0000;">    margin-left</span>:<span style="color: #0000ff;"> 0px</span>;

<span style="color: #008080;"> 14</span> }

<span style="color: #008080;"> 15</span>

<span style="color: #008080;"> 16</span> <span style="color: #800000;">#mainContent </span>{

<span style="color: #008080;"> 17</span> <span style="color: #ff0000;">    min-height</span>:<span style="color: #0000ff;"> 200px</span>;

<span style="color: #008080;"> 18</span> <span style="color: #ff0000;">    padding</span>:<span style="color: #0000ff;"> 0px 0px 10px 0</span>;

<span style="color: #008080;"> 19</span> <span style="color: #ff0000;">    *padding-top</span>:<span style="color: #0000ff;">10px</span>;

<span style="color: #008080;"> 20</span> <span style="color: #ff0000;">    -o-text-overflow</span>:<span style="color: #0000ff;"> ellipsis</span>;

<span style="color: #008080;"> 21</span> <span style="color: #ff0000;">    text-overflow</span>:<span style="color: #0000ff;"> ellipsis</span>;

<span style="color: #008080;"> 22</span> <span style="color: #ff0000;">    overflow</span>:<span style="color: #0000ff;"> hidden</span>;

<span style="color: #008080;"> 23</span> <span style="color: #ff0000;">    word-break</span>:<span style="color: #0000ff;"> break-all</span>;

<span style="color: #008080;"> 24</span>    

<span style="color: #008080;"> 25</span> <span style="color: #ff0000;">    float</span>:<span style="color: #0000ff;"> left</span>;

<span style="color: #008080;"> 26</span>    

<span style="color: #008080;"> 27</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 100%</span>;

<span style="color: #008080;"> 28</span> <span style="color: #ff0000;">    margin-left</span>:<span style="color: #0000ff;"> 0px</span>;

<span style="color: #008080;"> 29</span> <span style="color: #ff0000;">    margin-right</span>:<span style="color: #0000ff;"> 0px</span>;

<span style="color: #008080;"> 30</span> }   

<span style="color: #008080;"> 31</span> <span style="color: #800000;">#blogTitle </span>{

<span style="color: #008080;"> 32</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;">90px</span>;

<span style="color: #008080;"> 33</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;"> #fff</span>;

<span style="color: #008080;"> 34</span> <span style="color: #ff0000;">    clear</span>:<span style="color: #0000ff;"> both</span>;

<span style="color: #008080;"> 35</span> <span style="color: #ff0000;">    background-repeat</span>:<span style="color: #0000ff;">no-repeat</span>;

<span style="color: #008080;"> 36</span> <span style="color: #ff0000;">    background-image</span>:<span style="color: #0000ff;">url("http://files.cnblogs.com/files/itsuibi/logosmall.gif")</span>;

<span style="color: #008080;"> 37</span> }

<span style="color: #008080;"> 38</span> <span style="color: #800000;">#mainContent </span>{

<span style="color: #008080;"> 39</span> <span style="color: #ff0000;">    min-height</span>:<span style="color: #0000ff;"> 200px</span>;

<span style="color: #008080;"> 40</span> <span style="color: #ff0000;">    padding</span>:<span style="color: #0000ff;"> 0px 0px 10px 0</span>;

<span style="color: #008080;"> 41</span> <span style="color: #ff0000;">    *padding-top</span>:<span style="color: #0000ff;">10px</span>;

<span style="color: #008080;"> 42</span> <span style="color: #ff0000;">    -o-text-overflow</span>:<span style="color: #0000ff;"> ellipsis</span>;

<span style="color: #008080;"> 43</span> <span style="color: #ff0000;">    text-overflow</span>:<span style="color: #0000ff;"> ellipsis</span>;

<span style="color: #008080;"> 44</span> <span style="color: #ff0000;">    overflow</span>:<span style="color: #0000ff;"> hidden</span>;

<span style="color: #008080;"> 45</span> <span style="color: #ff0000;">    word-break</span>:<span style="color: #0000ff;"> break-all</span>;

<span style="color: #008080;"> 46</span>    

<span style="color: #008080;"> 47</span> <span style="color: #ff0000;">    float</span>:<span style="color: #0000ff;"> left</span>;

<span style="color: #008080;"> 48</span>     <span style="color: #008000;">/*</span><span style="color: #008000;"> margin-left: -20em; </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">margin-right</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;"> inline</span>;

<span style="color: #008080;"> 49</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 100%

</span><span style="color: #008080;"> 50</span> }

<span style="color: #008080;"> 51</span> <span style="color: #800000;">#sideBar </span>{

<span style="color: #008080;"> 52</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;">0px</span>;

<span style="color: #008080;"> 53</span> <span style="color: #ff0000;">    min-height</span>:<span style="color: #0000ff;"> 200px</span>;

<span style="color: #008080;"> 54</span> <span style="color: #ff0000;">    padding</span>:<span style="color: #0000ff;"> 0px 0 0px 5px</span>;

<span style="color: #008080;"> 55</span> <span style="color: #ff0000;">    float</span>:<span style="color: #0000ff;">right</span>;

<span style="color: #008080;"> 56</span> <span style="color: #ff0000;">    -o-text-overflow</span>:<span style="color: #0000ff;"> ellipsis</span>;

<span style="color: #008080;"> 57</span> <span style="color: #ff0000;">    text-overflow</span>:<span style="color: #0000ff;"> ellipsis</span>;

<span style="color: #008080;"> 58</span> <span style="color: #ff0000;">    overflow</span>:<span style="color: #0000ff;"> hidden</span>;

<span style="color: #008080;"> 59</span> <span style="color: #ff0000;">    word-break</span>:<span style="color: #0000ff;"> break-all</span>;

<span style="color: #008080;"> 60</span> <span style="color: #ff0000;">    display</span>:<span style="color: #0000ff;">none</span>;

<span style="color: #008080;"> 61</span> }

<span style="color: #008080;"> 62</span> <span style="color: #800000;">.newsItem .catListTitle </span>{

<span style="color: #008080;"> 63</span> <span style="color: #ff0000;">    display</span>:<span style="color: #0000ff;"> none</span>;

<span style="color: #008080;"> 64</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;">0px</span>;

<span style="color: #008080;"> 65</span> }

<span style="color: #008080;"> 66</span> <span style="color: #800000;">.newsItem,#blog-calendar </span>{

<span style="color: #008080;"> 67</span> <span style="color: #ff0000;">    margin-bottom</span>:<span style="color: #0000ff;">15px</span>;<span style="color: #ff0000;">text-indent</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">10px</span>;<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;"> #FAFCFD</span>;<span style="color: #ff0000;">border-radius</span>:<span style="color: #0000ff;">7px</span>;<span style="color: #ff0000;">box-shadow</span>:<span style="color: #0000ff;">1px 1px 2px #A7A8AD</span>;<span style="color: #ff0000;">line-height</span>:<span style="color: #0000ff;"> 1.5</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">0px</span>;

<span style="color: #008080;"> 68</span> }

<span style="color: #008080;"> 69</span> <span style="color: #008000;">/*</span><span style="color: #008000;">*日历控件样式开始*</span><span style="color: #008000;">*/</span>

<span style="color: #008080;"> 70</span> <span style="color: #800000;">#calendar </span>{

<span style="color: #008080;"> 71</span> <span style="color: #ff0000;">    margin-bottom</span>:<span style="color: #0000ff;"> 15px</span>;<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">5px</span>;<span style="color: #ff0000;">border-radius</span>:<span style="color: #0000ff;">7px</span>;<span style="color: #ff0000;">box-shadow</span>:<span style="color: #0000ff;">1px 1px 2px #A7A8AD</span>;<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;"> #fff</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">0px</span>;

<span style="color: #008080;"> 72</span> }

<span style="color: #008080;"> 73</span> <span style="color: #800000;">#calendar .Cal </span>{

<span style="color: #008080;"> 74</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;">0px</span>;

<span style="color: #008080;"> 75</span> <span style="color: #ff0000;">    line-height</span>:<span style="color: #0000ff;"> 1.5</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;

<span style="color: #008080;"> 76</span> }

<span style="color: #008080;"> 77</span> <span style="color: #800000;">#calendar th</span>{<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">2px 5px</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">0px</span>;}

<span style="color: #008080;"> 78</span> <span style="color: #800000;">#calendar td</span>{<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">2px 5px</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">0px</span>;}

<span style="color: #008080;"> 79</span> <span style="color: #800000;">#calendar td a</span>{<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">0px</span>;}

<span style="color: #008080;"> 80</span> <span style="color: #800000;">.Cal </span>{<span style="color: #008000;">/*</span><span style="color: #008000;">*日历容器table*</span><span style="color: #008000;">*/</span>

<span style="color: #008080;"> 81</span> <span style="color: #ff0000;">    border</span>:<span style="color: #0000ff;"> none</span>;

<span style="color: #008080;"> 82</span> <span style="color: #ff0000;">    color</span>:<span style="color: #0000ff;"> #666</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">0px</span>;

<span style="color: #008080;"> 83</span> }

<span style="color: #008080;"> 84</span> <span style="color: #800000;">#calendar table a:link, #calendar table a:visited, #calendar table a:active </span>{

<span style="color: #008080;"> 85</span> <span style="color: #ff0000;">    font-weight</span>:<span style="color: #0000ff;"> bold</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">0px</span>;

<span style="color: #008080;"> 86</span> }

<span style="color: #008080;"> 87</span> <span style="color: #800000;">#calendar table a:hover </span>{

<span style="color: #008080;"> 88</span> <span style="color: #ff0000;">    color</span>:<span style="color: #0000ff;"> white</span>;

<span style="color: #008080;"> 89</span> <span style="color: #ff0000;">    text-decoration</span>:<span style="color: #0000ff;"> none</span>;

<span style="color: #008080;"> 90</span> <span style="color: #ff0000;">    background-color</span>:<span style="color: #0000ff;"> #F60</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">0px</span>;

<span style="color: #008080;"> 91</span> }

<span style="color: #008080;"> 92</span> <span style="color: #800000;">.CalTodayDay</span>{<span style="color: #008000;">/*</span><span style="color: #008000;">*今天日期样式*</span><span style="color: #008000;">*/</span>

<span style="color: #008080;"> 93</span> <span style="color: #ff0000;">    color</span>:<span style="color: #0000ff;">#f60</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">0px</span>;

<span style="color: #008080;"> 94</span> }

<span style="color: #008080;"> 95</span> <span style="color: #800000;">#calendar .CalNextPrev a:link,#calendar  .CalNextPrev a:visited, #calendar .CalNextPrev a:active </span>{<span style="color: #008000;">/*</span><span style="color: #008000;">*上个月、下个月箭头样式*</span><span style="color: #008000;">*/</span>

<span style="color: #008080;"> 96</span> <span style="color: #ff0000;">    font-weight</span>:<span style="color: #0000ff;"> bold</span>;

<span style="color: #008080;"> 97</span> <span style="color: #ff0000;">    background-color</span>:<span style="color: #0000ff;"> white</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">0px</span>;

<span style="color: #008080;"> 98</span> }

<span style="color: #008080;"> 99</span> <span style="color: #800000;">.CalDayHeader</span>{

<span style="color: #008080;">100</span> <span style="color: #ff0000;">    border-bottom</span>:<span style="color: #0000ff;">1px solid #ccc</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">0px</span>;   

<span style="color: #008080;">101</span> }

<span style="color: #008080;">102</span> <span style="color: #800000;">.CalTitle</span>{<span style="color: #008000;">/*</span><span style="color: #008000;">*日历年月头部样式*</span><span style="color: #008000;">*/</span>

<span style="color: #008080;">103</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;">0px</span>;

<span style="color: #008080;">104</span> <span style="color: #ff0000;">    background</span>:<span style="color: #0000ff;">white</span>;

<span style="color: #008080;">105</span> <span style="color: #ff0000;">    color</span>:<span style="color: #0000ff;">black</span>;

<span style="color: #008080;">106</span> <span style="color: #ff0000;">    border-bottom</span>:<span style="color: #0000ff;">1px solid #666</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;   

<span style="color: #008080;">107</span> }

<span style="color: #008080;">108</span> <span style="color: #008000;">/*</span><span style="color: #008000;">*日历控件样式结束*</span><span style="color: #008000;">*/</span>

<span style="color: #008080;">109</span> <span style="color: #800000;">.catListTitle </span>{

<span style="color: #008080;">110</span> <span style="color: #ff0000;">background</span>:<span style="color: #0000ff;"> #390</span>;<span style="color: #ff0000;">border-bottom</span>:<span style="color: #0000ff;"> 1px solid #006600</span>;<span style="color: #ff0000;">border-top-left-radius</span>:<span style="color: #0000ff;"> 7px</span>;<span style="color: #ff0000;"> border-top-right-radius</span>:<span style="color: #0000ff;"> 7px</span>;<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;"> #FFFFFF</span>;<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;"> 1.2em</span>;

<span style="color: #008080;">111</span> <span style="color: #ff0000;">height</span>:<span style="color: #0000ff;">1.8em</span>;

<span style="color: #008080;">112</span> <span style="color: #ff0000;">line-height</span>:<span style="color: #0000ff;">1.8em</span>;

<span style="color: #008080;">113</span> <span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;"> 5px</span>;

<span style="color: #008080;">114</span> <span style="color: #ff0000;">text-indent</span>:<span style="color: #0000ff;">0.5em</span>;<span style="color: #ff0000;">text-shadow</span>:<span style="color: #0000ff;"> 1px 1px 0 rgba(0, 0, 0, 0.3)</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">0px</span>;

<span style="color: #008080;">115</span> }

<span style="color: #008080;">116</span> <span style="color: #800000;">.catListComment </span>{

<span style="color: #008080;">117</span> <span style="color: #ff0000;">    line-height</span>:<span style="color: #0000ff;"> 1.5</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">0px</span>;

<span style="color: #008080;">118</span> }

<span style="color: #008080;">119</span> <span style="color: #800000;">.divRecentComment </span>{

<span style="color: #008080;">120</span> <span style="color: #ff0000;">    text-indent</span>:<span style="color: #0000ff;"> 2em</span>;

<span style="color: #008080;">121</span> <span style="color: #ff0000;">    color</span>:<span style="color: #0000ff;"> #666</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">0px</span>;

<span style="color: #008080;">122</span> }

<span style="color: #008080;">123</span> <span style="color: #800000;">#sideBarMain ul </span>{

<span style="color: #008080;">124</span> <span style="color: #ff0000;">    line-height</span>:<span style="color: #0000ff;"> 1.5</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">0px</span>;

<span style="color: #008080;">125</span> }

<span style="color: #008080;">126</span> <span style="color: #008000;">/*</span><span style="color: #008000;"> 最新评论等 开始 </span><span style="color: #008000;">*/</span>

<span style="color: #008080;">127</span> <span style="color: #800000;">#AjaxHolder_UpdatePanel1,

</span><span style="color: #008080;">128</span> <span style="color: #800000;">#AjaxHolder_PostComment_divCommnentArea,

</span><span style="color: #008080;">129</span> <span style="color: #800000;">#profile,

</span><span style="color: #008080;">130</span> <span style="color: #800000;">.entrylist,

</span><span style="color: #008080;">131</span> <span style="color: #800000;">.gallery

</span><span style="color: #008080;">132</span> {

<span style="color: #008080;">133</span> <span style="color: #ff0000;">background</span>:<span style="color: #0000ff;"> none repeat scroll 0 0 #FFFFFF</span>;

<span style="color: #008080;">134</span> <span style="color: #ff0000;">border-radius</span>:<span style="color: #0000ff;"> 7px</span>;

<span style="color: #008080;">135</span> <span style="color: #ff0000;">box-shadow</span>:<span style="color: #0000ff;">1px 1px 2px #A7A8AD</span>;

<span style="color: #008080;">136</span> <span style="color: #ff0000;">margin</span>:<span style="color: #0000ff;"> 0 0 15px 0</span>;

<span style="color: #008080;">137</span> <span style="color: #ff0000;">min-height</span>:<span style="color: #0000ff;"> 200px</span>;

<span style="color: #008080;">138</span> <span style="color: #ff0000;">overflow</span>:<span style="color: #0000ff;"> hidden</span>;

<span style="color: #008080;">139</span> <span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">0 15px</span>;

<span style="color: #008080;">140</span> <span style="color: #ff0000;">text-overflow</span>:<span style="color: #0000ff;"> ellipsis</span>;

<span style="color: #008080;">141</span> <span style="color: #ff0000;">word-break</span>:<span style="color: #0000ff;"> break-all</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">0px</span>;

<span style="color: #008080;">142</span> }

<span style="color: #008080;">143</span> <span style="color: #800000;">#AjaxHolder_PostComment_divCommnentArea</span>{<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">0px</span>;}

<span style="color: #008080;">144</span> <span style="color: #800000;">#profile,

</span><span style="color: #008080;">145</span> <span style="color: #800000;">.entrylist,

</span><span style="color: #008080;">146</span> <span style="color: #800000;">.gallery

</span><span style="color: #008080;">147</span> {<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">0px</span>;}

<span style="color: #008080;">148</span> <span style="color: #800000;">.catListEssay,.catListLink,.catListNoteBook,

</span><span style="color: #008080;">149</span> <span style="color: #800000;">.catListTag,

</span><span style="color: #008080;">150</span> <span style="color: #800000;">.catListPostCategory,

</span><span style="color: #008080;">151</span> <span style="color: #800000;">.catListPostArchive,

</span><span style="color: #008080;">152</span> <span style="color: #800000;">.catListImageCategory,

</span><span style="color: #008080;">153</span> <span style="color: #800000;">.catListArticleArchive,

</span><span style="color: #008080;">154</span> <span style="color: #800000;">.catListView,

</span><span style="color: #008080;">155</span> <span style="color: #800000;">.catListFeedback,

</span><span style="color: #008080;">156</span> <span style="color: #800000;">.mySearch,

</span><span style="color: #008080;">157</span> <span style="color: #800000;">.catListComment,

</span><span style="color: #008080;">158</span> <span style="color: #800000;">.catListBlogRank,

</span><span style="color: #008080;">159</span> <span style="color: #800000;">.catList,

</span><span style="color: #008080;">160</span> <span style="color: #800000;">.catListArticleCategory

</span><span style="color: #008080;">161</span> {<span style="color: #ff0000;">margin-bottom</span>:<span style="color: #0000ff;"> 15px</span>;<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;"> #FAFCFD</span>;<span style="color: #ff0000;">border-radius</span>:<span style="color: #0000ff;">7px</span>;<span style="color: #ff0000;">box-shadow</span>:<span style="color: #0000ff;">1px 1px 2px #A7A8AD</span>;<span style="color: #ff0000;">overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">zoom</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">0px</span>;}

<span style="color: #008080;">162</span> <span style="color: #800000;">.catListEssay ul li,.catListLink ul li,.catListNoteBook ul li,

</span><span style="color: #008080;">163</span> <span style="color: #800000;">.catListTag ul li,

</span><span style="color: #008080;">164</span> <span style="color: #800000;">.catListPostCategory ul li,

</span><span style="color: #008080;">165</span> <span style="color: #800000;">.catListPostArchive ul li,

</span><span style="color: #008080;">166</span> <span style="color: #800000;">.catListImageCategory ul li,

</span><span style="color: #008080;">167</span> <span style="color: #800000;">.catListArticleArchive ul li,

</span><span style="color: #008080;">168</span> <span style="color: #800000;">.catListView ul li,

</span><span style="color: #008080;">169</span> <span style="color: #800000;">.catListFeedback ul li,

</span><span style="color: #008080;">170</span> <span style="color: #800000;">.catListComment ul li,

</span><span style="color: #008080;">171</span> <span style="color: #800000;">.catListBlogRank ul li,

</span><span style="color: #008080;">172</span> <span style="color: #800000;">.catList ul li,

</span><span style="color: #008080;">173</span> <span style="color: #800000;">.catListArticleCategory ul li

</span><span style="color: #008080;">174</span> {<span style="color: #ff0000;">text-indent</span>:<span style="color: #0000ff;">1em</span>;<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;"> 10px 5px</span>;<span style="color: #ff0000;">border-bottom</span>:<span style="color: #0000ff;"> 1px solid #DADFE1</span>;<span style="color: #ff0000;"> border-top</span>:<span style="color: #0000ff;"> 1px solid #FFFFFF</span>;<span style="color: #ff0000;"> overflow</span>:<span style="color: #0000ff;"> hidden</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">0px</span>;}

<span style="color: #008080;">175</span> <span style="color: #800000;">.catListEssay ul li a,.catListLink ul li a,.catListNoteBook ul li a,

</span><span style="color: #008080;">176</span> <span style="color: #800000;">.catListTag ul li a,

</span><span style="color: #008080;">177</span> <span style="color: #800000;">.catListPostCategory ul li a,

</span><span style="color: #008080;">178</span> <span style="color: #800000;">.catListPostArchive ul li a,

</span><span style="color: #008080;">179</span> <span style="color: #800000;">.catListImageCategory ul li a,

</span><span style="color: #008080;">180</span> <span style="color: #800000;">.catListArticleArchive ul li a,

</span><span style="color: #008080;">181</span> <span style="color: #800000;">.catListView ul li a,

</span><span style="color: #008080;">182</span> <span style="color: #800000;">.catListFeedback ul li a,

</span><span style="color: #008080;">183</span> <span style="color: #800000;">.catListComment ul li a,

</span><span style="color: #008080;">184</span> <span style="color: #800000;">.catListBlogRank ul li a,

</span><span style="color: #008080;">185</span> <span style="color: #800000;">.catList ul li a

</span><span style="color: #008080;">186</span> <span style="color: #800000;">.catListArticleCategory ul li a

</span><span style="color: #008080;">187</span> {<span style="color: #ff0000;">text-indent</span>:<span style="color: #0000ff;"> 1em</span>;<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">0px</span>;}

<span style="color: #008080;">188</span> <span style="color: #800000;">.catListEssay ul li a:hover,.catListLink ul li a:hover,.catListNoteBook ul li a:hover,

</span><span style="color: #008080;">189</span> <span style="color: #800000;">.catListTag ul li a:hover,

</span><span style="color: #008080;">190</span> <span style="color: #800000;">.catListPostCategory ul li a:hover,

</span><span style="color: #008080;">191</span> <span style="color: #800000;">.catListPostArchive ul li a:hover,

</span><span style="color: #008080;">192</span> <span style="color: #800000;">.catListImageCategory ul li a:hover,

</span><span style="color: #008080;">193</span> <span style="color: #800000;">.catListView ul li a:hover,

</span><span style="color: #008080;">194</span> <span style="color: #800000;">.catListFeedback ul li a:hover,

</span><span style="color: #008080;">195</span> <span style="color: #800000;">.catListArticleArchive ul li a:hover,

</span><span style="color: #008080;">196</span> <span style="color: #800000;">.catListComment ul li a:hover

</span><span style="color: #008080;">197</span> {<span style="color: #ff0000;">text-decoration</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">0px</span>;}

<span style="color: #008080;">198</span> <span style="color: #800000;">.divRecentCommentAticle</span>{<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;">0 10px</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">0px</span>;}

<span style="color: #008080;">199</span> <span style="color: #800000;">.divRecentComment</span>{<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;"> 12px</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">0px</span>;}

<span style="color: #008080;">200</span> <span style="color: #800000;">#AjaxHolder_PostComment_divCommnentArea td</span>{<span style="color: #ff0000;">padding</span>:<span style="color: #0000ff;"> 5px 0</span>;<span style="color: #ff0000;">display</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;">width</span>:<span style="color: #0000ff;">0px</span>;}

<span style="color: #008080;">201</span> <span style="color: #008000;">/*</span><span style="color: #008000;"> 最新评论等 结束 </span><span style="color: #008000;">*/</span>

<span style="color: #008080;">202</span> <span style="color: #800000;">.postBody </span>{

<span style="color: #008080;">203</span> <span style="color: #ff0000;">    padding</span>:<span style="color: #0000ff;"> 15px 2px 5px 5px</span>;

<span style="color: #008080;">204</span> <span style="color: #ff0000;">    line-height</span>:<span style="color: #0000ff;"> 1.5</span>;

<span style="color: #008080;">205</span> <span style="color: #ff0000;">    color</span>:<span style="color: #0000ff;"> #000</span>;

<span style="color: #008080;">206</span> <span style="color: #ff0000;">    border-bottom</span>:<span style="color: #0000ff;"> 1px solid #ccc</span>;

<span style="color: #008080;">207</span> }

<span style="color: #008080;">208</span> <span style="color: #800000;">.postBody img</span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;">320px</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;">auto</span>;<span style="color: #ff0000;"> float</span>:<span style="color: #0000ff;">left</span>;}

<span style="color: #008080;">209</span> <span style="color: #008000;">/*</span><span style="color: #008000;">****侧边栏结束*******************************</span><span style="color: #008000;">*/</span>

<span style="color: #008080;">210</span> <span style="color: #800000;">}</span>

로그인 후 복사
View Code

需要注意的是:

1.css代码中需要将侧边栏进行隐藏

2.内容页需要统一的设置一下图片的显示大小否则不能全部显示

3.注意页面的整体大小

效果图:

 

 

 

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫툴 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? 공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? 웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? Mar 04, 2025 pm 02:39 PM

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?

iframes 사용의 보안 영향은 무엇이며 어떻게 완화 할 수 있습니까? iframes 사용의 보안 영향은 무엇이며 어떻게 완화 할 수 있습니까? Mar 18, 2025 pm 02:51 PM

iframes 사용의 보안 영향은 무엇이며 어떻게 완화 할 수 있습니까?

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? & lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? Mar 20, 2025 pm 06:05 PM

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? Mar 12, 2025 pm 04:05 PM

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소?

html5 & lt; meter & gt; 범위 내에 숫자 데이터를 표시하는 요소? html5 & lt; meter & gt; 범위 내에 숫자 데이터를 표시하는 요소? Mar 12, 2025 pm 04:08 PM

html5 & lt; meter & gt; 범위 내에 숫자 데이터를 표시하는 요소?

See all articles