Question

有人可以帮助我查看我的HTML页面，并向我解释这是否是设置HTML页面的正确语义方式？

我需要学习构建一个尽可能少的div的网页，但是如果你想要特定的东西，你可以使用它们吗？就像我在这种情况下使用它们一样。

HTML代码中是否存在任何缺陷？

＆＃13;

.main-club-bar-music-festival {
    overflow: auto;
}

.main-club-bar-music-festival h3 {
    margin: 0;
}

.img-club-air {
    position: relative;
}

.img-club-air img {
    width: 100%;
}

.img-club-air a:first-child {
    position: absolute;
    margin: 10px;
    width: 60px;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.img-club-air h2 {
    position: absolute;
    bottom: 0;
    font-size: 20px;
    width: 100%;
    padding: 10px;
    color: white;
    font-family: "LemonMilk"
}

#paragraph-p {
    padding: 20px;
    margin: 0;
}

.rent-a-bike {
    width: 200px;
    margin: 20px auto;
    text-align: center;
    background-color: #eb6c74;
}

.rent-a-bike p {
    margin: 0;
    padding: 10px;
    color: white;
    text-transform: capitalize;
    transform: translateX(-5%);
    overflow: hidden;
}

.rent-a-bike img {
    margin-top: 10px;
    margin-left: 5px;
    height: 38px;
    float: left;
}

.show-me-the-way {
    width: 200px;
    margin: 20px auto;
    text-align: center;
    background-color: #eb6c74;
}

.show-me-the-way p {
    margin: 0;
    padding: 10px;
    color: white;
    text-transform: capitalize;
}

.show-me-the-way img {
    height: 38px;
    float: left;
}

.info-block {
    background-color: #eb6c74;
    color: white;
    padding: 10px 20px;
    text-transform: uppercase;
    font-family: "NeueHaasGrotesk Light";
}

.address-club {
    overflow: auto;
    margin-bottom: 16px;
}

.address-club p {
    padding: 10px 20px 0 20px;
    margin-bottom: 0;
}

.address-club img {
    height: 40px;
    margin-left: 10px;
    float: left;
    margin-right: 10px;
}

.address-club a {
    line-height: 40PX;
    display: block;
    color: #3b3b3b;
    text-decoration: underline;
}

.address-club a[target=_blank] {
    padding-left: 20px;
    color: #0000EE;
}

.padding-info-club {
    padding: 20px;
}

.regular-info-left {
    float: left;
    width: 49.5%;
    text-align: center;
    color: white;
}

.regular-info-left p:nth-child(1) {
    margin: 0;
}

.regular-info-left p:nth-child(2) {
    margin: 2px 0;
}

.regular-info-left p:nth-child(3) {
    margin: 2px 0;
}

.regular-info-left p {
    background-color: #3b3b3b;
    height: 50px;
    line-height: 50px;
    text-transform: uppercase;
}

.regular-info-right {
    float: right;
    width: 49.5%;
    text-align: center;
    color: white;
}

.regular-info-right p:nth-child(1) {
    margin: 0;
}

.regular-info-right p:nth-child(2) {
    margin: 2px 0;
}

.regular-info-right p:nth-child(3) {
    margin: 2px 0;
}

.regular-info-right p {
    background-color: #3b3b3b;
    height: 50px;
    line-height: 50px;
    text-transform: uppercase;
}

#overflow-regular-info {
    overflow: auto;
}

.info-feedback-on-page {
    margin: 10px 0;
    border-top: 1px solid #eb6c74;
    border-bottom: 1px solid #eb6c74;
    padding: 0px 0px 10px 20px;
}

.info-feedback-on-page button {
    border-radius: 40%;
    background-color: transparent;
    margin-right: 10px;
}

#button-yes {
    background-color: white;
    border-radius: 28px;
    border: 2px solid #44c767;
    color: #44c767;
    font-size: 15px;
    padding: 10px 25px;
    outline: 0;
}

#button-yes:active {
    position: relative;
    top: 2px;
    outline: 0;
}

#button-no {
    background-color: white;
    border-radius: 28px;
    border: 2px solid #e35656;
    color: #e35656;
    font-size: 15px;
    padding: 10px 25px;
    outline: 0;
}

#button-no:active {
    position: relative;
    top: 2px;
    outline: 0;
}

＆＃13;

 <main class="main-club-bar-music-festival">
        <div class="img-club-air">
            <a href="favourites.html"><img src="img/favorite-icon-add.svg" alt="add to favourites"></a>
            <img src="img/club-panama.jpg" alt="Club Panama">
            <h2>panama</h2>
        </div>
        <h3 class="info-block">regular info</h3>
        <section id="overflow-regular-info">
            <div class="regular-info-left">
                <p>dancing</p>
                <p>go out with mates</p>
                <p>expensive</p>
            </div>
            <div class="regular-info-right">
                <p>edm</p>
                <p>locals/foreigners</p>
                <p>groups</p>
            </div>
        </section>
        <p id="paragraph-p">Panama chose a bit of a peculiar spot to open a nightclub. Located outside the city centre, Panama created a diversified nightclub. The nightclub holds a lot of parties varying from electronic tp 80's and 90s parties. Panama also houses HappyHappyJoyJoy, an asian shared dining restaurant</p>
        <div class="rent-a-bike">
            <a href="http://www.ov-fiets.nl/huurlocaties?locatie=amsterdam&POST_AUTOCOMPLETE=%2Fhuurlocaties.xml" target="_blank">
                <img src="img/bicycle-icon.svg" alt="OV-Bicycle">
                <p>rent ov-bike
                    <br>€ 3,85,-/24 hour</p>
            </a>
        </div>
        <div class="show-me-the-way">
            <a href="">
                <img src="img/location-icon.svg" alt="your location to destination">
                <p>show me the way</p>
            </a>
        </div>
        <h3 class="info-block">average price for a drink</h3>
        <p class="padding-info-club">- € 2,30,-</p>
        <h3 class="info-block">entrance</h3>
        <p class="padding-info-club">- € 5,00,-</p>
        <h3 class="info-block">address</h3>
        <div class="address-club">
            <p>Panama
                <br> Oostelijke Handelskade 4
            </p>
            <a href="http://www.panama.nl" target="_blank">www.panama.nl</a>
            <a href="tel:0203118686">020 311 86 86<img src="img/phone-icon.svg" alt="call-icon"></a>
        </div>
        <h3 class="info-block">opening hours</h3>
        <p class="padding-info-club">Fr - Su: 21:00 - 05:00pm</p>
        <div class="info-feedback-on-page">
            <p>Was this information usefull for you as an international student?</p>
            <button id="button-yes">yes</button>
            <button id="button-no">no</button>
        </div>
    </main>

＆＃13;

有没有更好的方法来构建正确的语义方式？

0 个答案: