#php #html #css
Клиент это не всегда продвинутый пользователь, который знает как обновить страницу при помощи ctrl+f5. Как выйти из этой ситуации? прочитал несколько форумов, но что-то не понимаю как это сделать в style.css. Помогите пожалуйста! Файл размещён на сервере. Можно по подробнее куда и что надо прописать? Прикладываю файл со стилями style.css. @import "http://webfonts.ru/import/arnamuserif.css"; ul{ margin: 0; padding: 0; list-style: none; } img{margin: 0; padding:0; border: 0;} p{padding: 0 0 13px 0; margin: 0; } a{ color: #2185c5; } .clearfix:after { content: "."; clear: both; height: 0; font-size:0; visibility: hidden; display: block; } .clearfix { display: inline-block; /* Fixes IE/Mac */ } /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ html, body{ margin: 0; padding: 0; min-width: 1000px; } body{ background: #fff; font-family: 'Arian AMU Serif', Tahoma, sans-serif; color: #ffffff; } h1,h2,h3{ font-family: 'Arian AMU Serif', Tahoma, sans-serif; } .p_header{ position: fixed; left: 0; top: 0; right: 0; height: 58px; background: rgba(0,0,0,0.2); z-index: 10; } .p_header ul{ display: block; width: 1000px; height: 58px; margin: 0 auto; padding: 0 0 0 30px; } .p_header ul li{ float: left; } .p_header ul li a{ display: block; font-size: 18px; line-height: 58px; color: #fff; text-transform: uppercase; text-decoration: none; text-align: center; padding: 0 16px; } .p_header ul li.active a{ color: #36a1ff; text-decoration: underline; } .p_header ul li:first-child a{ text-align: left; padding: 0 21px 0 0; } .p_header ul li:last-child a{ text-align: right; padding: 0 0 0 21px; } .p_center{ z-index: 1; min-height: 980px; padding: 58px 0 0 0; } .p_center.main{ background: url(images/bg_main.jpg) top center fixed; height: 100%; position: relative; overflow: hidden; width: 100%; } .p_center.about{ background: url(images/bg_about.jpg) top center fixed; height: 100%; position: relative; overflow: hidden; width: 100%; } .p_center.benefits{ background: url(images/bg_benefits.jpg) top center fixed; height: 100%; position: center; overflow: hedden; width: 100%; } .p_center.location{ background: url(images/bg_location.jpg) top center fixed; height: 100%; position: center; overflow: hedden; width: 100%; } .p_center.news{ background: url(images/bg_news.jpg) no-repeat 50% 0; } .p_center.promotions{ background: url(images/bg_promotions.jpg) top center fixed; height: 100%; position: relative; overflow: hidden; width: 100%; } .p_center.quality{ background: url(images/bg_quality.jpg) no-repeat 50% 0; } .p_center.houses, .p_center.house1, .p_center.house2, .p_center.house3, .p_center.house4, .p_center.house5, .p_center.house6, .p_center.townhouses, .p_center.cottages, .p_center.cotta1, .p_center.cotta2, .p_center.cotta3, .p_center.cotta4, .p_center.cotta5, .p_center.cotta6, .p_center.cotta7, .p_center.cotta8, .p_center.cotta9, .p_center.cotta10, .p_center.cotta11, .p_center.cotta12, .p_center.cotta13, .p_center.cotta14, .p_center.cotta15, .p_center.cotta16, .p_center.cotta17, .p_center.cotta18, .p_center.map1, .p_center.map2, .p_center.map3 { background: url(images/bg_houses.jpg) top center fixed;; } .p_center.contacts{ background: url(images/bg_contacts.jpg) no-repeat 40% 0; } .p_center .inner{ position: relative; width: 1000px; margin: 0 auto; } .p_center .main_map{ position: absolute; left: 0; top: 30px; width: 190px; height: 167px; background: url(images/img_map.png) no-repeat; } .p_center .main_sale_count{ position: absolute; left: 220px; top: 30px; width: 100px; text-align: center; font-size: 14px; line-height: 1.2; } .p_center a.main_logo{ position: absolute; left: 392px; top: 30px; width: 215px; height: 168px; background: url(images/logo.png) no-repeat; } .p_center a.main_download_buklet{ position: absolute; left: 642px; top: 30px; border: 1px solid #ffffff; text-transform: uppercase; border-radius: 10px; padding: 10px 10px 8px 10px; font-size: 14px; line-height: 14px; color: #ffffff; text-decoration: none; } .p_center .main_contacts{ position: absolute; top: 30px; right: 0; padding: 0 0 0 30px; background: url(images/ic_phone.png) no-repeat 0 8px; } .p_center .main_contacts.map{ z-index: 10; top: 80px; right: 50px; } .p_center .main_contacts div{ color: #fff; font-size: 18px; line-height: 1.5; } .p_center .main_contacts button{ color: #fff; font-size: 14px; line-height: 1; background: #36a1ff; border: 0; padding: 6px 20px; border-radius: 2px; cursor: pointer; } .p_center h1.main{ position: absolute; left: 0; right: 0; top: 200px; text-align: center; font-size: 30px; line-height: 1.2; color: #fff; text-shadow: 1px -2px 2px #000; text-transform: uppercase; } .p_center .main_select_house{ position: absolute; left: 0; right: 0; top: 794px; text-align: center; } .p_center .main_discount{ position: absolute; left: 0; right: 0; top: 867px; text-align: center; } .p_catalog{ position: absolute; left: 0; right:0; top: 470px; background: #ffffff; border-radius: 10px; height: 300px; padding: 0 25px; } .p_catalog .item{ float: left; width: 190px; height: 300px; padding: 10px 8px; box-sizing: border-box; color: #000; } .p_catalog .item:hover{ background: #c4c4b1; } .p_catalog .item .address{ border-bottom: 2px dashed #e2dfe0; text-align: center; padding: 0 0 10px 0; margin: 0 0 15px 0; } .p_catalog .item .title{ text-align: center; text-transform: uppercase; font-size: 13px; line-height: 1.4; margin: 0 0 10px 0; } .p_catalog .item .price{ font-size: 18px; line-height: 1; text-align: center; color: #fff; background: #ff0000; border-radius: 3px; width: 120px; padding: 6px 0; margin: 0 0 15px 27px; } .p_catalog .item .image{ width: 174px; height: 94px; margin: 0 0 15px 0; border-radius: 5px; } .p_catalog .item a.more{ display: block; width: 172px; height: 30px; border: 1px solid #000; font-size: 14px; text-transform: uppercase; line-height: 30px; text-align: center; color: #000; border-radius: 5px; cursor: pointer; } .p_progress{ background: #ffffff; } .p_progress .inner{ position: relative; width: 1000px; height: 140px; margin: 0 auto; } .p_progress .hand{ position: absolute; left: 0; top: 65px; width: 33px; height: 15px; background: url(images/img_pg_hand.png) no-repeat; } .p_progress .arrow{ position: absolute; left: 60px; top: 65px; width: 890px; height: 22px; } .p_progress .arrow li{ height: 22px; } .p_progress .arrow li.back{ position: absolute; width: 100%; z-index: 1; background: url(images/img_pg_arrow.png) no-repeat; } .p_progress .arrow li.active{ position: absolute; z-index: 2; width: 0%; background: url(images/img_pg_arrow_a.png) no-repeat; } .p_progress .arrow li.knight{ position: absolute; left: 0; top: -50px; min-width: 97px; height: 60px; background: url(images/img_pg_knight.png) no-repeat 100% 0; width: 15%; } .p_progress .arrow.about li.active{ width: 15%; } .p_progress .arrow.about li.knight{ width: 25%; } .p_progress .arrow.benefits li.active{ width: 30%; } .p_progress .arrow.benefits li.knight{ width: 40%; } .p_progress .arrow.location li.active{ width: 45%; } .p_progress .arrow.location li.knight{ width: 55%; } .p_progress .arrow.promotions li.active{ width: 55%; } .p_progress .arrow.promotions li.knight{ width: 65%; } .p_progress .arrow.quality li.active{ width: 65%; } .p_progress .arrow.quality li.knight{ width: 75%; } .p_progress .arrow.houses li.active{ width: 80%; } .p_progress .arrow.houses li.knight{ width: 90%; } .p_progress .arrow.contacts li.active{ width: 100%; } .p_progress .arrow.contacts li.knight{ width: 100%; } /* .p_progress .arrow{ position: absolute; left: 60px; top: 65px; width: 890px; height: 22px; } .p_progress .arrow:after{ content: ""; position: absolute; height: 22px; width: 50%; background: url(images/img_pg_arrow_a.png) no-repeat; z-index: 2; } */ .p_footer{ background: #ecece5 url(images/bg_footer_top.png) repeat-x; position: inherit; left: 0; bottom: 0; padding: 10px; width: 100%; } .p_footer .inner{ position: relative; width: 1000px; height: 200px; margin: 0 auto; } .p_footer .logo{ position: absolute; left: 0; top: 25px; width: 113px; height: 89px; background: url(images/logo_footer.png); } .p_footer .copyright{ position: absolute; left: 140px; top: 50px; font-size: 14px; line-height: 1; color: #000; } .p_footer .convention{ position: absolute; left: 450px; top: 50px; font-size: 14px; line-height: 1; color: #000; } .p_footer .contacts{ position: absolute; right: 0px; top: 25px; color: #000; background: url(images/ic_phone2.png) no-repeat 0 27px; padding: 0 0 0 30px; } .p_footer .contacts label{ display: block; font-size: 13px; line-height: 1; margin: 0 0 10px -30px; } .p_footer .contacts div{ text-align: right; margin: 0 0 5px 0; } .p_footer .contacts a{ display: block; font-weight: bold; color: #000; text-decoration: none; } .p_footer .contacts button{ color: #fff; font-size: 14px; line-height: 1; background: #36a1ff; border: 0; padding: 6px 20px; border-radius: 2px; margin: 5px 0 0 -10px; cursor: pointer; } .p_map{ margin: -58px 0 0 0; width: 100%; height: 1030px; } .p_map_info_box{ position: absolute; left: -165px; top: 155px; background: #ffffff; width: 300px; border-radius: 10px; padding: 15px; color: #000; text-align: center; font-size: 14px; } .p_map_info_box2{ width: 300px; color: #000; text-align: center; font-size: 14px; padding: 10px 0 0 0; } .p_map_info_box .title{ line-height: 1; text-transform: uppercase; margin: 0 0 20px 0; } .p_map_info_box .title span{ border-bottom: 1px solid #000; } .p_map_info_box p{ margin: 0 0 10px 0; } .p_map_info_box .phone{ margin: 0 0 20px; } .p_map_info_box .phone a{ font-size: 18px; color: #000; text-decoration: none; font-weight: bold; } .p_map_info_box .notice{ padding: 10px; background: #36a1ff; color: #ffffff; } .p_benefits{ position: static; top: auto; left: 0; right: 0; text-align: center; } .p_benefits li{ display: inline-block; width: 240px; margin: 0 0 10px 0; vertical-align: top; } .p_benefits h2{ font-size: 18px; line-height: 1.2; text-transform: uppercase; margin: 0 0 10px 0; } .p_benefits img{ margin: 0 0 10px 0; } .p_benefits p{ font-size: 14px; line-height: 1.4; } .p_text{ padding: 350px 30px 0 30px; } .p_text .img{ text-align: center; margin: 0 0 20px 0; } .p_text h1{ font-size: 18px; line-height: 1; margin: 0 0 20px 0; padding: 0; text-align: center; text-transform: uppercase; } .p_text p{ font-size: 18px; line-height: 1.4; margin: 0 0 20px 0; text-align: justify; } .popup_back{ display: none; background: rgba(0,0,0,0.6); position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 100; } .popup_callme{ position: relative; margin: 200px auto 0 auto; width: 368px; height: 388px; background: url(images/bg_popup_callme.png) no-repeat; } .popup_callme .close{ position: absolute; right: 35px; top: 70px; width: 16px; height: 16px; background: url(images/ic_popup_close.png) no-repeat; cursor: pointer; } .popup_callme form{ padding: 100px 0 0 80px; } .popup_callme input{ width: 210px; box-sizing: border-box; padding: 8px 10px; border: 1px solid #c2c2c2; margin: 0 0 20px 0; text-align: center; font-size: 14px; line-height: 1; color: #000; } .popup_callme button{ width: 210px; box-sizing: border-box; padding: 8px 10px; border: 0; margin: 0 0 20px 0; text-align: center; font-size: 14px; line-height: 1; background: #36a1ff; color: #ffffff; cursor: pointer; } .p_quality{ position: absolute; top: 280px; left: 0; right: 0; height: 639px; background: url(images/bg_quality.png) no-repeat; padding: 30px 0 0 85px; } .p_quality .text{ width: 530px; height: 570px; overflow: hidden; overflow-y: scroll; color: #ffffff; padding: 0 100px; } .p_quality .text table{ border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; } .p_quality .text table td{ border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff; vertical-align: top; } .p_quality .text::-webkit-scrollbar { width: 15px; background-color: rgba(0, 44, 68, 0.35); -webkit-border-radius: 10px; -moz-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; } .p_quality .text::-webkit-scrollbar-thumb { background-color: #36a1ff; -webkit-border-radius: 10px; -moz-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; } .p_promo{ display: block; width: 562px; height: 162px; background: url(images/bg_promotion2.png) no-repeat -300px -330px; margin: 0 0 0 189px; font-size: 24px; line-height: 40px; text-align: center; padding: 40px 0 0 0; box-sizing: border-box; } .p_promo big{ font-weight: bold; } .p_promo2{ padding-top: 300px; position: relative; } .p_promo2:after{ position: absolute; width: 800px; height: 360px; background: url(images/bg_promotion2.png) no-repeat 0 0; content: ""; } .header-txt{ text-transform: uppercase; border-top: 2px solid #fff; border-bottom: 2px solid #fff; padding: 5px 5px; font-size: 30px; margin-top: 20px; margin-bottom: 30px; display: inline-block; letter-spacing: 3px; } .header-info{ text-align: center; font-size: 20px; padding-bottom: 15px; border-bottom: 2px solid #fff; text-align: left; } /* Gallery */ .gallery img{ margin:5px; border:3px solid #fff; } a.photo:hover img{ border:3px solid #1E90FF; } .p_card{ padding: 330px 0px 0 0px; }
Ответы
Ответ 1
Самый простой метод "заставить" браузера скачать обновлённый CSS файл, это динамически менять "параметр" для данного файла, например в PHP вы создаёте переменную: $vers = 1.0; и добавить параметр при подключения файла: В итоге, когда вы обновляете файл, вам надо просто зайти в код и в переменную $vers вставить другое значени $vers = 1.1; и т.д При загрузке страницы, браузер проверяет все подключаемые файлы, и если видит что все файлы "знакомые", проходит дальше, а когда вы передаёте параметр, для браузера это уже новый файл (хотя после ? ему параметр не нужен) и он просто скачивает данный файл.
Комментариев нет:
Отправить комментарий