web应用开发：css设计旅游网站界面

程序员文章站 2023-12-23 19:51:51

...

新建travel.html文件
代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>国内旅游</title>
    <!--链入对网页某类元素的通用设置样式-->
    <link href="common.css" rel="stylesheet" type="text/css">
    <!--链入对某个元素的特定设置样式-->
    <link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--右半边-->
<section class="qui-page">
    <!--header-->
    <header class="qui-header">
        <h1>国内旅游计划</h1>
    </header>
    <!--/header-->
    <!--begin-->
    <section class="container"> <!--表面页面中的一个内容区块-->
        <div class="plcRouteList">
            <a href="#">
                <img src="fengjing.jpg"width="100%" alt="" class="pic"/>
                <div class="bottom">
                    <p class="face">
                        <img src="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> <!--<em>标签表示其中文本为强调的内容-->
            <p>昆明 - 香格里拉 - *</p>
        </div>
    </section>
    <!--end-->
    <!--begin-->
    <section class="container"><!--语义化元素表示页面中的一个内容区块-->
        <div class="plcRouteList">
            <a href="#">
                <img src="华东.jpg" width="100%" alt="" class="pic" />
                <div class="bottom">
                    <p class="face">
                        <img src="touxiang.jpg" width="38" height="38" alt="" />
                    </p>
                    <h2 class="title">我的旅游行程</h2>
                </div>
                <p class="day">15天</p>
            </a>
            <div>
                <em>城市</em>
                <p>北京 - 常州 - 苏州</p>
            </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-->
<!--侧边栏导航-->
<!--表示article元素之外的，与article元素内容相关的辅助信息-->
<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>
<!--侧边栏导航 end-->
</body>
</html>

新建common.css文件
代码如下：

html{
    height: 100%;
    overflow-x: hidden;/*表示水平方向隐藏溢出，没有滚动条*/
    background: #f5f5f5;
    color: #444;
    /*设置字体样式，！important设置该元素的样式具有最高权值*/
    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;
    /*盒子阴影：水平偏移，垂直偏移模糊值，阴影颜色（其中rgb指颜色，a指透明度）*/
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
div,ul,li,p{
    margin: 0;
    padding: 0;
    outline: none;/*当元素获得焦点的时候，焦点框为0，不出现虚线框（或高亮框）*/
}
em,strong{
    font-style: normal;
    font-weight: normal;/*字体样式、粗细正常*/
}
ul{
    list-style: none;/*清除默认样式*/
}
h1{
    font-size: 55px;/*字体大小55px*/
    margin-top: 30px;/*上边距30px*/
    color: white;/*字体颜色为白色*/
    text-align: center;/*字体水平居中*/
}

新建main.css文件
代码如下：

.qui-page{
    width: 640px;
}
.qui-header{
    width: 100%;
    height: 80px;
    overflow: hidden;/*隐藏溢出内容*/
    background-color: #2bab79;/*背景颜色为#2bab79*/
}
.container{
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.plcRouteList{
    border-bottom: 1px solid #e6e8ea;/*底部边框为1px，颜色为#e6e8ea的实线*/
    background-color: #fff;
    padding-left: 5px;/*左内边距为5px*/
}
.plcRouteList li{
    padding: 15px 5px 15px 0;/*上、右、下内边距分别为15px、5px、0*/
    border-top: 1px solid #e6e8ea;/*顶部边框为1px、颜色为#e6e8ea的实线*/
}
.plcRouteList a{
    display: block;/*将a由行元素变为块元素*/
    position: relative;
}
.plcRouteList .pic{
    display: block;
    min-height: 150px;
}
.plcRouteList .bottom{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    padding: 30px 0 0 60px;
    color: #fff;
    /*背景颜色：线性渐变，从上到下由黑色渐变至透明为60%的黑色*/
    background-image: -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.6));
    background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.6));
}
.plcRouteList .bottom .face{
    float: left;/*向左浮动*/
    margin-left: -50px;
    width: 38px;
    height: 38px;
    border: 1px solid #fff;
    border-radius: 50%;/*为元素添加圆角边框边框半径为宽度的50%*/
    overflow: hidden;
}
.plcRouteList .bottom .face img{
    display: block;
    border-radius: 50%;
}
.plcRouteList .bottom .title{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;/*表示当对象内文本溢出时显示省略标记（。。。）*/
    white-space: nowrap;
    font-size: 18px;
    font-weight: bold;
    line-height: 22px;/*行高为22px*/
}
.plcRouteList .day{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    /*背景颜色：rgb是对应颜色值，a对应的是透明度*/
    background-color: rgba(43,171,121,0.8);
    border-radius: 50%;
    text-align: center;
    font-size: 18px;
    line-height: 50px;
    color: white;
}
.plcRouteList .infos{
    margin-top: 7px;/*顶部外边距为7px*/
}
.plcRouteList .infos>div {
    margin-bottom: 5px;/*底部外边距为5px*/
    padding-left: 40px;/*左边内边距为40px*/
}
.plcRouteList .infos 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;/*字体颜色为#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;
    /*上内边距为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;
}

效果图：
web应用开发：css设计旅游网站界面
用到的图片：
fengjing.jpg

touxiang.jpg

华东.jpg

web应用开发：css设计旅游网站界面

web应用开发：css设计旅游网站界面

实例讲解网站前台界面开发流程_html/css_WEB-ITnose

实例讲解网站前台界面开发流程_html/css_WEB-ITnose

六个前端开发工程师必备的Web设计模式/模块资源 CSS响应式设计界面设计

今日推荐：12个获取手机应用程序设计灵感的网站_html/css_WEB-ITnose