HTML&CSS

前端入门

1、HTML&CSS

1、选择器

通配选择器

元素选择器

类选择器

id 选择器

复合 (组合) 选择器

 {
    ...
}


.class1.class2 {
    ...
}

 {
...
}

div>a {
	..
}
div>p>a {

}
.class1 > a {

}

[属性名] { } 
[title="a"]  { }  
[title^="a"]  { } 
[title$="s"]  { } 
[title*="u"]  { } 

a:link {
 
    ...
}
a:visited {
    /** 选择的是访问过的 a 元素 /
}

• 伪类选择器 - 动态伪类

a:hover {} 
a:active {} 

input:focus {}

• 伪类选择器 - 结构伪类

div>p:first-child {} 
div p:first-child {} 
p:first-child   {} 

p:last-child  {}  

div p:first-of-type {}   

div p:nth-of-type(n) {} 

p:nth-child(n)  {}
p:nth-child(2n/even) {} 
p:nth-child(2n+1/odd) {} 
p:nth-child(-n+5) {} 


div>p:not(.clasa1) 

input:checked {} 
input:disabled

• 伪类选择器 - 目标伪类

div:target {} 

div::first-letter {}
div::selection {}

input::placeholder {}
p::before {content：‘$’}
p::before {content：‘$’}

选择器的优先级

2、字体

3、盒模型

margin:

给一个块级元素左右 margin 设置 auto 可以实现该元素在其父元素水平居中

margin: 0 auto

margin 也可以设置负值

margin：-50px

overflow:hidden

• 行内块的幽灵空白问题

4、浮动 float

特点：

浮动后的影响：

解决方案：

布局练习：

代码：

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
    
    style>
        
        * {
            margin: 0;
            padding: 0;
        }
        .leftfix {
            float: left;
        }
        .rightfix {
            float: right;
        }
        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }
        
        .container {
            width: 960px;
            margin: 0 auto;
            text-align: center;
        }
        .logo {
            width: 200px;
        }
        .banner1 {
            width: 540px;
            margin: 0 10px;
        }
        .banner2 {
            width: 200px;
        }
        .page-header div {
            height: 80px;
            line-height: 80px;
            background-color: #ccc;
        }
        .menu {
            height: 30px;
            line-height: 30px;
            background-color: #ccc;
            margin: 10px auto;
            text-align: center;
        }
        .left-top div {
            width: 368px;
            height: 198px;
            margin-right: 10px;
            border: 1px solid #000;
            background-color: white;
            line-height: 200px;
        }
        .left-bottom div {
            width: 178px;
            height: 198px;
            margin-top: 10px;
            border: 1px solid #000;
            line-height: 200px;
            margin-right: 10px;
        }
        .rightbox div {
            width: 198px;
            height: 128px;
            border: 1px solid #000;
            line-height: 128px;
        }
        .item-eight {
            margin: 10px 0;
        }
        .footdiv {
            height: 60px;
            background-color: #ccc;
            line-height: 60px;
            margin: 10px 0;
        }
    style>
    
head>
body>
    div class="container">
        div class="page-header clearfix">
            div class="logo leftfix">logodiv>
            div class="banner1 leftfix">banner1div>
            div class="banner2 leftfix">banner2div>
        div>
        div class="menu"> 菜单 div>
        div class="content clearfix">
            div class="leftbox leftfix ">
                div class="left-top clearfix">
                    div class="content-left leftfix"> 栏目一 div>
                    div class="content-right leftfix"> 栏目二 div>
                div>
                div class="left-bottom clearfix">
                    div class="item-three leftfix"> 栏目三 div>
                    div class="item-four leftfix"> 栏目四 div>
                    div class="item-five leftfix"> 栏目五 div>
                    div class="item-six leftfix"> 栏目六 div>
                div>
            div>
            div class="rightbox rightfix">
                div class="item-seven"> 栏目七 div>
                div class="item-eight"> 栏目八 div>
                div class="item-nine"> 栏目九 div>
            div>
        div>
        div class="footdiv"> 页脚 div>
    div>
body>
html>

5、定位 position

相对定位

绝对定位

固定定位

粘性定位

定位的层级

特殊定位的应用

6、布局

1、版心

2、常用的布局名称

3、重置默认样式

2、HTML5

2、新增标签

视频标签：

音频标签：

3、新增全局属性

3、兼容性处理

3、CSS3

1、新增 css 属性

2、新增文本属性

3、新增渐变

4、web 字体

5、字体图标

6、2D 变换

缩放：

旋转：

2D 旋转

扭曲:

多重变换

7、3D 转换

8、过渡

过渡的高级使用：

复合属性：

9、动画

动画的复合属性

过渡和动画的区别：

过渡需要触发条件，动画不需要。动画可以指定关键帧。

10、多列布局

多列布局案例：

图片展示瀑布流

 {
    column-count: 5
}
img {
    width: 100%
    transition: 0.2s linear
}
img:hover {
    box-shadow: 0px 0px 20px black;
    transform:scale(1.02)
}

"outer">
	"...."/>
	"...."/>
	"...."/>

11、伸缩盒模型

主轴方向

主轴换行方式

主轴的项目对齐方式

默认主轴水平从左到右

侧轴

1、元素的水平垂直居中布局

 {
    height:400px;
    display:flex;
    
    
    justify-content: center;
    
    align-itme: center ;
}
.inter {
    width：200px;
    height:200px;
    
    margin：auto;
}

"outer">
	
class="inter">