rem练手 - 蓝色旅游网

其他 2019-04-03 13:10:56 阅读次数: 0

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>蓝色手机WAP旅游网站模板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=1.0">
    <link rel="stylesheet" href="css/demo_style.css" type="text/css">
    <link rel="stylesheet" href="css/demo_index.css" type="text/css">
    <script type="js/demo_adaptive.js"></script>
</head>
<body>
    <header>
        <i class="logo"></i>
        <a href="#"></a>
        <div class="sch">
            <p><img src="images/icon/sch.png" alt="">搜索目的地、帖子、景点</p>
        </div>
    </header>

    <div id="_contain">
        <div class="banner">
            <img src="images/index/banner.png" alt="">
            <div class="logo-dbs">
                <div class="dbs-img">
                    <img src="images/icon/logo.png" alt="">
                </div>
                <p>全球低价游，满足你世界梦!</p>
            </div>
        </div>

        <div class="menu">
            <div class="nav">
                <img src="images/menu/nav_1.png" alt="">
                <p>看攻略</p>
            </div>
            <div class="nav">
                <img src="images/menu/nav_2.png" alt="">
                <p>抢折扣</p>
            </div>
            <div class="nav">
                <img src="images/menu//nav_3.png" alt="">
                <p>看酒店</p>
            </div>
            <div class="nav">
                <img src="images/menu/nav_4.png" alt="">
                <p>找附近</p>
            </div>
        </div>

        <div class="name">
            <p>旅游推荐</p>
        </div>

        <div class="contain">
            <div class="ad">
                <img src="images/index/rcd_1.png" alt="">
            </div>
            <div class="ad-left">
                <img src="images/scenics/scenic_1.png" alt="">
            </div>
            <div class="ad-right">
                <img src="images/scenics/scenic_2.png" alt="">
            </div>
        </div>

        <div class="name">
            <p>折扣游</p>
        </div>

        <div class="favorable">
            <div class="fb">
                <div class="fb-lt">
                    <img src="images/scenics/scenic_3.png" alt="">
                    <p class="fb-name">塞班岛5-6天(欢乐自由行)</p>
                    <p class="price"> 
                        <span class="discount">4.7折</span>
                        <span class="num"><big>5699</big>元起</span>
                    </p>
                </div>
            </div>
    
            <div class="fb">
                <div class="fb-lt">
                    <img src="images/scenics//scenic_4.png" alt="">
                    <p class="fb-name">夏威夷7天6晚(三天跟团三天自由行)</p>
                    <p class="price">
                        <span class="discount">8.7折</span>
                        <span class="num"><big>11799</big>元起</span>
                    </p>
                </div>
            </div>
    
            <div class="fb">
                <div class="fb-lt">
                    <img src="images/scenics/scenic_5.png" alt="">
                    <p class="fb-name">体验全球最长的过山车15天超爽旅游</p>
                    <p class="price">
                        <span class="discount">6.2折</span>
                        <span class="num"><big>21099</big>元起</span>
                    </p>
                </div>
            </div>
    
            <div class="fb">
                <div class="fb-lt">
                    <img src="images/scenics//scenic_6.png" alt="">
                    <p class="fb-name">美国纽约曼哈顿5天游(体验不一样的风情)</p>
                    <p class="price">
                        <span class="discount">2.8折</span>
                        <span class="num"><big>2889</big>元起</span>
                    </p>
                </div>
            </div>


        </div>

        <div class="more">
            <p>查看更多<img src="images/icon/arr-right.png" alt=""></p>
        </div>

    </div>

    <footer>
        <div class="foot act">
            <img src="images/foot/ft_1_1.png" alt="">
            <p>推荐</p>
        </div>
        <div class="foot">
            <img src="images/foot/ft_2.png" alt="">
            <p>目的地</p>
        </div>
        <div class="foot">
            <img src="images/foot/ft_3.png" alt="">
            <p>帖子</p>
        </div>
        <a href="person/demo_person.html">
            <div class="foot">
                <img src="images/foot/ft_4.png" alt="">
                <p>我的</p>
            </div>
        </a>
    </footer>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        /* 查看更多 */
        $(".more").click(function(){
            for(i = 0;i < 4;i++){
                $(".favorable").append(`
                    <div class="fb">
                        <div class="fb-lt">
                            <img src="images/scenics/scenic_5.png" alt="" />
                            <p class="fb-name">体验全球最长的过山车15天超爽旅游</p>
                            <p class="price">
                                <span class="discount">2.8折</span>
                                <span class="num"><big>2889</big>元起</span>
                            </p>
                        </div>
                    </div>
                `)
            }
        })
    </script>

</body>
</html>

demo_style.css

/* CSS Document */
body, div, ol, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, button {
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: rgba(255,255,255,0);
}
html {
	width: 100%;
	font-family: 'Heiti SC', 'Microsoft YaHei';
	font-size: 100px;
	outline: 0;
	-webkit-text-size-adjust: none;
}
body {
	width: 100%;
	margin: 0;
	-webkit-user-select: none;
	position: relative;
	background-color: #fff;
}
a:hover, a:link, a:visited, a {
	color: inherit;
	text-decoration: none;
}
ul, li {
	list-style: none
}
i {
	font-style: normal
}
header {
	width: 12.42rem;
	height: 1.35rem;
	background-color: #7ecef4;
}
header i.logo {
	float: left;
	display: block;
	width: 0.85rem;
	height: 0.8rem;
	margin: 0.24rem 0 0.24rem 0.18rem;
	background: url(../images/icon/logo.png) no-repeat;
	background-size: 0.85rem 0.8rem;
}
header .sch {
	float: left;
	width: 11rem;
	height: 0.8rem;
	margin: 0.24rem 0 0.24rem 0.18rem;
	border-radius: 0.1rem;
	background-color: #68b2d5;
	text-align: center;
}
header .sch p {
	line-height: 0.8rem;
	color: #fff;
	font-size: 0.4rem;
}
header .sch p img {
	width: 0.45rem;
	height: 0.44rem;
	vertical-align: middle;
}
footer{
    background-color: #f2f2f2;
    width: 12.42rem;
    height: 1.58rem;
    position: fixed;
    bottom: 0;
    overflow: hidden;
}
footer .foot{
    float: left;
    width: 1rem;
    height: 1.2rem;
    margin: 0.15rem 0 0.2rem 1.68rem;
    text-align: center;
    overflow: hidden;
    color: #7ecef4;
}
footer .foot img{
    width: 0.7rem;
    height: 0.7rem;
    display: block;
    margin: 0 auto;
}
footer .foot p{
    margin-top: 0.15rem;
    font-size: 0.3rem;
}
footer .act{
    color: #9c9c9c;
}
.logo-dbs{
    height: 0.9rem;
    overflow: hidden;
}
.logo-dbs .dbs-img{
    float: left;
    width: 1rem;
    height: 0.8rem;
    border-right: 1px solid #fff;
    text-align: center;
}
.logo-dbs .dbs-img img{
    width: 0.85rem;
    height: 0.8rem;
    display: block;
}
.logo-dbs p{
    float: left;
    font-size: 0.35rem;
    line-height: 0.8rem;
    margin-left: 0.15rem;
    color: #fff;
}
.jg{
    background:red;
    width: 12.42rem;
    height: 1.58rem;
}
|

demo_index.css

/* CSS Document */
#_contain {
	margin-bottom: 2rem;
}
.logo-dbs {
	position: absolute;
	bottom: 1rem;
	left: 3rem;
}
.banner {
	position: relative;
	width: 12.42rem;
	height: 6.6rem;
	overflow: hidden;
}
.banner img {
	width: 12.42rem;
	height: 6.6rem;
}
.menu{
    width: 12.42rem;
    height: 3.03rem;
    border-bottom:5px solid #d9d9d9;
    background-color: #e0e0e0;
}
.menu .nav{
    float: left;
    width: 1.42rem;
    height: 2.2rem;
    margin: 0.43rem 0.51rem 0 1.04rem;
    overflow: hidden;
    font-size: 0.4rem;
    text-align: center;
}
.menu .nav img{
    width: 1.42rem;
    height: 1.42rem;
}
.menu .nav p{
    font-size: 0.4rem;
}
.name{
    width: 12.42rem;
    height: 1.05rem;
    font-size: 0.38rem;
    line-height: 1.3rem;
    border-bottom: 1px solid #e1e1e1;
}
.contain{
    width: 12.14rem;
    height: 100%;
    margin: 0 0.14rem;
    overflow: hidden;
}
.ad{
    width: 12.14rem;
    height: 5rem;
    margin-top: 0.3rem;
}
.ad img{
    width: 12.14rem;
    height: 5rem;
}
.ad-left,.ad-right{
    width: 5.92rem;
    height: 3.8rem;
    float: left;
    margin-top: 0.3rem;
    overflow: hidden;
}
.ad-left{
    margin-right: 0.3rem;
}
.ad-left img,.ad-right img{
    width: 5.92rem;
    height: 3.8rem;
}
.favorable{
    width: 12.42rem;
    height: 100%;
    overflow: hidden;
}
.fb:nth-child(odd){
    float: left;
    width:6.18rem;
    height: 6.7rem;
    border-right: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
    overflow: hidden;
}
.fb:nth-child(even){
    float: left;
    width:6.18rem;
    height: 6.7rem;
    border-bottom: 1px solid #e1e1e1;
    overflow: hidden;
}
.cbr{
    border-right: none;
}
.fb-lt{
    width: 5.9rem;
    height:6.5rem;
    margin: 0.3rem 0.14rem 0 0.14rem;
}
.fb-lt img{
    width: 5.9rem;
    height: 3.8rem;
    display: block;
}
.fb-lt p{}
.fb-lt p.fb-name{
    margin-top: 0.3rem;
    font-size: 0.48rem;
}
.fb-lt p.price{
    margin-top: 0.2rem;
    font-size: 0.3rem;
}
.fb-lt p span{
    font-size: 0.3rem;
    color: #d7d7d7;
}
.fb-lt p span.discount{
    float: left;
}
.fb-lt p span.num{
    float: right;
    margin-right: 0.5rem;
}
.fb-lt p span big{
    font-size: 0.5rem;
    color: #ff3500;
}
.more{
    width: 12.42rem;
    height: 1.37rem;
    line-height: 1.37rem;
    text-align: center;
    cursor: pointer;
}
.more p{
    font-size: 0.4rem;
    color: #7ecef4;
}
.more p img{
    width: 0.2rem;
    height: 0.33rem;
    margin-left: 0.2rem;
}

demo_adaptive.js

/* rem布局代码 */
(function (doc, win) {
    var docEl = doc.documentElement
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
    recalc = function () { 
        var clientWidth = docEl.clientWidth
        if (!clientWidth) return
        docEl.style.fontSize = 100 * (clientWidth / 1242) + 'px'
    }
    if (!doc.addEventListener) return
    win.addEventListener(resizeEvt, recalc, false)
    doc.addEventListener('DOMContentLoaded',recalc,false)
 })(document,window)

猜你喜欢

转载自blog.csdn.net/zjsfdx/article/details/88636547
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022