VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > 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;

t


Copy
top:;

pos:s


Copy
position:static;

pos:a


Copy
position:absolute;

pos:r


Copy
position:relative;

pos:f


Copy
position:fixed;

t


Copy
top:;

t:a


Copy
right:auto;

c

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%。

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

删除边距#

通过在<b-row>上设置no-gutters属性来删除 <b-row> 的边距和<b-col>padding

JavaScript

输入输出语句#

alert(msg) 浏览器弹出警示框

console.log(msg) 浏览器打印输出信息

prompt(info) 浏览器弹出输入框

vue

数据对象#


Copy
data: { newTodoText: '', visitCount: 0, hideCompletedTodos: false, todos: [], error: null }

文本插值#


Copy
{{ }}

v-once 执行一次性地插值


相关教程