7wu1wm0 发表于 2024-6-29 14:20:09

HTML+CSS案例：淘宝轮播图


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">前面的<span style="color: black;">根据</span><span style="color: black;">次序</span>的笔记<span style="color: black;">已然</span>更新了20篇内容了，<span style="color: black;">由于</span>篇幅问题，请看目录最后一栏。<span style="color: black;">已然</span>总结在了最后，下面<span style="color: black;">起始</span>今天的淘宝轮播图学习。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">1、</span>效果图</h2>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-429bd04abb85f076786a9e5ab2f45c6d_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">2、</span>布局分析</h2>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-9ca37bd019a66d3972207d6727ec10a1_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">3、</span><span style="color: black;">过程</span></h2>大盒子<span style="color: black;">咱们</span>类名为： tb-promo 淘宝<span style="color: black;">宣传</span>里面先放一张<span style="color: black;">照片</span>。<span style="color: black;">上下</span>两个按钮 用链接就好了。 左箭头 prev 右箭头 next<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">​ 左按钮样式（border-radius：左上，右上，右下，左下），</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">​ 右按钮定位，提取<span style="color: black;">上下</span>按钮<span style="color: black;">一起</span>的样式代码（并集<span style="color: black;">选取</span>器）</p>底侧小圆点ul 继续做。 类名为 promo-nav<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">​ 中间长方形椭圆 ul的定位（水平居中，离底部15px）</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">​ 长方形<span style="color: black;">必须</span>五个小圆点，ul<span style="color: black;">没</span>序列表，li浮动，椭圆中小圆点的样式</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">4、</span>知识点：圆角矩形设置4个角</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">圆角矩形<span style="color: black;">能够</span>为4个角分别设置圆度， <span style="color: black;">然则</span>是有<span style="color: black;">次序</span>的</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">border-top-left-radius:20px; border-top-right-radius:20px; border-bottom-right-radius:20px; border-bottom-left-radius:20px;</p><span style="color: black;">倘若</span>4个角，数值相同<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">~~~css border-radius: 15px; ~~~</p>里面数值<span style="color: black;">区别</span>，<span style="color: black;">咱们</span><span style="color: black;">亦</span><span style="color: black;">能够</span><span style="color: black;">根据</span>简写的形式，<span style="color: black;">详细</span>格式如下:<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">~~~css border-radius: 左上角 右上角 右下角 左下角; ~~~</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">还是遵循的顺时针。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">5、</span>代码</h2>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;!DOCTYPE html&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">html</span> <span style="color: black;">lang</span><span style="color: black;">=</span><span style="color: black;">"en"</span><span style="color: black;">&gt;</span>

      <span style="color: black;">&lt;</span><span style="color: black;">head</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">meta</span> <span style="color: black;">charset</span><span style="color: black;">=</span><span style="color: black;">"UTF-8"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">meta</span> <span style="color: black;">name</span><span style="color: black;">=</span><span style="color: black;">"viewport"</span> <span style="color: black;">content</span><span style="color: black;">=</span><span style="color: black;">"width=device-width, initial-scale=1.0"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">meta</span> <span style="color: black;">http-equiv</span><span style="color: black;">=</span><span style="color: black;">"X-UA-Compatible"</span> <span style="color: black;">content</span><span style="color: black;">=</span><span style="color: black;">"ie=edge"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">title</span><span style="color: black;">&gt;</span>淘宝轮播图做法<span style="color: black;">&lt;/</span><span style="color: black;">title</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">style</span><span style="color: black;">&gt;</span>
      <span style="color: black;">*</span> <span style="color: black;">{</span>
      <span style="color: black;">margin</span><span style="color: black;">:</span> <span style="color: black;">0</span><span style="color: black;">;</span>
      <span style="color: black;">padding</span><span style="color: black;">:</span> <span style="color: black;">0</span><span style="color: black;">;</span>
      <span style="color: black;">}</span>
      <span style="color: black;">li</span> <span style="color: black;">{</span>
      <span style="color: black;">list-style</span><span style="color: black;">:</span> <span style="color: black;">none</span><span style="color: black;">;</span>
      <span style="color: black;">}</span>

      <span style="color: black;">.</span><span style="color: black;">tb-promo</span> <span style="color: black;">{</span>
      <span style="color: black;">position</span><span style="color: black;">:</span> <span style="color: black;">relative</span><span style="color: black;">;</span>
      <span style="color: black;">width</span><span style="color: black;">:</span> <span style="color: black;">520</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">height</span><span style="color: black;">:</span> <span style="color: black;">280</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">bac<span style="color: black;">公斤</span>round-color</span><span style="color: black;">:</span> <span style="color: black;">pink</span><span style="color: black;">;</span>
      <span style="color: black;">margin</span><span style="color: black;">:</span> <span style="color: black;">100</span><span style="color: black;">px</span> <span style="color: black;">auto</span><span style="color: black;">;</span>
      <span style="color: black;">}</span>

      <span style="color: black;">.</span><span style="color: black;">tb-promo</span> <span style="color: black;">img</span> <span style="color: black;">{</span>
      <span style="color: black;">width</span><span style="color: black;">:</span> <span style="color: black;">520</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">height</span><span style="color: black;">:</span> <span style="color: black;">280</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">}</span>

      <span style="color: black;">/* 并集<span style="color: black;">选取</span>器<span style="color: black;">能够</span>集体声明相同的样式 */</span>
      <span style="color: black;">.</span><span style="color: black;">prev</span><span style="color: black;">,</span>
      <span style="color: black;">.</span><span style="color: black;">next</span> <span style="color: black;">{</span>
      <span style="color: black;">position</span><span style="color: black;">:</span> <span style="color: black;">absolute</span><span style="color: black;">;</span>
      <span style="color: black;">/* 绝对定位的盒子垂直居中 */</span>
      <span style="color: black;">top</span><span style="color: black;">:</span> <span style="color: black;">50</span><span style="color: black;">%</span><span style="color: black;">;</span>
      <span style="color: black;">margin-top</span><span style="color: black;">:</span> <span style="color: black;">-15</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">/* 加了绝对定位的盒子<span style="color: black;">能够</span>直接设置高度和</span>
    </div>




星☆雨 发表于 2024-8-24 05:40:32

我完全赞同你的观点，思考很有深度。

JameBond 发表于 2024-9-8 10:58:40

我深感你的理解与共鸣，愿对话长流。

wrjc1hod 发表于 2024-10-7 08:43:57

你的努力一定会被看见，相信自己，加油。

4lqedz 发表于 2024-10-7 17:08:45

你说得对，我们一起加油，未来可期。

m5k1umn 发表于 2024-10-11 01:56:32

感谢楼主的分享！我学到了很多。

m5k1umn 发表于 2024-10-11 13:42:25

软文发布平台 http://www.fok120.com/
页: [1]
查看完整版本: HTML+CSS案例：淘宝轮播图