博客美化（三）：手机完美浏览博客 - 六月天空的芬芳-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

博客美化（三）：手机完美浏览博客 - 六月天空的芬芳

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 20, 2016 pm 01:48 PM

本文参考吕大豹的博客

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

第一步：

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

<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进行手机模式的浏览，然后再进行修改

<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代码也就不同，贴出我自己的代码让大家参考一下

<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 までご連絡ください。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

See all articles