国内旅游网站：position专项练习（网页设计与制作html+css+javascript)

最新推荐文章于 2023-03-19 11:48:11 发布

咸蛋_dd

最新推荐文章于 2023-03-19 11:48:11 发布

阅读量793

点赞数

分类专栏： web前端文章标签： html javascript css

本文链接：https://blog.csdn.net/weixin_62848089/article/details/126939077

版权

web前端专栏收录该内容

4 篇文章 2 订阅

订阅专栏

1.效果预览

2.项目代码

（1）html代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>国内旅游</title>
    <link href="css/common.css" rel="stylesheet" type="text/css" />
    <link href="css/main.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <!-- 右半边 -->
    <section class="qui-page">
        <header class="qui-header">
            <h1>国内旅游计划</h1>
        </header>
        <section class="container">
            <div class="plcRouteList">
                <a href="#">
                    <img src="images/fengjing.jpg" width="100%" alt="" class="pic" />
                    <div class="bottom1">
                        <p class="face">
                            <img src="images/touxiang.jpg" width="38" height="38" alt="" />
                        </p>
                        <h2 class="title">我的旅游行程</h2>
                    </div>
                    <p class="day">14天</p>
                </a>
                <div class="infos">
                    <div>
                        <em>城市</em>
                        <p>昆明-香格里拉-西藏</p>
                    </div>
                </div>
            </div>
        </section>
        <!-- end -->
        <!-- begin -->
        <section class="container">
            <div class="plcRouteList">
                <a href="#">
                    <img src="images/华东.jpg" width="100%" alt="" class="pic" />


                    <div class="bottom1">
                        <p class="face">
                            <img src="images/touxiang.jpg" width="38" height="38" alt="" />
                        </p>
                        <h2 class="title">我的旅游行程</h2>
                    </div>
                    <p class="day">15天</p>
                </a>
                <div class="infos">
                    <div>
                        <em>城市</em>
                        <p>北京-常州-苏州</p>
                    </div>
                </div>
            </div>
        </section>
        <!-- footer -->
        <footer class="qui-footerBasic">
            <p class="switchStyle"><span>手机版</span><a href="#"><span>电脑版</span></a><span><a href="#">APP</a></span></p>
        </footer>
        <!-- footer end -->
    </section>
    <!-- 右半边end -->
    <!-- 侧边栏导航 -->
    <aside class="qui-asides">
        <section class="qui-aside">
            <nav class="qui-asideNav">
                <ul>
                    <li><a href="#"><span>首页</span></a></li>
                    <li><a href="#"><span>目的地</span></a></li>
                    <li><a href="#"><span>酒店</span></a></li>
                    <li><a href="#"><span>机票</span></a></li>
                    <li><a href="#"><span>时间</span></a></li>
                    <li><a href="#"><span>点评</span></a></li>
                </ul>
            </nav>
        </section>
    </aside>
</body>

</html>

（2）css代码1 main代码

.qui-page{
    width:640px;
}
.qui-header{
    width:100%;
    height:80px;
    overflow:hidden;
    background-color:#2bab79;
}
.container{
    width:100%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
.plcRouteList{
    border-bottom:1px solid #e6e8ea;
    background-color:#fff;
}
.plcRouteList li{
    padding:15px 5px 15px 0;
    border-top:1px solid #e6e8ea;
}
.plcRouteList a{
    display:block;
    position:relative;
}
.plcRouteList .pic{
    display:block;
    min-height:150px;
}
.plcRouteList .bottom1{
    position: absolute;
    left:0;
    right:0;
    bottom:0;
    height:50px;
    padding:30px 0 0 60px;
    color:#fff;
    background-image:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.6));
}
.plcRouteList .bottom1 .face{
    float:left;
    margin-left: -50px;
    width:38px;
    height:38px;
    border:1px solid #fff;
    border-radius: 50%;
    overflow:hidden;
}
.plcRouteList .bottom1 .face img{
    display:block;
    border-radius:50%;
}
.plcRouteList .bottom1 .title{
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:18px;
    font-weight:bold;
    line-height:22px;
}
.plcRouteList .day{
    position:absolute;
    top:10px;
    right:10px;
    width:50px;
    height:50px;
    background-color:rgba(43,171,121,0.8);
    border-radius:50%;
    text-align:center;
    font-size:18px;
    line-height:50px;
    color:#fff;
}
.plcRouteList .infos{
    margin-top:7px;
}
.plcRouteList .infos>div{
    margin-bottom:5px;
    padding-left:40px;
}
.plcRouteList .innfos em{
    float:left;
    margin-left:-40px;
    font-size:15px;
    font-weight:bold;
}
.plcRouteList .infos p{
    max-height:48px;
    overflow:hidden;
}
.qui-footerBasic{
    width:100%;
    margin:20px 0;
    text-align:center;
    font-size:10px;
    line-height:20px;
}
.qui-footerBasic .switchStyle{
    color:#9ea3ab;
}
.qui-footerBasic .switchStyle span{
    margin-left:30px;
}
.qui-footerBasic .switchStyle a{
    color:#444;
    text-decoration:none;
}
.qui-asides{
    position:absolute;
    left:-200px;
    top:0;
    height:400px;
    width:200px;
}
.qui-aside{
    position:fixed;
    top:0;
    bottom:0;
    width:200px;
    overflow-y:scroll;
    background-color:#2d3741;
}
.qui-asideNav{
    padding:80px 10px 10px;
}
.qui-asideNav li{
    border-top:1px solid #232d34;
    background-color:#36424b;
}
.qui-asideNav a{
    text-decoration:none;
    display:block;
    padding-left:15px;
    font-size:16px;
    line-height:44px;
    color:#ced1d5;
}
.qui-asideNav a:hover{
    color:white;
    background-color:#2bab79;
}

（3）css代码 common

/* 旅游网站页面 common*/
html{
    height:100%;
    overflow-x:hidden;
    background:#f5f5f5;
    color:#444;
    font:14px/24px Helvetica !important;
}
body{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    position:relative;
    z-index:0;
    width:100%;
    max-width:640px;
    min-height:100%;
    margin:0 auto;
    overflow-x:hidden;
    box-shadow:0 0 10px rgba(0,0,0,0.3);
}
div,ul,li,p{
    margin:0;
    padding:0;
    outline:none;
}
em,strong{
    font-style:normal;
    font-weight:normal;
}
ul{
    list-style:none;
}
h1{
    font-size:55px;
    margin-top:30px;
    color:white;
    text-align:center;
}