移動端直用px加js程式碼實現
阿新 • • 發佈：2018-12-23
<!doctype html>
<html>
<head>
<metacharset="UTF-8">
<title>HTML5Course - 夢幻雪冰</title>
<metacontent="target-densitydpi=device-dpi,width=640"name="viewport">
<linkrel="stylesheet"href="css/reset.css">
<style>
body {
/*設定跟psd一樣的寬度*/
width:640px;
margin:0auto;
background
}
.wrap header {
position: relative;
height:78px;
line-height:78px;
background-color:#f9f9f9;
font-size:32px;
text-align: center;
}
.wrap header em,
.wrap header span {
position: absolute;
top:0;
width:90px;
height:78px;
}
.wrap header span {
left:0;
background: url("images/back.png"
background-size:100%;
}
.wrap header em {
right:0;
background: url("images/search.png")no-repeat;
background-size:100%;
}
.con {
padding:24px17px0;
}
.con nav a {
float: left;
width:146px;
height:146px;
margin-bottom:10px;
line-height:146px;
font-size:22px;
text-align: center;
}
.con nav a
width:299px;
background-color:#e66444;
}
.con nav a:nth-child(2){
margin:07px;
background-color:#f09056;
}
.con nav a:nth-child(3){
background-color:#a2c159;
}
.con nav a:nth-child(4){
background-color:#9178af;
}
.con nav a:nth-child(5){
margin:07px;
background-color:#49a7da;
}
.con nav a:nth-child(6){
margin-right:7px;
background-color:#56bc8a;
}
.con nav a:nth-child(7){
background-color:#d179ad;
}
</style>
</head>
<body>
<divclass="wrap">
<header><span></span>夢幻雪冰<em></em></header>
<sectionclass="con">
<navclass="clearfix">
<ahref=""title="">團上團下</a>
<ahref=""title="">線上訂餐</a>
<ahref=""title="">報修申請</a>
<ahref=""title="">地鐵線路</a>
<ahref=""title="">公交站點</a>
<ahref=""title="">社群超市</a>
<ahref=""title="">今日優惠</a>
</nav>
</section>
</div>
<!-- 引入MetaHandler.js -->
<scripttype="text/javascript"src="js/MetaHandler.js"></script>
</body>
<html>
<head>
<metacharset="UTF-8">
<title>HTML5Course - 夢幻雪冰</title>
<metacontent="target-densitydpi=device-dpi,width=640"name="viewport">
<linkrel="stylesheet"href="css/reset.css">
<style>
body {
/*設定跟psd一樣的寬度*/
width:640px;
margin:0auto;
background
}
.wrap header {
position: relative;
height:78px;
line-height:78px;
background-color:#f9f9f9;
font-size:32px;
text-align: center;
}
.wrap header em,
.wrap header span {
position: absolute;
top:0;
width:90px;
height:78px;
}
.wrap header span {
left:0;
background: url("images/back.png"
background-size:100%;
}
.wrap header em {
right:0;
background: url("images/search.png")no-repeat;
background-size:100%;
}
.con {
padding:24px17px0;
}
.con nav a {
float: left;
width:146px;
height:146px;
margin-bottom:10px;
line-height:146px;
font-size:22px;
text-align: center;
}
.con nav a
width:299px;
background-color:#e66444;
}
.con nav a:nth-child(2){
margin:07px;
background-color:#f09056;
}
.con nav a:nth-child(3){
background-color:#a2c159;
}
.con nav a:nth-child(4){
background-color:#9178af;
}
.con nav a:nth-child(5){
margin:07px;
background-color:#49a7da;
}
.con nav a:nth-child(6){
margin-right:7px;
background-color:#56bc8a;
}
.con nav a:nth-child(7){
background-color:#d179ad;
}
</style>
</head>
<body>
<divclass="wrap">
<header><span></span>夢幻雪冰<em></em></header>
<sectionclass="con">
<navclass="clearfix">
<ahref=""title="">團上團下</a>
<ahref=""title="">線上訂餐</a>
<ahref=""title="">報修申請</a>
<ahref=""title="">地鐵線路</a>
<ahref=""title="">公交站點</a>
<ahref=""title="">社群超市</a>
<ahref=""title="">今日優惠</a>
</nav>
</section>
</div>
<!-- 引入MetaHandler.js -->
<scripttype="text/javascript"src="js/MetaHandler.js"></script>
</body>