ミニショッピングモールhtmlの作成(1)

31541 ワード
テキストリンク
第1週目のタスク
ミニショッピングモールの作成
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

    <title>미니 쇼핑몰</title>

    <!--폰트 링크 불러오기-->
    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">

    <style>
        /*전체 폰트 지정하기*/
        * {
            font-family: 'Jua', sans-serif;
        }

        /*전체 index 페이지*/
        .wrap {
            width: 500px;
            margin: auto;
        }

        /*상품 사진*/
        .item-img {
            width: 500px;
            height: 300px;

            background-image: url("https://www.ilovepc.co.kr/news/photo/202007/35693_72002_1833.jpg");
            background-position: center;
            background-size: cover;
        }

        /*-상품 전체 설명 구역-*/
        .item-desc {
            width: 500px;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        /*상품 가격*/
        .price {
            font-size: 20px;
        }

        /*상품 설명*/
        .item-desc-ex {
            color: rosybrown;
        }

        /*상품 주문 정보 입력 구역*/
        .item-order {
            width: 500px;
            margin-bottom: 50px;
        }

        /*주문 버튼*/
        .btn-order {
            margin: auto;
            width: 100px;

            /*버튼을 박스로 지정한다*/
            display: block;
        }

    </style>

    <script>
        function order() {
            alert('주문이 완료되었습니다!');
        }
    </script>
</head>

<body>

<!--전체 index 페이지-->
<div class="wrap">

    <!--상품 사진-->
    <div class="item-img"></div>

    <!--상품 설명 구역-->
    <div class="item-desc">
        <h1>마우스를 팝니다 <span class="price">가격:7,900원/개</span></h1>
        <p class="item-desc-ex">파스텔 톤의 부드러운 움직임이 편안한 작업을 도와요!</p>
    </div>

    <!--상품 주문 정보 입력 구역-->
    <div class="item-order">
        <!--주문자 이름-->
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">주문자이름</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
        </div>

        <!--주문 수량-->
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <label class="input-group-text" for="inputGroupSelect01">수량</label>
            </div>
            <select class="custom-select" id="inputGroupSelect01">
                <option selected>-- 수량을 선택하세요 --</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>

        <!--주문자 주소-->
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">주소</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
        </div>

        <!--주문자 전화번호-->
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">전화번호</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
        </div>

        <!--주문 버튼-->
        <button type="button" onclick="order()" class="btn btn-primary btn-order">주문하기</button>
    </div>
</div>
</body>

</html>코드를 입력하세요
データ構造:ハッシュ表:イントロ
Mysql Documentation阅读笔记:JOIN