vue 小练习

最新推荐文章于 2023-12-30 13:47:21 发布
最新推荐文章于 2023-12-30 13:47:21 发布
阅读量382 收藏
点赞数
分类专栏： Vue 文章标签： css html html5
diaolove
本文链接：https://blog.csdn.net/qq_45047809/article/details/120382256
版权

一、用弹性盒子练习

<!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>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html {
            height: 100%;
            width: 100%;
        }

        body {
            display: flex;
            height: 100%;
            align-items: center;
            justify-content: center;
        }

        ul {
            width: 600px;
            height: 300px;
            list-style: none;
            border: 1px solid red;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: stretch;
            justify-content: space-around;
            align-content: space-evenly;
            background: #b1d8f8;

        }

        ul li {
            width: 30%;
            height: 30%;
            border: 1px solid #008080;
            list-style: none;

        }

        img {
            width: 100%;
            height: 100%;
            display: flex;
            list-style: none;

        }
    </style>

</head>

<body>
    <ul>
        <li><img src="11.jpg" alt=""></li>
        <li><img src="11.jpg" alt=""></li>
        <li><img src="11.jpg" alt=""></li>
        <li><img src="11.jpg" alt=""></li>
        <li><img src="11.jpg" alt=""></li>
        <li><img src="11.jpg" alt=""></li>

    </ul>

</body>

</html>

效果图

 

无论窗口大小改变图片不出边界。

案例二：

<IDOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>
            * {
                padding: 0;
                margin: 0;
            }

            html {
                height: 100%;
                width: 100%;
            }

            body {
                display: flex;
                height: 100%;
                align-items: center;
                justify-content: center;
            }

            ul {
                width: 560px;
                height: 400px;
                list-style: none;
                border: 1px solid red;
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
                /* justify-content:space-around;  */
                justify-content: space-evenly;

            }

            ul li {
                width: 200px;
                height: 0px;
                border: 1px solid blue;

            }

            ul li:nth-child(2) {
                width: 100px;
                height: 80px;
                display: flex;
                border: 3px solid red;
                color: red;
                text-align: center;
                /* line-height: 80px;*/
                align-items: center;
                justify-content: center;
                
                
            }
        </style>
    </head>

    <body>
        <ul>
            <li></li>
            <li>中秋节快乐</li>
            <li></li>
        </ul>

    </body>

    </html>

 利用弹性盒子做出图形

 

北街风
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue小练习 （一）
JINGinC的博客
10-01 504
看以下代码，研究并给出解答： const arr = [{label: '男', value: 0},{label: '女', value: 1}] function f(arr) { // 写代码 // reduce } const obj = f(arr) // obj ===> {0: '男', 1:'女'}
前端工程师--vue练习小项目
09-25
vue初级小项目,有网页记事本，网页天气预报，意在巩固vue基础，暂时还没涉及到脚手架，后续会逐步更新大型项目哈哈~~
axios请求,token,后端解决跨域
你还有我
04-06 2028
什么是Axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 官网 http://www.axios-js.com/zh-cn/docs/ Axios的优点 1支持发送ajax异步 2 支持在NodeJs中发送ajax请求 3 支持Promise 4 支持拦截器请求和响应 5 支持对请求和响应数据的转换 安装在服务端命令 npm install axios --save 案例:执行get请求 // 为给定 ID 的 user 创建请求 axi
vue2.0版cnode社区项目搭建及实战开发
weixin_30904593的博客
04-19 279
_________________________________________________________________________________________ 初涉vue就深深的被vue强大的功能，快速的开发能力所折服。所以就写了一个cnode社区的app来实践对vue的学习成果。也算是入坑指南吧，如果您觉得对您有帮助，就在github上给个star吧，代码拙劣，大神请忽略...
Vue专项练习
qq_44665456的博客
04-24 4403
1、以下不是vue 内置指令的是（） v-html v- on v- for v-hidden 答：选D .== v-html 指令：让标签内用 html 渲染== , v-on 指令： 绑定事件，v- for 指令： 循环，v-hidden 没有 vue 中的 隐藏是 v-if 和 v-show 2、关于 Vuex 的说法错误的是 可以使用 this.$store.state 获取 Vuex 中的存储状态 getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新金酸
[js] 小案例---标签选择练习
qq_14993591的博客
09-09 112
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
Vue面试题：最常见得20道含答案和代码示例的练习题
三拾的博客
06-21 1990
computed是计算属性，它会根据其依赖的数据属性自动计算出一个新的值，并将这个值缓存起来，只有当依赖的数据属性发生变化时，才会重新计算。v-model指令会将表单元素的值绑定到组件实例中的数据属性上，同时也会将组件实例中的数据属性的值绑定到表单元素上。在项目中，可以使用Vue.js的语法和组件，同时也可以使用Nuxt.js提供的一些API来实现服务器端渲染和静态网站生成。在配置中，需要将Vue实例转换为一个可以在服务器端运行的对象，并使用Vue SSR的API来渲染组件和模板。最后，在Vue组件中。
vue习题
qq_45179355的博客
06-03 1万+
一 单选题，每道小题1分，共9道小题，9分1. 下面选项中，可以用来创建store实例对象的是（）。A new Vuex.Store({})B new Vue({})C new Vuex({})D new Store({})2. 以下代码 {{this.$store.state.name}}var store = new Vuex.Store({ state:{name:'store'}})var vm = new Vue({...
Vue小练习--任务列表
最新发布
大道至简
12-30 1110
vue做一个任务列表小练习
vue的日常小练习
qq_46291038的博客
09-18 111
源码： <%-- Created by IntelliJ IDEA. User: TJYSB Date: 2021/9/17 Time: 16:24 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head&gt
Vue小练习文章配套代码
01-20
很久之前学Vue 留下的，删之前留个备份
Vue小练习-音乐网站
12-29
课堂作业练习，增删查改都有，缺陷是不能播放音乐.
vue小练习，vue实现简单表格布局
10-25
vue实现简单表格布局
简单vue框架练习项目
10-08
这是一个基础的vue框架练习源码，所设计的东西不是太难，适合初学者明白及看懂，由于一些原因，并没有涉及太多的样式编写，所有画面可能不是很美观，但是代码很明了
VUE项目练习大全（附github源码）
热门推荐
前端-尔嵘
07-06 2万+
vue慢慢的成为了前端最受欢迎的框架之一，在很多项目之中开发都能用得到，如今也已经发展到3.0了，可能是因为这个框架可以提高工作效率，因此受到大家的追捧，在之前的文章里面也说过，2019年，大前端学习小程序和vue是必备技能。 如果在平时的工作里，有些公司用不到这两项技能，那你也要在业余的时间里面，找一些教程和练手的vue小项目。以下是今年的一些可以练笔的项目，这些源码稍微学习其中的几个，基础能...
通过10个实例小练习，快速入门熟练 Vue3 核心新特性
全栈修炼
05-11 4392
Vue3.0 发 beta 版都有一段时间了，正式版也不远了，所以真的要学习一下 Vue3.0 的语法了。GitHub 博客地址: https://github.com/biaochen...
学习博客：【Vue】小练习
Aurinko324的博客
06-17 251
结合 ElementUI 组件库https://element.eleme.cn/#/zh-CN/component/installation创建工程安装依赖（vue-router、element-ui、sass-loader、node-sass）启动测试npm 命令解释删除多余，新建 components (功能性组件) views (视图组件)Login.vue Main.vue 新建 router 存放路由index.js 配置路由 main.js App.vue npm run d
vue项目练习大全
m0_61348045的博客
02-06 1480
vue项目大全
Vue练习题（带解析）
qq_60245590的博客
06-11 7561
在目标页面中获取 query 参数的正确方式是使用 $route.query.参数名，而不是 this.route.query.参数名。但是它并不包含父作用域中的属性。C. 通过 npx vue-cli-service helps 命令是错误的，正确的命令是 npx vue-cli-service help，用于查看可用命令的帮助信息。要访问父作用域中的属性，可以使用 Vue 提供的 props 选项来声明父组件向子组件传递的属性，然后在子组件内部使用 this.$props 来访问这些属性。
初学vue案例练习题
08-23
初学Vue的案例练习题可以从以下几个方面进行练习： 1. 组件的基本使用：创建一个Vue组件，在模板中展示一些静态文本或数据，并在组件中定义一些基本的数据和方法。 2. 数据绑定：练习使用v-model指令和数据绑定来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

北街风

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值