HTML+CSS极简大学生作业作品练习

免费下载源码和网站所用图片链接

HTML+CSS极简大学生作业作品练习https://download.csdn.net/download/m0_63780299/88792317

网页效果图

注意事项

该作品用最简单的代码打出网站的基本结构，适合新手中的新手学习使用。

关键代码

1.1头部部分HTML代码

<div class="header">
    <div class="websiteName">
        <div class="left">
            <h1>一站式旅游服务网</h1>
            <p>yi zhan shi lv you fu wu wang</p>
        </div>
        <ul class="right">
            <li>真 诚</li>
            <li>无 私</li>
            <li>回 报</li>
            <li>感 恩</li>
        </ul>
    </div>
    <ul class="nav">
        <li><a href="#part1">景点</a></li>
        <li><a href="#part2">餐厅</a></li>
        <li><a href="#part3">酒店</a></li>
        <li><a href="#part4">民宿</a></li>
        <li><a href="#part5">攻略</a></li>
    </ul>
</div>

1.2头部部分css代码

.header .websiteName{
    width:1024px;
    height: 120px;
    display: block;
}
.header .websiteName h1{
    font-size: 50px;
}
.header .left{
    height: 120px;
    margin:auto 50px;
    float: left;
}
.header .right{
    display: flex;
    height:120px;
    float: right;
}
.header .right li{
    list-style: none;
    width:20px;
    font-size: 20px;
    margin:auto 30px;
}
.header .nav{
    display: block;
    border: 1px solid white;
    background-color: black;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.header .nav li{
    width:210px;
    list-style: none;
    border-right: 1px solid grey;
    text-align: center;
    color:white;
    height:40px;
    line-height: 40px;
}
.header .nav li a{
    color:white;
    text-decoration: none;
}

2.1主体内容HTML代码

<div class="content">
    <div class="jingdian">
        <h1 id="part1">景点</h1>
        <ul>
            <li>
                <img src="./images/1.png" alt="">
                <h2>5A级唯美风景景点1</h2>
                <p>￥100元/张成人票</p>
            </li>
            <li>
                <img src="./images/1.png" alt="">
                <h2>5A级唯美风景景点1</h2>
                <p>￥100元/张成人票</p>
            </li>
            <li>
                <img src="./images/1.png" alt="">
                <h2>5A级唯美风景景点1</h2>
                <p>￥100元/张成人票</p>
            </li>
            <li>
                <img src="./images/1.png" alt="">
                <h2>5A级唯美风景景点1</h2>
                <p>￥100元/张成人票</p>
            </li>
            <li>
                <img src="./images/1.png" alt="">
                <h2>5A级唯美风景景点1</h2>
                <p>￥100元/张成人票</p>
            </li>
            <li>
                <img src="./images/1.png" alt="">
                <h2>5A级唯美风景景点1</h2>
                <p>￥100元/张成人票</p>
            </li>
            <li>
                <img src="./images/1.png" alt="">
                <h2>5A级唯美风景景点1</h2>
                <p>￥100元/张成人票</p>
            </li>
            <li>
                <img src="./images/1.png" alt="">
                <h2>5A级唯美风景景点1</h2>
                <p>￥100元/张成人票</p>
            </li>
        </ul>
    </div>
    <div class="cantin">
        <h1 id="part2">餐厅</h1>
        <ul>
            <li>
                <img src="./images/2.png" alt="">
                <h2>五星级豪华大餐</h2>
                <p>￥200元/人</p>
            </li>
            <li>
                <img src="./images/2.png" alt="">
                <h2>五星级豪华大餐</h2>
                <p>￥200元/人</p>
            </li>
            <li>
                <img src="./images/2.png" alt="">
                <h2>五星级豪华大餐</h2>
                <p>￥200元/人</p>
            </li>
            <li>
                <img src="./images/2.png" alt="">
                <h2>五星级豪华大餐</h2>
                <p>￥200元/人</p>
            </li>
            <li>
                <img src="./images/2.png" alt="">
                <h2>五星级豪华大餐</h2>
                <p>￥200元/人</p>
            </li>
            <li>
                <img src="./images/2.png" alt="">
                <h2>五星级豪华大餐</h2>
                <p>￥200元/人</p>
            </li>
            <li>
                <img src="./images/2.png" alt="">
                <h2>五星级豪华大餐</h2>
                <p>￥200元/人</p>
            </li>
            <li>
                <img src="./images/2.png" alt="">
                <h2>五星级豪华大餐</h2>
                <p>￥200元/人</p>
            </li>
        </ul>
    </div>
    <div class="jiudian">
        <h1 id="part3">酒店</h1>
        <ul>
            <li>
                <img src="./images/3.png" alt="">
                <h2>五星级商务酒店</h2>
                <p>￥250元/间</p>
            </li>
            <li>
                <img src="./images/3.png" alt="">
                <h2>五星级商务酒店</h2>
                <p>￥250元/间</p>
            </li>
            <li>
                <img src="./images/3.png" alt="">
                <h2>五星级商务酒店</h2>
                <p>￥250元/间</p>
            </li>
            <li>
                <img src="./images/3.png" alt="">
                <h2>五星级商务酒店</h2>
                <p>￥250元/间</p>
            </li>
            <li>
                <img src="./images/3.png" alt="">
                <h2>五星级商务酒店</h2>
                <p>￥250元/间</p>
            </li>
            <li>
                <img src="./images/3.png" alt="">
                <h2>五星级商务酒店</h2>
                <p>￥250元/间</p>
            </li>
            <li>
                <img src="./images/3.png" alt="">
                <h2>五星级商务酒店</h2>
                <p>￥250元/间</p>
            </li>
            <li>
                <img src="./images/3.png" alt="">
                <h2>五星级商务酒店</h2>
                <p>￥250元/间</p>
            </li>
        </ul>
    </div>
    <div class="minsu">
        <h1 id="part4">民宿</h1>
        <ul>
            <li>
                <img src="./images/4.png" alt="">
                <h2>海景乡间民宿</h2>
                <p>￥150元/间</p>
            </li>
            <li>
                <img src="./images/4.png" alt="">
                <h2>海景乡间民宿</h2>
                <p>￥150元/间</p>
            </li>
            <li>
                <img src="./images/4.png" alt="">
                <h2>海景乡间民宿</h2>
                <p>￥150元/间</p>
            </li>
            <li>
                <img src="./images/4.png" alt="">
                <h2>海景乡间民宿</h2>
                <p>￥150元/间</p>
            </li>
            <li>
                <img src="./images/4.png" alt="">
                <h2>海景乡间民宿</h2>
                <p>￥150元/间</p>
            </li>
            <li>
                <img src="./images/4.png" alt="">
                <h2>海景乡间民宿</h2>
                <p>￥150元/间</p>
            </li>
            <li>
                <img src="./images/4.png" alt="">
                <h2>海景乡间民宿</h2>
                <p>￥150元/间</p>
            </li>
            <li>
                <img src="./images/4.png" alt="">
                <h2>海景乡间民宿</h2>
                <p>￥150元/间</p>
            </li>
        </ul>
    </div>
    <div class="gonglue">
        <h1 id="part5">攻略</h1>
        <ul>
            <li>
                <img src="./images/5.png" alt="">
                <h2>一条路线走遍靓丽城市</h2>
                <p>￥10元/份</p>
            </li>
            <li>
                <img src="./images/5.png" alt="">
                <h2>一条路线走遍靓丽城市</h2>
                <p>￥10元/份</p>
            </li>
            <li>
                <img src="./images/5.png" alt="">
                <h2>一条路线走遍靓丽城市</h2>
                <p>￥10元/份</p>
            </li>
            <li>
                <img src="./images/5.png" alt="">
                <h2>一条路线走遍靓丽城市</h2>
                <p>￥10元/份</p>
            </li>
            <li>
                <img src="./images/5.png" alt="">
                <h2>一条路线走遍靓丽城市</h2>
                <p>￥10元/份</p>
            </li>
            <li>
                <img src="./images/5.png" alt="">
                <h2>一条路线走遍靓丽城市</h2>
                <p>￥10元/份</p>
            </li>
            <li>
                <img src="./images/5.png" alt="">
                <h2>一条路线走遍靓丽城市</h2>
                <p>￥10元/份</p>
            </li>
            <li>
                <img src="./images/5.png" alt="">
                <h2>一条路线走遍靓丽城市</h2>
                <p>￥10元/份</p>
            </li>
        </ul>
    </div>
</div>

2.2主体内容CSS代码

.content h1{
    color:black;
}
.content div{
    margin:30px auto;
}
.content h2{
    color:black;
}
.content p{
    color:grey;
}
.content div ul{
    margin-top:30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.content div ul li{
    list-style: none;
    margin-bottom: 30px;
}
.content div ul li img{
    width:250px;
    height:150px;
}