master

分支 (1)

管理

管理

master

ceshi2
/
xq4.html

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="./bootstrap-4.5.0-dist/css/bootstrap.css">
    <title>bootstrap 4</title>
    <style>
        .dibu1{
            font-size: 25px;
            padding-top: 2rem;
            margin-left: 2rem;
            margin-bottom: 2rem;
        }
        .dibu p:not(:first-of-type){
            margin-left: 2rem;
            margin-bottom: 0.5rem;
        }
        .dibu p input{
            border: none;
            border-bottom: 1px solid white;
            background-color: transparent;
            width: 90%;
            height: 45px;
            color: #ffffff;
            outline: none;
        }
        .dibu span{
            font-size: 20px;
            display: inline-block;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            width: 50%;
            height: 2rem;
            text-align: center;
            background-color: #3DC2CA;
            margin-top: 10px;
            border: none;
            border-radius: 5px;
        }
    </style>

</head>
<body>
<div style="position:fixed;top:0px;width: 100%;height: 2rem;background-color: #e2e240"><a href="2.html" style="font-weight: bold;font-size: 30px;line-height: 1.5rem;color: white;text-decoration: none"><</a>
    <span style="line-height: 1.5rem;position: relative;left: 35%;transform: translateX(-50%);top: -3px;font-size: 18px;color: white">商品详情</span>
</div>
<div><img src="images/p1.png" alt="" style="width: 100%"></div>
<div style="margin-top: 3rem"><h5>儿童积木益智拼装玩具，玩具大飞机，起飞，孩子的好朋友</h5> <span style="color: red;font-weight: bold;font-size: 20px">￥50</span></div>
<div><input type="button"value="点击购买" style="background-color: #009966;color: white;border-radius: 5px"></div>
<div style="width: 100%;height: 1rem"></div>
<div class="dibu" style="background-color: #203247;color: white;height: auto">
    <p class="dibu1"><strong>Address</strong></p>
    <p>地址:南昌市</p>
    <p>电话:123456789</p>
    <p>邮箱:[email protected]</p>
    <p class="dibu1">Info</p>
    <p style="margin-right: 1rem">necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful</p>
    <p class="dibu1">Links</p>
    <p><a href="index.html" style="color: white">主页</a></p>
    <p><a href="2.html" style="color: white">商城</a></p>
    <p><a href="3.html" style="color: white">购物车</a></p>
    <p><a href="4.html" style="color: white">我的</a></p>
    <p class="dibu1">Subscribe</p>
    <p><input type="text" placeholder="邮箱"></p>
    <span>Subscribe</span>
    <p style="height: 5rem"></p>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="../jquery-1.12.4.js"></script>
<!--
  可以用来实现  弹出框  下拉菜单  提示框功能
  如果说不需要这些功能  可以直接引入bootstrap.min.js  很小 只有62k
-->
<!--<script src="bootstrap4/dist/js/popper.min.js" ></script>
<script src="bootstrap4/dist/js/bootstrap.min.js"></script>-->

<!--如果 想要 popper的功能  可以直接引入 bundle.js 包含所有的功能-->
<script src="./bootstrap-4.5.0-dist/js/bootstrap.bundle.min.js"></script>


</body>
</html>