html#2 登陆界面_登陆界面 hui-CSDN博客

本文链接：https://blog.csdn.net/weixin_49191241/article/details/126669883

2022.9.2 今天写了一个小登录界面，然后发现需要通过vue来实现单页面操作

CSS

·格式化html元素

p ,li{
  color: green;
}
这种方法会让全局的p和li都应用这个css

.main{
    color = "green";  
}
这种方法需要 class = "main" 才能应用

li.main{
    color = "green";
}
这种方法给每个选中main类的li应用

li em {
  color: rebeccapurple;
}
这种方法给li的em子类应用

·改变元素默认行为(例如把列表前面的点去掉)

li {
  list-style-type: none;  可以上网查list-style-type的取值，有很多
}

·根据状态改变行为

a:link {
  color: pink;
}
链接被访问过颜色变为pink
a:visited {
  color: green;
}
反之变为绿色
a:hover {
  text-decoration: none;
}
改变鼠标悬停的下划线为none

·内部应用css样式(不推荐，不如建一个css，这样不好维护)

一些css属性

border: 用于设定各种边界样式

border-width 属性可以设置盒子模型的边框宽度。最多可以有四个值，分别对应上右下左(按顺时针)

border-style 用来设定元素所有边框的样式。

border-color 用来设定border颜色

border要定义solid属性才能让color和width等生效

border: solid rebeccapurple 20px;

font-size 字体大小

width 属性用于设置元素的宽度。单位可以是px，em，百分数等等

height 是高度 top是据顶层的距离

padding 控制元素所有四条边的内边距区域。(border是内边距，这个是外边距)

position 属性用于指定一个元素在文档中的定位方式。要定位的话要给盒子加上position元素

absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。
static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit
规定应该从父元素继承 position 属性的值。
static默认没定位

background 用于一次性集中定义各种背景属性，包括 color, image, origin 与 size, repeat 方式等等。

.box {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}
标准盒模型，有长宽高和border(边界)，padding(盒子空白的地方)

使用CSS居中界面

<div> </div> div是一个空标签里面可以有class等等...

<body>
	<div class="main">
		<h1>MAIN</h1>
	</div>
</body>

方法一

绝对定位，设置margin:auto;并设置top、left、right、bottom的值相等即可，不一定要都是0。

.main{
	text-align: center; /*让div内部文字居中*/
	background-color: #fff;
	border-radius: 20px;
	width: 300px;
	height: 350px;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

方法二

<center>标签 <p><center>123</center></p> 123相对p居中，但是已经过时

代替方法 <p style="text-align:center;">123</p> 同上

获取Input里的内容

var bt=document.getElementById("这里要写input标签的id")
var val = bt.value  获取value

javascript跳转页面
// 直接跳转
window.location.href='index.html';
// 定时跳转
setTimeout("javascript:location.href='index.html'", 5000);

Vue3.js

vue用来创建单页面html，适用于登陆之后在同一个界面进行原地修改

创建vue vue create name

打开服务器先cd进目录，再 npm run serve

Vue.createApp(HelloVueApp).mount('#hello-vue') 给id为hello-vue的元素添加HelloVueApp

使用v-html来创建或修改html内容

·HTML 属性中的值应使用 v-bind 指令。例如<div v-bind:id="dynamicId"></div>

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

<div id="example1" class="demo">
    <p>使用双大括号的文本插值: {{ rawHtml }}</p>
    <p>使用 v-html 指令: <span v-html="rawHtml"></span></p>
</div>
 
<script>
const RenderHtmlApp = {
  data() {
    return {
      rawHtml: '<span style="color: red">这里会显示红色！</span>'
    }
  }
}
 
Vue.createApp(RenderHtmlApp).mount('#example1')
</script>

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定,也就是给input输入值之后也可以改变p里面的值

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
 
<script>
const app = {
  data() {
    return {
      message: 'Runoob!'
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>
这里input输入的值只要改变，p就会改变

·v-on 指令，它用于监听 DOM 事件：

<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>

<!-- 缩写 -->
<a @click="doSomething"> ... </a>

·v-show 指令来根据条件展示元素：

<h1 v-show="ok">Hello!</h1> 这里"ok"是一个bool值，可以通过如下方式更新ok的取值，为ture就展示

<script>
const app = {
  data() {
    return {
      ok: true 
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>