(2)HTML&CSS(网页搭建与JavaWeb基础)
HTML标签、CSS基础,包括CSS入门,浮动和定位
小懒羊爱吃草
小枯林
展开
-
CSS定位十:一个定位的示例;定位部分的小总结;
这个例子多观察,父div设成了相对定位,其中的子div设成了绝对定位,依据绝对定位的参照物是最近的父一级容器的特性,极大简化页面元素的定位和控制。index.html:<!DOCTYPE html><html><head><title>定位示例</title><link rel="stylesheet" type="text/css" href="index.css"></head><body&g原创 2020-12-26 20:39:38 · 239 阅读 · 0 评论 -
CSS定位九:固定定位
目录1.初始状态:没有任何定位效果时:2.相对定位时:3.绝对定位时:4.固定定位时:4.(例子)利用固定定位实现“对联效果”固定定位:相对于浏览器窗口进行定位。1.初始状态:没有任何定位效果时:<!DOCTYPE html><html><head><title>相对定位和浮动演示</title><link rel="stylesheet" type="text/css" href="index.原创 2020-12-26 18:27:05 · 213 阅读 · 0 评论 -
CSS定位八:z-index
z-index作用:重叠时,控制哪个div在前面显示,哪个div在后面显示。目录1.预设环境2.不适用z-index时,层叠显示效果3.使用z-index的效果1.预设环境<!DOCTYPE html><html><head><title>z-index实验</title> <link rel="stylesheet" type="text/css" href="index.css"></h..原创 2020-12-26 12:29:02 · 388 阅读 · 1 评论 -
CSS浮动七:相对定位和浮动的结合使用 (并不是说这二者结合就一定更好;看需求)
浮动:可以脱离文档流,浮动起来,而且文档中的其他内容不会忽略浮动的位置,会绕开;相对定位:可以设定上下左右四个边距(设了上边距,就不需要设下边距了;左右边距同理,设置一个即可);即定位可以设定坐标!可以发现,这俩简直是完美组合!!!目录1.不采取定位2.只使用相对定位3.只使用绝对定位:4.当相对定位和浮动结合在一起使用时候(重点)1.不采取定位<!DOCTYPE html><html><head><title>相.原创 2020-12-26 12:07:54 · 1869 阅读 · 1 评论 -
CSS定位六:绝对定位和浮动的区别
疑问:前面发现,绝对定位可以使div脱离标准文档流,产生浮动的效果;而以前接触的浮动(float)也可以让div脱离标准文档流,产生浮动的效果;这二者都可以让div脱离文档流,产生浮动效果,那么这二者的区别是?实际中到底用哪个?绝对定位和浮动的区别 相同点:都会破坏文档流,都会产生浮动; 不同点:浮动时:文档流的其他内容不会忽略浮动的位置,其他内容会绕开; 绝对定位时:文档...原创 2020-12-26 11:25:20 · 2145 阅读 · 0 评论 -
CSS定位五:三个子div被父一级div包裹的情况(延续CSS定位四这篇文章)
本篇博客,主要是各种例子,并没有很强的知识点,感悟就行,主要通过案例,加深对相对定位和绝对定位的理解。目录一:三个独立的div(没有父div包裹)的情况(这种方式在实际工作中一般不可取)1.没有添加文字时,相对定位2.当添加文字时(1)添加文字,相对定位(2)添加文字,绝对定位二:三个div被包裹进父div中相对定位的情况(实际工作中常采用的方法)1.没有添加文字时,相对定位2.添加文字时(1)绝对定位:(2)相对定位时:一:三个独立的div(没有父div包.原创 2020-12-25 22:59:14 · 611 阅读 · 0 评论 -
CSS定位四:一个相对定位和绝对定位的例子:重点观察三个独立的div没有包含关系时的绝对定位时的效果
目录预设情况:需求:三个div平移到中间或右边;(这三个的相对位置需要保持不变)怎么实现?实现方案:三个相对定位一下(不能绝对定位)不能绝对定位:下面是绝对定位的演示预设情况:<!DOCTYPE html><html><head><title>定位演示</title> <link rel="stylesheet" type="text/css" href="index.css"></head&g原创 2020-12-25 21:47:08 · 225 阅读 · 0 评论 -
CSS定位三:在不设定position时候,直接设置偏移量(top,left)是无效的!
1.不设定定位方式,而直接设置偏移量;是没有效果的;效果:不设定position,而去设定top和left是没有效果的;原创 2020-12-25 21:27:52 · 1223 阅读 · 1 评论 -
CSS定位二:绝对定位;绝对定位和相对定位的简单比较
本文的核心是:(1)绝对定位和行对定位位置变化的不同; (2)绝对定位会破坏标准流,相对定位不会破坏标准流; (3)本篇博客,内容相对简单,偏重于基本的入门;绝对定位:绝对定位的参照物是父级元素(相对定位的参照物是元素本身)目录一:绝对定位简单示例1.定位方式设置成绝对定位,没有添加偏移量2.定位方式设置成绝对定位,并添加实际的偏移:二:父div设成相对定位和绝对定位的...原创 2020-12-25 19:25:20 · 603 阅读 · 0 评论 -
CSS定位一:相对定位,简单示例
CSS定位部分主要内容是: ●定位有哪些,优劣比较; ●各种定位详细内容; ●层叠模式:z-index; ●相对定位和绝对定位;这部分和CSS浮动部分有点类似,技术内容相对简单,但是在实际应用的时候,各种情况比较复杂,需要看实际效果。目录1.定位有四个属性:2.相对定位(1)没有任何定位时:(2)对div1使用相...原创 2020-12-25 18:22:42 · 475 阅读 · 0 评论 -
CSS浮动十一:清除浮动
为什么清除浮动?: ●为了让父元素不会出现高度崩塌,需要清除子元素的浮动效果; ●如果,为了避免父元素的高度崩塌,而强制规定了父元素的尺寸,就会很不灵活(因为前台的内容大都是从后台获得的,有的时候获得的多,有的时候获得的少),高度就不能自适应了; ●从某个元素开始,不再需要浮动效果了;?????...原创 2020-12-24 14:53:56 · 302 阅读 · 2 评论 -
CSS浮动十:float设计初衷:图文混排
float设计初衷:实现图文混排。后来,随着技术的不断应用,将div用到更多的场合,比如商品列表并排显示便是float的典型应用。目录一:图文混排的实现1.图文混排示例程序:通过“段落和div进行混排”实现2.图文混排示例程序:通过“段落和图片进行混排”实现2.1具体实现代码和效果2.2文字的上面和下面均留有间隔的问题如下:一:图文混排的实现1.图文混排示例程序:通过“段落和div进行混排”实现<!DOCTYPE html><html>.原创 2020-12-24 13:46:42 · 2602 阅读 · 0 评论 -
CSS浮动九:float包裹特性(当父一级的div设成浮动(float)之后,其宽度会自适应里面的内容;)
包裹特性:基准线,行高的概念。通常,在一行中,文字内容通常不是紧挨着这一行的下边线的,而是有一段距离;待写……原创 2020-12-24 00:53:53 · 1242 阅读 · 3 评论 -
CSS浮动八:float崩溃特性(主要是:浮动的子元素不能撑起非浮动的父元素。)
目录一:float崩溃1:正常的情况,不会出现崩溃的情况(1)一个空白的div中,如果不进行任何尺寸的设定,并且div里面没有任何内容时,div是没有高度的:(2)当在div中添加内容时候:div中内容的高度就是div的高度;即div中的内容会把div给撑起来;(3.1)可以认为给div设置高度:div的宽度默认充满其所在父一级元素的宽度。(div默认的高度和宽度)(3.2)可以认为给div设置高度:div的宽度默认充满其所在父一级元素的宽度。(div默认的高度和宽度)(4)总.原创 2020-12-23 21:31:46 · 592 阅读 · 3 评论 -
CSS浮动七:浮动(float)
目录一.未设置浮动时:div(块级元素)仍然是标准流二.浮动(float):浮动可以使得div(块级元素)成为脱离标准流1.div1右左浮动(1)div1右浮动:(2)div1左浮动:2.div2左右浮动:(div1未设置成浮动)(1)div2右浮动:(2)div2左浮动:3.问题:为什么有的时候,div能向上浮动? 而有的时候,div又不能向上浮动?(1)div能向上浮动的情况:(2)div不能能向上浮动的情况:注意这个限制4.两点总结分析:覆盖重叠..原创 2020-12-23 13:56:29 · 861 阅读 · 0 评论 -
CSS浮动六:定位机制:标准文档流,脱标流
目录一:定位机制之一:文档流:二:.块级元素:左右排列很难实现,所以需要脱标流三:定位机制之二:脱标流:脱离标准文档流:定位机制主要针对于块级元素;对块级元素进行定位布局,可以使得页面达到美观的效果。因为行级元素会一行一行的排列,很容易实现上下左右的布局;而块级元素则是从上到下排列的,不会左右排列。但是为了使得页面布局更美观,块级元素的左右排列也是需要的;这就是CSS的浮动效果;为了了解浮动,先了解下定位机制:文档流和脱标流的定义;定位机制包括: ●文档流:或...原创 2020-12-22 19:37:18 · 532 阅读 · 3 评论 -
CSS浮动五:行级元素、块级元素
浮动:是CSS中非常重要的一种技术,浮动可以使对象和对象之间的排列方式发生变化,以达到页面布局的效果;接触浮动前,需要先了解几个术语:行级元素、块级元素;1.行级元素行级元素的意思是:这个元素会和其他元素处于同一行,除非这一行满了,否则不会换行;效果:2.块级元素效果:注解:行级元素和块级元素,通过CSS的设置,会有一个互换的效果,后续再了解;...原创 2020-12-22 18:05:56 · 453 阅读 · 0 评论 -
CSS浮动:中段总结
CSS浮动一:介绍了div基本内容,包括div背景色,div大小,div坐标;溢出的处理策略;outline,border等;CSS浮动二:以div为例(div,table,body,等块状元素都可以的),介绍了盒子模型的weight&height(content),border,padding,margin的基本概念;CSS浮动三:重点介绍了盒子模型,主要是示例代码演示;div尺寸设置代码;div溢出处理策略示例;div的margin外边距;以及重要的padding内边距(两种情况);原创 2020-12-22 17:20:31 · 138 阅读 · 0 评论 -
CSS浮动四:元素居中(行级元素居中,多指文字;对象(块级元素)居中,如div,table等)
目录一.行级元素居中:以在div中的文字为例 1.text-align:center;:使文字水平居中 2.垂直居中:line-height:400px; /*设置元素的行高,实现垂直居中的效果,仅仅是效果而已*/二.对象居中(包括但不限于div、table等块级元素)居中一般包括元素居中和对象居中;● 元素居中多是文字居中,比如让div中的文字居中显示;这儿主要针对的是行级元素;● 对象指的是div、table等块级元素;对象居中,是让这些...原创 2020-12-22 16:35:17 · 751 阅读 · 0 评论 -
CSS浮动三:盒子模型示例(重点:padding空间占据问题)
目录一:盒子模型:div设置width,height;溢出隐藏处理:overflow: hidden;margin:外边距示例1.初始代码:两个div,未添加任何效果2.设置div尺寸 如width: 200px;height: 200px;3.div溢出隐藏处理:overflow: hidden;4.div的margin:外边距示例(1)margin前置说明(2)使用通配符*设置所有对象的外边距为0px:(3)设置div的margin:二.padding...原创 2020-12-22 13:41:54 · 1024 阅读 · 0 评论 -
CSS浮动二:盒子模型简介。(盒子模型中的几个属性简介:width&height(content),border,padding,margin;;;盒子模型图示)
目录1.盒子模型中的几个属性:width&height(content),border,padding,margin2.盒子模型图示盒子模型:主要用于改变间距(包括外间距和内间距)。div,table,body,等块状显示的(矩形状态、矩形区域显示的)都可以用上盒子模型这种技术。这篇博客,以div为例,演示盒子模型的使用;1.盒子模型中的几个属性:width&height(content),border,padding,margin● width&..原创 2020-12-21 17:42:10 · 468 阅读 · 0 评论 -
CSS浮动一:div基本介绍(背景色,大小,坐标位置,溢出处理,outline,border边框)
CSS浮动: ●用于页面布局和美化; ●注意看其具体的效果;多练习,观察效果都是水电费什么是div: ●DIV是层叠样式表中的定位技术,全称为DIVision; ●有的时候,把div称为图层,更多的时候称之为“块”;DVI样式设置: ●div大小,背景设置; ●div溢出(div是个容器,里面可以存放各种类型的内容,比如图片文字段落等,如果内容太多超出了div大小就叫溢出;溢出...原创 2020-12-21 04:20:07 · 1546 阅读 · 1 评论 -
CSS入门十二:选择器的优先级
目录示例程序:!important:强制优先。当同一个标签的class有多个值的时候,产生冲突时的效果:出现组合的情况时候:组合的选择器和其他选择器相比,选线的优先级顺序也是适用的当同一个对象被多个选择器选中并修饰,产生冲突时,哪个选择器的优先级更高就需要考虑了。可以发现,范围越小,定位越精确的,其优先级越高。(ps:第二个行内样式,因为css的应用,在实际中用的不多,除非某些个别情况会少量使用)示例程序:<!DOCTYPE html><html原创 2020-12-21 03:27:04 · 714 阅读 · 0 评论 -
CSS入门十一:其他选择器(id,*,逗号,空格,>,+,[])
前几片博文,CSS入门一到CSS入门七中,各种例子中,选择器使用的标签选择器和类选择器。 CSS入门八到CSS入门十中,主要是伪类选择器和伪元素选择器;那么除了,标签选择器、类选择器;伪类选择器、伪元素选择器之外,还有哪些选择器?都是输的●1.id选择器已知类选择器是可以重复的id选择器不能重复,要是非得重复,不会报语法错,但再情理上不赞成这样写啦,否则容易给自己和队友挖坑。。。。...原创 2020-12-21 02:51:31 · 2329 阅读 · 1 评论 -
CSS入门十:伪元素选择器
目录伪元素选择器:实例:未使用任何伪元素效果时:2.::before:在前面添加内容3.::after:在后面添加内容4.::first-line:选择制定选择器的首行5.::first-letter:选择文本的第一个字符1.::selection:选择制定元素中,被用户选中的内容。这个以后使用的频率可能略高。前置介绍:CSS入门八(状态性选择)和CSS入门九(结构性选择)两篇博客主要介绍了伪类选择器;无论是状态性选择还是结构性选择,都是以选择独立的个体为主...原创 2020-12-20 23:44:41 · 922 阅读 · 0 评论 -
CSS入门九:伪类的分类;结构性伪类(5个);
目录1.结构性伪类●1.:first-child:选择父元素中第一个子元素。第一个,苛刻的。●5.:first-of-type:第一个元素的设置,这个元素的位置,在所有元素中没必要是第一个。第一个,非苛刻●2.:last-child:选择父元素中最后一个子元素。最后一个,苛刻的●3.:nth-child():如 p:nth-child(2),父元素中,第二个元素恰好也为<p>时设置(实测,如果其第二个不是p的话,没有效果)。中间的某个,正序,苛刻的●4.:nth-las.原创 2020-12-20 22:44:54 · 1673 阅读 · 0 评论 -
CSS入门八:伪类的基本使用(伪类概述;伪类与超级链接;伪类在label上的应用;伪类在文本框上的应用)(状态伪类)
伪类也是一种“标签”(可能不严谨),这个东西可以应用在很多其他标签上,只是伪类和超链接标签结合在一起用,更契合而已;方式原创 2020-12-19 22:25:10 · 3229 阅读 · 1 评论 -
CSS入门七:列表样式(主要是列表前面序号的样式,圆圈、方框,罗马序号,图片等等)
由先前知道,列表包括无序列表: 有序列表: 列表属性设置,经常用于菜单、规律性展示等场景;这篇博客只涉及列表前面序号样式的简单设置,后续在CSS浮动部分会更深入的了解。1.列表样式的属性:● 1.list-style-type:序号变成,空心圆、方框、数字,拉丁字母等等列表前面的序号的样式;自然下面前几个是无序列表的,后面几个是有序列表的;(实测,可以混用,但应该不提倡这样做吧,可能会引发其他奇怪的问题) ● 2.list-style-po...原创 2020-12-19 12:56:43 · 10049 阅读 · 2 评论 -
CSS入门六:字体样式;字体(楷体、隶书等),斜体,文字加粗,字体大小;
1.字体样式下面四个,font-family和font-size先前已经接触过了;这篇博客的核心内容就是,italic和bold两个;● 2.font-style: italic:斜体,对于大多数文字都可以实现倾斜效果;其本质就是斜体字,这是一种字体;之所以idalic有的时候不灵,是因为对于某些文字,在字库里没有定义这个文字的斜体形式; oblique:斜体,对于所有文字都可以实现斜体效果,比italix更全。让文字倾斜显示,不是斜体字;...原创 2020-12-19 11:23:41 · 4712 阅读 · 1 评论 -
CSS入门五:文本样式;字体颜色:英文字母,十六进制,RGB;文本颜色,字间距,行间距,对齐方式;下划线、上划线…,文本阴影,字母大小写,首行缩进
CSS入门部分已经了解了:CSS简介、样式表分类,内部样式表简单使用;选择器和类选择器简单使用;背景色、背景图;以及外部样式表的简单使用;本篇博客主要介绍,如何对文本设置,包括字体颜色;字间距,行间距,对齐方式;下划线、上划线…,文本阴影,字母大小写,首行缩进等;目录1.字体颜色:英文字母,十六进制,RGB2.文本样式:文本颜色,字间距,行间距,对齐方式3.文本样式:下划线、上划线…,文本阴影,字母大小写,首行缩进1.字体颜色:英文字母,十六进制,RGB● #FFB6C1:.原创 2020-12-19 11:03:29 · 709 阅读 · 1 评论 -
CSS入门四:外部样式表(简单示例);三种样式表的优先级;
目录1.外部样式表2.三种样式表的优先级样式表分类:1.外部样式表以后样式表可能很长很长,外部样式表也有助于分工合作,不会乱。 ●link:用于定义文档与外部资源的关系;一般现在link链接的都是CSS了; ●rel="stylesheet":链接的是样式表; ●type="text/css":要链接的文件类型;这个可以省略; ●href="index.css":要链接的外部样式表文件;...原创 2020-12-19 09:33:28 · 10062 阅读 · 3 评论 -
CSS入门三:背景色,背景图(背景图重复方式,背景图随文字滚动方式,背景图的位置)(示例程序是内部样式表)
背景主要包括,背景色,背景图片那些元素可以设置背景? <body></body>可以,<table></table>可以,凡是矩形显示的位置都是可以设置背景的;以矩形显示的又称块状显示;1.背景属性介绍背景设置的属性包括:1.background-color:背景色; background-color: yellow;2.background-image:背景图片; ba...原创 2020-12-18 23:25:47 · 583 阅读 · 1 评论 -
CSS入门二:常用选择器之类选择器(其中,示例程序包括:简单的背景色,字号设置)(示例程序是内部样式表)
1.什么是选择器其中,类选择器就是class选择器2.选择器示例:主要是类选择器:(1)类选择器使用class="p1";标识,使用时使用:.p1的方式;<!DOCTYPE html><html><head> <title>内部样式表演示</title> <style type="text/css"> p{ background-color: red; font-size: 30px;原创 2020-12-18 19:22:31 · 758 阅读 · 0 评论 -
CSS入门一:CSS简介;样式表分类;内部样式表使用说明;内部样式表简单演示
1.CSS简介●什么是CSS,可称为CS文件,CSS文件,样式表,CS文件等称呼●作用:2.样式表分类样式表分类: ●外部样式表:CSS文件是一个独立的文件; ●内部样式表:在当前文件中嵌套使用; ●行内样式:在当前标签的这一行内使用;3.内部样式表使用说明●样式选择器:有很多种类,当前使用的是其中的一种:标签选择器。后续还有很多其他种选择器;如下图中:对本文件<body></body&...原创 2020-12-18 19:02:07 · 662 阅读 · 2 评论 -
HTML六:利用表格实现表单布局的优化(主要是对齐等显示上的优化)
表格主要作用: ●数据展示,如工资表,课程表等等表格形式; ●布局,早起css和div不常用时,主要通过表格来布局;第四篇博客主要展示其数据展示功能,本篇博客主要说明,如何利用表格进行布局;利用表格的可以控制对齐方式等等技术,实现布局规整的效果。如下代码,通过把控件放在一个表格(table)中,利用表格的对齐等技术,以实现控件显示的更美观:表格利用完毕后,可以把表格的边界设置成border=0,即取消表格显示:注:根据页面需求,下面利用的表格,...原创 2020-12-18 18:27:39 · 2540 阅读 · 0 评论 -
HTML五:表单,基本控件,其他控件(普通列表框,隐藏域,上传文件控件,多行文本框)
表单:有很多控件,可以填写信息,后续提交传至后台。 以前做C#项目时,经常用到表单,其基本思路估计和Java的表单并无二致。目录1.表单基本控件2.表单中的其它控件:普通列表框,隐藏域,上传文件控件,多行文本框1.表单基本控件表单示例:<!DOCTYPE html><html><head> <title>表单</title></head><body> <...原创 2020-12-18 14:09:36 · 549 阅读 · 1 评论 -
HTML四:表格
●HTML部分主要了解HTML标签,其标签主要是字体、段落、注释、标题、图片、超链接、锚点、列表、表格、图表等。这篇博客,主要是表格。原创 2020-12-17 23:25:44 · 414 阅读 · 0 评论 -
HTML三:字体<font></font>;段落<p></p>;注释<!---->;标题<h1></h1>;图片<img src=‘‘>;超链接<a></a>;锚点;列表(无序&有序);
●HTML部分主要了解HTML标签,其标签主要是字体、段落、注释、标题、图片、超链接、锚点、列表、表格、图表等。这篇博客只要介绍:字体<font></font>,段落<p></p>,注释<!---->,标题<h1></h1>,图片<img src=''>,超链接<a></a>,锚点,列表的用法和注意事项。1.字体<font></font>...原创 2020-12-14 13:24:19 · 1889 阅读 · 1 评论 -
HTML二:html开发工具sublime下载;第一个html页面;html文件结构
一:html开发工具sublime下载:sublime下载地址:http://www.sublimetext.com;下载后,根据提示点击安装即可;二:第一个html界面生成过程:后面回头来看,这种创建过程可能稍显简单和弱智。(1)新建一文件夹,文件夹内新建一html文件;(html文件的扩展名也可以是htm,但一般常用html)(2)在sublime中,通过File→Open Folder打开所建文件夹;(3)可以对first.html进行编辑,然后使用Chrome浏览器打原创 2020-12-14 13:11:24 · 272 阅读 · 1 评论 -
HTML一:引入
一个HTML网页包括: ●html:完成页面各组成部分的搭建;诸如页面元素,标签、表格、表单、超链接等等; ●css:进行页面修饰;样式,伪类,盒子模型,页面布局;(多页面运行效果,体味css的作用) ●JavaScript:让html页面具有很多功能;Dom,事件,函数等。控制页面中的元素,实现一定的功能,让页面更加聪明。注:(1)JavaEE:重点介绍Java的各种语法,其逻辑性比较强,可能更加偏重于理论。(1.2)而进入Javaweb开...原创 2020-12-13 22:01:19 · 196 阅读 · 1 评论