练习十五-电商商品界面案例

敦煌璧画

于 2022-04-11 09:26:56 发布

阅读量121

点赞数

文章标签：前端 html5 css

本文链接：https://blog.csdn.net/m0_58200396/article/details/124091395

版权

本文通过实例讲解如何使用HTML5和CSS技术来创建一个电商商品展示界面，涵盖布局设计、样式美化及交互实现等关键点。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="keywords" content="">
<meta name="description" content="">

<head>
    <title></title>
    <style>
        *{
     
            margin: 0;
            padding:0;
        }
        .box1{
     
            width:200px;
            height:650px;
            border:1px solid rgb(161, 3, 3);
            margin: 0 auto;
        }
        .box1>.box2{
     
            width:200px;
            height:40px;
            background-color: rgb(161, 3, 3);
            margin: 0 auto;
            font-size: 16px;
            color:rgb(255, 255, 255);
            text-align: center;
            line-height: 40px;
        }
        dt{
     
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 14px;
            text-indent:28px;
        }
        dd{
     
            font-size: 12px;
            float: left;
            margin-right: 5px;
            margin-bottom: 14px;
            
           
        }
        dl{
     
            margin: 20px;
          
        }
        .box3{
     
            width: 200px;
            height:130px;
            border-bottom: 1px dotted rgb