您的位置：首页 > 其它

贵美主页框架演示

2018-02-23 23:24 134 查看

贵美主页框架演示
1、效果图

2、代码（1）贵美框架.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>贵美框架</title>
</head>
<frameset rows="30%,*" cols="*">
<frame src="贵美header.html" name="top_frame" scrolling="no">
<frameset rows="*" cols="20%,80%">
<frame src="贵美left.html" name="left_frame" scrolling="yes">
<frame src="贵美main.html" name="main_frame" scrolling="yes">
</frameset>
</frameset>
</html>

（2）贵美header.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>贵美商城</title>
<link href="css/guimeicss.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container">
<div id="header">
<div style="width: 55%; height: 100px; float: left;"></div>
<div class="menu">
<ul>
<li class="pic1"></li>
<li><a href="#">购物车</a></li>
<li class="pic2"></li>
<li><a href="#">帮助中心</a></li>
<li class="pic3"></li>
<li><a href="#">加入收藏</a></li>
<li class="pic4"></li>
<li><a href="#">设为首页</a>;</li>
<li class="btn"><a href="#">登录</a></li>
<li class="btn"><a href="#">注册</a></li>
</ul>
<div class="hello">你好，欢迎访问贵美商城！ 2017年4月22日8时58分</div>
</div>
<div class="nav">
<ul id="aa">
<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>
<li><a href="#">帮助中心</a></li>
<li><a href="#">免费书店</a></li>
<li><a href="#">全球资询</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

（3）贵美left.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>贵美left</title>
<link href="css/guimeicss.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<img src="images/knowledge_hall.png" width="100%">
</body>
</html>

（4）贵美main.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>贵美main</title>
<style type="text/css">
.btn {
border-radius: 5px;
padding: 10px;
font-size: 16px;
background-color: #c4e3f3;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<a href="#">知识堂首页</a>»<a href="#">商家帮助</a>
<hr>
<p>网上安全交流流程如下：</p>
<button class="btn">选择商品</button> ->
<button class="btn">付款到支付宝</button> ->
<button class="btn">支付宝通知卖家发货</button> ->
<button class="btn">收到商品</button> ->
<button class="btn">支付宝付款给卖家</button> ->
<button class="btn">完成</button>
<hr>
<p>客户交易演示4步曲：</p>
<img src="images/trade_steps.png">
</div>
</div>
</body>
</html>

（5）贵美样式guimeicss.css

body, ul, ol, tr, dl, dd, form, input, h1 {
margin: 0px;
padding: 0px;
}

a {
color: #333;
text-decoration: none;
}

#container {
width: 1366px;
height: 200px;
margin: 0px auto;

}

#header ul {
height: 20px;
}

#header li {
list-style: none;
text-decoration: none;
}

#header {
background: url(../images/gk.jpg) no-repeat;
height: 200px;
background-size: 100%;
}

.menu {
height: 26px;
width: 45%;
float: right;
}

.menu, li {
float: left;
font-size: 14px;
text-decoration: none;
line-height: 32px;
}

.pic1 {
width: 28px;
height: 26px;
background: url(../images/icon.gif) no-repeat 0px 2px;
}

.pic2 {
width: 28px;
height: 26px;
background: url(../images/icon.gif) no-repeat -28px 2px;
}

.pic3 {
width: 28px;
height: 26px;
background: url(../images/icon.gif) no-repeat -84px 2px;
}

.pic4 {
width: 28px;
height: 26px;
background: url(../images/icon.gif) no-repeat -112px 2px;
}

.btn {
padding: 0px 5px;
text-align: center;
width: 38px;
height: 26px;
background: url(../images/icon.gif) no-repeat 0px -22px;
}

.hello {
height: 20px;
width: 560px;
text-align: center;
font-family: "楷体_GB2312";
float: right;
color: #C03;
font-size: 14px;
clear: right;
letter-spacing: 5px;
margin-top: 30px;
}

.nav {
height: 50px;
width: 100%;
clear: both;
}

.nav ul {
margin: 0px;
}

.nav li {
margin-top: 3%;
width: 116px;
font-size: 16px;
text-align: center;
float: left;
font-weight: bold;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航