实训项目 ---- vue中小说首页页面的制作

小说首页页面的制作

1、先引入外部样式

2、建div的盒子

3、建script文本

4、建style样式

5、建img文件夹

 <title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.6/lib/index.css" /><script src="https://cdn.jsdelivr.net/npm/vant@2.6/lib/vant.min.js"></script>
</head>
<body><div id="app"><div><van-nav-bar title="起点中文网"/></div><div><van-swipe :autoplay="3000"><van-swipe-item v-for="(image, index) in images" :key="index"><img :src="data:image" /></van-swipe-item></van-swipe></div><div class="ranking"><div><van-cell title="排行榜" is-link url=""/></div><van-tabs type="card"><van-tab title="畅销榜"><van-grid :border="false" :column-num="3"><van-grid-item v-for="(item,index) in cxbooks" :key="index"><div><van-image v-bind:src="item.pic"/></div><div class="bname">{{item.name}}</div></van-grid-item></van-grid></van-tab><van-tab title="风云榜">风云榜</van-tab><van-tab title="签约榜">签约榜</van-tab><van-tab title="推荐榜">推荐榜</van-tab></van-tabs></div><div><van-image width="100%" height="100%" src="./img/ad1.jpg"/></div><div class="enjoy"><van-cell-group inset><van-cell title="猜你喜欢" value="根据你的阅读口味智能推荐" /></van-cell-group><van-list :finished="finished"><van-card v-for="item in enjoylist":desc="item.desc":title="item.title":thumb="item.pic"/></van-list></div><div><van-image width="100%" height="100%" src="./img/ad1.jpg"/></div><div><van-tabbar v-model="active"><van-tabbar-item icon="home-o">首页</van-tabbar-item><van-tabbar-item icon="search">分类</van-tabbar-item><van-tabbar-item icon="friends-o">排行</van-tabbar-item><van-tabbar-item icon="comment-o">书架</van-tabbar-item><van-tabbar-item icon="setting-o">我的</van-tabbar-item></van-tabbar></div></div><script>new Vue({el:'#app',data:{active:1,value: '',images: ['./img/b1.jpg','./img/b2.jpg','./img/b3.jpg','./img/b4.jpg',],cxbooks:[{id:1,pic:'./img/p/cx/1.jpg',name:'夜的命名术'},{id:2,pic:'./img/p/cx/2.jpg',name:'灵行者境'},{id:3,pic:'./img/p/cx/3.jpg',name:'深空彼岸'},{id:4,pic:'./img/p/cx/4.jpg',name:'择日飞升'},{id:5,pic:'./img/p/cx/5.jpg',name:'明克街13号'},{id:6,pic:'./img/p/cx/6.jpg',name:'不科学御兽'},{id:7,pic:'./img/p/cx/7.jpg',name:'这游戏也太真实了'},{id:8,pic:'./img/p/cx/7.jpg',name:'家父汉高祖'},],enjoylist:[{id:4,pic:'./img/p/cx/4.jpg',title:'夜的命名术',desc:'作为捕蛇者，许应一直老老实实勤恳本分，直到这一天，他捉到一条不一样的蛇……'},{id:9,pic:'./img/p/cx/9.jpg',title:'大明第一臣',desc:'元末濠州城外，朱元璋捡到了一个少年，从此洪武皇帝多了一条臂膀。抗元兵……'},{id:10,pic:'./img/p/cx/10.jpg',title:'夜的命名术',desc:'《哈利波特》是一本童话故事？摆在安东面前的，是随意释放恶咒的黑巫师……'},],loading: false,finished: false,},methods:{}})</script><style>.my-swipe .van-swipe-item {color: #fff;font-size: 20px;line-height: 150px;text-align: center;background-color: #39a9ed;}.van-swipe .van-swipe-item img{width: 100%;height: 180px;}.nav-nav-bar{background-color: #F6F7F9;}/* 两个下划线 */.van-nav-bar__title{color: #EE2737;font-size: 18px;font-family: '微软雅黑';font-weight: bolder;}.van-cell__title{color: #33373d;font-size: 18px;}.ranking .van-grid-item .bname{color: #515151;font-size: 15px;}</style>

实训项目 ---- vue中小说首页页面的制作相关推荐

实训项目日志（二）——分镜制作
目录什么是分镜分镜的作用分镜制作计划分镜展示 1.什么是分镜分镜(Storyboard)又叫故事板.是指电影.动画.电视剧.广告.音乐录像带等各种影像媒体,在实际拍摄或绘制之前,以图表的方式 ...
Java实训项目：GUI学生信息管理系统（2019）【中】
Java实训项目:GUI学生信息管理系统(2019)[中] 本篇目录四.涉及知识点 1.Java基本语法 2.Java流程控制
python实训项目-黑马程序员上海校区Python21期Django项目实训
黑马程序员上海中心月薪一万只是起点关注晚上十点,一名名Python学生正在酣畅淋漓地撸代码,手指不间断地敲击着键盘,发出机械而清脆的声音. 各个小组在经过为期4天的django项目小组开发,终于 ...
JAVA实训项目：银行网银系统管理平台（含源码）
JAVA实训项目:银行网银系统管理平台(含源码) 文章目录 JAVA实训项目:银行网银系统管理平台(含源码) 前言一.项目功能需求描述以及相关技术的应用相关技术应用二.设计过程系统流程图 1. ...
android 实训的背景,Android实训项目作业.doc
Android实训项目作业 2-1用整型数计算两个数的和2 2-7排列任意4个数的顺序,按从小到大顺序输出2 2.1编写显示下列图形的程序.2 3.1编写程序,当点击按钮命令后,页面标题及文本组件的文 ...
java实训手册_java实训项目用户手册
java实训项目用户手册 1 用户手册第 1章引言 1.1编写目的编写本手册的主要目的是为了方便使用的用户管理系统能够更加方便使用此系统,以及更快的掌握JDK,MySQL,MyEclipse使之 ...
常见的预设分栏包括_计算机应用基础_实训项目二Word综合应用
. 专业学习资料 . 实训项目二 Word 综合应用示例实训项目二 Word 综合应用实训满分 20 分 . 以日常应用为基础 , 设计一个综合运用 Word 基本操作技能解决实际问题的文档 . ...
计算机基础实训项目二 Word 综合应用,计算机应用基础-实训项目二 Word 综合应用[优质文档]...
实训项目二Word 综合应用实训满分20分. 以日常应用为基础,设计一个综合运用Word 基本操作技能解决实际问题的文档.文档内容要求包括以下基本操作和元素: 标题.正文.页眉/页脚/页码.首行缩进 ...
实训项目——多语言学习app 总结报告
文章目录实训项目--多语言学习app 总结报告 1. app 介绍 1. 运行app 2. 界面效果 2. 开发过程 1. 开发环境 2. 项目结构 3. 欢迎界面 4. 用户与学习界面 5. 语言 ...

实训项目 ---- vue中小说首页页面的制作

实训项目 ---- vue中小说首页页面的制作相关推荐

最新文章

热门文章