html、css、vue基础

Html

块标签：div、p、h1-h6、ul、li、ol、li、dl、dt、dd、table（表格标签）、form（表单标签）、nav（导航标签）、header（头部）、footer（底部）、main、article（文章）

行标签：span、strong、b、em、i、del、s、ins、u、a、img、input、select（下拉选择）、textarea（多行文本标签）行内块标签

行标签和行内块标签换行写会有空隙，不换行或者浮动消除空隙

audio、video

表单

<form action="">

       

    </form>

       Form定义表单的大盒子

       Action=“提交数据的网址”

<input type="text" placeholder="输入您想查找的内容">

    文本框里的内容（占位符）

    输入框默认有border，选中的时候有一个轮廓outline，去掉outline：none；

<input type="password" placeholder="。。。 ">

    密码框

<input type="radio" name="sex" >女

<input type="radio" name="sex" checked>男

       单选框，name一样只能选中一个，name不一样可以全选，

       添加checked默认选中哪一个

<input type="checkbox" checked>a

<input type="checkbox">b

<input type="checkbox">c

    多选框

       添加checked默认选中哪一个

<select >

          <option value="">北京</option>

          <option value="">上海</option>

          <option value="" selected>广州</option>

          <option value="">深圳</option>

</select>

    Select下拉选择框，option选项（可以有多个）

    给option添加seleted就默认选中了

<textarea name="" id="" cols="30" rows="10"></textarea>

    Cols列  rows行

<input type="button" value="普通按钮">

<input type="reset" value="重置按钮">

<input type="submit" value="提交按钮">

表格

<table>

            <tr>

                <th></th>

                <th></th>

                <th></th>

            </tr>

            <tr>

                <td></td>

                <td></td>

                <td></td>

            </tr>

            <tr>

                <td></td>

                <td></td>

                <td></td>

            </tr>

</table>

    Tr定义行

    Td定义列

    Th定义表头  在tr中定义

    Caption 表格标题

    Colspan 合并列

    Rowspan 合并行

<a href="..." target="_blank"></a>

target="_blank"新打开一个窗口

target="_self"本窗口打开

侧边栏

版心

       电脑端1200+-20px   手机750px

Html中引入html

Iframe

Html页面中引入地图

Html中引入html让滚动条消失scrolling=“no”

Css

Css引入方式：

1. 行内引入
2. 内部引入
3. 外部引入
4. 导入引入

在正在使用的样式中导入其他样式

文本、文本、英文单词、字体

       font-size: 50px;

    /* //字体大小 */

    font-family: "..";

    /* //字体类别 */

    font-style: italic;

    /* //italic倾斜    normal正常 */

    font-weight: bold;

    /* //字体加粗     normal正常 */

    text-align: center;

    /* //水平居中   right右对齐     justify两端对齐（文字达到右端才两端对齐）    left左对齐 */

    text-decoration: none;

    /* //无修饰线  underline文本修饰下划线    line-through删除线    overline上划线 */

    text-transform: capitalize;

    /* //单词首字母大写    uppercase转换为大写    lowercase转换为小写 */

    text-indent: 2em;

    /* //文本缩进2文字  em：css单位倍数关系  还可以是32px */

      line-height: 30px;

      /* //行高：可以是不带单位倍数1.5，可以带单位30px  可以用于盒子内单行文本垂直居中 */

字母变大写

    Text-transform:uppercase;

自定义字体

       @font-face {

    font-family: "YouSheBiaoTiHei";//字体名称

src: url("../font/YouSheBiaoTiHei.ttf");//字体路径，在font文件中存放字体文件，vue的地址加@

}

       在style中写

引用字体图标

       1.下载所需要的字体，将安装包中的内容放到font文件夹中

2.在头部（head）使用link标签引用

3.body中写语句

背景图片、背景颜色

background-color: #001b2d;背景颜色

background: #001b2d; 简写

background-color:rgba(red, green, blue, alpha); 背景颜色透明度

background: #001b2d22; 背景颜色透明度

background-image:url(@/assets/images/1.png);背景图片（vue中地址要使用@）

background-repeat: no-repeat;

背景图片不重复

background-position: center 0;

    背景图片 水平居中位置

background-size: 100% 100%;

    设置背景图片的大小，原比例显示（x，y）

    盒子大于图片，让一张图片铺满盒子，会失去原比例

    盒子小于于图片，会失去原比例， 让图片铺满盒子

background-size: px px;

    设置背景图片的大小，

    盒子大于图片，让多张图片铺满盒子，会失去原比例

    盒子小于图片，是从左上开始显示

盒子大小和background-position一起使用是截取图片

background-image: linear-gradient(to right, #0a78c4, #085284);

       背景颜色渐变  从第一个到 第二个， to right可以换成度数，也可以写多个颜色

background-image: radial-gradient( white,#ff4f55);

       径向渐变（内，外），也可以写多个颜色

盒子模型

margin-left:auto;

margin-right:auto;

    让有宽度的盒子水平居中

边框透明颜色（画三角形是让其中三个框线为透明色）

    border-bottom: 3px solid transparent;

  solid实线  dashed虚线   dotted点线  double双实线

border-radius: 50%;

    矩形变圆，大于50%变圆，radius弧度可以是百分比也可以是像素px

border-top-right-radius:30px;  右上弧度（其他三个角同理）

矩形盒子变按钮盒子

border-radius: 15px;

border-radius: 15px 15px 15px 15px;

上下外边距叠加规则

1. 如果都为正数，距离取值最大的
2. 如果一正一负，距离取和
3. 如果同时为负数，距离取绝对值最大的

margin-left: -334px; 相对最近的盒子向左移动-334个像素（right、top、

bottom同理）

margin-left  盒子本身移动

padding-left 盒子里的内容移动，盒子变大

margin和padding一个值代表上下左右

    两个值上下和左右

    三个值上、左右、下

    四个值上、右、下、左

清除浮动

.clear{

    clear: both

}

定位

1. 相对定位和绝对定位一般不单独使用
2. 添加定位的元素需要使用left/top/right/bottom来改变位置(绝对和相对定位)

相对定位绝对定位如何配合使用

1. 父标签添加相对定位，子标签添加固定定位

相对定位：相对自身位置的定位，对其他标签没影响

position: relative; 相对定位，正常位置，网页页面默认是父盒子默认使用相对定

位

绝对定位：脱离了原来的文档（脱离文档流）

position: absolute;绝对定位，相当于一张贴纸，浮在盒子父盒子上

使一个标签铺满整个页面

.logo{

    width: 100%;

    height: 100%;

    position: absolute;

    bottom: 0;

    top: 0;

}

高度默认为0，添加绝对定位，距离底和顶都为0,

left: 50%;对于绝对定位（position: absolute）的父盒子向移动50%，没有绝对

定位的父盒子相对最近的父盒子向左移动50%（right、top、bottom同理）

去除页面默认边距

*{

            margin: 0;

            padding: 0;

        }

       消除网页页面的内外边距

       *是通配符，可以匹配所有标签，一般情况下用来去除浏览器所有默认的边距

兄弟关系的定位，可以使用z-index来改变叠加顺序，谁大谁在上

固定定位

粘性定位

行标签直接设置宽度和高度无效，需要设置行标签的宽度和高度

1. 可以设置行标签浮动
2. 给行标签设置绝对定位
3. 可以改变显示模式（将行标签转换成具有块标签的特点）

显示模式

Display:inline-block；显示成行内块（左右有缝隙4px，设置浮动、定位来消除）

Display:inline；显示成行

Display: block；显示成块

Display:none ;不显示，隐藏

弹性盒子

       1．默认主轴是水平方向，侧轴是垂直方向

       2.改变在主轴的排列形式

              Justify-content:flex-start;沿主轴开始的方向

              Justify-content:flex-end;沿主轴结束的方向

              justify-content: center;沿主轴中心点对齐，居中排列

              Justify-content:space-between;两端对齐，中间平均分配

              Justify-content:space-around;两端的距离是中间的1/2

3.侧轴

Align-items: flex-start;沿着侧轴开始的方向

Align-items:flex-end;沿侧轴结束的方向

align-items: center;沿侧轴中心点对齐

1. 换行显示

Flex-wrap:wrap;

1. 改变主轴方向

Flex-direction:column;

使用动画

1. 定义动画

@keyframes move{//动画名

from{

                top: 0px;

}

       to{

                top: -500px;

       }

}

       可以是from  to   也可以是%中间有多段

1. 使用动画

在使用动画的标签中

animation-play-state: paused;

暂停

animation-timing-function: steps(1);

    步长

animation-delay: 3s;动画延迟3秒

变换

transition: 0.5s; 过渡时间，持续0.5秒

transform: skewX(57deg);

    沿x轴往右倾斜57度（不变回来）

 transform: rotate(45deg);

    旋转45度（变回来）

transform: scale(1.2); 缩放，放大1.2倍

transform: translate(5px 10px);位移，第一个数是水平方向，第二是垂直方向

transform: translate(5px 10px) rotate(15deg) scale(1.5);

    位移、旋转、缩放，中间空格

向上移动

间距

水平居中（沿中心居中）弹性盒子

水平居中

text-align: center;文字图片都居中

垂直居中（盒子只有一个盒子）

align-items: center;

垂直居中（盒子中有多个盒子）（弹性盒子、换轴、水平居中）

box-shadow: 5px 5px 10px #1073c5, -5px -5px 10px #1073c5;

   盒子阴影              右下                                   左上

第一个是左、右边（x），正数是右边，负数是左边；第二个是上、下边（y），正数是下边，负数是上边，第三个是模糊半径，最后是颜色

box-shadow: 5px 5px 10px #1073c5 inset, -5px -5px 10px #1073c5 inset;

              左上                            右下

overflow: hidden;

    超出部分隐藏

overflow-y: auto;

    在y轴方向超出有滚动条，不超出没有滚筒条

overflow-y: scroll;

    出现滚动条

width: calc(33% - 5px);

    宽度33%-5px

Li标签快捷方式

    ul.list>li*5>a{$}+span{文字}

两个标签样式一样，逗号隔开（公共部分写一起，单独部分分开写）

多张广告图

广告图重合用z-index或者用display：none  block

改变第二个相同标签背景图片

.head::before{

    content: "";//写内容

    width: 100%;//写css格式

    height: 2px;

}

在head标签前添加东西（after是之后添加东西）

li:nth-child(n){}

    第n个li标签

li:last-child(n){}

    最后一个

li:first-child(n){}

    第一个

隔行变色

li:nth-child(2n){

    color:red;  

}

li:nth-child(2n+1){

    color:green;

}

引用不同文件下的地址

    需要用../（先跳出，再进入）

li{

    list-style: none;

} 

让圆点消失

a{

    text-decoration: none;

}

    消除a标签下划线

&lt;

&gt;

大于号与小于号

&copy; 版权符号

&nbsp；空格（不建议使用）

Vue

安装vuecli（vue脚手架）

npm install -g @vue/cil

创建项目：vue create my-project(my-project项目名)

项目目录结构

配置项目自动启动、修改默认端口号、修改主机名

.vue文件中有<template>、<script>、<style>。<template>定义html的注意事项：必须有一个根标签，包裹着其他所有标签

<div class=”all”>

        Class为all的盒子必须包裹着其他所有的html标签结构

<div>

在componets文件夹中定义对App.vue补充的部分，然后在App.vue中引入、导出、引用

定义数据和使用

定义集合数据

Data(){

        Return{

               Username:”返回内容”，

               Lists:[{

                      Id:1,

                      Title:”小谷”

               }，{

                     Id:2,

                     Title:”小好”

}]

}

}

使用集合数据

<ul>

<li v-for="list in lists" v-bind:key="list.id">

        {{list.title}}

</li>

</ul>

图片数据定义

data(){

       return{

              msg:"项目头部数据",

              lists:[{

                     id:1,

                     username:"好谷",

                     img:"图片路径"

              }]

       }

}

图片数据使用

<ul>

       <li v-for="list in lists" v-bind:key="list.id">

              <img v-bind:src="list.img" alt="" style="width: 200px;">

              <h2>{{list.username}}</h2>

       </li>

</ul>

Ui框架elementui的使用

安装： npm install element-ui -S

使用：在main.js中写入

import Vue from 'vue';

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';  //引入

Vue.use(ElementUI);//使用

使用表格table组件（多一步需要定义集合数据）

路由的使用

安装: npm install vue-router@3 -S

使用：

1. 在pages文件夹下新建HomePage.vue和LoginPage.vue这两个页面
2. 配置路由（在src中新建一个文件夹router，在router文件夹中新建一个index.js文件）

//引入vue和vue-router模块

import Vue from "vue";

import VueRouter from :"vue-router";

//使用

Vue.use(VueRouter)

//引入组件

import HomePage from "@地址";

import LoginPage from "@地址";

定义一个router集合

const routes =[

{

        path:"/home",

        component:HomePage,

},

{

        path:"/home",

        component:HomePage,

},

];

//创建一个路由对象 new

const router = new VueRouter({

routes,//(简写)相当于 routes:routes

});

//导出router对象

export default router;

在main.js引入、挂载

       //引入路由文件，需要在new Vue中挂载

import router from "@indes.js路径";

new Vue({

   router,//router:router

   render:(h) => h(App),

}).$mount('#app');

在App.vue中添加路由占位符

       <router-link to="/home">首页</router-link>

<router-view></router-view>