拿出来大家共勉，不足之处请指正。
很久之前的学习笔记了，一直存放在本地中
CSS语法(cascanding style sheet层叠样式表)
引入样式表
样式一般会单独写在一个文件里.css 在头部 link导入
外部样式
指在内部样式表的
也可以用Link
外部的扩展名可以随意，但是一定要是**.css**结尾
推荐使用这种,利用CSS的缓存机制,提高开发效率
<style>
@import"外部样式表.css";
（有的也用Link）
</style>
<link rel="stylesheet" href="./css/style.css">
内部样式
把样式表放到页面的区域内，这些定义的样式只能应用到该页面中，内部样式表使用
<style>
p{
margin-left:10px;
}
body{
background-image:url("images/bg1.png");
}
</style>
内联样式
(慎用，只对一个标签生效，不便于维护，不建议使用)
<p style="margin-left:20px; color:red">This
is a paragraph. </p>
选择器
<--!通配选择器
(固定的*是选择所有)-->
*{
color:red
}
<--!元素选择器-->
h1{
color:red
}
<--!类选择器
(类名可以重复,一个标签可以有多个类名)-->
.p1{
text-indent:2; //首行缩进2字符
}
<--!ID选择器
(每个元素只能有一个ID且不能重复)-->
#p1{ //这里P1是个ID值
text-indent: 2;
}
<--!群组选择器-->
<--! -1-交集选择器
标签.类名-->
p.p1{
color:red
}
<--! -2-并集选择器
标签,标签-->
h1,p1{
color:red
}
<--! -3-子元素选择器
父元素>子元素 (只选择了某元素下子元素的元素)-->
div>p{
color:red
}
<--! -4-后代选择器
祖先元素 后代元素 (选择祖先元素的所有后代,子孙都包括)-->
div p{
color:red
}
<--! -5-相邻兄弟选择器
标签+标签(选择~**相邻紧挨~**的选择器)-->
div+p{
color:red
}
<--! -6-普通兄弟选择器选择器
标签~标签(选择的是它的所有兄弟)-->
div~p{
color:red
}
<--!属性选择器-->
<--! -1-[属性]{} -->
[title]{
color:red
}
<--! -2-选择器[属性]-->
p[title]{
color:red
}
<--! -3-选择器[属性='属性值'] -->
p[title='t1']{
color:red
}
<--! -4-选择器[属性^='属性值'] (属性值是以这个为开头的)-- >
p[title^='a']{
color:red
}
<--! -5-选择器[属性$='属性值'] (属性值是以这个为结束的)-->
p[title$='a']{
color:red
}
<--! -6-选择器[属性*='属性值'] (属性值包含就行)-->
p[title*='a']{
color:red
}
<--!伪类选择器-->
<--! -1- 选中子元素下的第几个 -->
:first-child/*第一个*/
:last-child/*最后一个*/
:nth-child()/*第n个 其中n=所有 2n或者even=偶数个 2n+1或者odd=奇数个 */
li:nth-child(3){
color: red;
}
<--! -1- 选中子元素下(~同类型~)的第几个 -->
:first-of-type/*第一个*/
:last-of-type/*最后一个*/
:nth-last-of-type()/*第n个*/
:not()符合条件的元素删除
li:nth-of-type(3){
color: red;
}
ul li:not(:nth-child(3)){
color: red;
}
<--! -2- a标签下伪类的选择器 -->
a:link {color:#FF0000;} /* 未访问的链接*/
a:visited {color:#00FF00;} /* 已访问的链接*/
a:hover {color:#FF00FF;} /* 鼠标划过链接*/
a:active {color:#0000FF;} /* 已选中的链接*/
/***这四个~顺序~不能改变*/**
<--!伪元素选择器
(特殊位置的选择,以两个冒号开始)-->
:first-letter/*一段文字的首字符*/
::first-line/*一段文字的首行*/
::selection/*鼠标去选中的部分*/
::before最前面的位置
::after最后面的位置
这两个属性要配合content属性(其中的内容是写死的,鼠标都无法勾选)
p::before{
content: '『';
color: red;
}
p::after{
content: '』';
color: red;
}
选择器的权重
- 样式冲突：不同选择器，选择相同的元素，做相同的样式设置
-内联样式权重：1000;
-ID选择器权重：100；
-类伪类选择器权重：10；
-元素选择器权重：1；
（下一级的无论如何累加，都不会超过上一级 这里的数字只是为了方便理解）
分组的所有选择器累计相加比较权重进行使用
权重相同使用靠下的样式
！important 权重高于所有，强行更改，慎用。
.box1{
background-color:red !important;
}
单位
像素
像素越小越清晰，不同屏幕的像素是不同的
百分比
相对于父级元素来说，进行的放大和缩小
em
相对于元素的字体大小计算,默认的字体16px；
rem
对于根元素的字体大小进行计算，不是本级的
RGBA
0-255 /0-255 /0-255 /0-1(透明度)
十六进制
两位相同的，可以写一位，bbffaa=bfab
background-color:#bfa;
伪类
伪元素
/* css中的伪元素，默认是行内元素，如果指定宽高，就要display */
.nav view::after{
content: "";
width: 20px;
height: 20px;
background: red;
display: block;
}
标签属性
css用class js用id
常用标签
<head>
<style>
style行业默认写在head里（虽然也能写在body里）
tag（标签名）{
key:value;键值对（kv对）
}
例如：div{
width:100px;(不能写成100，要带单位px像素)
height:100px;
background:red;(写成background-color也行)
}此时“内容”两个字会变红色
</style>
</head>
<body>
<div>内容</div>
</body>
<><>
文本属性
alt+z文本自动换行（）
<head>
<style>
div{
text-indent:1em; 首行缩进，暂时可把1em理解为1个字符大小
}
</style>
</head>
<body>
<div>
内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</body>
<style>
div{
font-size:10px; 文字大小
font-weight:bold; 文字加粗,***一般***写bold,也可以写数字120px
color：red; 字体颜色
}
</style>
div{
width:100px;
height:200px;
text-align:center; 这是左右，align对齐，center居中（是在这一行里居中）
line-height:200px; ***只有一行文字，***行高=盒高时，文本会垂直居中。
定义英文时，要记得空格，不然会超出
}
<><><><><>
字体属性
字体样式
font-family:
华文细黑：STHeiti Light [STXihei]
华文黑体：STHeiti
华文楷体：STKaiti
华文宋体：STSong
华文仿宋：STFangsong
儷黑 Pro：LiHei Pro Medium
儷宋 Pro：LiSong Pro Light
標楷體：BiauKai
蘋果儷中黑：Apple LiGothic Medium
蘋果儷細宋：Apple LiSung Light
Windows的一些：
新細明體：PMingLiU
細明體：MingLiU
標楷體：DFKai-SB
黑体：SimHei
宋体：SimSun
新宋体：NSimSun
仿宋：FangSong
楷体：KaiTi
仿宋_GB2312：FangSong_GB2312
楷体_GB2312：KaiTi_GB2312
微軟正黑體：Microsoft JhengHei
微软雅黑体：Microsoft YaHei
装Office会生出来的一些：
隶书：LiSu
幼圆：YouYuan
华文细黑：STXihei
华文楷体：STKaiti
华文宋体：STSong
华文中宋：STZhongsong
华文仿宋：STFangsong
方正舒体：FZShuTi
方正姚体：FZYaoti
华文彩云：STCaiyun
华文琥珀：STHupo
华文隶书：STLiti
华文行楷：STXingkai
华文新魏：STXinwei
大小font-size
-em
-rem
font-family
很少单独使用一种字体
-serif:衬线字体
-sans-serif:非衬线字体
-monospace:等宽字体
服务器字体@font-face
@font-face
{font-family: myfont;
src: url()}
图标字体
阿里字体/国外awesome字体 后者优先
- 下载并解压官网文件
- CSS+FONT复制到项目
- 项目引入文件
- 使用方法
-通过类名使用"fas/fab fa-address-book"
-通过伪元素使用
-实体使用
行高line-height
-取值（具体数值，整数）
-行高会在字体框的上下平均分配
使单行文字垂直居中
-行高经常用来设置文字的行间距（多行文字）
行间距=行高-文字大小
对齐
水平对齐text-align:left,right,center,justify
垂直对齐vertical-align:baseline,top,bottom/middle
white-space
.box1{
height: 150px;
width: 200px;
border: 1px red solid;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
效果
背景属性
background-clip:背景裁剪
border-box
padding-box
content-box
background-origin:背景图片偏移量计算的原点
border-box
padding-box
content-box
background-size
cover/contain/百分数
background-attachment:背景图片是否随元素滚动；
渐变
渐变色：需要通过background-image设置
-linear-gradient线性渐变
-指定渐变方向to left,to right/xxxdeg/turn
repeating-linear-gradient
-radial-gradient径向渐变
-手动指定径向渐变的大小(10px 50px,red,yellow)
-指定渐变圆心的位置(10px 50px at 100 100, red,yellow)
background-image: radial-gradient(10px 50px at center, red,yellow)
轮廓和边角
box-shadow:0 0 6rpx black;
//第一个0为X偏移量 +-为上下偏移
//第二个为Y轴偏移量 +-为上下偏移
//6rpx是阴影厚度
//black为阴影的颜色
border-radius：50%；
//添加圆角边框
-可单独设置四个角，top-left
-一个值，四个角都相同
-两个值，左上（右下），右上（左下）
-三个值，
-四个值，
outline: 10px red solid;
//轮廓
布局
样式继承
子元素可以集成父元素的样式，但是布局、背景不可以继承
（有些标签的背景默认为透明：transparent）
看标签能否被继承可以参考文档W3C
盒子
有时元素位置放错，浏览器解析时会自动调整
行内元素通过内容撑开
- 内容区：content（内容区element）
- 边框：border
- 内边距：padding
- 外边距：margin
width-height是对内容区
<head>
<style>
div{
width:100px;
height:100px;
background:red; （没有这一项就时空白盒子，浏览页看不到）
border:4px dotted red;
--->solid:实线dashed:虚线dotted:点线
border-top:1px solid red;(上右下左 可以指定某一方向)
}
</style>
</head>
<body>
<div></div>（这里没有写内容，就会成一个“盒子”）
</body>
边框
border-style: red;
border-width: 20px;也可以单独规定，顺序为逆时针上右下左
background-color: black;
也可以简写，顺序可换（但是三者缺一不可）：
border: solid 10px red;
内边框padding
-padding-top,right,left,bottom
-padding的大小会影响盒子的大小，背景颜色会延伸到内边距
可见框的大小=内容区+内边距+边框的大小
外边框margin
-外边距不会影响盒子可见框的大小，会影响位置；
-margin-top:正值向下移动盒子，负值向上移动盒子；
-margin-left：正值向右移动盒子，负值向左移动盒子；
（上面俩是移动自身元素）
（下面俩是移动其他元素，自身不动）
-margin-bottom:移动其他元素
-margin-right；默认情况下不会有效果
-margin会影响到盒子的实际占用空间
<head>
<style>
div{
width:100px;
height:100px;
background:red;
margin:100px 100px 120px 130px; (记住body是默认存在默认边距的)
margin***外边距*** 上top 右right 下bottom 左left（顺时针）
margin-top:100px;
margin-right:100px;
margin-bottom:100px;
margin-left:100px;
padding***内边距*** 上top 右right 下bottom 左left（顺时针）
padding:20px;30px;20px;30px; 向内挤空间，整个盒子也会变大
box-sizing:border-box;***实现自动减宽高，原盒子也不变--- 内减属性
这是css3的语法，IE8以下的浏览都不支持，无法查看***
}
span{//span是行级元素，display:block 变成块级元素
}
</style>
</head>
<body>
<div>外边距</div>
<div>
<span> 内边距内容</span>
</div>
</body>
文档流
网页最下层的东西叫文档流，元素默认都是写在文档流中的
display:block;块级元素（内部可以放任何元素-P元素除外，它内部不能放任何元素）
- 独占一行
- 默认高度：内容撑开
- 默认宽度：父级决定
- 自上而下
display:inline 行内元素（内部不能放块元素）
- 只占自身大小
- 默认高度：内容撑开
- 默认宽度：内容撑开
- 自左向右依次排
垂直方向布局
overflow:scroll;
/*
默认情况下，父元素的高度会被其内容撑开；
如果设置了父元素的高度，则按实际值
overflow,溢出处理
-visible：默认
-hidden:隐藏
-scroll：滚动
-auto:自动
overflow-x,overflow-y
*/
外边距的折叠
相邻的垂直外边距，相对于margin来说
虽然box1有padding,但是是自身，box2还是在它左下角
.box1{
width: 200px;
height: 199px;
background-color: #bfa;
border-top: 1px #bfa solid;
padding-top: 100px;
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 99px;
}
行内元素的盒模型
行内元素
-不支持设置宽度和高度，由内容决定
-支持内边距、边框、外边距
.box1{
width: 200px;
height: 200px;
background-color: red;
}
a{
display: block; 元素类型 block,inline,inline-block,table,none(元素不在页面中显示)
/* visibility: hidden; */
设置显示方式，默认显示，hidden在页面不显示但是占据位置
width: 100px;
height: 100px;
background-color: yellow;
/* margin: 50px; */
}
Normalize.css
- 保留有用的默认值，不同于许多 CSS 的重置
- 标准化的样式，适用范围广的元素。
- 纠正错误和常见的浏览器的不一致性。
- 一些细微的改进，提高了易用性。
- 使用详细的注释来解释代码
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
Reset.css
因为在不同的浏览器中，HTML标签会有一些默认的属性值，但是各个浏览器会渲染出各不一样的效果，例如边距不一致、字体颜色大小行高不一样等等。为了防止出现这种情况，其实主要是为了减少代码的重复定义，提高代码复用率，提高开发效率，重设各个浏览器的默认样式，还可以解决其引起的耦合问题。
总结就是高复用，低耦合，文件小。
是将所有的浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性
normalize 的理念则是尽量保留浏览器的默认样式，不进行太多的重置。
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
盒子大小计算
box-sizing:content-box;可见框的大小width+border+padding
box-sizing:border-box;可见框的大小由width和height决定
弹性布局
写在里面的盒子不用去计算其高度，就可以自动居中
.nav{
display: flex;
justify-content: space-between;
}
网页布局流派
浮动
- 默认不会从父级元素移除
- 浮动元素不会盖住其他浮动元素和文字
- 设置浮动后，行内元素变成块元素
<head>
<style>
.1{
width:100px;
height:100px;
background:red;
float；left;
margin-right;100px; 和给下面的加左边距效果是一样的 多个盒子道理一样
}
.2{
width:100px;
height:100px;
background:green;
margin:0 auto;居中
float；left; 浮动只能***左右***浮动
Left right none(初始值) inherit
}
</style>
</head>
<body>
<div class="1">
1111111
</div>
<div class="2">
2222222
</div>
</body>
为解决高度塌陷：子元素浮动后脱离了文档流
-
clear
意为消除浮动元素对当前元素产生的影响
clear:left/right/both;
-
BFC
是CSS的隐藏属性，开启后元素变为独立的布局
父元素 overflow:非visible属性
-
.box1::after{ content: ''; display: table; clear: both; } -
.clearfix::before,.clearfix::after{ content: ‘’; display: table; clear:both }
Position定位
-
relative
top bottom (二选一)left right（二选一）
- 元素不脱离文档流
- 提高元素层级
- 不改变元素性质
.box2{
width: 100px;
height: 100px;
background-color:orange;
position: relative;
top: -100px;
left: 50px;
}
-
absolute
top bottom (二选一)left right（二选一）
- container block包含块是离当前元素最近的祖先块元素，通常是其父级元素
- 离其最近的开启了定位的祖先元素，都没开就是根元素
.box2{
width: 200px;;
height: 200px;
background-color:orange;
position: relative;
}
.box3{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
top: 50px;
left: 50px;
}
-
绝对定位布局
-宏观用float,微观用position
-九个值没有auto则调整bottom。有auto则调整aotu
left + margin-left + border-left + padding-left + width + padding-right +border-right + margin-right + right=包含块的内容区的宽度
top + margin-top + border-top + padding-top + height + padding-bottom +border-bottom + margin-bottom + bottom=包含块的内容区的高度；
//居中的常规写法 margin: auto; right:0px; left: 0px; top: 0px; bottom: 0px; -
fixed
特殊的绝对定位。
相对与浏览器的视窗窗口进行定位，不会随网页的滚动而滚
-
sticky
元素到达某个位置时固定
兼容性差不常用
层级关系
z-index
属性值为整数，值越大，元素的层级越高
屏幕离人的距离，就是z轴。值越大，离人的距离越近，也就是首先显示出来
-层级同，优先显示靠下的元素
-祖先元素始终不能盖住后代元素
.box2{
width: 100px;
height: 100px;
background-color:orange;
position: relative;
top: 30px;
left: 20px;
z-index: 1;
}
hover(网址，鼠标落上后的颜色)
<head>
<style>
a{
color:green;
text-decoration:none;去掉网址的下划线
}
a:hover{ a是标签名字，都可以用 div 类标签 也可以
color:red;
transition:all 1s liner; 控制变色的时间为1秒
}
</style>
</head>
<body>
<div>
<a href="网址"></a>
</div>
</body>
动画
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
transition:指定一个或多个属性发生变化的方式
transition-property: 要执行的属性，多个属性用，隔开，所有属性用all表时
transition-duration:动画的持续时间
transition-timing-function:过渡的时序函数 steps
transition-delay:延迟时间
CSS计算方法
.box{
width: 500px;
height: 300px;
border: 1px solid #000;
margin: 100px auto; /* 居中 */
}
.left{
width: 21%;
height: 300px;
background: pink;
float: left;
}
.right{
width: calc(500px - 21%);
background: skyblue;
height: 300px;
float: right;
}
项目实战
简单页面
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
<!-- 实现页面的自动跳转 样式要统一写在.css页面中 -->
</head>
<body>
<div class="header">
<img src="./images/109951164714219850.jpg" alt="">
<div class="nav">
<!-- nav下的a标签就可以统一控制 -->
<a href="">贾斯汀<a>
<a href="">比伯</a>
<a href=""> 新专辑</a>
<a href=""> 新歌发布</a>
<a href=""> 新视频更新</a>
</div>
<div class="banner">
<img src="./images/A093110CC68C25661EA1B2AEB15E2E19.jpg" alt="">
</div>
<div class="new">
<div class="new_in">
<div class="block new_in_left"></div>
<div class="block new_in_right"></div>
<!-- .new_in_center+.new_in_left+.new_in_right 打出后根据提示摁下tab全部变成标签-->
</div>
<div class="footer">
<!-- 网页底部通常称为 鼠标滚轮摁住 可以选中多行-->
</div>
</body>
</html>
index.css
/* 这个文件只用来写css样式 */
/* *是通配符，代表选中所有的标签，做项目第一步就是清除所有标签的内外边距 */
*{
margin: 0; /*代表将四个方向的外边距都清零*/
padding: 0; /*代表将四个方向的内边距都清零 */
}
.header{
width: 1280px;
height: 85px;
background: red;
margin: auto; /*居中*/
box-sizing: border-box;
}
/* 表示某个标签下的 要带父级 文件多了容易区分 */
.header img{
width 50px;
height: 50px;
float: left;
margin-right: 150px;
}
/* 类名需要 . a 标签不需要点 */
.header .nav a{
margin-right: 100px;
}
/* 使图片适应每个屏幕 图片标签默认存在文字空隙 ，会留有空隙，display会解决*/
.banner img{
width: 100%;
display: block;
}
.new_in_left{
background: url(./..//images/b28186504fc2d562d405e5a9e91190ef77c66c99.jpg);
/* 寻找文件路径 先./ 还不出来就继续../ */
}
.new_in_right{
background: url(./..//images/a0a18a2bd40735faa4d217c393510fb30e2408e6.jpg);
}
.block{
}
895
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
