前端学习记录(3)

当前位置:

首页 > 网站开发 > css >

前端学习记录(3)

input:h

Copy

<input type="hidden" name="" />

Copy

input:text, input:t

Copy

<input type="text" name="" id="" />

Copy

input:search

Copy

<input type="search" name="" id="" />

Copy

input:email

Copy

<input type="email" name="" id="" />

Copy

html:xml

Copy

<html xmlns="http://www.w3.org/1999/xhtml"></html>

CSS属性

宽高#

Copy

height: 310px; width: 65%;

动画简写属性#

animation 动画名称持续时间运动曲线何时开始播放次数是否反方向动画开始或结束状态

Copy

animation: name duration timing-function delay iteration-count direction fill-mode;

背景 background#

Copy

/* 背景图片 */ background: no-repeat center/100% url("../img/index.png"); /* 背景颜色 */ background-color: #ffffff;

浮动 float#

Copy

float: left;

字体 font#

Copy

/* 字体颜色 */ color: #888888; /* 字体粗细 */ font-weight: 400; /* 字体大小 */ font-size: 14px; /* 文字居中 */ text-align: center; /* 字体行内居中 */ line-height: 45px;

盒子边距 margin | padding#

Copy

/* 外边距 */ margin: 60px 0 0 -40px; /* 居中显示 */ margin: 0 auto; /* 向下10px */ margin-bottom: 10px; /* 外边距 */ padding: 15px 0 10px 12px;

透明#

Copy

opacity: 0.9;

边框 border#

Copy

/* 边框宽度1px 样式 颜色 */ border: 1px solid #edeef0; /* 边框边角弧度 */ border-radius: 5px; /* 边框下划线 */ border-bottom: 1px solid #edeef0; /* 样式 1px */ border-style: ridge; border-width: 1px;

2D动画#

动画效果#

Copy

/* 动画效果 */ transition: all 5s;

动画触发#

Copy

:hover { /* 放大2倍 */ /* transform: scale(2, 2); */ /* 旋转 */ transform: rotate(720deg); /* 上移 */ transform: translateY(-3px); }

3D动画#

3D转换 translate3d#

Copy

transform: translate3d(0,100px,100px);

透视 perspective#

Copy

/* 透视写在被观察元素的父盒子上面 */ perspective: 500px;

旋转 rotate3d#

Copy

transform: rotateX(45deg); transform: rotateY(); transform: rotateZ(); /* 自定义 */ transform: rotate3d(x,y,z,deg);

3d呈现 transform-style#

Copy

/* 让子元素保持3d立体空间环境 */ transform-style: preserve-3d;

响应式布局#

开发实现#

媒体查询

百分比布局

rem布局

视口单位布局(vw/vh)

设计步骤#

设置meta标签

媒体查询设置样式

设置多种视图宽度

css 样式简写#

4-2. 常用样式简写#

pos

Copy

position:relative;

Copy

top:;

pos:s

Copy

position:static;

pos:a

Copy

position:absolute;

pos:r

Copy

position:relative;

pos:f

Copy

position:fixed;

Copy

top:;

t:a

Copy

right:auto;

Bootstrap

container-fluid#

.container-fluid 则支持全屏的流式布局，如下使用：

Copy

<div class="container-fluid"> ... </div>

自定义适应宽度

Copy

<style type="text/css"> /* 超小屏幕 */ @media (max-width:575px) { .container-fluid{ width: 100%; background-color: #002752; } } /* 小屏幕 */ @media (min-width:576px) and (max-width:767px) { .container-fluid{ background-color: #ff5500; width: 540px; } } /* 中屏幕 */ @media (min-width:768px) and (max-width:991px) { .container-fluid{ background-color: #5555ff; width: 720px; } } /* 大屏幕 */ @media (min-width:992px) and (max-width:1199px) { .container-fluid{ background-color: #55ff00; width: 960px; } } /* 中超大屏幕 */ @media (min-width:1200px) { .container-fluid{ background-color: #aa5500; width: 1140px; } } </style>

响应式 meta 标签#

Copy

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

响应式外部容器#

它允许在指定的屏幕下定义 100%宽

如.container-sm 则只在sm屏幕下显示100%宽,其它断点包括.container-md、 .container-lg、 .containerxl

Copy

<div class="container-sm">100% wide until small breakpoint</div> <div class="container-md">100% wide until medium breakpoint</div> <div class="container-lg">100% wide until large breakpoint</div> <div class="container-xl">100% wide until extra large breakpoint</div>

分割线#

Copy

<div class="dropdown-divider"></div>

基于FlexBox布局#

一个简明的Bootstrap 4框架（只区分pc与手机并基于FlexBox布局）：

Copy

<div class="container"> <div class="row"> <div class="col-sm"> </div> </div> </div>

Emment语法：

Copy

div.container>div.row>div.col-sm

全栅格定义框架#

Copy

<div class="container"> <div class="row"> <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12"> </div> <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12"> </div> </div> </div>

Emment语法：

Copy

div.container>div.row>div.col-xl-6.col-lg-6.col-md-6.col-sm-6.col-12+div.col-xl-6.col-lg-6.col-md-6.col-sm-6.col-12

常用的属性#

隐藏#

hidden

清除边界#

clearfix

指定屏幕下显示#

visible-xs

center-block

不显示前缀点#

list-unstyled

列偏移：#

.offset-md-*

文本对齐#

Left aligned text.

Center aligned text.

Right aligned text.

text-capitalize 利用 text-center 居中 text-danger 加红危险 text-hide 隐藏文字 text-info 信息 text-justify 字体对齐（齐行—— text-left 文字左对齐 text-lowercase 小写（仅英文） text-muted 静音 text-nowrap 不换行 text-primary 原生效果 text-right 文字居右 text-success 成功 text-uppercase 文字大写（仅英文） text-warning 警告红色

文字样式#

柔和灰（text-muted）

、主要蓝（text-primary）

、成功绿（text-secondary）

、成功红（text-success）

、危险红（text-danger）

、警告黄（text-warning）

、危息绿（text-info）

、黑白对比（text-dark）

背景是样式#

主要蓝（bg-primary）

、成功绿（bg-secondary）

、成功红（bg-success）

、危险红（bg-danger）

、警告黄（bg-warning）

、危息绿（bg-info）

、黑白对比（bg-dark）

BootstrapVue

安装#

Copy

# With npm npm install vue bootstrap-vue bootstrap # With yarn yarn add vue bootstrap-vue bootstrap

程序入口点注BootstrapVue：

Copy

// app.js import Vue from 'vue' import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' // Install BootstrapVue Vue.use(BootstrapVue) // Optionally install the BootstrapVue icon components plugin Vue.use(IconsPlugin)

引入 Bootstrap 和BootstrapVue的css

Copy

// app.js import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css'

行列#

Copy

<b-container class="bv-example-row"> <b-row cols="1" cols-sm="2" cols-md="4" cols-lg="6"> <b-col>Column</b-col> <b-col>Column</b-col> <b-col>Column</b-col> <b-col>Column</b-col> <b-col>Column</b-col> <b-col>Column</b-col> </b-row> </b-container>

关键字

Copy

<b-row> <b-col> <b-container> <b-form-row>

Copy

<b-col sm="auto"> 实例的宽度将自动为25%。

列属性 sm, md, lg, xl表示在不同断点处，每行可能使用12个列中要使用的列数。因此，如果在断点sm处需要三个等宽列，可以使用<b-col sm="4">。特殊值auto可用于占用行中剩余的可用列空间。