静态网页手机端自适应

最新推荐文章于 2024-06-20 08:18:59 发布

drunk喵咪

最新推荐文章于 2024-06-20 08:18:59 发布

阅读量1.3k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/jdrunk/article/details/108669618

版权

Vue 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

浏览器打开的网页，页面做手机端自适应以及引入vue和ant-design

html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>ssss</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>  //手机端适配
    <link href="https://cdn.jsdelivr.net/npm/ant-design-vue@1.4.10/dist/antd.min.css" rel="stylesheet" type="text/css" />   // 在html文件中引入ant-design
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>  //在html文件中引入vue
    <script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1.4.10/dist/antd.min.js"></script>
    <script src="http://momentjs.cn/downloads/moment.min.js"></script>
	<link rel="stylesheet" href="../css/howToHaveClass.css">    //引入样式
</head>
<body>
    <div
    class="table-page-btn-list special-column-edit-container" id="app"
  >
  <div class="title" :style="back">
    <span class="arrow" >
        <img src="../image/leftArrow.png">
    </span>
    </div>
    <ul class="content">
        <li class="step" v-for="(item,index) in steps" :key="index">
            <div class="steps">
                <span class="tip" v-text="item.step"></span>
            </div>
            <p class="desc" v-text="item.desc"></p>
            <div class="pic">
                <img :src="item.url">
            </div>
        </li>
    </ul>
  </div>
	<script>
		new Vue({
            el:"#app",
            data:{
                back: {
                    backgroundImage: 'url(../image/class-background.png)',
                    backgroundRepeat: 'no-repeat',
                    backgroundSize: '100% 100%'
                },
                steps: [
                    {
                        step: '第一步',
                        desc: '点击进入“最近”界面',
                        url: '../image/step-one.png'
                    },
                    {
                        step: '第二步',
                        desc: '在最近选择自己要上的课程',
                        url: '../image/step-two.png'
                    },
                    {
                        step: '第三步',
                        desc: '点击“进入教室” 开始上课',
                        url: '../image/step-three.png'
                    },
                    {
                        step: '第四步',
                        desc: '如果需要组队学习点击组队按钮邀请好友',
                        url: '../image/step-three.png'
                    }
                ]
            },
            created() {
                
            },
            methods:{
               
            }
        })
	</script>
</body>

css

.special-column-edit-container{
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1rem;
    box-sizing: border-box;
}
.title{
    width: 100%;
    height: 11.8rem;
    margin-top: 1rem;
}
.title .arrow{
    width:0.63rem ;
    height: 1.13rem;
    display: inline-block;
    margin-top: 2rem;
    margin-left:1rem ;
    position: relative;
}
.title .arrow img{
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
    
.content{
    width: 100%;
    display: flex;
    display:-moz-box;
    display:-webkit-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    flex-flow: wrap row;
    list-style: none;
    padding: 0;
}
.step{
    width: 9.6rem;
    height: 22.6rem;
    background: #fff;
    padding-right: 0.5rem;
    margin-top: 2rem;
    flex-grow:1;
}
.step .steps{
    width: 3.5rem;
    text-align: center;
    height: 0.5rem;
    border-radius: 0.25rem;
    background: rgba(255,204,82);
    font-size: 0.94rem;
    color: #000;
    position: relative;
    top: 1rem;
}
.step .steps .tip{
    display: inline-block;
    position: relative;
    bottom: 0.8rem;
}
            
        
.desc{
    margin-top: 1.5rem;
    width: 100%;
    height: 4.5rem;
    font-size: 0.75rem;
    color: rgba(102, 102, 102, 1);
}

.pic{
    width: 100%;
    height: 16rem;
    position: relative;
    margin-top: 0.5rem;
    
}
.pic img{
    max-width: 100%;
    max-height: 100%;
}

drunk喵咪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
静态网页手机端自适应

浏览器打开的网页，页面做手机端自适应以及引入vue和ant-designhtml<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ssss</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,m
复制链接

扫一扫