0
我做了一个响应演示网站，我遇到了中等分辨率的问题，因为当我把它放在我的样式表中的高分辨率不再作品。任何人都知道为什么这是/如何解决它？我下面的代码：响应html的平板电脑分辨率css弄乱了桌面分辨率css
@charset "utf-8";
/* CSS Document */
/* low res or phone */
@media only screen and (max-width: 480px) {
\t
.LoginStuff li
{
\t display: inline;
\t float: right!important;
\t position:relative;
\t top: -50px;
\t right: 10px;
}
.reg1 a
{
\t border-radius: 0px 3px 3px 0px;
\t border-left-width: 1px;
\t border-left-style:solid;
\t border-left-color:#ce542c;
\t padding: 5px 5px;
\t font-size:15px;
\t font-family:Arial;
\t font-weight:bold;
\t color: #fff;
\t background-color:#f7cf1c;
\t text-decoration:none;
}
.log1 a
{
\t border-radius: 3px 0px 0px 3px;
\t border-right-width: 0.5px;
\t border-right-style:solid;
\t border-right-color:#ce542c;
\t padding: 5px 12px;
\t font-size:15px;
\t font-family:Arial;
\t font-weight:bold;
\t color: #fff;
\t background-color:#f7cf1c;
\t text-decoration:none;
}
.nav
{
\t visibility: hidden;
}
/*start menu*/
.clearfix a
{
\t background-color:#f7cf1c;
\t margin-right:auto;
\t margin-left:auto;
\t width:277px;
\t height:30px;
\t position:relative;
\t left: -34px;
}
.AMenu
{
\t margin-right:auto;
\t margin-left:auto;
\t padding-left: 100px;
\t position:relative;
\t left:35px;
}
.menu-wrap
{
\t width:100%;
\t background-color:#f7cf1c;
\t align-content:center;
\t margin-right:auto;
\t margin-left:auto;
}
.menu
{
\t width:100%;
\t height:40px;
\t background-color:#f7cf1c;
\t position:relative;
\t margin-left:auto;
\t margin-right:auto;
}
\t
.menu li {
margin:0px;
\t text-decoration:none;
list-style:none;
font-family:"Alfa Slab One";
\t margin-right:auto;
\t margin-left:auto;
}
.menu a {
transition:all linear 0.15s;
\t text-decoration:none;
color:#fff;
\t margin-right:auto;
\t margin-left:auto;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
/*----- Top Level -----*/
.menu > ul > li {
display:inline-block;
position:relative;
font-size:19px;
}
.menu > ul > li > a {
padding:10px 40px;
display:inline-block;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
\t z-index:1;
opacity:1;
}
.menu li:active .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:160%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
background:#f7cf1c;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
/*finish menu*/
.topnav
{
\t margin-bottom: 10px;
}
.mobistrip
{
\t width: 200px;
\t height: 200px;
\t margin-right:auto;
\t margin-left:auto;
\t background-color:#f7cf1c;
\t position:relative;
\t left: 0px;
}
.createYearbook
{
\t position:relative;
\t left:0px;
\t margin-right:auto;
\t margin-left:auto;
\t padding-bottom:20px;
\t width:350px;
\t height:50px;
\t font-family:"Alfa Slab One";
\t font-size: 15px;
\t font-weight:lighter;
\t text-align:center
}
.createYearbook a
{
\t color: #000;
\t text-decoration:none;
\t background-color:#ce542c;
\t padding: 5px 15px;
\t border-radius: 3px 3px 3px 3px;
}
.continue
{
\t position:relative;
\t left:0px;
\t margin-right:auto;
\t margin-left:auto;
\t width:340px;
\t height:50px;
\t text-align:center;
}
.continue a
{
\t font-size:24px;
\t font-family:Arial;
\t font-weight:bolder;
\t color: #fff;
\t background-color:#ce542c;
\t text-decoration:none;
\t padding: 10px 10px; \t
\t border-radius: 3px 3px 3px 3px;
}
.undernav li
{
\t position:relative;
\t top: -150px;
\t display:inline; \t
\t height: 50px;
}
.ach
{
\t width:450px;
\t height:50px;
\t padding-top:20px;
\t padding-bottom:20px;
\t position:relative;
\t left:0px;
\t top: 140px;
}
.ach a
{
\t font-family:Arial;
\t font-size:25px;
\t color:#4e4d4d;
\t font-weight:bold;
\t text-decoration:none;
\t padding-right: 25px;
\t padding-left: 25px;
\t padding-bottom:20px;
\t border-bottom-width:8px;
\t border-bottom-color:#4e4d4d;
\t border-bottom-style:solid;
}
.jumbotron
{
\t visibility: hidden; \t
\t padding: 0px;
}
/*choose size Stuff*/
.ChooseSizeA2
{
\t width:237px;
\t font-family:Arial;
\t font-size:15px;
\t color:#4e4d4d;
\t font-weight:bold;
\t background-color:#fff;
\t position:relative;
\t top:-900px;
\t margin-right:auto;
\t margin-left:auto;
}
.ChooseSize
{
\t align-content:center;
\t background-color:#fff;
}
.picksize
{
\t position:relative;
\t top:-900px;
\t left: -15;
\t margin-right:auto;
\t margin-left:auto;
}
.sizepics img
{
\t background-color:#fff;
\t border-width:6px;
\t border-color:#f7cf1c;
\t border-style:solid;
\t margin-right:auto;
\t margin-left:auto
}
}
/* med res or ipad */
@media only screen and (min-width: 481px) {
\t
\t
.nav
{
\t visibility:hidden; \t
}
.LoginStuff li
{
\t display: inline;
\t float: right!important;
\t position:relative;
\t top: -50px;
\t right: 10px;
}
.reg1 a
{
\t border-radius: 0px 3px 3px 0px;
\t border-left-width: 1px;
\t border-left-style:solid;
\t border-left-color:#ce542c;
\t padding: 10px 10px;
\t font-size:20px;
\t font-family:Arial;
\t font-weight:bold;
\t color: #fff;
\t background-color:#f7cf1c;
\t text-decoration:none;
}
.log1 a
{
\t border-radius: 3px 0px 0px 3px;
\t border-right-width: 0.5px;
\t border-right-style:solid;
\t border-right-color:#ce542c;
\t padding: 10px 20px;
\t font-size:20px;
\t font-family:Arial;
\t font-weight:bold;
\t color: #fff;
\t background-color:#f7cf1c;
\t text-decoration:none;
}
.nav
{
\t visibility: hidden;
}
/*start menu*/
.clearfix a
{
\t background-color:#f7cf1c;
\t margin-right:auto;
\t margin-left:auto;
\t width:300px;
\t height:20px;
\t padding-bottom:10px;
\t position:relative;
\t left: -30px;
}
.AMenu
{
\t margin-right:auto;
\t margin-left:auto;
\t padding-left: 100px;
\t position:relative;
\t left:40px;
}
.menu-wrap
{
\t width:100%;
\t background-color:#f7cf1c;
\t align-content:center;
\t margin-right:auto;
\t margin-left:auto;
}
.menu
{
\t width:100%;
\t height:68px;
\t background-color:#f7cf1c;
\t position:relative;
\t margin-left:auto;
\t margin-right:auto;
}
\t
.menu li
{
margin:0px;
\t text-decoration:none;
list-style:none;
font-family:"Alfa Slab One";
\t margin-right:auto;
\t margin-left:auto;
\t position:relative;
\t top: 15px;
}
.menu a
{
transition:all linear 0.15s;
\t text-decoration:none;
color:#fff;
\t margin-right:auto;
\t margin-left:auto;
}
.menu .arrow
{
font-size:24px;
line-height:0%;
}
/*----- Top Level -----*/
.menu > ul > li
{
display:inline-block;
position:relative;
font-size:24px;
}
.menu > ul > li > a
{
padding:0px 20px;
display:inline-block;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu
{
\t z-index:1;
opacity:1;
}
.menu li:active .sub-menu
{
z-index:1;
opacity:1;
}
.sub-menu
{
width:500px;
\t height:300px;
padding:0px 0px;
\t padding-bottom:60px;
\t padding-top:20px;
\t padding-left:35px;
position:absolute;
top:100%;
left:-100px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
background:#f7cf1c;
\t border-radius: 0px 0px 3px 3px;
}
.sub-menu li
{
display:block;
font-size:25px;
}
.sub-menu li a
{
padding:20px 20px;
display:block;
}
/*finish menu*/
.topnav
{
\t margin-bottom: 10px;
}
.createYearbook
{
\t position:relative;
\t left:-10px;
\t bottom:90px;
\t margin-right:auto;
\t float:left;
\t padding-bottom:50px;
\t width:500px;
\t height:70px;
\t font-family:"Alfa Slab One";
\t font-size: 14px;
\t font-weight:lighter;
\t text-align:center
}
.createYearbook h1
{
\t width:380px; \t
}
.createYearbook a
{
\t color: #000;
\t text-decoration:none;
\t background-color:#ce542c;
\t padding: 15px 30px;
\t border-radius: 3px 3px 3px 3px;
}
.continue
{
\t position:relative;
\t right:-10px;
\t bottom: 209px;
\t float:right;
\t margin-left:auto;
\t width:400px;
\t height:70px;
\t text-align:center;
}
.continue a
{
\t font-size:28px;
\t font-family:Arial;
\t font-weight:bolder;
\t color: #fff;
\t background-color:#ce542c;
\t text-decoration:none;
\t padding: 17.4px 10px; \t
\t border-radius: 3px 3px 3px 3px;
}
.undernav li
{
\t position:relative;
\t top: -300px;
\t display:inline; \t
\t height: 50px;
}
.ach
{
\t width:600px;
\t height:50px;
\t padding-top:20px;
\t padding-bottom:20px;
\t position:relative;
\t left:-10px;
\t top: 140px;
\t margin-right:auto;
\t margin-left:auto;
}
.ach a
{
\t font-family:Arial;
\t font-size:32px;
\t color:#4e4d4d;
\t font-weight:bold;
\t text-decoration:none;
\t padding-right: 25px;
\t padding-left: 25px;
\t padding-bottom:20px;
\t border-bottom-width:8px;
\t border-bottom-color:#4e4d4d;
\t border-bottom-style:solid;
\t margin-right:10px;
\t margin-left:10px;
}
.circlesT
{
\t visibility:hidden; \t
}
.jumbotron
{
padding-top: 20px;
background-image:url(http://yourprintsolution.co.uk/littlechickdemo/pics/pic_1.gif);
height: 200px;
background-repeat: no-repeat;
background-size: cover;
position:relative;
top: 10px;
}
.jumbotron .container
{
position: relative;
background-color:transparent;
}
.jumbotron h1
{
color: #fff;
font-size: 20px;
font-family:"Alfa Slab One";
text-outline:#DFDFDF;
background-color:transparent;
padding-left:140px;
position:relative;
bottom:50px;
display: inline;
float: left!important;
margin-right: auto;
}
/*choose size Stuff*/
.ChooseSizeA2
{
\t width:237px;
\t font-family:Arial;
\t font-size:15px;
\t color:#4e4d4d;
\t font-weight:bold;
\t background-color:#fff;
\t position:relative;
\t top:-0px;
\t margin-right:auto;
\t margin-left:auto;
}
.ChooseSize
{
\t align-content:center;
\t background-color:#fff;
}
.picksize
{
\t position:relative;
\t top:0px;
\t left: -15;
\t margin-right:auto;
\t margin-left:auto;
}
.sizepics img
{
\t background-color:#fff;
\t border-width:6px;
\t border-color:#f7cf1c;
\t border-style:solid;
\t margin-right:auto;
\t margin-left:auto
}
\t
\t
}
/* high res or computer */
@media only screen and (min-width: 1024px) {
\t
.menu-wrap
{
\t visibility: hidden;
}
.bg
{
\t background-color:#fff;
}
.filler
{
\t width: 100%;
\t height: 200px;
\t background-color:#f7cf1c;
}
.fillera
{
\t padding-top:30px;
\t background-color:#fff;
}
*
{
\t background-color:#eae9e9;
}
.LoginStuff li
{
\t display: inline;
\t float: right!important;
\t position:relative;
\t top: 140px;
}
.reg1 a
{
\t border-radius: 0px 3px 3px 0px;
\t border-left-width: 1px;
\t border-left-style:solid;
\t border-left-color:#ce542c;
\t padding: 14px 10px;
\t font-size:18px;
\t font-family:Arial;
\t font-weight:bold;
\t color: #fff;
\t background-color:#f7cf1c;
\t text-decoration:none;
\t transition-property: background;
\t transition-duration: 0.3s;
\t transition-timing-function: ease;
\t transition-delay: 0;
}
.reg1 a:hover
{
\t border-radius: 0px 3px 3px 0px;
\t border-left-width: 1px;
\t border-left-style:solid;
\t border-left-color:#ce542c;
\t padding: 14px 10px;
\t font-size:18px;
\t font-family:Arial;
\t font-weight:bold;
\t color: #000;
\t background-color:#ce542c;
\t text-decoration:none;
}
.log1 a
{ \t
\t border-radius: 3px 0px 0px 3px;
\t border-right-width: 1px;
\t border-right-style:solid;
\t border-right-color:#ce542c;
\t padding: 14px 20px;
\t font-size:18px;
\t font-family:Arial;
\t font-weight:bold;
\t color: #fff;
\t background-color:#f7cf1c;
\t text-decoration:none;
\t transition-property: background;
\t transition-duration: 0.3s;
\t transition-timing-function: ease;
\t transition-delay: 0;
}
.log1 a:hover
{
\t border-radius: 3px 0px 0px 3px;
\t border-right-width: 1px;
\t border-right-style:solid;
\t border-right-color:#ce542c;
\t padding: 14px 20px;
\t font-size:18px;
\t font-family:Arial;
\t font-weight:bold;
\t color: #000;
\t background-color:#ce542c;
\t text-decoration:none;
}
.list
{
\t padding-top:200px;
}
.nav{
\t padding-top:200px;
}
.nav ul {
padding-left: 0;
}
.nav a {
padding: 30px 20px;
font-size:22px;
font-family:"Alfa Slab One";
color: #fff;
background-color:#f7cf1c;
text-decoration:none;
float: left!important;
margin-right: auto;
transition-property: background;
\t transition-duration: 0.3s;
\t transition-timing-function: ease;
\t transition-delay: 0;
}
.nav a:hover
{
padding: 30px 20px;
font-size:22px;
font-family:"Alfa Slab One";
color: #000;
background-color:#ce542c;
text-decoration:none;
float: left!important;
margin-right: auto;
}
.nav li {
display: inline;
float: left!important;
margin-right: auto;
}
.hide
{
visibility: hidden; \t
}
.createYearbook
{
\t padding-top:50px;
\t width:330px;
\t height:70px;
\t font-family:"Alfa Slab One";
\t font-size:14px;
\t font-weight:lighter;
\t float:left;
\t text-align:left;
}
.createYearbook a
{
\t color:#f7cf1c;
\t padding: 10px 10px;
\t border-radius: 3px 3px 3px 3px;
\t transition-property: background;
\t transition-duration: 0.3s;
\t transition-timing-function: ease;
\t transition-delay: 0;
\t text-decoration:none;
}
.createYearbook a:hover
{
\t color: #fff;
\t background-color:#f7cf1c;
\t padding: 10px 10px;
\t border-radius: 3px 3px 3px 3px;
}
.undernav li
{
\t display:inline;
\t padding: 15px 20px; \t
\t height: 70px;
}
.ach
{
\t width:500px;
\t height:70px;
\t float:right;
\t padding-top:50px;
\t padding-bottom:0px;
}
.ach a
{
\t font-family:Arial;
\t font-size:24px;
\t color:#4e4d4d;
\t font-weight:bold;
\t text-decoration:none;
\t padding: 28px 10px;
\t border-bottom-width:8px;
\t border-bottom-color:#eae9e9;
\t border-bottom-style:solid;
\t transition-property:all;
\t transition-duration: 0.3s;
\t transition-timing-function: ease;
\t transition-delay: 0;
}
.ach a:hover
{
\t font-family:Arial;
\t font-size:24px;
\t color:#4e4d4d;
\t font-weight:bold;
\t text-decoration:none;
\t padding: 28px 10px;
\t border-bottom-width:8px;
\t border-bottom-color:#4e4d4d;
\t border-bottom-style:solid;
}
.continue
{
\t width:340px;
\t height:70px;
\t float:right!important;
\t padding-top:50px;
\t text-align:right;
}
.continue a
{
\t font-size:24px;
\t font-family:Arial;
\t font-weight:bolder;
\t color: #fff;
\t background-color:#f7cf1c;
\t text-decoration:none;
\t padding: 14px 10px; \t
\t border-radius: 3px 3px 3px 3px;
\t transition-property: background;
\t transition-duration: 0.3s;
\t transition-timing-function: ease;
\t transition-delay: 0;
}
.continue a:hover
{
\t font-size:24px;
\t font-family:Arial;
\t font-weight:bolder;
\t color: #000;
\t background-color:#ce542c;
\t text-decoration:none;
\t padding: 14px 10px; \t
\t border-radius: 3px 3px 3px 3px;
}
.pic img
{
\t padding-top: 8px;
\t background-color:transparent;
}
.jumbotron {
padding-top: 20px;
background-image:url(http://yourprintsolution.co.uk/littlechickdemo/pics/pic_1.gif);
height: 500px;
background-repeat: no-repeat;
background-size: cover;
position:relative;
top: 130px;
}
.jumbotron .container {
position: relative;
background-color:transparent;
}
.jumbotron h1 {
color: #fff;
font-size: 44px;
font-family:"Alfa Slab One";
background-color:transparent;
padding-left:380px;
display: inline;
float: left!important;
margin-right: auto;
}
.circlesT
{
\t padding-top:400px;
\t background-color:transparent!important;
\t padding-left:80px;
\t padding-right:80px;
}
.circlesT a
{
\t background-color:#fff;
}*
{
\t background-color:#eae9e9;
}
.thumbnail{
\t max-width: 360px;
margin-right: auto;
\t display:inline;
\t float: left!important;
}
.list
{
\t padding-top:200px;
}
.a1
{
\t width:25%;
\t display:inline;
\t padding-left:6%;
\t padding-right:6%;
\t background-color:#fff;
}
.a1 img
{
\t background-color:transparent!important;
}
.mobiBG
{
\t height:91px;
\t width:100%;
\t background-color:#f7cf1c;
}
/*Teacher Login Stuff*/
.pagelogin
{
\t padding-top:20px;
\t padding-bottom:20px;
\t padding-left:300px;
}
.Tlogin form
{
\t background-color:#fff;
}
.Tlogin p
{
\t background-color:#fff;
}
.Tlogin
{
\t background-color:#fff;
\t width:400px;
\t padding: 20px;
}
/*Choose Size Stuff*/
.ChooseSize
{
\t padding-top:220px;
\t align-content:center;
\t background-color:#fff;
}
.ChooseSize h1
{
\t background-color:#fff;
}
.ChooseSizeA2
{
\t width:500px;
\t font-family:Arial;
\t font-size:27px;
\t color:#4e4d4d;
\t font-weight:bold;
\t background-color:#fff;
}
.picksize
{
\t width:100%;
\t background-color:#fff; \t
}
.sizepics
{
\t width:30%;
\t display:inline;
\t padding: 10px;
\t background-color:#fff;
}
.sizepics a
{
\t background-color:#fff;
\t border-width:6px;
\t border-color:#fff;
\t border-style:solid;
}
.sizepics img
{
\t background-color:#fff;
\t border-width:13px;
\t border-color:#fff;
\t border-style:solid;
\t transition-property:all;
\t transition-duration: 0.3s;
\t transition-timing-function: ease;
\t transition-delay: 0;
}
.sizepics img:hover
{
\t background-color:#fff;
\t border-width:13px;
\t border-color:#f7cf1c;
\t border-style:solid;
}
/*Year Group YG*/
.ChooseYG
{
\t padding-top:220px;
\t align-content:center;
\t background-color:#fff;
}
.ChooseYG h1
{
\t background-color:#fff;
}
.ChooseYGA2
{
\t width:800px;
\t font-family:Arial;
\t font-size:27px;
\t color:#4e4d4d;
\t font-weight:bold;
\t background-color:#fff;
}
/*Choose Cover 8x8 Stuff*/
.choosecover8x8
{
\t padding-top:220px;
\t align-content:center;
\t background-color:#fff;
}
.choosecover8x8 h1
{
\t background-color:#fff;
}
.a2-8x8
{
\t width:500px;
\t font-family:Arial;
\t font-size:27px;
\t color:#4e4d4d;
\t font-weight:bold;
\t background-color:#fff;
}
.pickcover8x8
{
\t width:100%;
\t background-color:#fff; \t
}
.cover8x8pics
{
\t width:30%;
\t display:inline;
\t padding: 10px;
\t background-color:#fff;
}
.cover8x8pics a
{
\t background-color:#fff;
\t border-width:6px;
\t border-color:#fff;
\t border-style:solid;
}
.cover8x8pics img
{
\t background-color:#fff;
\t border-width:13px;
\t border-color:#fff;
\t border-style:solid;
\t transition-property:all;
\t transition-duration: 0.3s;
\t transition-timing-function: ease;
\t transition-delay: 0;
}
.cover8x8pics img:hover
{
\t background-color:#fff;
\t border-width:13px;
\t border-color:#f7cf1c;
\t border-style:solid;
}
/*Choose Cover 6x8 Stuff*/
.choosecover6x8
{
\t padding-top:220px;
\t align-content:center;
\t background-color:#fff;
}
.choosecover6x8 h1
{
\t background-color:#fff;
}
.a2-6x8
{
\t width:500px;
\t font-family:Arial;
\t font-size:27px;
\t color:#4e4d4d;
\t font-weight:bold;
\t background-color:#fff;
}
.pickcover6x8
{
\t width:100%;
\t background-color:#fff; \t
}
.cover6x8pics
{
\t width:30%;
\t display:inline;
\t padding: 10px;
\t background-color:#fff;
}
.cover6x8pics a
{
\t background-color:#fff;
\t border-width:6px;
\t border-color:#fff;
\t border-style:solid;
}
.cover6x8pics img
{
\t background-color:#fff;
\t border-width:13px;
\t border-color:#fff;
\t border-style:solid;
\t transition-property:all;
\t transition-duration: 0.3s;
\t transition-timing-function: ease;
\t transition-delay: 0;
}
.cover6x8pics img:hover
{
\t background-color:#fff;
\t border-width:13px;
\t border-color:#f7cf1c;
\t border-style:solid;
}
/*Build Yearbook Stuff*/
.BuildYearbook
{
\t padding-top:220px;
\t align-content:center;
\t background-color:#fff;
}
.BuildYearbook h1
{
\t background-color:#fff;
}
.BuildYearbookA2
{
\t width:800px;
\t font-family:Arial;
\t font-size:27px;
\t color:#4e4d4d;
\t font-weight:bold;
\t background-color:#fff;
}
.price
{
\t font-family: Arial;
\t font-size:32px;
\t color:#e15152;
\t font-weight:bold;
\t background-color:#fff;
\t padding: 20px;
}
.BuildButton
{
\t padding: 25px;
\t background-color:#fff;
}
.BuildButton a
{
\t font-size:30px;
\t font-family:"Alfa Slab One";
\t color: #fff;
\t text-decoration:none;
\t background-color:#f7cf1c;
\t text-decoration:none;
\t border-radius: 3px 3px 3px 3px;
\t padding: 25px 50px; \t
\t transition-property: background;
\t transition-duration: 0.3s;
\t transition-timing-function: ease;
\t transition-delay: 0;
}
.BuildButton a:hover
{
\t font-size:30px;
\t font-family:"Alfa Slab One";
\t color: #000;
\t background-color:#ce542c;
\t text-decoration:none;
\t text-decoration:none;
\t border-radius: 3px 3px 3px 3px;
\t padding: 25px 50px; \t
}
.info
{
\t font-family:Arial;
\t font-size:24px;
\t color:#4e4d4d;
\t font-weight:bold;
\t background-color:#fff;
\t padding:30px;
}
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Yearbooks - Size</title>
<link rel="stylesheet" type="text/css" media="all" href="styles1.css">
</head>
<body>
<div class="top">
<div class="thumbnail">
<img src="http://yourprintsolution.co.uk/littlechickdemo/pics/Logo-01.png" width="177" height="183" alt="0">
</div>
<div class="LoginStuff">
<ul>
<div class="reg1"><li class="reg"><a href="#">Register</a></li></div>
<div class="log1"><li class="login"><a href="#">Login</a></li></div>
</ul>
</div>
</div>
<!-- Mobile Menu -->
<div class="menu-wrap" align="center">
<nav class="menu" align="center">
<ul class="clearfix">
<li>
<div class="AMenu" align="center"><a href="#" >Menu<span class="arrow">▼</span></a></div>
<ul class="sub-menu">
<li><a href="#">Yearbooks</a></li>
<li><a href="#">Leaving Cards</a></li>
<li><a href="#">Mugs</a></li>
<li><a href="#">School Calendars</a></li>
<li><a href="#">Teachers Section</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<!-- Normal Menu -->
<div class="nav" style="height:100%; width:100%;">
<ul>
\t <div class="Yearbooks"><li><a href="#">Yearbooks</a></li></div>
<div class="LeavingCards"><li><a href="#">Leaving Cards</a></li></div>
<div class="Mugs"><li><a href="#">Mugs</a></li></div>
<div class="SchoolCalendars"><li><a href="#">School Calendars</a></li></div>
<div class="TeacherSection"><li><a href="#">Teachers Section</a></li></div>
</ul>
</div>
<div class="mobiBG"></div>
<div class="undernav">
<div class="createYearbook">
<h1><a href="#">Create a Yearbook</a></h1>
</div>
<div class="continue">
<!-- same as login/register just bold -->
<h2><a href="#">Continue Your Yearbook</a></h2>
</div>
<div class="ach" align="center">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Create</a></li>
<li><a href="#">How To</a></li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Creating a Yearbook is Easy
<br><br>
Simply Choose Your Options Below.
</h1>
</div>
<div class="circlesT" style="background-color:#fff;">
<div class="a1">
<a href="#"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/></a>
</div>
<div class="a1">
<a href="#"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/></a>
</div>
<div class="a1">
<a href="#"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/></a>
</div>
<div class="a1">
<a href="#"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/circle_test.gif" width="180" height="176" alt=""/></a>
</div>
</div>
</div>
<div class="bg">
<div class="ChooseSize" align="center">
<div class="ChooseSizeA2">
<h1 align="center">1. Choose a Size</h1>
</div>
</div>
<div class="picksize" align="center">
<div class="sizepics" align="center">
<a href="#" align="center"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/8x6.gif" alt="" width="30%" height="30%"></a>
</div>
<div class="sizepics" align="center">
<a href="#" align="center"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/11x8.gif" alt="" width="30%" height="30%"></a>
</div>
<div class="sizepics" align="center">
<a href="#" align="center"><img src="http://yourprintsolution.co.uk/littlechickdemo/pics/8x8.gif" alt="" width="30%" height="30%"></a>
</div>
</div>
<div class="fillera"><div class="filler"></div></div>
</div>
</body>
</html>
对不起，但没有办法，我读/理解所有的代码。你可以做一个[最小，完整和可验证的例子]（http://stackoverflow.com/help/mcve），解释你的问题？ – freefaller