HTML及CSS基础
柳落青
记录美好生活:ssj10101011
展开
-
网页窗口缩放导致页面排版错乱的解决方法
网页放大会将窗口大小缩小相应的放大倍数;网页缩小会将窗口大小放大相应的缩小倍数的倒数分之一。网页缩放时,有定长宽的元素不会受到缩放的影响;如果元素有设置max-width或者min-width,缩放到一定程度是该元素就不会受到缩放倍数的影响(放大时页面会产生滚动条);如果页面是百分比布局,没有设置max-width或者min-width,窗口不会产生滚动条...原创 2019-11-07 15:26:36 · 8237 阅读 · 0 评论 -
CSS3--动画简介
1.CSS3动画CSS3动画简介通过改变元素的属性值来实现动画效果的。animation实现动画主要由两部分组成:通过类似flash动画的关键帧来生明一个动画;在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果animation属性的浏览器兼容性CSS3动画的使用过程(1)通过关键帧(@keyframes)来声明一个动画语法:@keyframes IDENT{...原创 2019-10-16 22:31:33 · 482 阅读 · 0 评论 -
CSS3--变形及过渡机制
1.CSS3变形变形简介(1)CSS3变形是一些效果的集合,如平移、旋转、缩放、倾斜效果,每个效果都可以称为变形(transform),它们可以操控元素发生平移、旋转、缩放、倾斜等变化。语法:transform:[transform-function]*;(1)transform-function:设置变形函数,可以是一个也可以是多个,中间用逗号隔开①translate():平移函数,基...原创 2019-10-16 22:24:14 · 2278 阅读 · 0 评论 -
CSS3--定位网页元素
1.定位在网页中的应用CSS中有三种基本的定位机制,分别是标准流、浮动、绝对定位2.position属性position指定盒子的位置,指它相对其父级的位置或相对它自身应该在的位置。static:默认值,保持在原本应该在的位置,没有任何移动的效果relative:相对定位,常以标准文档流的排版方式为基础,使盒子相对于它在原本的标准位置偏移指定的距离。盒子仍在标准文档流中。规律:rel...原创 2019-10-16 22:03:12 · 320 阅读 · 0 评论 -
CSS3--浮动-dispalay-float-解决父级塌陷的四种方法
1.网页布局常见的网页布局:网站基本都包括网站导航、网页主体内容、网站版权三个部分;网站版权一般由网站声明和一些相关链接组成标准文档流:指元素根据块元素或行内元素的特性按从上到下,从左到右的方式自然排列。这也是元素默认的排列方式。2.display属性标准文档流有两种元素:一种以div标签为代表的块级元素,另一种为以span标签为代表的行内元素display属性的使用:值 说明blo...原创 2019-10-16 21:50:11 · 936 阅读 · 0 评论 -
CSS3--盒子模型-边框-内外边距-盒子阴影-尺寸-特殊图形
1.什么是盒子模型padding-border-margin模型是一个极其通用的描述矩形对象布局形式的方法。在CSS中,一个独立的盒子模型有content(网页内容)、border(边框)、padding(内边距)、margin(外边距)四部分组成。①content:位于最中间②border:位于内边距外面,一般具有一定的厚度③padding:位于边框内部的间隙,是内容与边框的距离④ma...原创 2019-10-16 21:30:58 · 1566 阅读 · 0 评论 -
CSS3--美化网页元素-字体-超链接-div-背景
1.使用CSS样式美化网页文本的意义(1)有效的传递页面信息(2)使用CSS样式美化过的页面文本,使页面漂亮、美观、吸引用户(3)可以很好地突出页面的主题内容,使用户第一眼可以看到页面的主要内容(4)具有良好的用户体验编辑文本的标签<span>用来组合HTML文档中的行内元素的,没有固定的格式表示,只有对应它应用CSS样式时,才会产生视觉上的变化。字体样式(1)常见的...原创 2019-10-16 21:14:05 · 1310 阅读 · 0 评论 -
CSS3--简介及选择器的使用
1. CSS全称为“层叠样式表”(Cascading Style Sheet),通常又称为“风格样式表”(Style Sheet)。用来进行网页风格设计。2. CSS在网页中的应用:通过设立样式表,统一地控制HTML各标签的显示属性,使用CSS还可以设置文本居中显示,文本和图片的对齐方式,超链接的不同效果等,这样层叠样式表可以更有效地控制网页的外观。3.CSS发展史用HTML开发出来的页面...原创 2019-10-16 20:34:56 · 441 阅读 · 0 评论 -
HTML5--纯CSS轮播图
1.以下是HTML代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <link rel="stylesheet" href="lbimage1.css" type="text/css" /...原创 2019-10-06 13:27:56 · 2427 阅读 · 2 评论 -
HTML--表单元素
1. 表单概述:a) 表单就是将用户信息组织起来的容器,将用户填写的内容放置在表单容器中,当用户单击“提交”按钮的时候,表单会将数据统一发送给服务器2. 标签及表单属性:a) //:实现表单的创建b) /两个常用属性:i. action:此属性指示服务器上处理表单输出的程序,当用户单击表单上的“提交”按钮后,信息发送到Web服务器上,如果action属性的值为空,则默认表单提交到本页i...原创 2019-09-12 11:56:47 · 448 阅读 · 0 评论 -
HTML5--列表,表格与媒体元素
列表简介:简单来说,列表就是信息资源的一种展现形式,它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者更快捷的获得相应的信息列表分为三种类型:a) 无序列表:i. 语法:<ul><li>内容</li></ul>b) 有序列表:i. 语法:<ol><li>内容</li></ol>...原创 2019-09-12 11:53:29 · 300 阅读 · 0 评论 -
HTML5--初步基础元素及简单介绍
1. 什么是HTML? a) HTML是用来描述网页的一种语言,它是一种超文本标记语言,也就是说,HTML不是一种编程语言,仅是一种标记语言。2. 使用W3C标准的原因 a) 随着浏览器市场的激烈竞争,各大浏览器厂商为了吸引用户,都在早期的HTML的基础...原创 2019-08-29 20:07:26 · 186 阅读 · 0 评论