全程写了一下午，大概持续作战六个小时，初学web有很多东西记不清，知识还不能很熟练运用，不断试错，最终差不多仿写出了这个页面http://baijiahao.baidu.com/s?id=1708581129511349149
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度百家号页面</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.index{
top: 0;
/* width: 1215.36px; */
height: 70px;
background-color: #F8F8F9;
position: sticky;
}
#login0{
margin-left: 35.2px;
}
#login1{
background-color: #4e71f2;
border: none;
margin-top: -16px;
margin-right: 30px;
float: right;
}
#login{
margin-top: -16px;
margin-right: 60px;
float: right;
}
a{
color: #000;
font-size: 13px;
line-height: 13px;
text-decoration: none;
}
a:hover{
color: #0000FF;
}
.header{
background-color: #f8f8f9;
/* width: 1215.36px; */
height: 217.6px;
border-top: 0px;
border-bottom: 1px solid #f2f2f2;
}
.header #header1{
width: 900px;
height: 119.6px;
margin-top: 41px;
font-size: 40px;
line-height: 58px;
padding-top: 41px;
padding-bottom: 21px;
/* text-align: justify; */
font-weight: 700;
font-family: Microsoft Yahei,微软雅黑,宋体;
text-align: center;
}
.header #header1 h2{
margin-top: -16px;
/* margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px; */
}
.header #header2 {
margin-left: 85px;
margin-top: -50px;
width: 47px;
height: 47px;
border-radius: 50%;
overflow: hidden;
text-align: center;
}
#header3{
margin-left: 200px;
margin-top: -50px;
}
#header3 #id1{
color: #000000;
font: 16px;
margin: 0px 0px 5px;
}
#header3 #id2{
color: #999;
}
#header3 a:hover{
color: #000;
text-decoration: underline;
}
.container{
background-color: #FFFFFF;
/* width: 1215.36px; */
height: 6675.55px;
}
.container .section{
width: 649px;
height: 6675.55px;
background-color: #FFFFFF;
padding: 0px 50px 0px 0px;
margin-left: 85px;
float: left;
border-right: 1px solid #f2f2f2;
}
.container .aside{
width: 250px;
height: 6675.55px;
background-color: #FFFFFF;
margin: 0px 0px 0px 1px;
padding: 0px 0px 0px 50px;
margin-right: 85px;
float: right;
}
#id5{
color: #4e6ef2;
width: 100%;
text-align: right;
}
.aside p a:hover{
color: #000;
text-decoration: underline;
}
.aside p{
padding-bottom: 22px;
border-bottom: 1px solid #f2f2f2;
}
.buttom{
background-color: #FFFFFF;
height: 94px;
padding: 23px 0px 12px;
font-size: 12px;
color: #999999;
text-align: center;
}
.buttom a:link{
color: #999999;
text-decoration: underline;
}
.buttom a:visited{
color: #999999;
text-decoration: underline;
}
.buttom a:hover{
color: #999999;
text-decoration: underline;
}
.span1{
color: #999;
}
.span2{
float: right;
}
</style>
</head>
<body>
<div class="index">
<div id="login0">
<a href="https://www.baidu.com/"><img width="102" height="32" src="https://mbdp01.bdstatic.com/static/landing-pc/img/logo_top.79fdb8c2.png" alt="到百度首页"title="到百度首页"></a>
</div>
<div id="login1">
<a href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fbaijiahao.baidu.com%2Fs%3Fid%3D1708581129511349149" ><input type="submit" value="登录" ></a>
</div>
<div id="login">
<a href="https://www.baidu.com/" id="a3">百度首页</a>
</div>
</div>
<div class="header">
<div id="header1">
<h2>我的智商不配逛宜家未来店</h2>
</div>
<div id="header2">
<a href="https://author.baidu.com/home?from=bjh_article&app_id=1685772982137358"><img align="top" width="47" height="47" src="https://user-center.cdn.bcebos.com/head/raw/uc.101.16b6e523.WVZdUk5KlVCTbYiZgIwp7A?x-bce-process=image/resize,m_lfit,w_200,h_200&autime=33413" ></a>
</div>
<div id="header3">
<span id="id1"><a href="https://author.baidu.com/home?from=bjh_article&app_id=1685772982137358" target="_blank" id="a2">优品时光机</a></span>
<br>
<span id="id2">发布时间: 08-20 11:25 |</span>
</div>
</div>
<div class="container">
<div class="section">
<p>优品抢赚（Make money buy）致力于解决全球青年就业、小商户生存、跨国供应链的困境，有效的链接卖家与买家。通过5G新零售跨境拼抢模式，实现用户、商家、消费者三方受益，打造新时代的共赢电商。</p>
<p>近日，宜家徐汇店重新受到公众的关注。四个月前，宜家进入中国第一家门店上海徐汇店，并传出装修关闭的消息。因为所有的商品，无论大小，都以50%的折扣出售，所以在申城有一股抢购的热潮。</p>
<p>4个月后的8月12日，徐汇店重新开张，吸引了很多人。一些在开幕式当天参加活动的消费者将其描述为“进商场排队、上厕所排队、吃饭排队，逛个寂寞。”（被称为宜家在世界上的首次推出）与旧商店之间的差异？宜家老店复兴背后的逻辑是什么？这些创新与宜家的战略有什么关系？</p>
<strong>01 卖家秀和买家秀</strong>
<p>就官方宣传而言，宜家徐汇店转型的亮点之一是重新设计商场的移动路线，这可以被视为这家68岁企业颠覆性的自我创新。让我们回想一下，宜家在中国的所有门店都实施了标准化的动态线条设计。作为宜家超大型家居店，宜家的移动线设计除了大量的商品和现场展示外，还可以被视为业内的典范。</p>
<p>具体来说，这并不复杂。宜家采用从进口到出口的单线设计模式。然而，在单线之外，如何巧妙地将不同风格的样板房和不同尺寸的家居用品插入主线是一门学问。夸张地说，在每宜家宜家商场里，都要遵循移动的路线。你不必担心错过一个样板房或回去找不到出口。</p>
<p>你唯一需要担心的是，一路上你可能会被客厅模型室所吸引，花更多的时间享受它，沉浸在儿童房的设计中，从单一产品中获得灵感，停下来多想一会儿。然而，也有人认为，“一次走进宜家，就像大海一样深”的设计似乎清晰，有时过于僵化，这对有明确购买目的的消费者来说是不友好的。”长时间购物，多买一些——仔细想想。这是宜家的目标吗？</p>
<img src="img/1.jpg" alt="">
<p>未来店里具有上海元素的样板间</p>
<p>让我们回顾一下重新组装后的移动线设计。媒体公开报道，该商品区的翻新和重新设计主要是根据消费者的家居生活轨迹，打造五大主题：洗浴空间、创作和娱乐工作空间、烹饪和餐饮空间、接待和休闲空间以及储藏和展示空间。</p>
<p>乍一看，有一种画面感。到达现场后，retail Jun发现，在一个30000多平方米、9000多个SKU和63个模型房的大空间中，按主题划分的移动线杂乱无章，正在倒塌。在去购物之前，看着平面图，我仍然无法摆脱找不到出口的困境，曾经怀疑过我的智商。</p>
<p>令人惊讶的是，当你左转到某个地方时，你会发现这是你看到的另一个场景；当你想去二楼的时候，你不知道怎么去出口。整个购物中心的设计遵循开放的理念。每个主题由不同大小的模型室组成。设计师特别在不同风格之间留下了大量空白。它的初衷是为顾客提供免费的休息区，这可以是免费的。在那些可以“透气”的区域挤满了人和手推车之后，让整个空间充满压迫感和杂乱感。</p>
<p>“不灵不灵，没有以前好逛，我在厨房用品那里看到一套餐具，想要找辆小推车，跑到电梯里才找到不说，这会儿连出口也没方向了。”一位女士对零售君吐槽。</p>
<p>旁边的工作人员正在接待前来询问的人。在现场，被混乱的人群和货物隔开，在工作人员的引导下，很难看到人群另一端的道路和墙壁以及排队上厕所的人群。宜家最初希望展示五大主题的未来感和设计感，而这五大主题都受到了交通拥堵的冲击。这种糟糕的现场体验让“卖家秀和买家秀”有点开心。现在，我们可以希望在人流下降后体验它。</p>
<strong>02 从商场到社区中心的转变</strong>
<p>整个动态线路设计让人在巨大的客流面前感觉糟糕。新购物中心的细节可以圈出。不用说，餐厅和儿童空间在二楼有独立的位置。我想说的是，在一楼的电梯旁边，设计了一个巨大的开放式梯子，叫做阳光社交广场。如果你不想买任何东西，你也可以直接去二楼吃饭，陪孩子散步。</p>
<p>这个阶梯的设计类似于许多在线名人书店的开放阅读场景。原木色的座椅和分散的坐垫、枕头和小桌子，加上洒进房间的自然光，构成了人与人之间和谐的社会空间。暑假期间，家里人不少。有些人很累，选择在这里休息。附近有居民直接来到这里。宜家立即将自己从一个简单的北欧家居地标转变为一个融入中国、上海和附近居民的城市客厅。</p>
<p>大门的右边则是新消费主义的标配——咖啡馆。摒弃了传统的墙体隔断，而是采用红色金属架将咖啡馆和公共区域简易隔开，架子上姿态各异的绿植与咖啡馆的绿色吊灯十分相衬。</p>
<img src="img/2.jpeg" alt="">
<p>二三十个位子，在工作日的下午几乎已经满座。想喝咖啡，手机自助点单即可，既有美式及各式燕麦咖啡，还提供冰摇茶、三明治、水和果汁，产品不多，品类却能满足大多数人的需求。价格也比较亲民，一杯美式18元，依云矿泉水12元。</p>
<p>除咖啡厅外，新购物中心内还设有瑞典美食屋、面包房、快餐店等小餐厅，一楼点缀着一些休息设施，给购物中心空间带来了强烈的节奏感。人们可以在漫游和休息之间自由切换，这在一定程度上降低了传统宜家商场样板间被占用的概率。</p>
<p>仔细观察不难发现，这些贴心而细致的设计与当前流行的社区商业中心非常相似。在上述相似性方面，宜家在精神相似性方面达到了七八分——徐汇店为消费者推出了“手作共创工坊”。</p>
<p>共创工坊目前开设了15门课，涉及烹饪、烘焙、设计、艺术、收纳、手工等领域，均为8~10人左右的小班，可通过手机扫码或在宜家App上预约，课程售价最高为99元，最低29.9元。</p>
<img src="img/3.jpeg" alt="">
<p>当你经过工作室时，碰巧艺术工作室已经准备好开始了。上课前，两到三名工作人员根据预定人数准备座椅材料袋。附近的一位母亲带着两个孩子来上课。据工作人员介绍，艺术工作室的课程价格为69.9元，每节课持续1.5小时。课程费用包括绘画工具、颜料、花瓶和其他材料的费用。学生可以在现场粉刷玻璃花瓶后将花瓶带回家。这个价格可以说是良心。</p>
<strong>03 大象起舞的背后</strong>
<p>作为宜家视可持续发展为生命的企业，宜家的基因无疑是创新的。另一个不可避免的事实是，其巨额资产投资导致了发展缓慢。从外部世界来看，这位近70岁的“老人”想要改变自己，与大象共舞。</p>
<p>宜家早在1998年就进入了中国市场，在中国国内市场可以说是一个具有风向标意义的巨人。随着红星美凯龙（RedStar Macalline）和“难以置信的家”（Evalized home）等本土家居店的兴起，宜家很早就开始了数字化转型。当时，宜家错过了最好的机会，因为它担心电子商务销售会影响线下客流。</p>
<p>直到2020年3月，宜家宣布其在天猫的存在，并在开幕当天启动了直播。消费者发现他们可以在宜家的微信applet应用程序上下单。到目前为止，应用程序下载量已达到5888万次。宜家致力于通过整合各门店的线上和线下渠道，全面接触消费者。去年7月，宜家首次进入上海市中心，在静安寺开设了世界上第宜家市中心商店。与徐汇店相比，该店的定位逻辑有很大不同。它的体积是徐汇店的十分之一，可以说是迷你店。</p>
<p>城市中心店陈列的3500款商品中，只有三分之一可以现场购买，其他商品则只能通过小程序下单的方式送到家，这一举措如今看来正是为徐汇店的全面数字化进行测试。</p>
<img src="img/4.jpeg" alt="">
<p>根据宜家发布的财务报告，在2020财年，宜家的全球收入达到396亿欧元，宜家的电子商务销售额同比增长45%，占零售总额的15%。在2020财年，宜家中国的在线销售收入同比增长67%，远高于全球平均水平。这一次，宜家徐汇店成为全球第一个未来家居体验空间，这是“未来+”战略在中国市场的落地，表达了宜家对中国市场新零售模式的思考。第一次模拟考试表明，该模型是可行的，并有可能在宜家在中国的其他购物中心使用。</p>
<p>“零售的本质是服务于人，宜家希望通过零售的革新，启发消费者持续探索家与生活的崭新意涵，也为人在家之外的社交共创带来灵感。”宜家中国区总裁安娜·库丽佳如此表示。</p>
<strong>结语</strong>
<p>在宜家徐汇店，推着大车排着长队等待人工结账已经成为历史。不再存在的是自助结账控制台。手持式扫码枪的操作方式不同于目前国内主流的自助检测设备。对于宜家来说，这是迈向数字化的一大步。</p>
<div id="id5">
<span>举报/反馈</span>
</div>
<hr>
<h2>发表评论</h2>
<img src="img/11.jpeg" alt="">
<textarea class="text-area placeholder" placeholder="发表神评妙论"></textarea>
<input type="submit" value="发表" >
<h2>评论列表</h2>
<a href="https://author.baidu.com/home?context=%7B%22uk%22%3A%22RGqqcVeKlOHVHudT-5682Q%22%7D"><img src="img/12.jpeg" alt=""></a>
<div class="id6">
<h5><a href="https://author.baidu.com/home?context=%7B%22uk%22%3A%22RGqqcVeKlOHVHudT-5682Q%22%7D">百度网友4e3880e</a></h5>
<p>不是设计不灵，是人多了就不灵，世博会已经证明了这个永恒的真理，每天几十万人涌进去，什么设计都是白扯，香港迪士尼留下的美好体验，换到上海全部被磨灭的一干二净。</p>
<span class="span1">08-27 15:58</span>
<span id="span2"><img src="img/14.jpeg" alt=""></span>
</div>
</div>
<div class="aside">
<h2>作者最新文章</h2>
<br>
<p><a href="https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_9207825517872630613%22%7D&n_type=1&p_from=3">地铁站里吃早餐，北京等了20年</a></p>
<p><a href="https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_9045786576508473610%22%7D&n_type=1&p_from=3">人均谜语人的电影行业舆论场，有点儿危险</a></p>
<p><a href="https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_9217097463251914747%22%7D&n_type=1&p_from=3">为什么餐饮行业永远经不起“卧底”</a></p>
<h2>相关文章</h2>
<br>
<p><a href="https://m.thepaper.cn/baijiahao_14257839">把碳达峰碳中和纳入全省生态文明建设整体布局 云南省全力推进</a></p>
<img width="202px" height="114px" src="img/5.jpeg" alt="">
<p><a href="https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_9629755575995216649%22%7D&n_type=1&p_from=4">风正一帆悬——写在第十四届全运会帆船比赛开赛之际</a></p>
<img width="202px" height="114px" src="img/6.jpeg" alt="">
<p><a href="https://m.thepaper.cn/baijiahao_14254579">【我为群众办实事】丁是丁，卯是卯，普法宣传看董叔——盈浦...</a></p>
<img width="202px" height="114px" src="img/7.jpeg" alt="">
<P> <a href="https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_8749225041813104337%22%7D&n_type=1&p_from=4">提出六大重点任务，《江苏省“十四五”新型基础设施建设规...</a></P>
<img width="202px" height="114px" src="img/8.jpeg" alt="">
<p><a href="https://m.thepaper.cn/baijiahao_14254802">战疫情——致敬商丘最美逆行者（147）</a></p>
<img width="202px" height="114px" src="img/9.jpeg" alt="">
</div>
</div>
<div class="buttom">
<a href="https://www.baidu.com/cache/sethelp/index.html">设为首页</a>
<span>© Baidu </span>
<a href="//www.baidu.com/duty/" target="_blank">使用百度前必读</a>
<a href="http://jianyi.baidu.com" target="_blank">意见反馈</a>
<span>京ICP证030173号 </span>
<img width="13" height="16" src="http://ss.bdimg.com/static/superman/img/copy_rignt_8.png">
<br>
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001"><img width="15px"height="15px" src="img/10.jpeg" alt=""></a>
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" class="index-module_recordcode_1sHPi" target="_blank"><i></i>京公网安备11000002000001号</a>
</div>
</body>
</html>
初学web一周，还有很多不足，希望各位码友多多支持
1016
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
