page design
page main
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="mydiv.css" rel="stylesheet" type="text/css" />
<title>无标题文档</title>
</head>
<body>
<!--div固定框架-->
<div class="bg_base">
<!--页面头部框架-->
<div class="bg_herd">
<div class="bg_herdtext">
Welcome to my supermarket
</div>
<div id="herdfont" class="bg_herdfontright">
<p>
<a href="#">您好！ 欢迎来到我的电子商城，快来抢购吧！</a>
</p>
<p>
<a href="#">注册</a>|<a href="#">登录 </a>
</p>
</div>
<!--页面头部结束-->
</div>
<!--中部导航条开始-->
<div id="nav">
<a href="#" class="firstnar">商品分类</a>
<a href="#" class="twonar">首页</a>
<a href="#" class="stnar">特价促销</a>
<a href="#" class="stnar">天然燕窝</a>
<a href="#" class="stnar">名贵药材</a>
<a href="#" class="stnar">山珍海味</a>
<a href="#" class="stnar">中医药材</a>
</div>
<!--左边上第一个div开始-->
<div class="bg_midupter">
<dt>
<a href="#">商品系列</a>
</dt>
<dd>
<a href="#">> 花旗人参</a>
</dd>
<dd>
<a href="#">> 天然燕窝</a>
</dd>
<dd>
<a href="#">> 名贵药材</a>
</dd>
<dd>
<a href="#">> 山珍海味</a>
</dd>
<dd>
<a href="#">> 中医药材</a>
</dd>
<dd>
<a href="#">> 中式汤料</a>
</dd>
<dd>
<a href="#">> 特色食品</a>
</dd>
<div class="newtitle">
<span>特价促销动态</span>
<a href="#">更多</a>
</div>
<ul class="ulnews">
<li>
<img src="images/news.jpg" />
<a href="#"></a>
</li>
<li>
<img src="images/news.jpg" />
<a href="#"></a>
</li>
<li>
<img src="images/news.jpg" />
<a href="#"></a>
</li>
<li>
<img src="images/news.jpg" />
<a href="#"></a>
</li>
<li>
<img src="images/news.jpg" />
<a href="#"></a>
</li>
<li>
<img src="images/news.jpg" />
<a href="#"></a>
</li>
</ul>
<div class="newtitle">
<span>联系我们</span>
<a href="#"></a>
</div>
<ul id="ulcolos">
<li>
<span>联系方式:</span>
<a href="#">清华科技园</a>
</li>
</ul>
</div>
<!--搜索开始-->
<div class="serverbg">
<div class="serverbase">
<span>
<img src="images/serveriom.jpg"/>
<input value="在这里搜索你要的商品...." onfocus="javascript:if(this.value=='在这里搜索你要的商品....')this.value='';"/>
</span>
<input type="button" value="搜 索"id="servers"/>
</div>
</div>
<!--上部图片切换开始-->
<div class="middleImg"><img src="images/nest2oz.jpg" /><span>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
</span>
</div>
<!-- certrbr-->
<div class="centerbr">
<span>
商品
</span>
<a href="#">更多</a>
</div>
<!--显示很多小图片开始可以用table 也可以用li ui设计-->
<div class="showpic">
<table class="talbstyl">
<tr>
<td align="center"><img src="images/s80s.jpg" /></td>
<td align="center"><img src="images/s1g-rr.jpg" /></td>
<td align="center"><img src="images/s04g-rr_1.jpg" /></td>
<td align="center"><img src="images/a4ozs.jpg" /></td>
</tr>
<tr id="showalik">
<td><a href="#">Laddling Screan</a></td>
<td><a href="#">Laddling Screan</a></td>
<td><a href="#">Laddling Screan</a></td>
<td><a href="#">Laddling Screan</a></td>
</tr>
<td align="center"><img src="images/ts-120s.jpg" /></td>
<td align="center"><img src="images/btsa_1s.jpg" /></td>
<td align="center"><img src="images/btssuper_1s.jpg" /></td>
<td align="center"><img src="images/wgs_1.jpg" /></td> </tr>
<tr id="showalik">
<td><a href="#">Laddling Screan</a></td>
<td><a href="#">Laddling Screan</a></td>
<td><a href="#">Laddling Screan</a></td>
<td><a href="#">Laddling Screan</a></td>
</tr>
<tr>
<td align="center"><img src="images/s80s.jpg" /></td>
<td align="center"><img src="images/s1g-rr.jpg" /></td>
<td align="center"><img src="images/s04g-rr_1.jpg" /></td>
<td align="center"><img src="images/a4ozs.jpg" /></td>
</tr>
<tr id="showalik">
<td height="54"><a href="#">Laddling Screan</a></td>
<td><a href="#">Laddling Screan</a></td>
<td><a href="#">Laddling Screan</a></td>
<td><a href="#">Laddling Screan</a></td>
</table>
</div>
<!--外框div结束-->
</div>
</body>
</html>
--------------------- CSS---------------------
search_span_bg.jpg
serveriom.jpg
servesbg.jpg
pr.gif
kk.jpg
nars.jpg
nars_mid.jpg
certerbr.jpg
button-2.png
html,body { widht:100%; height:100%;}
/******************************/
/* base */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li, input, textarea,
fieldset, form, label, legend, textarea, select,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0; padding: 0; border: 0; outline: 0;
font-weight: normal; font-style: inherit; font-size: 15px; font-family: 宋体, arial; font-weight:normal;
vertical-align: baseline;
text-decoration:none;
color:#333333;
}
body {
line-height: 2em;/*行高2个字符宿进* text-indent:2em;*/
background-color:#E5E5E5;
}
/*mydiv开始 */
.bg_base{
width:1000px;height:900px;
margin:0 auto;
text-align:left;
border:1px solid black;
}
/*div头部herder*/
.bg_herd{
height:65px;width:1000px;
overflow:hidden;
}
.bg_herdtext{
height:30px; width:341px;
text-align:left;
float:left;
margin:10px;
margin-top:15px;
font-weight:bold;
font-size:22px;
color: #ff2d51;
text-shadow: 0 1px white;
text-decoration: none;
}
.bg_herdfontright{
height:65px;width:342px;
float:right;
margin:4px;
}
.bg_herdfontright p {
line-height:25px; text-align:right;
}
.bg_midupter{
width:190px;
float:left;
overflow:hidden;
}
.bg_midupter dt{
height:41px;width:190px;
background-image:url(images/pr.gif);
}
.bg_midupter dt a{
padding-left:35px;
line-height:50px;
font-size:15px;
font-weight:bold;
color:#000000;
}
.bg_midupter dd {
height:34px;width:190px;
background-image:url(images/nars_mid.jpg);
font-size:14px;
color:#000003;
display:block;
padding-left:20px;
}
.bg_midupter_nar a{
display:block;
width:138px; height:25px;
background-image:url(images/firstnavs.png);
}
#nav{
height:35px; width:1000px;
overflow:hidden;
margin-bottom:10px;
}
#nav a{
color:#FFFFFF;
line-height:35px;
text-align:center;
height:35px;
float:left;
display:block;
}
#nav .firstnar{
width:190px;
font-weight:bold;
margin-right:10px;
background-image:url(images/kk.jpg);
}
#nav .twonar{
width:133px;
background-image:url(images/kk.jpg);
}
#nav .stnar{
width:133px;
background-image:url(images/nars.jpg);
}
.newtitle{
background-image:url(images/button-2.png);;
float:left;
height:33px;
width:190px;
margin:10px 0;
color:#FFFFFF;
}
.newtitle span{
color:#FFFFFF;
padding-left:20px;
}
.newtitle a{
color:#FFFFFF;
float: right;
overflow:hidden;
padding-right:10px;
}
.ulnews{
background-color:#F2F2F2;
list-style:none;
margin-top:10px;
padding:0 20px;
}
.ulnews a{
color:#000003;
font-size:13px;
}
#ulcolos{
background-color:#FFFFFF;
list-style:none;
margin-top:10px;
padding:0 10px;
line-height:22px;
}
#ulcolos span{
font-size:13px;
color:#000003;
}
#ulcolos a{
font-size:12px;
}
#ulcolos a p{
padding-left:64px;
font-size:12px;
}
.serverbg{
float:right;
}
.serverbg .serverbase{
background-image: url(images/servesbg.jpg);
width:800px; height:33px;
float:right;
line-height:34px;
padding-top:7px;
}
.serverbg .serverbase span{
background-image:url(images/search_span_bg.jpg);
border:1px solid #ccc;
display:block;
height:25px;
float:left;
line-height:23px;
padding-right:10px;
margin-left:10px;
margin-right:5px;
}
#servers{
background-image:url(images/search.jpg);
padding-left:5px;
padding-bottom:2px;
width:95px;
height:25px;
font-size:16px;
color:#FFFFFF;
}
.serverbg .serverbase span img{
padding-left:5px;
padding-bottom:2px;
}
.serverbg .serverbase span input{
width:650px; background-color:transparent; border:none;
}
.serverbg .serverbase img{
vertical-align:middle;
}
.middleImg{
width:800px; height:200px;
float:right;
margin-top:10px;
position: relative;
}
.middleImg img{
width:800px; height:200px;
}
.middleImg span{
position:absolute;
left:730px;
top:170px;
width:60px;
}
.middleImg span a{
font-weight:bold;
}
.centerbr{
width:800px;
height:36px;
background-image:url(images/certerbr.jpg);
float:right;
margin-top:10px;
overflow:hidden;
}
.centerbr span{
display:block;
float:left;
line-height:36px;
text-align:center;
padding-left:10px;
font-weight:bold;
color: #000000;
}
.centerback{
width:800px;
height:36px;
background-image:url(images/certerbr.jpg);
float:right;
overflow:hidden;
}
.centerback span{
diaplay:block;
float:left;
line-height:36px;
text-align:center;
padding-left:10px;
}
.centerbr a{
float:right;
padding-right:10px;
color:#000000;
line-height:36px;
text-align:center;
display:block;
}
.showpic{
width:800px; height:480px;
background-color:#FFFFFF;
float:right;
}
.talbstyl{
width:100%;height:100%;
}
.talbstyl tr td img{
width:153px; height:100px;
text-align:center;
}
.talbstyl #showalik td a{
text-align:center;
display:block;
}
/*下端带阴影的 */
.yinying {
border-radius: 5px;
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.5);
border: 1px solid rgb(204, 204, 204);
width: 40px;
height: 40px;
background-color: blue;
margin: 10px;
}
/*a:focus, a:hover {
color:
black;
}
a {
color: mediumBlue;
text-shadow: 0 1px white;
text-decoration: none;
}
*/
a:link {font-size:15px; text-decoration:none; color:#000000;}
a:visited {font-size:15px; text-decoration:none; color:#000000;}
a:hover {font-size:15px; text-decoration:none; color:#FF0000;}
.bg_base_back{
width:1000px;height:640px;
margin:0 auto;
text-align:left;
border:1px solid black;
}
.bg_backtext{
height:30px; width:341px;
text-align:left;
float:left;
margin:10px;
margin-top:15px;
font-weight:bold;
font-size:22px;
color:mediumBlue;
text-shadow: 0 1px white;
text-decoration: none;
}