
HTML和CSS基础
文章平均质量分 92
HTML和CSS基础
_Tough_Girl
这个作者很懒,什么都没留下…
展开
-
学习笔记(2):HTML5 的新特性:新增的语义化标签、新增的多媒体标签、新增的 input 类型、新增的表单属性
1、HTML5 的新特性HTML5 的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题,基本是 IE9+ 以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。2、HTML5 新增的语义化标签以前布局,我们基本用 div 来做。div 对于搜索引擎来说,是没有语义的。<div class=“header”> </div><div class=“nav”> </div><d原创 2021-10-10 23:27:34 · 380 阅读 · 0 评论 -
学习笔记(1):什么是网页、常用浏览器、Web 标准
1、网页1.1 什么是网页网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”,通常是 HTML 格式的文件,它要通过浏览器来阅读。网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页,常见以 .htm 或 .html 后缀结尾的文件,因此将其俗称为 HTML 文件。1.2什么是 HTMLHTML 指的是超文本标记语言 (Hyper Text Markup Language) ,它是用来描述网页原创 2021-10-10 17:19:26 · 945 阅读 · 0 评论 -
详解BFC:块级格式化上下文
1、什么是BFC以及如何创建BFC(1)BFC 的概念:BFC(Block formatting context),即块级格式化上下文,它作为 HTML 页面上的一个独立渲染区域,只有区域内元素参与渲染,且不会影响其外部元素。在一个 Web 页面的 CSS 渲染中,块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。(2)W3C 对 BFC 的定义如下:浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks,table-cells 和原创 2021-10-06 17:30:49 · 2917 阅读 · 0 评论 -
div+css常见布局:两列布局、三列布局、圣杯布局和双飞翼布局
1、两列布局:左边固定,右边自适应左右两侧,左侧固定宽度 200px,右侧自适应占满。方法1: 左侧采用 float:left 往左浮动,右侧 margin-left:200px,留出左侧内容的空间// html 代码<div class="divBox"> <div class="left">左侧固定200px</div> <div class="right">右侧自适应</div></div>// C原创 2021-10-05 19:38:56 · 21338 阅读 · 2 评论 -
移动web开发之flex布局
1、flex布局原理flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局。当我们为父盒子设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效。伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目原创 2021-09-19 11:03:40 · 86 阅读 · 0 评论 -
CSS3的新特性:过渡(transition)、动画(animation)、2D、3D转换
1、CSS3 滤镜 filterfilter CSS属性将模糊或颜色偏移等图形效果应用于元素。filter: 函数();例如:filter: blur(5px);blur模糊处理,数值越大越模糊。2、CSS3 calc 函数calc() 此CSS函数让你在声明CSS属性值时执行一些计算。width: calc(100% - 80px);括号里面可以使用 + - * / 来进行计算。3、CSS3 过渡(transition)过渡(transition)是 CSS3 中具有颠覆性的特征之原创 2021-09-18 22:43:03 · 931 阅读 · 1 评论 -
CSS高级技巧:CSS三角、CSS用户界面样式、vertical-align 属性应用、溢出的文字省略号显示以及常见的布局技巧
1、CSS三角网页中常见一些三角形,使用 CSS 直接画出来就可以,不必做成图片或者字体图标。div { width: 0; height: 0; /* border: 20px solid pink; */ border-top: 20px solid pink; border-right: 20px solid red; border-bottom: 20px solid blue; border-left: 20px solid green;原创 2021-09-18 11:00:52 · 306 阅读 · 0 评论 -
CSS中的盒子模型、圆角边框、盒子阴影和文字阴影
1、盒子模型所谓盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。CSS 盒模型本质上是一个盒子,封装周围的 HTML 元素,它包括:外边距(margin),边框(border),填充(padding),和实际内容(content)。CSS 中的盒子模型包括 IE盒子模型 和标准的W3C盒子模型。标准的 W3C 盒子模型 和 IE盒子模型的区别如下:1、标准盒模型中 width 指的是内容区域 content 的宽度;height 指的是内容区域con原创 2021-09-17 16:33:18 · 913 阅读 · 0 评论 -
CSS的背景属性
通过 CSS 背景属性,可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。1、背景颜色background-color 属性定义了元素的背景颜色。background-color: 颜色值;一般情况下元素背景颜色默认值是 transparent(透明),我们也可以手动指定背景颜色为透明色。background-color: transparent;2、背景图片background-image 属性描述了元素的背景图像。实际开发常见于原创 2021-09-16 18:15:39 · 1452 阅读 · 0 评论 -
CSS字体属性、文本属性以及属性书写顺序
一、CSS字体属性CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。字体属性总结字体属性表示注意点font-size字号(字体大小)我们通常用的单位是px像素,一定要跟上单位font-family字体系列实际工作中按照团队约定来写字体font-weight字体粗细记住加粗是 700或者bold;不加粗是400或者normal;记住数字不要跟单位font-style字体样式记住倾斜是italic;不倾斜是norma原创 2021-09-16 16:47:46 · 921 阅读 · 0 评论 -
CSS基础选择器和复合选择器
1、CSS简介和语法规范CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。 有时我们也会称之为 CSS样式表或级联样式表。CSS 是也是一种标记语言。CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。CSS 让我们的网页更加丰富多彩,布局更加灵活自如。简单理解:CSS 可以美化 HTML , 让 HTML更漂亮,让页面布局更简单。CSS 规则由两个主要的部分构成:选择原创 2021-09-16 16:06:26 · 1882 阅读 · 1 评论 -
CSS浮动(float)
1、浮动(float)1.1 传统网页布局的三种方式网页布局的本质——用 CSS 来摆放盒子。 把盒子摆放到相应位置。CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序):普通流(标准流)浮动定位1.2 标准流(普通流/文档流)所谓的标准流:就是标签按照规定好默认方式排列。块级元素会独占一行,从上向下顺序排列。常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。常原创 2021-08-25 23:23:01 · 152 阅读 · 0 评论 -
CSS定位
1、为什么需要定位当我们滚动窗口的时候,盒子是固定屏幕某个位置的。这种效果,标准流或浮动都无法快速实现,此时需要定位来实现。所以:浮动可以让多个块级盒子一行没有缝隙排列显示, 经常用于横向排列盒子。定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。2、定位的组成定位: 将盒子定在某一个位置,所以定位也是在摆放盒子, 按照定位的方式移动盒子。定位 = 定位模式 + 边偏移 。定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置原创 2021-08-25 11:02:12 · 133 阅读 · 0 评论