<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {background: rgb(203,96,179);
font-family: '宋体', sans-serif;}
a{
text-decoration: none;
}
ul {
list-style-type: none;
display: flex;
}
.header {
padding: 0;
width: 100%;
height: 30px;
}
.container {
width: 1006px;
height: 30px;
margin: 0 auto;
}
.container ul {
list-style-type: none;
display: flex;
margin-left: 800px;
}
.container ul li{
margin-top: 5px;
margin-left: 13px;
}
.container ul li a{
text-decoration: none;
color: white;
}
.container ul li a:hover{
color: black;
}
/* //header-top */
.header-top{
width: 1010px;
height: 147px;
background-color: white;
margin: 0 auto;
border-radius: 15px 15px 0 0;
display: flex;
}
.header-top .header-top-left{
flex: 1;
}
.header-top .header-top-middle{
flex: 2;
}
.header-top .header-top-right{
flex: 1;
display: flex;
}
.header-top-right div{
flex: 1;
}
.shop {
height: 80px;
margin-top: 50px;
}
/* 导航栏 */
.header-nav {
width: 1010px;
height: 61px;
background-color:#333333;
margin: -16px auto;
}
.header-nav li a{color: white;}
.header-nav ul li{
line-height: 61px;
text-align: center;
}
.header-nav ul li:first-child{
margin-left: 200px;
}
.header-nav ul li{
margin-left: 70px;
}
.header-nav ul li:hover{
background-color: #631261;
}
/* 内容 */
.content {
height: 1112.94px;
width: 1010px;
margin: 13px auto;
display: flex;
}
/* 内容左部分 */
.content .content-left{
flex: 1;
background-color: white;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.content-left div:first-child{
width: 350px;
height: 107px;
}
/* ????????????????????????????????????????????????????????????????????????????? */
.content-left div:nth-child(2){
width: 350px;
height: 203.98px;
display: flex;
flex-direction: column;
border: 1px black solid;
border-radius: 12px 12px 12px 12px;
}
.content-left div:nth-child(2) .left-t{
flex:8;
display: flex;
}
.content-left div:nth-child(2) .left-button{
flex: 1;
}
/* 1111111111111111111111111111111111111111111111111111111111111111111111111 */
.content-left div:nth-child(3){
width: 350px;
height: 201.98px;
border: 1px black solid;
border-radius: 12px 12px 12px 12px;
}
/* 1111111111111111111111111111111111111111111111111111111111 */
.content-left div:nth-child(4){
width: 350px;
height: 203.98px;
border: 1px black solid;
border-radius: 12px 12px 12px 12px;
}
.content-left div:last-child{
width: 350px;
height: 203.98px;
border: 1px black solid;
border-radius: 12px 12px 12px 12px;
}
/* 内容右部分 */
.content .content-right{
flex: 2;
background-color:white;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.content-right div:first-child{
width: 650px;
height: 254px;
}
/* 111111111111111111111111111111111111111111111111111111111111 */
.content-right div:nth-child(2){
width: 650px;
height: 222.41px;
}
.content-right div:nth-child(2) .right-div2{
display: flex;
width: 640px;
height: 125.5px;
margin-left: 10px;
}
.content-right div:nth-child(2) .right-div2 .right-div2-1111{
flex: 1;
}
.content-right div:nth-child(3){
width: 650px;
height: 189px;
}
.content-right div:nth-child(4){
width: 650px;
height: 189px;
}
.content-left .search{
background-image: url(./img/se.png);
}
.col-md-4 {
position: relative;
padding-right: px;
padding-left: 3px;
}
.search h5 {
color: #fff;
font-size: 1em;
}
.search input[type="submit"] {
width: 86px;
height: 100px;
background: url(./img/search.png) no-repeat 0px 0px;
border: none;
cursor: pointer;
position: absolute;
outline: none;
top: 7px;
right: 0px;
padding: 0;
-webkit-appearance: button;
margin-top: 12px;
}
.foot{
width: 1010px;
height: 80px;
background-color: #CF3DA3;
margin: -11px auto;
text-align: center;
color: white;
line-height:80px ;
}
.zzzzzz .aaaaaa a:hover {
color: red;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<ul>
<li><a href="">登录</a><span></span>|</li>
<li><a href="">注册</a><span></span>|</li>
<li><a href="">联系</a><span></span>|</li>
</ul>
</div>
</div>
<div class="header-top">
<div class="header-top-left"><img src="./img/logo.png" alt="" / style="margin-top: 30px ;"></div>
<div class="header-top-middle"><img src="./img/stone.png" alt="" height="" / style="margin-top: 20px;margin-left: 40px;"></div>
<div class="header-top-right">
<div><a href="">
<img src="./img/bag.png" alt="" / style="margin-top: 40px; margin-left: 25px;"></a></div>
<div>
<div class="shop">
<h6 style="height: 3px;color: #631261;">购物车</h6>
<span style="font-size: 13px;">3 件商品 | ¥199</span>
<p><a href="">查看购物车>></a></p>
</div>
</div>
</div>
</div>
<div class="header-nav">
<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>
</div>
<div class="content">
<div class="col-md-4 content-left">
<div class="search">
<h5>查询</h5>
<form action="">
<input type="text" / value="请输入关键字" style="margin-top:-2px;">
<input type="submit" name="" id="">
<p></p>
</form>
</div>
<div class="wq">
<div class="left-t">
<div><img src="./img/ri.jpg" alt="" /></div>
<div>
<h5 style="color:#A336A2">今日特惠</h5>
<p style="margin-left: 40px;">原价 ¥ 1999</p>
<p style="font-weight: 900;">现价 ¥ 1680</p>
<a href="" style="color: #D03BCF; margin-left:10px;">更多信息>></a>
</div>
</div>
<div class="left-button" style="background-color: #4D4A4A;color: white;height: 5px;;">特色礼品</div>
</div>
<div>
<p><img src="./img/pic2.jpg" alt="" / width="350px" height="147px" style="margin-top: -16px;border-radius: 12px 12px 0 0;"></p>
<div style="width: 350px;height:60px;background-color: #4D4A4A;border-radius: 0 0 12px 12px;margin-top: -20px;"><a href="" style="color:white;padding-top: 17px;padding-left: 12px;">礼品卷</a></div>
</div>
<div>
<p><img src="./img/pic1.jpg" alt="" / width="350px" height="147px" style="margin-top: -16px;border-radius: 12px 12px 0 0;"></p>
<div style="width: 350px;height:60px;background-color: #4D4A4A;border-radius: 0 0 12px 12px;margin-top: -20px;"><a href="" style="color:white;padding-top: 17px;padding-left: 12px;">礼品卷</a></div>
</div>
<div><p><img src="./img/pic.jpg" alt="" / width="350px" height="147px" style="margin-top: -16px;border-radius: 12px 12px 0 0;"></p>
<div style="width: 350px;height:60px;background-color: #4D4A4A;border-radius: 0 0 12px 12px;margin-top: -20px;"><a href="" style="color:white;padding-top: 17px;padding-left: 12px;">产品发布</a></div></div>
</div>
<div class="content-right">
<div>
<img src="./img/banner.png" alt="" / width="640" style="margin-left: 10px;">
</div>
<div>
<h2>
<span style="color: #D45BD4;">结婚</span>
戒指
</h2>
<div class="right-div2">
<div class="right-div2-1111">
<img src="./img/pi.jpg" alt="" />
<h6> 售价 ¥3366</h6>
<p style="color: #d45bd4;">购物车 | 明细</p>
</div >
<div class="right-div2-1111">
<img src="./img/pi1.jpg" alt="" />
<h6> 售价 ¥3388</h6>
<p style="color: #d45bd4;">购物车 | 明细</p>
</div>
<div class="right-div2-1111">
<img src="./img/pi2.jpg" alt="" />
<h6> 售价 ¥3988</h6>
<p style="color: #d45bd4;">购物车 | 明细</p>
</div>
<div class="right-div2-1111">
<img src="./img/pi3.jpg" alt="" />
<h6> 售价 ¥3366</h6>
<p style="color: #d45bd4;">购物车 | 明细</p>
</div>
</div>
</div>
<div class="zzzzzz">
<h2 class="aaaaaa"><a href="" style="color: black;padding-left: 4px;">新品发布</a></h2>
<p style="margin-left: 10px;">3月23日—30日，世界顶级盛会——瑞士巴塞尔世界钟表珠宝博览会（BASELWORLD 2017）隆重举行，继2015年和2016年连续两年受邀入驻，商城钻石今年再度惊艳亮相，再次进驻国际顶级品牌云集的2号馆，并于3月25日盛大发布“真情”系列高级珠宝，以兼具世界潮流和文化韵味的艺术作品对话世界，再次用东方原创的艺术奇迹向国际社会传递博大精深的中国传统文化，也进一步丰富了巴塞尔展的多元文化，受到媒体嘉宾们的极力推崇和主办方的高度认可。现场珠光宝气、熠熠生辉，吸引了国内外上百家媒体聚焦报道。</p>
</div>
<div>
<h2><a href="" style="color: black;padding-left: 4px;">体验中心</a></h2>
<p style="margin-left: 10px;">珠宝商城积极拓展线下体验中心，以优质的服务与雅致的环境带来全新的珠宝行业O2O模式。诚邀十年间与品牌共同成长、见证爱情的会员，参与“见证真爱”的新店开业庆典。 十年间，体验中心始终以卓越品质钻石与细心周到的服务为步入其间的消费者带来更好的钻石体验。珠宝商城一直与会员有着长久的情谊，光芒赋予你，快乐共享与我。与会员的互动不止在于线上与线下，更为他们带来了多元化的服务，创意的求婚服务、定期的会员活动以及针对产品的保养服务，都是商城与会员分享的爱与诚意。秉持着对于钻石之美的追求，体验中心为近百万会员带来爱情的闪耀信物。</p>
</div>
</div>
</div>
<div class="foot">
Copyright © 2017 珠宝商城 ICP备10012222号
</div>
</body>
</html>
哇哇哇额企鹅啊
最新推荐文章于 2025-05-20 17:03:20 发布
扫一扫
649
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
