Bay一直致力于为买卖双方提供更好的售卖平台，为了便于卖家介绍商品以及买家了解所需，我们将为大家介绍两种在商品详情页嵌入视频的方法，以便更好的满足买卖双方的需求。除了文字介绍，我们也在每部分精心准备了视频说明，欢迎点击了解哦！

eBay商品详情页支持的视频格式

eBay支持使用HTML5的VIDEO标签来引用互联网上的视频资源（如MP4格式的视频影片）直接播放，也支持使用图片超链接的HTML代码形式，将消费者引导向YouTube等视频网站观看相关内容。

注意、eBay已禁止使用动态内容如Javascript等代码嵌入视频，传统视频网站的视频嵌入代码不可直接引用，使用动态代码可能会导致Listing下架。

01、嵌入视频方法一：

· 上传视频：将视频上传至储存空间；

· 编辑代码：编辑如下代码红色部分，[URL]替换成需要嵌入的视频URL，[VIDEO FORMAT]替换成相应视频格式；

· 进入HTML编辑模式：选择对应eBay listing，进入编辑模式，Item Description中选择HTML编辑模式；

· 嵌入代码：将编辑好的代码嵌入商品详情页合适的位置。

代码示例：

<video controls="">

<source src="https:[URL]" type="video/[VIDEO FORMAT]">

</video>

HTML5 Video标签嵌入视频步骤：

· 进入eBay listing编辑模式，在Item Description，选择HTML模式；

· 使用HTML5 <VIDEO>标签编写代码，贴入相应代码。

HTML5 Video标签嵌入视频需要注意：

· HTML 5原生 <Video> 标签可支持MP4, webM, OGG等多种格式的视频播放；

· 用户使用的浏览器决定了相应视频格式是否可以播放；

· 用户需自行寻找对应存储空间，存储自己的MP4视频文件，以https协议引用。

代码编写提示：

HTML5格式的代码嵌入后，商品详情页可直接播放视频，如下：

视频存储空间 - Kizoa

用户可以上传视频至Kizoa上存储，用户能在https://www.kizoa.app/pfh/index.php上传视频并以HTML5的方式进行视频嵌入，详细步骤请参考文末——如何使用视频存储空间 Kizoa。

02、嵌入视频方法二：

图片超链接嵌入视频方法介绍：

· 编辑代码：编辑如下代码红色部分，[TITLE]写入相应视频标题（或删除），[YouTube Video ID]替换成需要嵌入的YouTube video ID，(或替换整段URL)；

· 进入HTML编辑模式：选择对应eBay listing，进入编辑模式，Item Description中选择HTML编辑模式；

· 嵌入代码：将编辑好的代码嵌入商品详情页合适的位置。

代码示例：

<!-- BEGIN LINKED VIDEO →

<p>[TITLE]</p>

<div class="ytvideo">

<a target="_blank" href="https://www.youtube.com/embed/[Youtube Video ID]?rel=0">

<img src="https://img.youtube.com/vi/[Youtube Video ID]/0.jpg">

</a>

<p class="yt_ft">Video will open in a new window</p>

</div>

<style> .ytvideo * { box-sizing:border-box; } .ytvideo { max-width:480px; font-family:arial; text-align:center; position:relative; min-height:120px; background-color:#555; } .ytvideo p { position:absolute; margin:0; color:white; background-color:rgba(0,0,0,.5); } .ytvideo .yt_hd { font-size:16px; width:100%; height:28px; line-height:28px; text-align:left; top:0; left:0; padding-left:10px; overflow:hidden; } .ytvideo .yt_ft { font-size:12px; width:100%; bottom:0; left:0; } .ytvideo img { display:block; max-width:100%; border:0; } .ytvideo a:after { content:"\A0BA"; position:absolute; width:60px; height:50px; left:0; top:0; right:0; bottom:0; margin:auto; border:0; border-radius:10px; color:white; background:rgba(0,0,0,.6); font-size:24px; line-height:50px; cursor:pointer; } .ytvideo a:hover:after { background:#CC181E; } .ytvideo .yt_inp { position:absolute; top:100%; left:0; width:100%; text-align:center; padding:.5em .2em; xfont-size:18px; border:0; color:white; background: rgba(0,0,0,.7); } @media(max-device-width:960px){ .ytvideo { margin-bottom:60px; } .ytvideo .yt_inp { padding:1em .2em; } } </style>

<!-- END LINKED VIDEO -->

注意

在桌面和移动端浏览器中，将打开新的窗口，跳转至YouTube网站进行播放；

Android和iOS的移动端eBay APP均不支持YouTube视频播放。

图片超链接嵌入视频示例步骤：

· YouTube网站找到您所需要添加的视频URL；

· 将该URL填入示例代码中，将代码复制入eBay Item Description：

代码嵌入后，点击eBay商品详情页的视频，新的窗口将被打开，并跳转至YouTube进行播放，如下：

注意、避免使用嵌入式视频代码。

需要强调的是，请避免使用Youtube或其他视频网站提供的<iframe>嵌入视频代码，这种有可能将会被eBay识别为动态内容，可能会导致listing的下架。

除了YouTube，其他平台也能支持相同嵌入视频的功能，如下：

如何使用视频存储空间 Kizoa

上传视频步骤：

· 进入Kizoa主页: https://www.kizoa.app/pfh/index.php

· 注册账号并登录使用

· 点击Add photos/videos以添加视频

· 选择上传来源（可选来源自本机硬盘）

· 选择视频

· 系统正在上传视频

· 视频上传成功

获取视频地址：

· 双击播放该视频

· 在键盘上按下F12；

· 点击网页源码左上角的鼠标图标；

· 任意点击视频播放的区域；

· 源码中会显示一个src的链接，即是视频的地址 (https://ugc.kizoa.app/kgra2/f339033939_9814612.mp4)；

· 复制并保存好链接。

（来源：eBay）

于电商产品展示，无论是从首页还是到栏目页，再到产品的详情页，产品展示效果不仅仅是在电商平台，在很多的企业网站也使用频繁，今天为大家分享一个HTML+CSS小案例项目：小米电商平台的商品展示页面！我们来一起看看吧！

那么我们要开发一个什么样的效果呢？来吧展示！！！

接着下来我们实战开发吧！

温馨提示：本期课程是三十个实战案例的第2节，为了更好的学好前端，可以配合艾编程30天计划学习效果更好，因为30个案例就是30天计划的实战作业一部分！具体参与方式，我放在文章的最底部了，大家可以看完这个效果后找助理老师领取！

第一步、构建长方形盒子，同时水平居中

1、操作步骤

（1）构建 一个名为product的盒子

<div class='product'></div>

（2）给product 添加宽度、高度 、背景颜色。这里的高度正常情况下是不能设置死，是为了方便大家理解看效果，所以加上的。后面我们会去掉

.product{
   width:268px;/*宽度*/
   height:400px;/*高度*/
   background-color: red;/*背景颜色*/
}

（3）、清除body自带的的默认样式

body{
margin:0px;/*外边距为0px*/
}

（4）、设置.product 长方形盒子与浏览器顶部50px间距，同时水平居中显示

.product{
margin:50px auto; /*上外边距50px 左右外边距自动相等-水平居中*/
}

（5）、给盒子添加边框线,，同时把添加的背景注释掉。背景是为了开始演示效果

.product{
   /* background-color: red;背景颜色*/
border:1px solid #ddd; /*1像素 实线 灰色边框*/
}

2、代码

<style type="text/css">
    body{
        margin:0px;
    }
    .product{
        width:268px;
        height:400px;
        /* background-color: red; */
        margin:50px auto;
        border:1px solid #ddd;
    }
</style>


<div class="product"></div>

3、实现效果

第二步、添加产品图，同时设置水平居中

1、操作步骤

（1）、在.product盒子中添加产品图,同时设置图片宽度和alt描述

<body>
   <div class="product">
       <!--img标签，用来在页面当中插入图片-->
       <img src="images/kettle.png" alt="电水壶" width="195px">
   </div>
</body>

（2）、设置图片在水平方向居中显示

.product{
text-align:center;/*设置内容文字或图片在盒子中水平居中*/
}

2、代码

<style type="text/css">
body{
  margin:0px;
}
.product{
    width:268px;
    height:400px;
    /* background-color: red; */
    margin:50px auto;
    border:1px solid #ddd;
    text-align: center;/*文字和图片水平居中*/
}
</style>


<body>
    <div class="product">
        <img src="images/kettle.png" alt="电水壶" width="195px">
    </div>
</body>

3、实现效果

第三步、设置产品描述样式

1、操作步骤

1、在.product盒子中添加p标签，同时到名为describe，p标签用来包裹产品描述

<body>
   <div class="product">
       <img src="images/kettle.png" alt="电水壶" width="195px">
       <p class='describe'>快速煮水，安心饮用</p>
   </div>
</body>

2、去掉h3自带的默认margin外边距样式

body,p{
margin:0px;/*同时去掉body和h3标签的默认外边距*/
}

3、修饰h3中的文字样式

.product p.describe{
           font-size:16px ;/*字体大小*/
           font-weight: 400;/*字体粗细*/
           color:#845f3f;/*字体颜色*/
      }

2、实现代码

<style type="text/css">
body,h3{
  margin:0px;
}
.product{
    width:268px;
    height:400px;
    /* background-color: red; */
    margin:50px auto;
    border:1px solid #ddd;
    text-align: center;
}
.product h3{
    font-size:16px ;
    font-weight: 400;
    color:#845f3f;
}
</style>


<body>
    <div class="product">
        <img src="images/kettle.png" alt="电水壶" width="195px">
        <h3>快速煮水，安心饮用</h3>
    </div>
</body>

3、实现效果

第四步、构建一个长方形，用来包裹后所有内容

1、操作步骤

1、在.product盒子中，再构建一个名为 .product-text的盒子

<body>
   <div class="product">
       <img src="images/kettle.png" alt="电水壶" width="195px">
       <p class="describe">快速煮水，安心饮用</h3>
       <div class="product-text"></div>
   </div>
</body>

2、我们给product-text 添加如下样式。当然里添加的高度也是为了方便看效果，后面我们也会删除。

 .product .product-text{
           height:100px;/*高度-为了查看效果，后期会删除*/
           background-color: #f8f8f8;/*背景颜色*/
           margin-top:20px;/*上外边距20px*/
           padding:15px;/*上下左右内边距15px*/
      }

3、我们把最开始为了方便看效果，给.product添加的高度给删除（或注释）

.product{
/*height:400px;*/
}

2、实现代码

<style type="text/css">
body,p{
  margin:0px;
}
.product{
    width:268px;
    /* height:400px; */
    /* background-color: red; */
    margin:50px auto;
    border:1px solid #ddd;
    text-align: center;
}
.product p.describe{
    font-size:16px ;
    font-weight: 400;
    color:#845f3f;
}
.product .product-text{
    height:100px;
    background-color: #f8f8f8;
    margin-top:20px;/*上外边距20px*/
    padding:15px;/*上下左右内边距15px*/
}
</style>


<body>
    <div class="product">
        <img src="images/kettle.png" alt="电水壶" width="195px">
        <p class="describe">快速煮水，安心饮用</h3>
        <div class="product-text">
            添加内容边距，使里面的内容与盒子间有上下左右有15px空隙
        </div>
    </div>
</body>

3

实现效果

第五步、开发 直播中、特惠、30天保价、售后免邮效果

1、操作步骤

（1）在名为 .product-text盒子中 添加类名为 product-mark的div盒子,同时在里面插入四张图,同时把图片高度设为 20px

<body>
   <div class="product">
       <img src="images/kettle.png" alt="电水壶" width="195px">
       <p class="describe">快速煮水，安心饮用</h3>
       <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>
       </div>
   </div>
</body>

（2）添加好的图片之间默认有一定的空隙，这个空隙在不同的浏览器中看到的大小可能不一样。所以我们需要把这个默认的空隙去掉，然后自己给图片添加外边距来实现空隙。

空隙产生的原因，是浏览器把图片间的换行和空格给编译了。我们的处理方式可以在.product-mark中添加font-size:0px;就可以消除。

 .product .product-text .product-mark{
           font-size: 0px;/*去掉图片间的空隙*/
      }

（3）、消除空隙后，我们给图片单独添加margin外边距来实现空隙效果。

.product .product-text .product-mark img{
           margin:0px 2px;/*给图片设置左右2像素外边距*/
      }

2、代码

<style type="text/css">
        body,p{
            margin:0px;
        }
        .product{
            width:268px;
            /* height:400px; */
            /* background-color: red; */
            margin:50px auto;
            border:1px solid #ddd;
            text-align: center;
        }
        .product p.describe{
            font-size:16px ;
            font-weight: 400;
            color:#845f3f;
        }
        .product .product-text{
            height:100px;
            background-color: #f8f8f8;
            margin-top:20px;/*上外边距20px*/
            padding:15px;/*上下左右内边距15px*/
            
        }
        
        .product .product-text .product-mark{
            font-size: 0px;
        }
        .product .product-text .product-mark img{
            margin:0px 2px;
        }
</style>


<body>
    <div class="product">
        <img src="images/kettle.png" alt="电水壶" width="195px">
        <p class="describe">快速煮水，安心饮用</h3>
        <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>
        </div>
    </div>
</body>

3、实现效果

第六步、开发产品标题效果

1、操作步骤

（1）、在product-text盒子中添加 h3标签，用来包裹标题内容

<div class="product">
       <img src="images/kettle.png" alt="电水壶" width="195px">
       <p class="describe">快速煮水，安心饮用</h3>
       <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>
       </div>
</div>

（2）、去掉h3自带的默认margin外边距

body,p,h3{
           margin:0px;/*同时去掉body,p,h3的默认外边距*/
      }

（3）、通过以下css来修饰标题

 .product .product-text h3{
           font-size: 20px;/*字体大小*/
           font-weight:400 ;/*字体粗细*/
           margin-top:10px;/*上外边距为 10px*/
      }

2、代码

<body>
    <div class="product">
        <img src="images/kettle.png" alt="电水壶" width="195px">
        <p class="describe">快速煮水，安心饮用</h3>
        <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>
        </div>
    </div>
</body>

3、实现效果

第七步、开发产品价格效果

1、操作步骤

（1）在product-text中 添加 p标签，用来包裹价格

<body>
   <div class="product">
       <img src="images/kettle.png" alt="电水壶" width="195px">
       <p class="describe">快速煮水，安心饮用</h3>
       <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>
   </div>
</body>

（2）、通过以下css来修饰价格样式

 .product .product-text p{
           font-size:20px ;/*字体大小*/
           color:#a92112;/*字体颜色*/
           margin-top:5px;/*上外边距 5px*/
      }

（3）、去掉最开始给 .product-text添中的 高度

.product .product-text{
           /* height:100px; */
  }

2、代码

<style type="text/css">
        body,p,h3{
            margin:0px;
        }
        .product{
            width:268px;
            /* height:400px; */
            /* background-color: red; */
            margin:50px auto;
            border:1px solid #ddd;
            text-align: center;
        }
        .product p.describe{
            font-size:16px ;
            font-weight: 400;
            color:#845f3f;
        }
        .product .product-text{
            /* height:100px; */
            background-color: #f8f8f8;
            margin-top:20px;/*上外边距20px*/
            padding:15px;/*上下左右内边距15px*/
            
        }
        
        .product .product-text .product-mark{
            font-size: 0px;
        }
        .product .product-text .product-mark img{
            margin:0px 2px;
        }
        .product .product-text h3{
            font-size: 20px;
            font-weight:400 ;
            margin-top:10px;
        }
        
        .product .product-text p{
            font-size:20px ;
            color:#a92112;
            margin-top:5px;
        }
</style>
    
<body>
    <div class="product">
        <img src="images/kettle.png" alt="电水壶" width="195px">
        <p class="describe">快速煮水，安心饮用</h3>
        <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>
    </div>
</body>

3、实现效果

第八步、添加a超链接，实现页面跳转

添加了超链接之后，页面中的文字就添加了下划线，同时h3中的文字颜色也发生了改变，那下一步我们就来修正下这些细节

1、代码

<div class="product">
  <!--添加超链接，实现点击后跳转到新页面-->
        <a href="https://www.icodingedu.com" target="_blank">
            <img src="images/kettle.png" alt="电水壶" width="195px">
            <p class="describe">快速煮水，安心饮用</h3>
            <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>

2、运行效果

第九步：修改加了a标签后带来的问题

1、操作步骤

（1）清除a标签的默认下划线样式

a{
   text-decoration: none;/*去掉下划线*/
}

（2）给h3标签中的文字加上颜色

 .product .product-text h3{
           color:#000;
      }

（3）把a标签转换为块级元素

a{
display:block;/*a标签转换为块级元素*/
}

a标签默认的是属于内联元素，正常情况下内联元素中是不能放块级元素，但a标签特殊，可以这样用。但在这里，如果不把标签转换为块级元素，会发生很奇怪的效果。你给a标签加上 border:1px solid red; 后，如下图所示：

所以我们要把a标签转换为块级元素。当转换为块级元素后，效果如下，一切正常

2、运行代码

<style type="text/css">
        body,p,h3{
            margin:0px;
        }
a{
    text-decoration: none;/*去掉下划线*/
  }
        .product{
            width:268px;
            /* height:400px; */
            /* background-color: red; */
            margin:50px auto;
            border:1px solid #ddd;
            text-align: center;
        }
.product a{
    display:block;
}
        .product p.describe{
            font-size:16px ;
            font-weight: 400;
            color:#845f3f;
        }
        .product .product-text{
            /* height:100px; */
            background-color: #f8f8f8;
            margin-top:20px;/*上外边距20px*/
            padding:15px;/*上下左右内边距15px*/
            
        }
        
        .product .product-text .product-mark{
            font-size: 0px;
        }
        .product .product-text .product-mark img{
            margin:0px 2px;
        }
        .product .product-text h3{
            font-size: 20px;
            font-weight:400 ;
            margin-top:10px;
            color:#000;
        }
        
        .product .product-text p{
            font-size:20px ;
            color:#a92112;
            margin-top:5px;
        }
</style>
    
<div class="product">
  <!--添加超链接，实现点击后跳转到新页面-->
        <a href="https://www.icodingedu.com" target="_blank">
            <img src="images/kettle.png" alt="电水壶" width="195px">
            <p class="describe">快速煮水，安心饮用</h3>
            <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>

3、运行效果

为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30天挑战学习计划》，内容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真实企业项目开发，云服务器部署上线，从入门到精通

• PC端项目开发（1个）
• 移动WebApp开发（2个）
• 多端响应式开发（1个）

共4大完整的项目开发 ！一行一行代码带领实践开发，实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态，省得浪费时间。

从学习一开始就同步使用 Git 进行项目代码的版本的管理，Markdown 记录学习笔记，包括真实大厂项目的开发标准和设计规范，命名规范，项目代码规范，SEO优化规范

从蓝湖UI设计稿 到 PC端，移动端，多端响应式开发项目开发

• 真机调试，云服务部署上线；
• Linux环境下 的 Nginx 部署，Nginx 性能优化；
• Gzip 压缩，HTTPS 加密协议，域名服务器备案，解析；
• 企业项目域名跳转的终极解决方案，多网站、多系统部署；
• 使用 使用 Git 在线项目部署；
• 
  

这些内容在《30天挑战学习计划》中每一个细节都有讲到，包含视频+图文教程+项目资料素材等。只为实力宠粉，真正一次掌握企业项目开发必备技能，不走弯路 ！

过程中【不涉及】任何费用和利益，非诚勿扰 。

如果你没有添加助理老师微信，可以添加下方微信，说明要参加30天挑战学习计划，来自！老师会邀请你进入学习，并给你发放相关资料

30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程

HTML5+CSS3 Web前端开发与实例教程：微课视频版》

本书内容

《HTML5+CSS3 Web前端开发与实例教程：微课视频版》秉承“思政引领，立德树人”的教育理念，自然融入多维度、深层次的思政元素，全面对标企业和行业需求；引入现代Web前端开发的核心技术，如Flex布局、Grid布局，以及人工智能编程插件，同时融入企业开发实践，确保学习内容与实际工作紧密相关。全书以一个完整案例为主线，结合综合项目实战操作，体现育人、应用和创新三项能力。《HTML5+CSS3 Web前端开发与实例教程：微课视频版》配套提供课程思政元素、案例源代码、PPT课件、课后习题与答案、微课视频、教案、教学大纲、章节测试、云题库、实验报告、学习通在线课程、企业高频面试题、学科竞赛真题等丰富的教学资源，并设有QQ群提供线上学习跟踪和指导服务。

《HTML5+CSS3 Web前端开发与实例教程：微课视频版》共分14章，系统地讲解Web前端开发的核心技术，主要内容包括Web前端开发概述、HTML5基础、HTML5页面元素和属性、表单、CSS3基础、CSS3修饰页面元素、CSS3高级选择器、CSS3盒子模型、浮动与定位、CSS3高级应用、网页布局、Flex布局、Grid布局等，并提供“大学生参军入伍专题网站”和“文创商城”两个实战案例。

本书作者

卢欣欣，副教授。长期从事高校教学工作，专注Web应用开发，项目开发经验丰富。主讲《Web程序设计》《高级程序设计》《软件开发综合实践》等课程，先后主编教材2部，参编教材3部。在慕课网上线的《企业网站综合布局实战》课程学习人数超15万人。

崔仲远，副教授，毕业于北京交通大学。长期从事高校教学工作和软件项目开发工作，实战开发经验丰富。先后承担《网页特效设计》《Web前端基础》《跨平台脚本开发技术》等多门课程的教学任务，发表学术论文多篇，主编教材2部，参编教材3部、专著1部。主持省级教改项目1项、科研项目1项。

本书读者

《HTML5+CSS3 Web前端开发与实例教程：微课视频版》既可作为本专科院校计算机相关专业的Web程序设计、网页设计与制作等课程的教材，也可作为Web应用开发人员的自学手册和技术参考书。

本书目录

第1章 Web前端开发概述 1

1.1 Web前端开发职责 1

1.2 Web前端开发相关概念 2

1.3 Web前端开发相关技术 3

1.3.1 Web标准 3

1.3.2 HTML 4

1.3.3 CSS 4

1.3.4 JavaScript 5

1.4 Web前端开发工具 5

1.4.1 代码编辑工具：VSCode 6

1.4.2 代码运行工具：浏览器 8

1.4.3 开发者工具 9

1.4.4 人工智能辅助编程工具 10

1.5 网站设计与开发流程 11

1.6 实战案例：网页显示“社会主义核心价值观” 12

1.7 本章小结 13

第2章 HTML5基础 14

2.1 HTML5语法基础 14

2.1.1 HTML文档结构 14

2.1.2 HTML标签语法 17

2.1.3 HTML注释 18

2.2 文本控制标签 19

2.2.1 标题标签 19

2.2.2 段落标签 20

2.2.3 换行标签 20

2.2.4 文本格式化标签 21

2.2.5 特殊字符 22

2.3 图像标签 23

2.3.1 网页常用图像格式 23

2.3.2 图像标签的使用 24

2.3.3 相对路径与绝对路径 26

2.4 超链接标签 27

2.4.1 文本链接 27

2.4.2 图像链接 28

2.4.3 书签（锚点）链接 28

2.4.4 其他链接 30

2.5 列表 30

2.5.1 有序列表 31

2.5.2 无序列表 32

2.5.3 定义列表 34

2.5.4 嵌套列表 35

2.6 表格 36

2.6.1 表格结构 36

2.6.2 表格标签 37

2.7 视频和音频标签 41

2.7.1 视频标签 41

2.7.2 音频标签 42

2.8 其他标签 42

2.8.1 预格式化标签 42

2.8.2 水平线标签 43

2.8.3 行内容器标签 43

2.9 实战案例：“大学生参军网站”兵役登记页面 44

2.10 本章小结 46

第3章 HTML5页面元素和属性 47

3.1 文档结构标签 47

3.1.1标签 47

3.1.2标签 49

3.1.3标签 50

3.1.4标签 51

3.1.5标签 53

3.1.6标签 53

3.1.7和标签 54

3.1.8标签 55

3.2 交互元素 55

3.2.1 标签 55

3.2.2 标签 56

3.2.3标签 57

3.3 文本层次语义标签 58

3.3.1 标签 58

3.3.2 标签 59

3.3.3 标签 60

3.4 全局属性 61

3.5 实战案例：“大学生参军网站”页面结构 62

3.6 本章小结 64

第4章 表单 65

4.1 表单概述 65

4.2标签 67

4.3 标签 68

4.3.1 单行文本框 69

4.3.2 密码框 69

4.3.3 文件域 70

4.3.4 单选按钮和复选框 71

4.3.5 隐藏域 73

4.3.6 按钮 73

4.3.7 HTML5新增输入元素 76

4.4 标签 78

4.5 标签 79

4.6 选择列表标签 80

4.7 多行文本框标签 83

4.8 表单常用属性 84

4.9 实战案例：“大学生参军网站”网上咨询表单 86

4.10 本章小结 88

第5章 CSS3基础 89

5.1 CSS概述 89

5.2 CSS语法规则 90

5.3 CSS样式的引入方法 91

5.3.1 行内样式表 91

5.3.2 内部样式表 92

5.3.3 外部样式表 93

5.4 CSS基本选择器 94

5.4.1 标签选择器 94

5.4.2 ID选择器 95

5.4.3 类选择器 95

5.4.4 通用选择器 97

5.5 实战案例：“大学生参军网站”公共样式表制作 97

5.6 本章小结 98

第6章 CSS3修饰页面元素 99

6.1 CSS字体样式 99

6.1.1 字体粗细属性 99

6.1.2 字体风格属性 100

6.1.3 字体大小属性 101

6.1.4 字体族属性 103

6.1.5 字体属性 106

6.2 CSS文本样式 107

6.2.1 行高属性 107

6.2.2 颜色属性 109

6.2.3 文本水平对齐属性 110

6.2.4 首行缩进属性 111

6.2.5 文本修饰属性 111

6.2.6 字符间距属性 112

6.2.7 字间距属性 113

6.2.8 字母大小写属性 114

6.2.9 文本阴影效果属性 115

6.3 CSS表格样式 116

6.4 CSS表单样式 118

6.4.1 单行文本框美化 119

6.4.2 按钮美化 120

6.4.3 下拉列表美化 120

6.5 CSS列表样式 122

6.6 实战案例：“大学生参军网站”在线咨询页面 123

6.7 本章小结 126

第7章 CSS3高级选择器 127

7.1 组合选择器 127

7.1.1 交集选择器 127

7.1.2 并集选择器 128

7.1.3 后代选择器 129

7.1.4 子元素选择器 130

7.1.5 相邻兄弟选择器 131

7.1.6 通用兄弟选择器 132

7.2 属性选择器 133

7.3 伪类选择器 134

7.4 伪元素选择器 136

7.5 CSS三大特性 138

7.6 本章小结 141

第8章 CSS3盒子模型 142

8.1 盒子模型概述 142

8.1.1 认识盒子模型 142

8.1.2

标签 144

8.2 盒子模型的相关属性 144

8.2.1 内容区域的宽度和高度 144

8.2.2 边框 145

8.2.3 内边距 152

8.2.4 外边距 153

8.3 阴影 155

8.4 box-sizing 156

8.5 背景属性 158

8.5.1 背景颜色 158

8.5.2 背景图像 158

8.5.3 图像平铺方式 158

8.5.4 背景图像位置 160

8.5.5 背景图像固定 161

8.5.6 背景图像大小 161

8.5.7 背景裁剪 163

8.5.8 背景复合属性 164

8.5.9 CSS精灵图 165

8.6 实战案例：“大学生参军网站”登录页面 166

8.7 本章小结 169

第9章 浮动与定位 170

9.1 标准文档流 170

9.2 元素的分类 171

9.2.1 块级元素、行内元素与行内块元素 171

9.2.2 元素的类型转换 172

9.3 元素的浮动 173

9.3.1 设置浮动 174

9.3.2 清除浮动 176

9.4 元素的定位 180

9.4.1 定位的概念 180

9.4.2 定位属性 181

9.4.3 静态定位 181

9.4.4 相对定位 182

9.4.5 绝对定位 183

9.4.6 固定定位 186

9.4.7 粘性定位 187

9.4.8 层叠等级属性 188

9.5 实战案例：“大学生参军网站”轮播图效果 190

9.6 本章小结 192

第10章 CSS3高级应用 193

10.1 变换 193

10.1.1 旋转 194

10.1.2 倾斜 195

10.1.3 缩放 196

10.1.4 平移 197

10.1.5 变换原点 198

10.2 过渡 200

10.3 动画 202

10.4 实战案例：“大学生参军网站”CSS3高级应用 205

10.5 本章小结 208

第11章 网页布局 209

11.1 网页布局概述 209

11.1.1 网页布局的概念 209

11.1.2 网页布局的流程 210

11.1.3 常见的网页布局方法 211

11.2 网页布局命名规范 211

11.3 常见布局的实现 212

11.3.1 单列布局 212

11.3.2 两列常规布局 214

11.3.3 三列常规布局 216

11.3.4 两列自适应等高布局 217

11.3.5 三列自适应布局 219

11.4 实战案例：“大学生参军网站”首页主体部分 223

11.5 本章小结 225

第12章 Flex布局 226

12.1 Flex布局概述 226

12.2 Flex布局相关概念 227

12.3 容器属性 227

12.3.1 display属性 228

12.3.2 flex-direction属性 228

12.3.3 flex-wrap属性 230

12.3.4 justify-content属性 232

12.3.5 align-items属性 233

12.3.6 align-content属性 235

12.4 项目属性 236

12.4.1 order属性 236

12.4.2 flex-grow属性 237

12.4.3 flex-shrink属性 239

12.4.4 flex-basis属性 240

12.4.5 flex属性 241

12.5 实战案例：“大学生参军网站”导航条 242

12.6 本章小结 244

第13章 Grid布局 245

13.1 Grid布局概述 245

13.2 Grid布局相关概念 246

13.3 容器属性 246

13.3.1 display属性 247

13.3.2 划分网格 248

13.3.3 行间隔和列间隔 252

13.3.4 项目对齐方式 253

13.4 项目属性 255

13.4.1 grid-column和grid-row属性 255

13.4.2 grid-area属性 257

13.5 实战案例：“大学生参军网站”视频展播列表 258

13.6 本章小结 260

第14章 Web前端项目综合实践——文创商城 261

14.1 项目概述 261

14.2 需求分析 262

14.3 原型设计 262

14.4 公共部分的设计与实现 265

14.4.1 重置样式 265

14.4.2 页面头部 265

14.4.3 页面底部 268

14.4.4 悬浮侧边栏 270

14.5 首页的设计与实现 271

14.5.1 甄选好物版块 271

14.5.2 国博文房版块 274

14.6 商品列表页的设计与实现 277

14.6.1 商品类型筛选 277

14.6.2 分页导航 278

14.7 商品详情页的设计与实现 279

14.8 本章小结 283

编辑推荐

1HTML5与CSS3是Web前端开发的两大核心技术，它们不仅是Web前端开发工程师必须掌握的技能，也是高校一门重要的Web前端课程内容

2《HTML5+CSS3 Web前端开发与实例教程：微课视频版》以“从项目中来到项目中去”为主旨，从Web前端开发的基本概念入手，系统介绍HTML5、CSS3网页编程技巧。

3《HTML5+CSS3 Web前端开发与实例教程：微课视频版》采取“知识点讲解+示例解析+案例详讲+高频面试题+实践操作+学科竞赛真题”的递进式教学模式，引导读者理解理论知识，掌握开发方法，学会复杂的网站设计技能，全面提升读者的Web前端开发能力。

4《HTML5+CSS3 Web前端开发与实例教程：微课视频版》配套资源非常丰富，包括思政元素、案例源代码、PPT课件、微课视频、习题与答案、教案、教学大纲、章节测试、云题库、实验报告、学习通在线课程，能帮助读者快速掌握HTML5与CSS3前端技术。

本文摘自《HTML5+CSS3 Web前端开发与实例教程：微课视频版》，获出版社和作者授权发布。