1 Star 0 Fork 0

王风宝/SUPERMAKET

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
关于(2).html 9.68 KB
一键复制 编辑 原始数据 按行查看 历史
王风宝 提交于 2020-05-08 17:13 . WEB基础参赛项目,荣获三等奖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>关于</title>
<style>
.arrow{
width:32px ;
height: 32px;
background-image: url(img/arrow.png);
position: fixed;
top: 90%;
right: 20px;
z-index: 11;
}
body{
background-image:url(img/关于(2)/22.jpg) ;
background-repeat: no-repeat;
background-repeat:round;
background-attachment:fixed ;
}
*{
margin: 0px;
padding: 0px;
list-style-type: none;
text-decoration: none;
color: #000000;
}
.heard{
width: 100%;
height: 200px;
}
.heard-top{
width: 100%;
height: 50px;
background-color: #000000;
}
.heard-top div{
width: 1200px;
height: 50px;
margin: auto;
/*border: 1px solid white;*/
}
.heard-top div img{
width: 200px;
height: 50px;
float: left;
}
.heard-top div ul li a{
width: 100px;
height: 50px;
float: right;
color: #FFFFFF;
line-height: 50px;
text-align: center;
}
.heard-top div ul li:hover a{
color: #FE9126;
transition: all 1s;
}
/*顶部黑色导航栏*/
.heard-cen{
width: 100%;
height: 100px;
background-color: white;
}
.heard-cen div{
width: 1200px;
height:100px;
/*border: 1px solid;*/
position: relative;
margin: auto;
}
.heard-cen div h1{
margin: auto;
width: 500px;
height: 100px;
font-size: 50px;
line-height: 100px;
color: #FE9126;
}
.heard-cen div input{
width: 250px;
height: 40px;
font-size: 30px;
position:absolute;
top: 30px;
right: 70px;
}
.heard-cen div span{
width: 40px;
height: 40px;
float: right;
position: absolute;
top: 30px;
right:20px;
border: 1px solid;
background-position-x: -12px;
background-position-y: 53px;
background-image:url(img/sousuo.png) ;
}
.heard-cen div span:hover{
background-image: url(img/sss.png);
}
/*中间白色导航带搜索框*/
.heard-bot{
width: 100%;
height: 50px;
background-color: #FE9126;
}
.h-b-d{
width: 1200px;
height:50px;
margin: auto;
/*border: 1px solid;*/
position: relative;
}
.index{
width: 200px;
height: 50px;
float: left;
line-height: 50px;
text-align: center;
/*border: 1px solid;*/
}
.one{
width:200px;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
cursor: pointer;
/*border: 1px solid;*/
}
.two{
display: none;
width: 200px;
height: 250px;
background-color: white;
z-index: 4;
position: relative;
box-shadow: 0px 0px 5px;
/*border: 1px solid;*/
}
.two ol li a{
width: 200px;
height: 60px;
line-height: 60px;
text-align: center;
display: block;
color: #999999;
}
.two ol li:hover a{
color: #FE9126;
box-shadow: 0px 0px 5px;
}
.one:hover .two{
display: block;
}
/*导航栏结束可以复制*/
.bottom{
width: 100%;
height: 300px;
text-align: center;
background-color: #2B2A2A;
}
.bottom img{
width: 400px;
height:90px;
margin-top: 100px;
}
.bottom a{
width: 100%;
min-height: 50px;
line-height: 50px;
text-align: center;
color: white;
display: block;
}
/*默认*/
.body{
width: 100%;
height: 1870px;
}
.top{
width: 100%;
height: 800px;
background-color: white;
}
.top h1{
width: 1200px;
height: 50px;
margin: auto;
text-align: center;
line-height: 50px;
font-size: 50px;
position: relative;
top: 70px;
}
.top hr{
width: 250px;
height: 2px;
margin: auto;
margin-top: 20px;
background-color: #87CEEB;
position: relative;
top: 75px;
}
.top-b{
width: 1200px;
height: 500px;
margin: auto;
margin-top: 50px;
border: 1px solid;
position: relative;
top: 90px;
}
.top-b h1{
width: 1200px;
height: 100px;
font-size: 60px;
text-align: center;
line-height: 100px;
}
.top-b h1:hover{
color: orange;
}
.top-b h2{
width: 1200px;
height: 100px;
font-size: 30px;
text-align: left;
text-indent: 60px;
line-height: 40px;
margin-top: 100px;
}
.top-b h2:hover{
color: #398439;
}
.center{
widows: 100%;
height: 400px;
/*background-color:green;*/
}
.center h1{
width: 100%;
height: 200px;
font-size: 70px;
color: #FFFFFF;
line-height: 200px;
text-align: center;
}
.center h2{
width: 100%;
height: 100px;
font-size: 40px;
line-height: 100px;
text-align: center;
color: #FFFFFF;
}
.bot{
width: 100%;
height: 750px;
background-color: white;
border: 1px white solid;
}
.bot h3{
width: 1200px;
height:70px;
margin: auto;
margin-top: 70px;
font-size: 50px;
text-align: center;
display: block;
}
.bot hr{
height: 2px;
margin: auto;
width: 220px;
margin-bottom: 30px;
background-color: blue;
}
.bot-c{
width: 1200px;
height: 500px;
/*border: 1px solid;*/
margin: auto;
}
.women{
width:350px;
height: 460px;
float: left;
/*border: 1px solid;*/
margin: 20px;
position: relative;
overflow: hidden;
}
.women img{
width: 100%;
height: 100%;
}
.women div{
height: 70px;
width: 350px;
background-color:rgba(135,206,235,.7);
position: absolute;
top: -70px;
}
.women:hover div{
position: absolute;
top: 380px;
transition: all 2s;
}
.women div h1{
width: 350px;
height: 70px;
text-align: center;
line-height: 70px;
color: rgba(62,75,83,);
}
</style>
</head>
<!--
作者:王风宝
时间:2019-11-22
描述:关于商城
-->
<body>
<div class="heard"><!--顶部导航-->
<a href="#DINGBU" class="arrow"></a>
<div class="heard-top">
<div>
<img src="img/logo.png" /><a name="DINGBU">
<ul>
<li><a href="购物车(2).html">购物车</a></li>
<li><a href="登录(2).html">登录</a></li>
<li><a href="注册(2).html">注册</a></li>
<li><a href="关于(2).html">关于</a></li>
</ul></a>
</div>
</div><!--顶部黑色-->
<div class="heard-cen">
<div>
<h1>SUPER MARKET</h1>
<input type="text" />
<span></span>
</div>
</div>
<div class="heard-bot">
<div class="h-b-d">
<ul>
<li class="index"><a href="index.html">首页</a></li>
<li class="one">
<p>水果</p>
<div class="two">
<ol>
<li><a href="水果(2).html">春季水果</a></li>
<li><a href="水果(2).html">夏季水果</a></li>
<li><a href="水果(2).html">冬季水果</a></li>
<li><a href="水果(2).html">秋季水果</a></li>
</ol>
</div>
</li>
<li class="one">
<p>蔬菜</p>
<div class="two">
<ol>
<li><a href="蔬菜.html">青菜</a></li>
<li><a href="蔬菜.html">干菜</a></li>
<li><a href="蔬菜.html">肉类</a></li>
<li><a href="蔬菜.html">海鲜</a></li>
</ol>
</div>
</li>
<li class="one">
<p>零食</p>
<div class="two">
<ol>
<li><a href="零食(2).html">坚果</a></li>
<li><a href="零食(2).html">辣条</a></li>
<li><a href="零食(2).html">饼干</a></li>
<li><a href="零食(2).html">干果</a></li>
</ol>
</div>
</li>
<li class="one">
<p>生活用品</p>
<div class="two">
<ol>
<li><a href="生活用品(2).html">餐具</a></li>
<li><a href="生活用品(2).html">家具</a></li>
<li><a href="生活用品(2).html">卫浴</a></li>
<li><a href="生活用品(2).html">服饰</a></li>
</ol>
</div>
</li>
<li class="one">
<a href="每日推荐2.html">每日特价</a>
</li>
</ul>
</div>
</div>
</div>
<!--顶部导航结束-->
<div class="body">
<div class="top">
<h1>关于我们</h1>
<hr />
<div class="top-b">
<h1>创意来源</h1>
<h2>
网购是目前人们购物的常态,
品牌有品牌的独立官网商城。
还有京东、淘宝这种大杂烩类
型的购物网站。然而与人们日
常相关的超市却没有一个购物
平台。水果蔬菜这种每天不可
缺少的东西,都需要跑来跑去
的购买。我们这个购物平台的
初衷就是更方便人们每天的购
物。通过与小区的便利店或者
超市合作让人们可以足不出户
就可以购买生活中的必需品。
</h2>
</div>
</div><!--上边-->
<div class="center">
<h1>19计算机-智平1班</h1>
<h2>王风宝 任寒波 李成</h2>
</div>
<div class="bot">
<h3>我的团队</h3>
<hr />
<div class="bot-c">
<div class="women">
<img src="img/关于(2)/我们/timg.jpeg" />
<div>
<h1>王风宝</h1>
</div>
</div>
<div class="women">
<img src="img/关于(2)/我们/timg-1.jpeg" />
<div>
<h1>任寒波</h1>
</div>
</div>
<div class="women">
<img src="img/关于(2)/我们/1574782707245.jpg" />
<div>
<h1>李成</h1>
</div>
</div>
</div>
</div>
</div><!--身体-->
<div class="bottom">
<img src="img/logo2.png" />
<a href="#DINGBU">返回顶部</a>
</div>
</body>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
HTML
1
https://gitee.com/WangFengbao/SUPERMAKET.git
[email protected]:WangFengbao/SUPERMAKET.git
WangFengbao
SUPERMAKET
SUPERMAKET
master

搜索帮助