pc 板的 layout 如下:
平板的layout
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Response Web Design Demo</title>
<link rel="stylesheet" href="css/default.css">
</head>
<body>
<div class="wrap">
<div class="header">
<h1 class="logo"><a href="#">公司LOGO</a></h1>
<ul class="menu">
<li><a href="#">公司簡介</a></li>
<li><a href="#">專業服務</a></li>
<li><a href="#">新聞與活動</a></li>
<li><a href="#">活動花絮</a></li>
<li><a href="#">聯繫我們</a></li>
</ul>
</div>
<div class="content">
<h2>新聞標題</h2>
<p>
六角學院新聞 (2016-06-21 09:06)
</p>
<p>
生藝本技得童總信。上能表有能已位字高企斷他？神些的司……特了又他的，了象大初小研車對加、間四比，想年訴選年：三車寫教。他成濟位像知他氣程表事。聽制起又雲師山，重不能界使我傷！溫統接視情期事……況無沒指超及世。
</p>
<p>
列文一有愛的空金代電一前卻歡電個魚天讀狀各童流處開起那朋。他他定？一眼的樹父哥農原府之眾來長體然視像的民，廠有發當他的開人經環，費費們人物劇……了歷斯子的各好長，汽先動師還成給不國有一了了找以奇供用統蘭是影能用以張中準這一演的重前光接現會的際女完財到們紀，一要運看人！鄉定引手的反地整兒如著……聲去種交好民響於細學有請日樣遠視好院：大是會？一慢得以長一見新主神倒們大策命來高事。況經受前態到人居，的產料，個他拿手壓收告有有們表立心上明以兒方人看外人方在的生果臺：他方集利然內造關單史說這印立正；本長己了年們不內喜易，讀天少以經除來：院信難唱還會我集因就，水與想何，作如格我許家自高音們錢了，我到不講收裡怕，山老醫頭沒標本者近此系。
</p>
</div>
<div class="sidebar">
<img src="images/1.jpg" alt="">
<img src="images/1.jpg" alt="">
<img src="images/1.jpg" alt="">
</div>
<div class="footer">
Copyright© 2016
</div>
</div>
</body>
</html>
=================================================================
css :
/* CSS Reset end */
.wrap {
max-width: 960px;
margin: 0 auto;
}
.header{
position: relative; // 定為相對定位
height: 350px;
}
@media (max-width: 768px){
.header{
height: auto; // 當變成平板時, 高度就變成auto
}
}
.logo{
position:absolute; // 相對決定
top:30px;
left:0px;
}
.logo a{
display:block;
width:250px;
text-indent:-99999px;
height:250px;
background:url(../images/M1.png) // 用比較大的圖 250x250
}
@media (max-width: 768px) {
.logo{
position:relative; // 改成相對定位, 變成水平置中
margin:0 auto; // 變成水平置中
width:150px; // 寬度變成150px
}
.logo a{
display:block;
width:150px;
height:170px;
background:url(../images/M2.png) no-repeat // 換成比較小的圖
}
}
.menu{
float:right; // 向右靠齊
margin:30px 0 0 0;
}
.menu li{
float:left;
background:#3399FF;
border-right:1px solid #fff;
}
.menu li a{
color:#fff;
display:block;
width:100px;
font-weight:bold;
text-align:center;
height:30px;
line-height:30px;
text-decoration:none;
}
@media(max-width: 768px){
.menu{
float:none; /* 拿掉浮動 */
}
.menu li {
width:90%;
float:none; /* float style */
margin:0 auto 10px auto;
border-radius:3px;
}
.menu li a{
width:100%;
text-align:center;
}
}
.content{
float: left;
width: 75%;
border:2px solid #000;
padding: 10px
}
.content h2{
font-weight: bold;
font-size: 26px;
padding: 30px 0 20px 0;
}
.content p{
line-height: 1.8;
letter-spacing: 1pt;
padding: 0 0 30px 0;
}
.sidebar{
float: right;
width: 20%;
border:2px solid #000;
padding: 5px;
margin-left: 5%;
}
.sidebar img{
margin:0 0 10px 0;
}
@media(max-width: 768px) {
.content,.sidebar{
border:none;
float: none; /* 拿掉浮動 */
width: 100%; /* 百分比呈現寬度 */
margin: 0;
}
.sidebar img{
display: block;
max-width:90%;
height:auto;
margin-bottom: 10px;
}
}
.footer{
clear: both;
padding: 1em 0;
text-align: center;
}
沒有留言:
張貼留言