![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html5和css基础
文章平均质量分 77
B.Bz
毛毛你是个好姑娘
展开
-
CSS高级----动画
过渡使用过渡就是为了让过程不那么僵硬,过程更 “ 滑~ ” 一点语法:transition: 属性 时间(秒[s] 或者 毫秒[ms]为单位);演示:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-10-20 21:14:47 · 257 阅读 · 0 评论 -
CSS高级----转换
2D转换平移转换语法:/* X轴正向为右,Y轴正向为下 */transform: translate(水平移动距离, 垂直移动距离);translate()如果只给出一个值, 表示x轴方向移动距离单独设置某个方向的移动距离:translateX() & translateY()用于未知元素宽高水平垂直居中演示: .box1 { width: 500px; height: 500px;原创 2021-10-20 20:52:19 · 77 阅读 · 0 评论 -
CSS高级技巧
元素的显示与隐藏.1. display 显示display: none 隐藏对象display:block 除了转换为块级元素之外,同时还有显示元素的意思。.box1 { width: 100px; height: 100px; background-color: pink;}.box2 { width: 100px; height: 100px; background-color: tomato;}<body> .原创 2021-10-15 21:16:08 · 245 阅读 · 0 评论 -
CSS入门基础----浮动
CSS 布局的三种机制CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流(标准流)、浮动和定位,其中:普通流(标准流): 块级元素会独占一行,从上向下排列;行内元素会按照顺序,从左到右排列,碰到父元素边缘则自动换行;浮动:让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。定位:将盒子定在浏览器的某一个位置——CSS 离不开定位,特别是后面的 js 特效。什么是浮动(float)?概念:元素的浮动是指设置了浮动属性的元素会:脱离标准普通流的控制移动到指定位置。.原创 2021-10-07 15:50:25 · 479 阅读 · 0 评论 -
CSS入门基础----盒子模型
什么是盒子模型?所谓盒子模型:就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。盒子模型的特点:盒子模型有元素的内容、边框(border)、内边距(padding)、和外边距(margin)组成。盒子里面的文字和图片等元素是 内容区域盒子的厚度 我们成为 盒子的边框盒子内容与边框的距离是内边距(类似单元格的 cellpadding)盒子与盒子之间的距离是外边距(类似单元格的 cellspacing)图解:边框 border边框.原创 2021-10-05 16:09:49 · 709 阅读 · 0 评论 -
CSS入门基础----css的三大特性
继承性子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。div的子元素全部继承了颜色color属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .原创 2021-10-04 16:14:40 · 81 阅读 · 0 评论 -
CSS入门基础----css的背景属性
背景颜色 background-color语法:<style> /* 默认的值是 transparent 透明的 */ background-color:颜色值;</style> <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi.原创 2021-10-04 15:51:27 · 107 阅读 · 0 评论 -
CSS入门基础----行内元素、块级元素和行内块元素的特点和转换
块级元素常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。块级元素的特点:比较霸道,自己独占一行高度,宽度、外边距以及内边距都可以控制。宽度默认是容器(父级宽度)的100%是一个容器及盒子,里面可以放行内或者块级元素。<!DOCTYPE html><html lang="en"><hea.原创 2021-10-04 15:01:37 · 969 阅读 · 0 评论 -
CSS入门基础----css复合选择器
后代选择器语法:<style> 父选择器 子选择器 { 属性:属性值; 属性:属性值; }</style>中间使用空格隔开只要有标签嵌套就可以使用后代选择器 <style> ul li { color: red; } </style><body> <ul> <li>1</li> .原创 2021-09-30 17:53:32 · 107 阅读 · 0 评论 -
CSS入门基础----css的书写方式
行内样式行内样式表(内联样式表)是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式。<div style="color: red; font-size: 12px;">行内样式</div>style 其实就是标签的属性在双引号中间,写法要符合 CSS 规范可以控制当前的标签设置样式由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简单样式的时候,可以考虑使用使用行内样式表设定 CSS,通常也被称.原创 2021-09-30 17:12:32 · 705 阅读 · 0 评论 -
CSS入门基础----css的文字属性
font-size属性px(像素)大小是我们网页的最常用的单位谷歌浏览器默认的文字大小为16px不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小可以给 body 指定整个页面文字的大小<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic.原创 2021-09-28 15:54:30 · 108 阅读 · 0 评论 -
CSS入门基础-----标签选择器
什么是CSS?CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表。 CSS 是也是一种标记语言CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、 边距等)以及版面的布局和外观显示样式。CSS 让我们的网页更加丰富多彩,布局更加灵活自如。简单理解:CSS 可以美化 HTML , 让 HTML 更漂亮, 让页面布局更简单。CSS语法介绍使用 HTM.原创 2021-09-28 15:44:26 · 2197 阅读 · 0 评论 -
HTML5入门基础-----表单标签
表单域(form标签)收集的用户信息通过form表单域传递给服务器在HTML中,form标签被用于定义表单域,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。name一般用不到method提交方式常用的4种:get 一般用来查询信息post 一般用来新增信息put 一般用来修改信息delete 一般用来删除信息 <form action="提交地址" method="提交方式" name="表单名称"> .原创 2021-09-28 15:01:58 · 183 阅读 · 0 评论 -
HTML5入门基础-----常用标签
排版标签为了对网页布局进行分块,我们经常会在页面中用到排版布局标签,以上标签相当于有名字的<div>标签。标题标签<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title.原创 2021-09-27 16:01:41 · 156 阅读 · 0 评论 -
HTML5基础入门
什么是HTMLHTML(Hyper Text Markup Language)中文译为:超文本标记语言,专门用于网页开发的语言,主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述。HTML 不是一种编程语言,而是一种标记语言 (markup language)。标记语言是一套标记标签 (markup tag)。Web的组成构成语言说明结构HTML页面元素和内容表现CSS网页元素的外观和位置等页面样式(如:颜色、大小等等)行为JavaScript网页模型的定义与页面交互网.原创 2021-09-26 17:13:54 · 100 阅读 · 0 评论