【web】模拟京东项目-demo01（广告栏、导航条）

来源：互联网发布：java数组调用方法编辑：程序博客网时间：2024/05/02 00:50

模拟京东项目-demo01（广告栏、导航条）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>京东商城·多快好省</title><style type="text/css">ul, li, h1, h2, h3, h4, h5, h6, p, ol, p, body {margin: 0; padding:0;}/* 广告栏 */.add {width:990px; height:70px;margin:10px auto;    /* 上方留10px，并居中 */}/* 导航条 */.nav {width:990px; height:40px;     /* 设置一个宽高给被引用的div */background-image: url("img/nav.png");    /* 引用背景图片，自动平铺 */margin:0 auto;}.nav ul li{  list-style: none; float: left;   /* 设置li浮动 */border:0px solid black; width:85px; height:40px;/* 设置li的宽高 */text-align: center; line-height: 40px;   /* 字体居中 */color: white; font-family: 微软雅黑;font-size: 15px;/* 字体大小 */font-weight: bolder;       /* 字体磅值（粗细） */}.nav ul li a{ text-decoration: none;      /* 下横线取消 */display:block;     /* 鼠标变小手 *//* 下面部分同<li> */width:85px; height:40px;text-align: center; line-height: 40px;color: white; font-family: 微软雅黑;font-size: 15px; font-weight: bolder;}/* 当鼠标悬停到a链接上时 更新css样式  */.nav ul li a:hover{background-color: rgb(164, 0, 0);}#li1 { width:210px; text-align: left; }#li8 { float: right;width:141px;}</style></head><body><!-- 广告栏 --><div class="add"><img src="img/add.gif"/></div><!-- 导航条 --><div class="nav"><ul><li id="li1">    全部商品分类</li><li><a href="javascript:;">首页</a></li><li><a href="javascript:;">服装城</a></li><li><a href="javascript:;">京东超市</a></li><li><a href="javascript:;">团购</a></li><li><a href="javascript:;">夺宝岛</a></li><li><a href="javascript:;">闪购</a></li><li id="li8"><img alt="" src="img/zfyl.jpg" /></li></ul></div></body></html>

运行效果：

0 0