master

分支 (1)

管理

管理

master

work
/
hp.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HP官方网站</title>
    <link rel="stylesheet" href="hp.css">
    <script src="hp.js"></script>
    <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
    <script src="bootstrap.bundle.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="./bootstrap.min.css" />
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <div class="header_main">
            <!-- 头部左侧 -->
            <div class="header_left">
                <div class="logo">
                    <a href="#"><img src="logo.png"></a>
                </div>

                <ul>
                    <a href="#">
                        <li>深入了解</li>
                    </a>
                    <a href="#">
                        <li>在线购物</li>
                    </a>
                    <a href="#">
                        <li>支持</li>
                    </a>
                </ul>
                <a href="#" id="shopcar">
                    <img src="shop.png">
                </a>
            </div>
            <!-- 头部右侧 -->
            <div class="header_right">
                <input type="text" value="搜索HP.com">
                <a href="#">
                    <img src="serch.png">
                </a>
            </div>
        </div>
    </div>
    <div class="header1">
        <a href="#" class="ah">聊天>&nbsp;&nbsp;&nbsp;&nbsp;</a>
        <a href="#" class="ah">COVID 19: 助您适应改变</a>
    </div>
    <div class="content1">
        <div class="rongqi">
            <ul>
                <li>
                    <img src="lunbo1.webp" alt="">
                </li>
                <li>
                    <img src="lunbo2.webp" alt="">
                </li>
                <li>
                    <img src="lunbo3.webp" alt="">
                </li>

            </ul>
            <ol>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>
    <div class="help">
        <h3>看看我们能怎么帮到您?</h3>
        <br>
        <p>找到适合您的打印机或电脑</p>
    </div>
    <div class="xilie">

        <a href="#" id="diannao">
            <p>电脑系列</p>
        </a>
    </div>
    <div class="content">
        <div class="row">
            <div class="col-sm-4 mt-4">
                <div class="card" style="width: 18rem;">
                    <img class="card-img-top" src="chanpin1.webp" alt="Card image cap">
                    <div class="card-body">

                        <a href="#" class="card-link">
                            <h4 id="chuangye">创业者</h4>
                            <button>立即购买</button>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 mt-4">
                <div class="card" style="width: 18rem;">
                    <img class="card-img-top" src="chanpin2.webp" alt="Card image cap">
                    <div class="card-body">

                        <a href="#" class="card-text">
                            <h4>时尚轻薄</h4>
                            <button>立即购买</button>
                        </a>

                    </div>
                </div>
            </div>
            <div class="col-sm-4 mt-4">
                <div class="card" style="width: 18rem;">
                    <img class="card-img-top" src="chanpin3.webp" alt="Card image cap">
                    <div class="card-body">

                        <a href="#" class="card-text">
                            <h4>精致高端</h4>
                            <button>立即购买</button>
                        </a>

                    </div>
                </div>
            </div>
            <div class="col-sm-4 mt-4">
                <div class="card" style="width: 18rem;">
                    <img class="card-img-top" src="chanpin4.webp" alt="Card image cap">
                    <div class="card-body">

                        <a href="#" class="card-text">
                            <h4>经营商务</h4>
                            <button>立即购买</button>
                        </a>

                    </div>
                </div>
            </div>
            <div class="col-sm-4 mt-4">
                <div class="card" style="width: 18rem;">
                    <img class="card-img-top" src="chanpin5.webp" alt="Card image cap">
                    <div class="card-body">

                        <a href="#" class="card-text">
                            <h4>专业电竞</h4>
                            <button>立即购买</button>
                        </a>

                    </div>
                </div>
            </div>
            <div class="col-sm-4 mt-4">
                <div class="card" style="width: 18rem;">
                    <img class="card-img-top" src="chanpin6.webp" alt="Card image cap">
                    <div class="card-body">
                        <a href="#" class="card-text">
                            <h4>创业设计</h4>
                            <button>立即购买</button>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="xilie">

        <a href="#" id="diannao">
            <p>打印机系列</p>
        </a>
    </div>
    <div id="content1">
        <div class="row">
            <div class="col-sm-4 mt-4">
                <div class="card" style="width: 18rem;">
                    <img class="card-img-top" src="dayin1.webp" alt="Card image cap">
                    <div class="card-body">

                        <a href="#" class="card-link">
                            <h4>家用</h4>
                            <button>立即购买</button>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 mt-4">
                <div class="card" style="width: 18rem;">
                    <img class="card-img-top" src="dayin2.webp" alt="Card image cap">
                    <div class="card-body">

                        <a href="#" class="card-text">
                            <h4>家用办公</h4>
                            <button>立即购买</button>
                        </a>

                    </div>
                </div>
            </div>
            <div class="col-sm-4 mt-4">
                <div class="card" style="width: 18rem;">
                    <img class="card-img-top" src="dayin3.webp" alt="Card image cap">
                    <div class="card-body">

                        <a href="#" class="card-text">
                            <h4>小型企业</h4>
                            <button>立即购买</button>
                        </a>

                    </div>
                </div>
            </div>
            <div class="col-sm-4 mt-4">
                <div class="card" style="width: 18rem;">
                    <img class="card-img-top" src="dayin4.webp" alt="Card image cap">
                    <div class="card-body">

                        <a href="#" class="card-text">
                            <h4>激光一体机</h4>
                            <button>立即购买</button>
                        </a>

                    </div>
                </div>
            </div>
            <div class="col-sm-4 mt-4">
                <div class="card" style="width: 18rem;">
                    <img class="card-img-top" src="dayin5.webp" alt="Card image cap">
                    <div class="card-body">

                        <a href="#" class="card-text">
                            <h4>智能复合机</h4>
                            <button>立即购买</button>
                        </a>

                    </div>
                </div>
            </div>
            <div class="col-sm-4 mt-4">
                <div class="card" style="width: 18rem;">
                    <img class="card-img-top" src="dayin6.webp" alt="Card image cap">
                    <div class="card-body">
                        <a href="#" class="card-text">
                            <h4>图形印艺</h4>
                            <button>立即购买</button>
                        </a>

                    </div>

                </div>

            </div>
        </div>
    </div>
    <div id="what">

    </div>
</body>

</html>