app下载页面html模板_Html/Css/Vue - 基本练习 - 图片居中，Vue的html页面基本练习模板...

最新推荐文章于 2024-01-31 02:59:00 发布

weixin_39844515

最新推荐文章于 2024-01-31 02:59:00 发布

阅读量140

点赞数

文章标签： app下载页面html模板 button垂直居中 button居中 css 图片居中 css图片居中 css按钮居中

就是简单做个记录，没啥暖用，哈哈。。。

利用菜鸟教程在线编辑器搞搞，练习练习

HTML CSS | 菜鸟教程

菜鸟教程在线编辑器

HTML 教程 w3school也可以，不过我喜欢菜鸟的网页风格，哈哈.....

重点就是Css样式编写了了，这是前端呈现的效果的重点！

小萌新基本过了一遍，因为不是主攻，主要是近期给同学搞个广告宣传页面，所以才来临时抱佛脚的！ CSS 布局 - 水平 & 垂直对齐 - Css相关的基本在线编辑器试了下官方案例...

比如这种效果：

案例也有对齐的很多写法，基本上照着琢磨一天两天应该还好了，小萌新代码如下：

记得粘贴到菜鸟教程在线编辑器

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.box{
	position: relative;
	width: 50%;
	height: 160px;
	background:#F00;
}
.box img {
	position:absolute;
	top: 50%;
	transform: translate(50%, -50%);
}
</style>
</head>
<body>

<h2>图片居中对齐</h2>
<p>要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中：</p>

<div class="box">
	<img src="//static.runoob.com/images/mix/paris.jpg" alt="Paris" style="width:50%; height:50%">
</div>
</body>
</html>

另外，我也利用在线编辑器练习Vue，如下：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<!DOCTYPE html>
<html lang="zh-CN">
<title>这是一个网页</title>

<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    {{ message }}
    <button v-on:click="testb">添加呀</button>
    <ol>
      <!-- 创建一个 todo-item 组件的实例 -->
      <todo-item 
        v-for="item in groceryList" 
        v-bind:todo="item" 
        v-bind:key="item.id">
      </todo-item>
    </ol>
  </div>
  <!-- 按钮需要在id包裹之类才能生效；否则相关属性方法无法调用！ -->
  <div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">逆转消息</button>
  </div>
</body>

</html>

<script>
  // 定义名为 todo-item 的新组件
  Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
  })

  // message练习   toto-item列表数据
  var app = new Vue({
    el: '#app',
    data: {
      message: 'test',
      groceryList: [
        { id: 0, text: '蔬菜' },
        { id: 1, text: '奶酪' },
        { id: 2, text: '随便其它什么人吃的东西' }
      ]
    },
    methods: {
      // 通过对象创建并获取数据更新到message
      testb: function () {
        this.message = new Test('Hello Vussse!').getName();
      }
    }
  })

  var app5 = new Vue({
    el: '#app-5',
    data: {
      message: 'Hello Vue.js!'
    },
    methods: {
      // 字符串逆转
      reverseMessage: function () {
        // [ "!", "s", "j", ".", "e", "u", "V", " ", "o", "l", "l", "e", "H" ] join
        // http://www.w3school.com.cn/jsref/jsref_join.asp
        this.message = this.message.split('').reverse().join('')
      }
    }
  })

  // 类呀
  class Test {
    constructor(a) {
      this.a = a;
    }
    getName() {
      return this.a;
    }
  }
</script>