css或js如何制作出类似于百度首页 背景皮肤随浏览器窗口大小的而缩放的效果？
发布网友
发布时间：2022-05-13 13:57
共3个回答
懂视网
时间：2022-05-13 18:18
下面说说要怎么做，首先你要有一个博客园的博客，然后找到博客后台管理里的设置，选择Custom模板，并禁用模板默认CSS，在下图所示编辑区里写上你的css代码就可以了。
当然你可以在上述步骤做完之后可以把页面保存下来，能更方便的编辑css文件。打开博客主页ctrl+s就可以保存下来你的博客页面了，其实不只是主页，还有文章页面你也要保存下来进行修改。保存下来的页面只要添加自己的css文件进行编辑，就可以在浏览器里调试，最终把css代码贴上去，并点击设置页面最下面的"保存"按钮就可以看到自己做的皮肤啦！
下面是我的css代码，提供给大家参考，请让我继续与众不同！
1 /* Author: |HEAR| */ 2 3 4 /*Public*/ 5 6 * { 7 box-sizing: border-box; 8 transition: all 0.5s; 9 } 10 11 ::selection { 12 color: #F99; 13 } 14 15 ::-moz-selection { 16 color: #F99; 17 } 18 19 body { 20 color: lightgray; 21 margin: 0; 22 padding: 0; 23 font-size: 14px; 24 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 25 } 26 27 h3 { 28 font-size: 15px; 29 font-weight: bold 30 } 31 32 ul { 33 padding: 0; 34 list-style: none; 35 } 36 37 a { 38 color: gray; 39 text-decoration: none; 40 } 41 42 a:hover { 43 color: #E30; 44 } 45 46 47 /*header*/ 48 49 #header { 50 height: 300px; 51 } 52 53 #blogTitle { 54 font-size: 24px; 55 text-align: center; 56 } 57 58 #navigator { 59 text-align: center; 60 } 61 62 #navList li { 63 display: inline-block; 64 } 65 66 .blogStats { 67 width: 240px; 68 margin: auto; 69 border-radius: 1em; 70 background: #C4E17F linear-gradient(to right, #C4E17F, #C4E17F 12.5%, #F7FDCA 12.5%, #F7FDCA 25%, #FECF71 25%, #FECF71 37.5%, #F0776C 37.5%, #F0776C 50%, #DB9DBE 50%, #DB9CBE 62.5%, #C49CDE 62.5%, #C49CDE 75%, #669AE1 75%, #669AE1 87.5%, #62C2E4 87.5%, #62C2E4) repeat scroll 0% 0%; 71 background-size: 200%; 72 animation: conveyor 4s ease infinite; 73 } 74 75 76 /*main*/ 77 78 #main { 79 margin: auto; 80 padding: 0 20px; 81 } 82 83 @media (min-width: 768px) { 84 #main { 85 width: 100%; 86 } 87 } 88 89 @media (min-width: 992px) { 90 #main { 91 width: 90%; 92 } 93 } 94 95 @media (min-width: 1200px) { 96 #main { 97 width: 80%; 98 } 99 }100 101 102 /*mainContent*/103 104 #mainContent {105 float: left;106 margin: 0 auto;107 padding: 20px;108 }109 110 @media (min-width: 768px) {111 #mainContent {112 width: 100%;113 }114 }115 116 @media (min-width: 992px) {117 #mainContent {118 width: 77.5%;119 }120 }121 122 @media (min-width: 1200px) {123 #mainContent {124 width: 80%;125 }126 }127 128 129 /*article*/130 131 .day,132 .commentform,133 .entrylistItem,134 #sideBar,135 #post_detail,136 #blog-comments-placeholder,137 #myposts {138 margin: 0px auto 40px;139 padding: 20px;140 border-radius: 5px;141 background: #333;142 background: repeating-linear-gradient(to bottom, transparent, transparent 1px, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0.5) 25px, rgba(0, 0, 0, 0.5) 25px), repeating-linear-gradient(60deg, transparent, transparent 1px, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0.5) 25px, rgba(0, 0, 0, 0.5) 25px), repeating-linear-gradient(-60deg, transparent, transparent 1px, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0.5) 25px, rgba(0, 0, 0, 0.5) 25px);143 }144 145 .day:hover,146 .commentform:hover,147 .entrylistItem:hover,148 #sideBar:hover,149 #post_detail:hover,150 #blog-comments-placeholder:hover,151 #myposts:hover {152 box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);153 }154 155 .dayTitle {156 float: left;157 margin-right: 20px;158 }159 160 .postCon,161 .entrylistPostSummary {162 margin: 10px auto;163 }164 165 .postDesc,166 .entrylistItemPostDesc {167 text-align: right;168 }169 170 .dayTitle,171 .postTitle {172 font-size: 20px;173 }174 175 176 /*option*/177 178 #green_channel {179 float: right;180 width: auto;181 border: none;182 margin: 15px 0;183 }184 185 #green_channel a {186 float: left;187 margin: 0 0 0 10px;188 background: none;189 box-shadow: none;190 text-shadow: none;191 border-radius: 3px;192 vertical-align: middle;193 }194 195 #author_profile {196 float: left;197 width: auto;198 margin: 9px 10px;199 }200 201 .author_avatar {202 margin: 3px 10px;203 padding: 0;204 border-radius: 5px;205 }206 207 .diggword {208 display: none;209 }210 #green_channel #green_channel_weibo,211 #green_channel #green_channel_wechat {212 padding: 0px 2px;213 }214 #div_digg {215 margin: 14px auto;216 padding: 10px 0;217 }218 219 .diggit,220 .buryit {221 color: white;222 width: 56px;223 height: 24px;224 margin: 1px;225 padding: 0 6px;226 text-align: right;227 position: relative;228 border-radius: 3px;229 }230 231 .diggit {232 background: #9C9;233 animation: pulse 1s ease-in infinite;234 }235 236 .buryit {237 background: #99C;238 }239 240 .diggit:before,241 .buryit:before {242 top: 3px;243 left: 6px;244 position: absolute;245 font-weight: bold;246 }247 248 .diggit:before {249 color: red;250 content: "?";251 }252 253 .buryit:before {254 color: black;255 content: "?";256 }257 258 .diggnum,259 .burynum {260 color: white;261 }262 263 264 /*comment title*/265 266 .feedback_area_title,267 #commentform_title {268 font-size: 16px;269 font-weight: bold;270 }271 272 #commentform_title {273 padding: 0;274 background-image: none;275 }276 277 278 /*comment*/279 280 .feedbackItem {281 margin-top: 20px;282 border-top: 1px solid #CC9;283 }284 285 .feedbackListSubtitle {286 margin: 10px 0;287 }288 289 .feedbackManage {290 float: right;291 }292 293 div.commentform input.author {294 color: lightgray;295 padding: 0;296 font-size: 14px;297 border: none;298 background-color: transparent;299 background-image: none;300 }301 302 #comment_nav,303 .commentbox_title_right {304 float: right;305 }306 307 .commentbox_title,308 .comment_textarea {309 min-width: 100%;310 }311 312 313 /*sideBar*/314 315 #sideBar {316 float: left;317 margin: 20px auto 0;318 display: none !important;319 }320 321 @media (min-width: 992px) {322 #sideBar {323 width: 22.5%;324 display: block !important;325 }326 }327 328 @media (min-width: 1200px) {329 #sideBar {330 width: 20%;331 display: block !important;332 }333 }334 335 #blog-calendar {336 margin: 10px auto;337 padding: 10px;338 font-size: 12px;339 border-radius: 5px;340 background: rgba(153, 204, 153, 0.6);341 }342 343 .input_my_zzk,344 .btn_my_zzk,345 .comment_btn,346 #commentbox_opt a,347 div.commentform textarea {348 margin: 2px auto;349 padding: 2px 5px;350 border: none;351 border-radius: 3px;352 background: rgba(255, 255, 255, 0.5);353 }354 355 .input_my_zzk,356 input.btn_my_zzk {357 width: 100%;358 height: 25px;359 }360 361 #commentbox_opt a {362 color: black;363 font-size: 12px;364 padding: 4px 10px;365 }366 367 .btn_my_zzk:hover,368 .comment_btn:hover,369 .input_my_zzk:hover,370 .input_my_zzk:focus,371 .comment_textarea:hover,372 .comment_textarea:focus,373 #commentbox_opt a:hover {374 outline: 0;375 color: white;376 background: rgba(153, 153, 204, 0.5);377 }378 379 380 /*footer*/381 382 #footer {383 margin-top: 20px;384 padding: 10px;385 text-align: center;386 }387 388 389 /*AD Kill*/390 391 #under_post_news,392 #under_post_kb {393 display: none;394 }395 396 397 /*animation*/398 399 @keyframes conveyor {400 0% {401 background-position: 0% 0%;402 }403 50% {404 background-position: 100% 0%;405 }406 100% {407 background-position: 0% 0%;408 }409 }410 411 @keyframes pulse {412 50% {413 outline-color: rgba(136, 187, 136, 0.9);414 box-shadow: 0px 0px 1px 4px rgba(136, 187, 136, 0.9), 0px 0px 1px 8px rgba(153, 204, 153, 0.5);415 }416 }
第一次发博客，写得不好。皮肤做得不好的地方希望大家指正，谢谢！
热心网友
时间：2022-05-13 15:26
追答按比例布局就能实现你的效果。 让所有哦浏览器支持，就要写很多兼容性的东西。关于每个浏览器的兼容性，自己百度去。没人会给你写的完完整整的然后发给的
热心网友
时间：2022-05-13 16:44
