HTML和CSS

最新推荐文章于 2024-08-21 13:29:36 发布

Dnhz-w

最新推荐文章于 2024-08-21 13:29:36 发布

阅读量125

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/Bald_monster/article/details/120098602

版权

本文深入探讨HTML和CSS，包括表格创建、表单元素如input的type属性、HTML元素分类及转换、浮动布局、CSS定位、HTML5新特性如布局元素和媒体元素、CSS3的边框圆角、阴影、形变、过渡和动画效果，以及响应式页面设计。重点介绍了媒体查询、flex布局和grid布局在现代网页设计中的应用。

摘要由CSDN通过智能技术生成

HTMl和CSS

1、表格：

 <!-- 表格 -->
    <!--  -->
    <table border="1">
        <!-- 表头 -->
        <!-- td是单元格，tr是行 -->
        <thead>
            
            <td>姓名</td>
            <td>id</td>
            <td>年龄</td>
        </thead>
        <!-- 表格主体 -->
        <tbody>
            <!-- colspan="4"代表左右合并四个单元格 -->
            <td colspan="4">表格</td>
            
            <tr>
                <!-- rowspan代表上下合并多少行 -->
                <td rowspan="3">内容</td>
                <td>小明</td>
                <td>001</td>
                <td>12</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>002</td>
                <td>15</td>
            </tr>
            <tr>
                <td>小话</td>
                <td>003</td>
                <td>10</td>
            </tr>
        </tbody>
    </table>

2、表单

**input中的type属性** 
  - text    内容
  - password  密码
  - radio  同一name下的radio是单选框
    <label for="">男</label>
    <input name="sex" type="radio"/>
    <label for="">女</label>
    <input name="sex" type="radio"/>
  - checkout  多选框
  - submit    提交按钮  
  - button    普通按钮，没有任何功能
  - select    下拉菜单

3、HTML元素的分类

块元素： 可以设置宽度和高度，独立成行。 h1-h6、p、div、ul、li
**块内元素（内联元素、行级元素）：**不可以设置高度和宽度，不独立成行。a、span
**行内块元素：**可以设置宽度和告诉，不独立成行。 img、input、button

display属性：
- ：转换为块元素
- inline：转换为行内元素
- inline-block：转换为行内元素
- none：隐藏元素

4、浮动布局

浮动

float:left;

清除浮动

.clear::before,clear::after{
    /*前后添加一个空字符*/
	content:"";
	/*转换成两个div*/
	display:block;
	/*清除浮动*/
	clear:both;
}

在CSS代码中加入这段代码，遇到想要清除浮动元素的时候，后面加入clear就可以了

5、CSS定位（position）

**绝对定位：**absolute
**相对定位：**relative
**固定定位：**fixed

坐标属性（非定位元素不起作用）

top
left
right
bottom
z-index

6、HTML5新特性

一、布局元素

布局元素相当于一个有语义的div

header：网页头部
nav：导航栏
aside：侧标栏
article：显示文章
section：布局的一部分
footer：网页页脚

二、媒体元素

1.音频—audio

controls ：控制面板

autoplay ：自动播放

muted ：静音 //高版本浏览器中必须静音才能自动播放，多数用在视频中

2、视频——video

controls ：控制面板

autoplay ：自动播放

muted ：静音 //高版本浏览器中必须静音才能自动播放，多数用在视频中

三、画布

四、SVG

五、表单新特性

7、CSS3

CSS3在CSS2版本的基础上，新增了很多特性，例如边框圆角、动画效果等等

overflow属性

overflow：hidden; //超出部分隐藏
overflow：auto; //上下标尺，可以滑动显示

一、边框圆角（border-radius）

border-radius：左上右上右下左下;

例子：

.box{
    border-radius:20px;/*幅度为20px*/
    border-radius:50%;/*为正圆*/
}

二、阴影（box-shadow）

box-shadow: 10px 20px 30px blue ;

参数分别代表：x轴偏移量，y轴偏移量，模糊半径，阴影颜色（不设置颜色为黑色）

三、形变：旋转、缩放、位移（teansform）

teansform：

rotate(); //旋转 deg单位表示角度
origin： //设置旋转原点
- 例子：teansform-origin:0 0; // 左上角为转正中心点
scale(); //缩放
translate(); //位移

例子：

teansform:rotate(45deg) ; //旋转45度

teansform:scale(0.5); //**缩小0.5倍

teansform:translate(50px,100px) //向右偏移50px，向下偏移100px

利用定位和位移给div垂直居中

.box{
    width:200px;
    height:200px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

四、过渡效果（transition）

transition：

transition-property //过渡属性（例如transform）
transition-duration //过渡持续时间（例如1s）
transition-timing-function //过渡函数
- ease：开始和结束慢，中间块。默认值
- linear：匀速
- ease-in：开始慢
- ease-out：结束慢
- ease-in-out：和ease类似，但比ease幅度大。
transition-delay //过渡延迟时间

简写：transition：属性秒数函数延迟；

五、动画效果（animation）

1、用keyframs按照百分比指定动画

animation:anim 2s ease 1s infinite;

：动画的名字，几秒执行完，什么方式执行，延迟几秒，执行几次！

**infinite：**代表一直执行

/*定义一个动画*/
@keyframes 动画名字{
    在开始的时候{
        
    }
    在结束的时候{
        
    }
}
/*例子*/
/*为了让动画看起来平滑，最好百分之0和百分之100的状态一样*/
@keyframes anim{
            0%{
                transform: rotate(0deg);
            }
            10%{

            }
    		50%{

            }
    		80%{

            }
            100%{
                transform: rotate(360deg);
            }
        }

2、用from…to…指定动画0%

/*例子*/
/*当只有0%到100的时候可以用fram...to...*/
@keyframes anim{
            fram{
                transform: rotate(0deg);
           
            to{
                transform: rotate(360deg);
            }
        }

3、停止动画效果

animation-play-state:paused;

六、媒体查询

七、flex布局

此前我们制作的所有网页都是基于盒子模型和浮动布局完成的，flex布局又叫弹性布局（或者叫弹性盒子布局），这是一种更先进的布局方式，可以让网页布局更简洁，更易于维护。

1、基本概念

main axis：主轴
cross axis：交叉轴

2、flex容器中的默认效果

flex项目在flex容器中延主轴排列
flex项目高度适应flex容器高度（同行内元素）

3、设置flex容器

flex-direction：设置flex项目排列方向
- row（默认值）：主轴为水平方向，起点在左端
- row-reverse：主轴为水平方向，起点在右端
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。
justify-content：flex项目主轴排列方式 //水平方向排列方式
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center：居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items：flex项目在交叉轴的排列方式 //垂直方向排列方式
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的重点对齐
- center：交叉轴的重点对齐。
- stretch（延伸）（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

4、flex项目

flex-grow：属性定义项目的放大比例，默认为0，空间充足，等比例补全。
flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不租，该项目将缩小
flex-basis：主轴排列为宽度，交叉轴排列为高度，设置px，默认值是auto。
flex：综合上面三个样式。
align-self：flex项目的对齐方式（auto|flex-start|flex-end|center|baseline|stretch）

八、grid布局

8、响应式页面

媒体查询

**通过@media定义样式，浏览器

窗口满足指定条件，才会应用此样式

/*当窗口大小在300px-600px之间时，执行某些样式*/
.box{
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        @media screen and (min-width:300px) and (max-width:600px){
            .box{
            background-color: red;
            }
        }

响应式页面的有点与缺点

优点：一套页面适应多端设备，提升开发效率
缺点：页面效果不及单独为某一终端定制的页面效果；性能问题；维护成本提升；

总结：大部分项目不会整体采用响应式页面的解决方案

9、使用rem单位设置移动端页面尺寸

单位概述
- px：像素
- em：相对于父级的font-size值
- rem：相对于html标签的font-size值

Dnhz-w

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML和CSS

HTMl和CSS1、表格：   <table border="1">   <thead> <td>姓名</td> <td>id</td>
复制链接

扫一扫