代码拉取完成,页面将自动刷新
同步操作将从 老胡来也/H5+CSS3教程新版-练习 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
给定html代码如下:
<div class="product">
<a href="" target="_blank">
<img src="../images/kettle.png" alt="电水壶" width="195px">
<p class="describe">快速煮水,放心饮用</p>
<div class="product-text">
<div class="product-mark">
<img src="../images/live.png" alt="直播中" height="20">
<img src="../images/odds.png" alt="特惠" height="20">
<img src="../images/30day.png" alt="30天保价" height="20">
<img src="../images/server.png" alt="售后免邮" height="20">
</div>
<h3>云米电水壶</h3>
<p>¥59</p>
</div>
</a>
</div>
所需图片素材,见02.产品展示素材
文件夹
请写出符合最终效果的CSS
给定html代码如下:
<div class="news">
<h3>百度新闻热榜</h3>
<ul>
<li><a href=""><span class="col1">1</span>习近平杭州致辞中的“知识点”</a></li>
<li><a href=""><span class="col2">2</span>韩国运动员扇对手脸被罚出场</a></li>
<li><a href=""><span class="col3">3</span>张国伟在亚运会场馆外摊煎饼</a></li>
<li><a href=""><span class="col4">4</span>四海同赴亚运之约</a></li>
<li><a href=""><span class="col5">5</span>杭州亚运会首个双冠王诞生</a></li>
<li><a href=""><span class="col6">6</span>贪官曾在歌舞厅打架子鼓补贴家用</a></li>
<li><a href=""><span class="col7">7</span>49岁张震岳举行婚礼</a></li>
<li><a href=""><span class="col8">8</span>开幕式唱歌的四个帅哥是谁</a></li>
</ul>
</div>
自行完成html结构及样式的编写
plate
,结构如下:<div class="table">
<plate />
<plate />
</div>
bento
,结构如下:<div class="table">
<bento />
<plate />
<bento />
</div>
fancy
的plate
,结构如下:<div class="table">
<plate id="fancy" />
<plate />
<bento />
</div>
plate
里面的apple
,结构如下:<div class="table">
<bento />
<plate>
<apple />
</plate>
<apple />
</div>
fancy
的plate
中的pickle
,结构如下:<div class="table">
<bento>
<orange />
</bento>
<plate id="fancy">
<pickle />
</plate>
<plate>
<pickle />
</plate>
</div>
small
的apple
,结构如下:<div class="table">
<apple />
<apple class="small" />
<plate>
<apple class="small" />
</plate>
<plate />
</div>
small
的orange
,结构如下:<div class="table">
<apple />
<apple class="small" />
<bento>
<orange class="small" />
</bento>
<plate>
<orange />
</plate>
<plate>
<orange class="small" />
</plate>
</div>
bento
中的small
orange
,结构如下:<div class="table">
<bento>
<orange />
</bento>
<orange class="small" />
<bento>
<orange class="small" />
</bento>
<bento>
<apple class="small" />
</bento>
<bento>
<orange class="small" />
</bento>
</div>
plate
和bento
,结构如下:<div class="table">
<pickle class="small" />
<pickle />
<plate>
<pickle />
</plate>
<bento>
<pickle />
</bento>
<plate>
<pickle />
</plate>
<pickle />
<pickle class="small" />
</div>
<div class="table">
<apple />
<plate>
<orange class="small" />
</plate>
<bento />
<bento>
<orange />
</bento>
<plate id="fancy" />
</div>
plate
中的所有东西,结构如下:<div class="table">
<plate id="fancy">
<orange class="small" />
</plate>
<plate>
<pickle />
</plate>
<apple class="small" />
<plate>
<apple />
</plate>
</div>
plate
的下一个apple
,结构如下:<div class="table">
<bento>
<apple class="small" />
</bento>
<plate />
<apple class="small" />
<plate />
<apple />
<apple class="small" />
<apple class="small" />
</div>
bento
后面的所有pickle
,结构如下:<div class="table">
<pickle />
<bento>
<orange class="small" />
</bento>
<pickle class="small" />
<pickle />
<plate>
<pickle />
</plate>
<plate>
<pickle class="small" />
</plate>
</div>
plate
中的apple
,结构如下:<div class="table">
<plate>
<bento>
<apple />
</bento>
</plate>
<plate>
<apple />
</plate>
<plate />
<apple />
<apple class="small" />
</div>
plate
中的第一个orange
,结构如下:<div class="table">
<bento />
<plate />
<plate>
<orange />
<orange />
<orange />
</plate>
<pickle class="small" />
</div>
plate
中的apple
、pickle
,结构如下:<div class="table">
<plate>
<apple />
</plate>
<plate>
<pickle />
</plate>
<bento>
<pickle />
</bento>
<plate>
<orange class="small" />
<orange />
</plate>
<pickle class="small" />
</div>
small
的apple
、pickle
,结构如下:<div class="table">
<plate id="fancy">
<apple class="small" />
</plate>
<plate />
<plate>
<orange class="small" />
<orange />
</plate>
<pickle class="small" />
</div>
plate
,结构如下:<div class="table">
<plate />
<plate />
<plate />
<plate id="fancy" />
</div>
bento
,结构如下:<div class="table">
<plate />
<bento />
<plate>
<orange />
<orange />
<orange />
</plate>
<bento />
</div>
apple
,结构如下:<div class="table">
<orange class="small" />
<apple />
<apple class="small" />
<apple />
<apple class="small" />
<plate>
<orange class="small" />
<orange />
</plate>
</div>
plate
,结构如下:<div class="table">
<plate />
<plate />
<plate />
<plate />
<plate id="fancy" />
<plate />
</div>
plate
(包括第3个)开始的每2个plate
,结构如下:<div class="table">
<plate />
<plate>
<pickle class="small" />
</plate>
<plate>
<apple class="small" />
</plate>
<plate />
<plate>
<apple />
</plate>
<plate />
</div>
plate
中的apple
,结构如下:<div class="table">
<plate id="fancy">
<apple class="small" />
<apple />
</plate>
<plate>
<apple class="small" />
</plate>
<plate>
<pickle />
</plate>
</div>
apple
、最后一个orange
,结构如下:<div class="table">
<orange class="small" />
<orange class="small" />
<pickle />
<pickle />
<apple class="small" />
<apple class="small" />
</div>
bento
,结构如下:<div class="table">
<bento />
<bento>
<pickle class="small" />
</bento>
<plate />
<bento />
</div>
apple
,结构如下:<div class="table">
<plate id="fancy">
<apple class="small" />
</plate>
<plate>
<apple />
</plate>
<apple />
<plate>
<orange class="small" />
</plate>
<pickle class="small" />
</div>
for
属性的东西,结构如下:<div class="table">
<bento>
<apple class="small" />
</bento>
<apple for="Ethan" />
<plate for="Alice">
<pickle />
</plate>
<bento for="Clara">
<orange />
</bento>
<pickle />
</div>
for
属性的plate
,结构如下:<div class="table">
<plate for="Sarah">
<pickle />
</plate>
<plate for="Luke">
<apple />
</plate>
<plate />
<bento for="Steve">
<orange />
</bento>
</div>
Vitaly
的东西,结构如下:<div class="table">
<apple for="Alexei" />
<bento for="Albina">
<apple />
</bento>
<bento for="Vitaly">
<orange />
</bento>
<pickle />
</div>
for
属性值以Sa
开头的东西,结构如下:<div class="table">
<plate for="Sam">
<pickle />
</plate>
<bento for="Sarah">
<apple class="small" />
</bento>
<bento for="Mary">
<orange />
</bento>
</div>
for
属性值以ato
结束的东西,结构如下:<div class="table">
<apple class="small" />
<bento for="Hayato">
<pickle />
</bento>
<apple for="Ryota" />
<plate for="Minato">
<orange />
</plate>
<pickle class="small" />
</div>
for
属性值包含obb
的东西,结构如下:<div class="table">
<bento for="Robbie">
<apple />
</bento>
<bento for="Timmy">
<pickle />
</bento>
<bento for="Bobby">
<orange />
</bento>
</div>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。