线上商店的静态首页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>老叶线上花店</title>
<link rel="icon" type="image/ico" href="img/logo.ico"/>
<style type="text/css">
#div1{
background-color: white;
height: 500px;
}
#div2{
background-color: white;
height: 50px;
color: darkgray;
font-size: 35px;
border-bottom: solid darkgray 2px;
}
#div3{
background-color:white;
height: 150px;
position: relative;
}
#div4{
background-color: white;
height: 150px;
width: 150px;
float: right;
position: absolute;
top: 610px;
right: 1px;
}
#p1{
color: darkgray;
font-size: 150px;
float: left;
position: absolute;
top: -180px;
}
a:link{
color:rgba(180,180,180,0.6);
}
a:hover{
color: #000000;
font-size: 20px;
}
a:active{
color:crimson;
font-size: 20px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2">
<p>Android Marketplace</p>
</div>
<div id="div3">
<p id="p1">老叶叶材</p>
</div>
<div id="div4">
<div id="div4.5"style="background-color: white;height: 30px;">
<a href="" style="text-decoration: none;">商店介绍</a>
</div>
<div id="div4.1"style="background-color: white;height: 30px;">
<a href="" style="text-decoration: none;">全部商品</a>
</div>
<div id="div4.2"style="background-color: white;height: 30px;">
<a href="" style="text-decoration: none;">成品花</a>
</div>
<div id="div4.3"style="background-color: white;height: 30px;">
<a href="叶材类页面.html" style="text-decoration: none;">叶材</a>
</div>
<div id="div4.4"style="background-color: white;height: 30px;">
<a href="" style="text-decoration: none;">花材</a>
</div>
</div>
</body>
</html>
跳转到叶材的页面(静态的)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>叶材类</title>
<!-- 导入样式表 -->
<link rel="stylesheet" type="text/css" href="叶材类页面样式表.css"/>
<!-- 导入图标 -->
<link rel="icon" type="image/ico" href="img/logo.ico"/>
</head>
<body>
<!-- ===顶部标题区=== -->
<div id="top">
<p>老叶叶材</p>
</div>
<!-- =====顶部提示区=== -->
<div id="bottom">
<p>---------------------- 商店地址:成都市锦江区三圣乡万福花卉产业园A1-4-5 ----------------------</p>
</div>
<!-- ====中间=== -->
<div id="middle">
<!-- ===中间商品区=== -->
<div id="middle1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!-- ===中间导航区=== -->
<div id="navigation">
<div>
<a>全部分类</a>
</div>
<div>
<a>精品类</a>
</div>
<div>
<a>树枝类</a>
</div>
<div>
<a>松枝类</a>
</div>
<div>
<a>绿叶类</a>
</div>
<div>
<a>红叶类</a>
</div>
<div>
<a>草叶类</a>
</div>
<div>
<a>回到首页</a>
</div>
</div>
</div>
</body>
</html>
叶材样式表(css)
/* ========通用=========== */
*{
margin: 0px;
border: 0px;
padding: 0px;
position: relative;
}
/* ================顶部标题========== */
#top{
height: 90px;
background: white;
}
#top p{
font-size: 60px;
color: #000000;
text-align: center;
line-height: 90px;
font-weight: 300;
}
/* =============顶部提示区========== */
#bottom{
height: 30px;
width: 100%;
border-top: solid gray 1px;
border-bottom: solid gray 1px;
}
#bottom p{
font-size: 10px;
color: #000000;
text-align: center;
line-height: 30px;
font-weight: 100;
}
/* ============中间========== */
#middle{
float: left;
height: 700px;
width: 100%;
}
/* ================中间商品区========== */
#middle1{
float: right;
height: 700px;
width: 90%;
}
#middle1 div{
float: left;
height: 330px;
width: 300px;
background-color: #A9A9A9;
border: solid white 10px;
}
/* ================中间导航区========== */
#navigation{
/* 高度和宽度 */
height: 700px;
width: 9.8%;
/* 导航区边框 */
border-right: solid gray 1px;
border-left: solid gray 1px;
}
#navigation div{
height: 12.4%;
width: 100%;
border-bottom: solid gray 1px;
/* 水平居中 */
text-align: center;
/* 垂直居中 */
line-height: 12.4%;
}
#navigation div a{
background-color: #FFFFFF;
/* 水平居中 */
text-align: center;
/* 垂直居中 */
line-height: 12.4%;
font-size: 20px;
font-weight: 100;
}
未完待续～
