<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/reset.css">
<!-- <link rel="stylesheet" href="../css/normalize.css"> -->
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/personalCenter.css">
</head>
<body>
<!-- 欢迎页面 -->
<div id="welcom">
<div class="container clearfix">
<div class="left">
<p><a href="#">欢迎来到环宇购物</a></p>
<p>客服热线 <a href="">028-5667097</a></p>
</div>
<ul>
<li class="first"><a href="">登录</a></li>
<li class="sec"><a href="">注册</a></li>
<li><a href="">我的</a></li>
<li><a href="">时尚资讯</a></li>
</ul>
</div>
</div>
<!-- /* logo区域 -->
<div id="logo">
<div class="container">
<div class="lef clearfix">
<a href=""><img src="../images/logo.jpg" alt=""></a>
</div>
<div class="rig">
<img src="../images/bag.jpg" alt="">
<div>口袋（<span> <a href="">0</a> </span>)</div>
</div>
</div>
</div>
<!-- 导航 -->
<div id="nav">
<div class="container">
<ul class="clearfix">
<li class="first"><a href="">最新</a></li>
<li><a href="">品牌</a></li>
<li><a href="">服装</a></li>
<li><a href="">鞋子箱包</a></li>
<li class="last"><a href="">珠宝配饰</a>
<div class="box">
<div class="container clearfix">
<ul class="clearfix">
<li class="da"><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>
<ul class="clearfix">
<li class="da1"><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>
<ul class="rig clearfix">
<li class="da"><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>
<ul class="clearfix">
<li class="da1"><a href="">APM Monaco</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>
</li>
<li><a href="">护肤美妆</a></li>
<li><a href="">家居家纺</a></li>
<li><a href="">品牌专柜</a></li>
</ul>
<div class="box2">
<input type="text" placeholder="请输入关键字">
<img src="../images/fangda.jpg" alt="">
</div>
</div>
</div>
<!-- 个人信息 -->
<div id="info">
<div class="container clearfix">
<div class="lef">
<div class="top">
我的环宇
</div>
<ul>
<li class="fir"><a href="">订单中心</a>
<ul>
<li><a href="">我的订单</a></li>
<li><a href="">我的收藏</a></li>
<li><a href="">我的预定</a></li>
<li><a href="">关注旗舰店</a></li>
</ul>
</li>
<li><a href="">我的账户</a>
<ul>
<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>
</li>
<li><a href="">会员中心</a>
<ul>
<li><a href="">会员等级</a></li>
<li><a href="">我的积分</a></li>
</ul>
</li>
</ul>
</div>
<div class="rig">
<div class="box11">
<div class="top">
<div class="p1">个人信息</div>
<div class="p2">完善个人信息，送积分</div>
</div>
<div class="bot">
<form action="" method="post">
<table>
<tr>
<td>*用户名</td>
<td>18798362510</td>
</tr>
<tr>
<td>*姓名:</td>
<td><input type="text" class="inpu1"></td>
</tr>
<tr>
<td>*性别</td>
<td class="gen"><input type="radio" name="gen">男 <input type="radio" name="gen">女
</td>
</tr>
<tr>
<td>*邮箱</td>
<td><input type="text" class="inpu1"></td>
<td><a href="">邮箱验证</a></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>*手机号</td>
<td><input type="text" class="inpu1"></td>
<td><a href="">短信验证</a> </td>
</tr>
<tr>
<td>出生日期</td>
<td>
<select name="" id="in">
<option value="1995">
1995
</option>
<option value="">
1995
</option>
<option value="">
1995
</option>
<option value="">
1995
</option>
</select>
<select name="" id="in">
<option value="01">
01
</option>
<option value="">
02
</option>
<option value="">
03
</option>
<option value="">
04
</option>
</select>
<select name="" id="in">
<option value="01">
01
</option>
<option value="">
02
</option>
<option value="">
03
</option>
<option value="">
04
</option>
</select>
</td>
</tr>
<tr>
<td>收入</td>
<td>
<select name="" id="">
<option value="">请选择</option>
</select>
</td>
</tr>
<tr>
<td>职业</td>
<td>
<select name="" id="">
<option value="">请选择</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td class="sub">
<button type="submit" class="bu1">提交</button>
<button type="submit">提交</button>
</td>
<td class="sub">
<!-- <button type="submit">提交</button> -->
</td>
</tr>
</table>
</form>
</div>
</div>
<div class="box2">
<div class="save clearfix">
<div class="b1">
<div><a href="">最近浏览商品</a></div>
<div><a href="">您收藏的商品</a></div>
</div>
<div class="thing">
<div>
<img src="../images/fot1.jpg" alt="">
<div class="pri">PRADA</div>
<div class="pri">¥19500</div>
</div>
<div><img src="../images/fot2.jpg" alt="">
<div class="pri">PRADA</div>
<div class="pri">¥19500</div>
</div>
<div><img src="../images/fot3.jpg" alt="">
<div class="pri">PRADA</div>
<div class="pri">¥19500</div>
</div>
<div><img src="../images/fot4.jpg" alt="">
<div class="pri">PRADA</div>
<div class="pri">¥19500</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 售后管理 -->
<div id="service">
<div class="container">
<div><a href=""><img src="../images/shou1.jpg" alt=""></a></div>
<div><a href=""><img src="../images/shou2.jpg" alt=""></a></div>
<div><a href=""><img src="../images/shou3.jpg" alt=""></a></div>
<div><a href=""><img src="../images/shou4.jpg" alt=""></a></div>
</div>
</div>
<!-- 声明 -->
<div id="announce">
<div class="container">
<div class="rig">
<ul>
<li class="first"><a href="">服务保障</a></li>
<li><a href="">品牌授权正品</a></li>
<li><a href="">品牌客服</a></li>
<li><a href="">预约到店体验</a></li>
<li><a href="">7天无理由退换</a></li>
</ul>
<ul>
<li class="first"><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>
<ul>
<li class="first"><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>
<ul>
<li class="first"><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 class="lef">
<p>合作支持</p>
<a href=""> <img src="../images/tao.jpg" alt=""></a>
<a href=""><img src="../images/ten.jpg" alt=""></a>
<a href=""><img src="../images/sin.jpg" alt="" class="last"></a>
</div>
</div>
</div>
<!-- 页脚 -->
<div id="footer">
<div class="container">
<ul class="top clearfix">
<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 class="last"><a href="">服饰</a></li>
</ul>
<div> <a href="">网站地图</a>丨<a href="">品牌合作专区</a>丨<a href="">媒体聚焦</a>丨<a href="">商务合作</a>丨<a href="">商家合作</a>丨<a href="">加入我们</a>丨<a href="">友情链接</a> 丨<a href="">奢尚志</a>丨<a href="">联系我们</a>丨<a href="">投诉建议</a> </div>
<div>Copyright © 2008-2016 瑞美嘉信国际信息技术（北京）有限公司 版权所有京ICP备09012701号-1 京公网安备110105007400号 食品经营许可证号：</div>
</div>
</div>
</body>
</html>
#info {
height: 1267px;
/* background-color: yellow; */
}
#info .container {
height: 1267px;
/* background-color: green; */
border-top: 1px solid transparent;
}
#info .container>.lef {
width: 181px;
height: 634px;
/* background-color: red; */
border-top: 5px solid #e7af70;
box-sizing: border-box;
/* padding: 30px; */
margin-top: 30px;
float: left;
}
#info .container>.lef .top {
height: 67px;
font-size: 22px;
line-height: 67px;
width: 145px;
border-bottom: 1px solid #eeeeee;
text-align: center;
margin-left: 20px;
}
#info .container>.lef>ul {
margin-top: 22px;
border: 1px solid #eeeeee;
}
#info .container>.lef>ul>li {
width: 180px;
height: 33px;
/* border: 1px solid black; */
text-align: center;
font-size: 16px;
line-height: 33px;
margin-bottom: 20px;
background-color: #e7af70;
}
#info .container>.lef>ul>li:hover {
margin-bottom: 183px;
}
#info .container>.lef>ul>li>ul {
width: 180px;
height: 150px;
/* background-color: aqua; */
display: none;
}
#info .container>.lef ul>li:hover ul {
display: block;
color: black;
}
#info .container>.rig>.box11 {
width: 936px;
height: 658px;
/* background-color: red; */
border: 1px solid #eeeeee;
}
#info .container>.rig {
width: 936px;
height: 1078px;
/* background-color: skyblue; */
float: right;
margin-top: 30px;
}
#info .container>.rig>.box11>.top {
width: 898px;
height: 65px;
/* background-color: green; */
margin: 0 auto;
border-bottom: 1px solid #eeeeee;
}
#info .container>.rig>.box11>.top>.p1 {
font-size: 20px;
}
#info .container>.rig>.box11>.top>.p2 {
font-size: 16px;
}
#info .container>.rig>.box11>.bot {
margin-top: 48px;
margin-left: 225px;
width: 400px;
height: 428px;
/* background-color: aqua; */
}
#info .container>.rig>.box11>.bot td {
height: 40px;
/* font-size: 14px; */
width: 150px;
}
#info .container>.rig>.box11>.bot .inpu1 {
width: 146px;
height: 30px;
}
#info .container>.rig>.box11>.bot .gen {
font-size: 14px;
}
#info .container>.rig>.box11>.bot select {
/* width: 46px; */
height: 30px;
}
#info .container>.rig>.box11>.bot button {
background-color: #cf0101;
color: #ffffff;
width: 90px;
height: 28px;
}
#info .container>.rig>.box11>.bot .bu1 {
background-color: #eeeeee;
color: black;
}
#info .container>.rig>.box11>.bot .sub {
width: 214px;
height: 28px;
}
#info .container>.rig>.box2>.save {
border-top: 1px solid transparent;
width: 942px;
height: 433px;
margin-top: 50px;
/* background-color: yellow; */
}
#info .container>.rig>.box2>.save>.b1>div {
width: 140px;
height: 32px;
border: 1px solid gray;
background-color: #eeeeee;
float: left;
border-radius: 8px;
font-size: 16px;
text-align: center;
line-height: 32px;
}
#info .container>.rig>.box2>.save>.b1>div:hover {
background-color: #cf0101;
color: #ffffff;
}
#info .container>.rig>.box2>.save>.thing {
margin-top: 32px;
width: 939px;
height: 398px;
border: 1px solid #eeeeee;
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}
#info .container>.rig>.box2>.save>.thing>div {
width: 200px;
height: 250px;
/* background-color: green; */
border: 1px solid transparent;
}
#info .container>.rig>.box2>.save>.thing img {
margin-top: 28px;
margin-left: 36px;
}
#info .container>.rig>.box2>.save>.thing .pri {
text-align: center;
}
#info .container>.rig>.box2>.save>.thing>div {
transition: opacity 1s ease-in-out;
}
#info .container>.rig>.box2>.save>.thing>div:hover {
transform: scale(1);
/* 图片透明度为0.5，通过过渡属性实现淡出效果 */
box-shadow: 3px 3px 3px 3px gray;
}
3220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
