移动端静态“城市艺术展”练手页面

简介: 本次练习主要针对的是移动端页面的练习(附源码)

01静态移动端.gif

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>作业1</title>
    <link rel="stylesheet" href="./css/zhanlan.css">
</head>

<body>
    <div class="head">
        <p>展览设计模板</p>
    </div>
    <div class="conImg">
        <img src="./img/lunbotu.jpg" alt="">
    </div>
    <div class="headBtoom">
        <p>- 展览分类 -</p>
    </div>
    <div class="classify">
        <div>
            <img src="./img/l1.png" alt="">
            <p>展览设计</p>
        </div>
        <div>
            <img src="./img/l2.png" alt="">
            <p>专柜制作</p>
        </div>
        <div>
            <img src="./img/l3.png" alt="">
            <p>活动策划</p>
        </div>
        <div>
            <img src="./img/l4.png" alt="">
            <p>珍品展示</p>
        </div>
    </div>
    <div class="hot">
        <p>- 近期热门 -</p>
    </div>
    <div class="hotShow">
        <div class="hotIntroduce">
            <p class="one">某花园奶奶都创作展</p>
            <p class="two">官洲12月12日</p>
        </div>
        <div class="hotimg">
            <img src="./img/hot.jpg" alt="">
        </div>
        <div class="hotimg">
            <img src="./img/hot.jpg" alt="">
        </div>
        <div class="hotIntroduce">
            <p class="one">某花园奶奶都创作展</p>
            <p class="two">官洲12月12日</p>
        </div>
        <div class="hotIntroduce">
            <p class="one">某花园奶奶都创作展</p>
            <p class="two">官洲12月12日</p>
        </div>
        <div class="hotimg">
            <img src="./img/hot.jpg" alt="">
        </div>
    </div>
    <div class="headBtoom">
        <p>- 企业优势 -</p>
    </div>
    <div class="advantage">
        <span class="intro">
            公司目前在广州、北京、上海拥有自己的大型展览制作工厂与施工队伍,
            面积达5000多平方米,业务范围能直接辐射华南、
            华北、华中地区及香港、澳门
        </span>
        <img src="./img/cont-.png" alt="">
        <div class="bottomMenu">
            <div class="bot">
                <p>150+</p>
                <p class="bot-two">设计人员</p>
            </div>
            <div class="bot">
                <p>150+</p>
                <p class="bot-two">设计人员</p>
            </div>
            <div class="bot">
                <p>150+</p>
                <p class="bot-two">设计人员</p>
            </div>
            <div class="bot">
                <p>150+</p>
                <p class="bot-two">设计人员</p>
            </div>
        </div>
    </div>
    <div class="headBtoom">
        <p>- 经典案例 -</p>
    </div>
    <div class="footer-one">
        <div class="back-img">
            <div>某美院班毕业魔术站</div>
        </div>
        <div class="back-img">
            <div>某美院班毕业魔术站</div>
        </div>
    </div>
    <div class="headBtoom">
        <p>- 计算报价 -</p>
    </div>
    <div class="footer-bot">
        <p>设计面积</p>
        <input type="text" placeholder="请输入设计面积">
    </div>
    <div class="footer-bot foot-two">
        <p>装修风格</p>
        <input type="text" placeholder="请输入装修风格">
    </div>
    <div class="result">
        <a href="Javascript:;">查看计算结果</a>
    </div>
    <div class="bottom-maen">
        <div>
            <span class="iconfont">&#xe63d;</span>
            <p>首页</p>
        </div>
        <div>
            <span class="iconfont">&#xe63d;</span>
            <p>展览案例</p>
        </div>
        <div>
            <span class="iconfont">&#xe63d;</span>
            <p>会展咨询</p>
        </div>
        <div>
            <span class="iconfont">&#xe63d;</span>
            <p>展览会议</p>
        </div>
    </div>
</body>

</html>

css源码:


@font-face {
    font-family: 'iconfont';
    src: 
         url('iconfont.woff2?t=1664887508416') format('woff2'),
         url('iconfont.woff?t=1664887508416') format('woff'),
         url('iconfont.ttf?t=1664887508416') format('truetype');
  }
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
body{
    padding: 0;
    margin: 0;
}
.head{
    margin-top:20px; 
    font-size: 20px;
    text-align: center;
}
.conImg{
    width: 100%;
}
.conImg img{
    width: 100%;
    height: 182px;
}
.headBtoom{
    border-bottom: 1px solid rgb(241, 241, 241);
    display: flex;
    justify-content: center;
}
.classify{
    display: flex;
    justify-content: space-around;
    padding-top:30px; 
    height: 130px;
    border-bottom: 10px solid rgb(247, 247, 247);
}
.classify div{
    text-align: center;
}
.classify img{
    width: 32px;
    height: 32px;
}
.classify p{
    font-size: 14px;
    margin: 0;
}
.hot{
    border-bottom: 1px solid rgb(241, 241, 241);
    display: flex;
    justify-content: center;
}
.hotShow {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    border-bottom: 10px solid rgb(247, 247, 247);
}
.hotShow img{
    width: 100%;
    height: 120px;
}
.hotShow div{
    width: 50%;
}
.hotIntroduce{
    display: flex;
    flex-flow: column;
    justify-content: center;
    text-align: center;
}
.hotIntroduce p{
    margin: 0;
}
.hotIntroduce .one{
    font-size: 14px;
}
.hotIntroduce .two{
    font-size: 10px;
    color: rgb(255, 218, 8);
}
.advantage{
    width: 100%;
    height: 400px;
    padding-top: 35px;
    padding-left:15px; 
    padding-right:15px; 
    border-bottom: 10px solid rgb(247, 247, 247);
    box-sizing: border-box;
    text-align: center;}
.advantage .intro{
    font-size: 0.8rem;
}
.advantage img{
    margin: 25px 0;
    width: 70%;
    height: 170px;
}
.advantage .bot{
    font-size: 0.6rem;
    width: 48px;
    height: 30px;
}
.bot p{
    margin: 0;
}
.bot .bot-two{
    color: rgb(255, 196, 0);
}
.bottomMenu{
    display: flex;
    justify-content: space-around;
}
.footer-one{
    display: flex;
    justify-content: space-around;
    padding: 15px;
    border-bottom: 10px solid rgb(247, 247, 247);
}
.footer-one .back-img{
    color: aliceblue;
    display: flex;
    flex-flow: column-reverse;
    width: 45%;
    height: 100px;
    line-height: 40px;
    background: url(../img/3国潮.png);
}
.back-img div{
    height: 30px;
    width: 100%;
    background-color: rgba(58, 58, 58, 0.5);
}
.footer-bot{
    padding: 15px;
}
.foot-two{
    margin-top: -30px;
}
.footer-bot input{
    background-color: rgb(238, 240, 241);
    padding:0 10px;
    border: 0;
    width: 95%;
    height: 40px;
}
.result{
    text-align: center;
    width: 80%;
    height: 50px;
    line-height: 50px;
    margin: 10px auto;
    background-color: rgba(255, 192, 56, 0.794);
}
.result a{
    color: aliceblue;
    text-decoration: none;
    line-break: normal;
}
.bottom-maen{
    display: flex;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    padding-top:10px;
    box-sizing: border-box; 
    width: 100%;
    height: 50px;
    background-color:  rgba(255, 192, 56);
}
.bottom-maen div{
text-align: center;
}
.iconfont{
    font-size: 20px;
}
.bottom-maen p{
    margin: 0;
    font-size: 10px;
    color: aliceblue;
}```  
目录
相关文章
QGS
|
XML 前端开发 JavaScript
手搭手Ajax经典基础案例省市联动
手搭手Ajax经典基础案例省市联动
QGS
37 1
|
4月前
|
小程序
旅游计划定制小程序网页模板源码
旅游计划定制小程序网页模板源码
39 1
|
4月前
|
前端开发
网页设计03,解析网页六大导航设计
网页设计03,解析网页六大导航设计
|
移动开发 小程序 JavaScript
微信小程序学习实录5(H5嵌入小程序、map组件、地图调起功能、腾讯百度高德导航页、返回web-view页)
微信小程序学习实录5(H5嵌入小程序、map组件、地图调起功能、腾讯百度高德导航页、返回web-view页)
540 0
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-网上地图资源获取2
前端学习笔记202305学习笔记第二十三天-网上地图资源获取2
48 0
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-网上地图资源获取1
前端学习笔记202305学习笔记第二十三天-网上地图资源获取1
38 0
|
前端开发
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网
192 0
|
前端开发
前端知识学习案例6-开发企业网站6-初始化轮播组件
前端知识学习案例6-开发企业网站6-初始化轮播组件
66 0
前端知识学习案例6-开发企业网站6-初始化轮播组件
|
小程序 定位技术
餐饮业小程序首页设计
餐饮业小程序首页设计
餐饮业小程序首页设计
|
JSON 小程序 JavaScript
微信小程序开发之城市定位
微信小程序开发之城市定位
360 0
微信小程序开发之城市定位