ZBlogPHP主题模板制作教程_响应式调整/手机平板自适应模式

制作一个响应式模板,我们可以直接用别人做好的响应式框架,然后再调用CSS样式就可以实现,但这需要是熟悉框架布局和CSS样式,非常麻烦,而且CSS样式太多太杂不易上手。

下面小V分享一个自用的响应式布局,分享生活,留住感动!希望大家共同成长!


——下面是小V制作好的响应式css代码,将其放入style.css中。

CSS
@media screen and (max-width:1330px) {
.wrapper {
max-width:98%;}.input-t input[type="text"] {
width:30%;}}@media screen and (max-width:1074px) {
.center {
margin-right:250px;
margin-left:190px;
padding-top:12px;
padding-right:12px;
padding-left:12px;}.sidebar {
width:250px;
float:right;
margin-left:-250px;
padding-top:12px;}.widget {
padding:10px;
margin-bottom:12px;}.istop {
margin-bottom:12px;}.list {
margin-bottom:12px;}.pagebar,.center-c,.comments {
padding:10px;
margin-bottom:12px;}.copyRight,.tags,.navigation {
margin-top:12px;}.list-l {
padding:8px 10px 8px 10px;}.list-content {
padding:10px;}.list-content a {
font-size:14px;
line-height:20px;}.list-img {
height:180px;}.list-title a {
font-size:18px;
line-height:20px;}.divCatalog li {
width:113px;}.widget input[type="text"] {
width:180px;}.divStatistics li,.divMisc li,.divAuthors li {
width:100%;
text-align:left;}.content img {
box-shadow:2px 2px 3px #888;
height:auto;}.input-t input[type="text"] {
width:95%;}.Blogfooter {
margin-right:260px;
margin-left:200px;
padding-bottom:10px;}}@media screen and (max-width:900px) {
.menu {
background:#F39801;
display:block;
margin-top:10px;}.menu a {
display:block;
cursor:pointer;
line-height:40px;
text-align:center;
font-size:20px;
font-weight:bold;
text-shadow:0 0 3px #fff;}.header {
background:#f9f9f9;
width:100%;
height:100%;
position:relative;}.logo {
height:100px;
width:auto;}.logo samp {
height:auto;
overflow:auto;}.search {
width:auto;}.search span {
width:85%;}.search-text {
width:100%;}.nav {
display:none;}.nav ul {
width:auto;}.nav ul li {
background:#f4f4f4;
width:auto;
height:auto;
margin-bottom:10px;
border-bottom:solid 2px #26A6F2;}.nav ul li a {
padding-left:10px;
text-shadow:0 0 3px #fff;
color:#444;}.nav ul li:hover {
background:#ddd;
border-bottom:solid 2px #F39801;}.nav ul ul {
margin:0;
opacity:1;
visibility:visible;
left:auto;
z-index:1;
transition:all .2s ease-in-out;
position:relative;
box-shadow:0px 0px 0px #ddd;}.nav ul li:hover > ul {
background:#f6f6f6;
opacity:1;
visibility:visible;
margin:0;
border-bottom:solid 1px #ddd;}.nav li li {
height:30px;
border-bottom:solid 0px #ddd;
border-top:solid 1px #ddd;
margin-bottom:0px;
padding-left:30px;}.nav li li a {
font-size:16px;
line-height:30px;}.center {
margin-left:0px;
padding-left:3px;}.input-t input[type="text"] {
width:95%;}.Blogfooter {
margin-left:0px;}}@media screen and (max-width:700px) {
.center {
margin-right:0px;
padding-right:3px;}.sidebar {
display:none;}.list-img {
height:250px;}.copyRight img {
display:none;}.input-t input[type="text"] {
width:95%;}.Blogfooter {
margin-right:0px;}}@media screen and (max-width:400px) {
.list-img {
height:180px;}.input-t input[type="text"] {
width:95%;}.comments h3 {
font-size:15px;}}@media screen and (max-width:320px) {
.list-img {
height:150px;}.comments h3 {
font-size:14px;}}

——同时新建一个xvblog.js放在主题文件夹下面的script文件夹里面,以下是xvblog.js脚本

JavaScript
/*菜单*/
$(".menu").click(function(){
$(".nav").slideToggle("slow");return false;});/*反回顶部*/
   $('.top').click(function() {
       $('html,body').animate({
           scrollTop: '0px'
       }, 800)
   });

——在index.php、single.php、search.php中加入以下代码。

PHP
<div class="menu" id="#"><a href="#" title="点击弹开">导航菜单</a></div>

——在footer.php文件</body></html>上加入以下代码。

PHP
<script type="text/javascript" src="{$host}zb_users/theme/{$theme}/script/xvblog.js"></script>


转载请说明出处内容投诉
zblog资源网 » ZBlogPHP主题模板制作教程_响应式调整/手机平板自适应模式

发表评论

欢迎 访客 发表评论

加入会员,享受更优质的zblog技术服务!

马上加入 会员说明 联系客服