html前端基础入门教程-CSDN博客

原创 css怎么设置图片的对比度？

css怎么设置图片的对比度？下面本篇文章给大家介绍一下使用css设置图片对比度的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。css怎么设置图片的对比度？在CSS中，可以使用filter:contrast(%)样式来给图片设置对比度。其中filter属性用于给图片加滤镜效果，设置值为contrast(%)可以调整元素的对比度。示例：<!DO...

2020-04-23 13:23:15 1839

原创 HTML+css零基础入门学习教程之相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。选择相邻兄弟如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：h1 + p {margin-top:50px;}这个选择器读作：“选择紧接在 h1 元素后出现的段...

2020-03-03 21:15:43 824

原创 html+css基础入门学习教程之属性选择器详解

(1)简单属性选择例子1：如果您希望把包含标题（title）的所有元素变为红色，可以写作：*[title] {color:red;}还可以根据多个属性进行选择，只需将属性选择器链接在一起即可例子2：为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写:a[href][title] {color:red;}(2)根据具体属性...

2020-03-03 21:14:41 842

原创 HTML+CSS零基础入门学习教程之类选择器详解基本使用

除了使用标签来进行相同标签CSS选择外，还可以使用类选择器来选择。类选择器前面使用符号.(1)基本使用为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值。例如：<h1 class="important">This heading is very important.</h1><p class="important">Thi...

2020-03-03 21:10:05 2210

原创 HTML+css零基础入门学习教程之1.CSS元素选择器其实就是标签选择器

CSS 元素选择器CSS元素选择器其实就是标签选择器，例如p{color:black;}就是设置页面中的所有p标签的字体颜色为黑色。例子：<html><head><style type="text/css">html {color:black;}h1 {color:blue;}h2 {color:silver;}</style...

2020-03-03 21:05:36 937

原创 html+css基础入门学习教程之浮动的框可以向左或向右移动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。CSS 浮动请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档...

2020-03-03 21:04:22 6733

原创 HTML+css基础入门学习教程在之CSS 绝对定位

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。CSS 绝对定位绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相...

2020-03-03 21:02:36 839

原创 HTML+css基础入门学习教程之CSS 相对定位

置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。CSS 相对定位相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在...

2020-03-03 21:01:12 907 1

原创 html基础入门学习教程CSS 定位 (Positioning) 属性允许你对元素进行定位

CSS 定位 (Positioning) 属性允许你对元素进行定位。CSS 定位和浮动CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。新建一个前端学习qun43...

2020-03-03 20:59:29 711

原创 CSS布局是网页html通过div标签+css样式表代码开发制作的（html）网页的统称。

CSS布局是网页html通过div标签+css样式表代码开发制作的（html）网页的统称。CSS float 属性float浮动属性，用于设置标签对象（如：div、span、a、em等html标签）的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。float的作用：通过css定义float（浮动）让div样式层块，向左或...

2020-03-03 20:58:19 3297

原创 html+css基础入门学习教程之CSS 外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。CSS 外边距合并外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：新建一个前端...

2020-03-03 20:57:18 658

原创 html+css基础入门学习教程之CSS line-height 属性

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。CSS height 属性height 属性用以设置元素的高度，单位可以使用px，em等，通常用使用PX（像素）为html单位。这个属性定义元素内容区的高度，在内容区外面可以增加内边距、边框和外边距。设置段落的高度和宽度：p{ height:100px; width:100p...

2020-03-02 21:37:52 1479

原创 CSS 框模型元素框处理元素内容、内边距、边框和外边距的方式

CSS 框模型概述CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。提示：背景应用于由内容和内边距、边框组成的区域。内边距、边框和外边距都是可选的，默认值是零。但是，许多元素...

2020-03-02 21:36:45 1330

原创 html+css基础入门学习教程之CSS表格 - border 属性

CSS表格 - border 属性border 简写属性在一个声明设置所有的边框属性。font 简写属性在一个声明中设置所有字体属性。可以按顺序设置如下属性：border-widthborder-styleborder-color如下代码：p{border:5px solid red;}具体参数值在下面一一介绍CSS表格 - border-collapse 属...

2020-03-02 21:35:12 989

原创 html+css基础入门学习教程之CSS列表 - list-style 属性

CSS列表从某种意义上讲，不是描述性的文本的任何内容都可以认为是列表。人口普查、太阳系、家谱、参观菜单，甚至你的所有朋友都可以表示为一个列表或者是列表的列表。CSS列表 - list-style 属性list-style 简写属性在一个声明中设置所有的列表属性。该属性是一个简写属性，涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素，所以在普...

2020-03-02 21:34:04 1106

原创 html+css基础入门学习教程之CSS链接 - a:link 属性

CSS链接设置链接的样式能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。链接的特殊性在于能够根据它们所处的状态来设置它们的样式。CSS链接 - a:link 属性a:link - 普通的、未被访问的链接。a:link {background-color:#B2FF99;}新建一个前端学习qun438...

2020-03-02 21:33:05 1610

原创 html+css基础入门学习教程之CSS背景 - background 属性

CSS背景 - background 属性CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。CSS 在这方面的能力远远在 HTML 之上。具体参数值在下面一一介绍CSS背景 - background-attachment 属性background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。background-attac...

2020-03-02 21:31:55 704

原创 html+css基础入门学习教程之CSS文本 - text-indent 属性

CSS文本CSS 文本属性可定义文本的外观。通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。CSS文本 - text-indent 属性text-indent 属性规定文本块中首行文本的缩进。通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。p{text-indent: 5em;}...

2020-03-02 21:30:50 1898

原创 html+css基础入门学习教程之CSS文字 - font-family 属性

CSS文字 - font 属性CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。font 简写属性在一个声明中设置所有字体属性。这个简写属性用于一次设置元素字体的两个或更多方面。使用 icon 等关键字可以适当地设置元素的字体，使之与用户计算机环境中的某个方面一致。注意，如果没有使用这些关键词，至少要指定字体大小和字体系列。可以按顺序设置如下属性...

2020-03-02 21:29:23 1607

原创 html+css基础仏学习教程之HTML 中播放声音或者视频的方法有很多种。

在 HTML 中播放声音或者视频的方法有很多种。HTML 音频问题，以及解决方法在 HTML 中播放音频并不容易！您需要谙熟大量技巧，以确保您的音频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。使用插件浏览器插件是一种扩展浏览器标准...

2020-03-02 21:28:14 1889 1

原创 html+css基础入门学习教程之HTML 布局 - 使用 <div> 元素

网站布局大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。提示即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！HTML 布局 - 使用 <div> 元素新建一...

2020-03-02 21:26:59 1007

原创 html+css基础入门学习教程之HTML 表单和输入

表单表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。表单使用表单标签（<form>）定义。<form>... input 元素...</form>输入多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。...

2020-03-01 21:01:58 1070

原创 html+css基础入门学习教程之HTML <div> 和 <span>

HTML 块元素大多数 HTML 元素被定义为块级元素或内联元素。注："块级元素"译为 block level element，"内联元素"译为 inline element。块级元素在浏览器显示时，通常会以新行来开始（和结束）。例子：<h1>, <p>, <ul>, <table>HTML 内联元素内联元素在显示时通常不会以...

2020-03-01 21:00:51 985

原创 html+css基础入门学习教程之HTML 图像

HTML 图像图像标签（<img>）和源属性（Src）在 HTML 中，图像由 <img> 标签定义。1)<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。src源属性,要在页面上显示图像需要用到这个。src 指 "source"。源属性的值是图像的 URL 地址。定义图像的语法是：<img src="url" />...

2020-03-01 20:59:22 2048

原创 html+css基础入门学习教程之什么是列表,列表分为几种

什么是列表,列表分为几种顾名思义，HTML列表就是显示列表使用的。列表分为无序列表，有序列表和定义列表3种。无序列表无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>。如下代码：<ul><li>Coffee</li><li&g...

2020-03-01 20:58:12 2877

原创 html+css基础入门学习教程之HTML 样式

HTML 样式通过使用 HTML4.0，所有格式化代码均可移出 HTML 文档，然后移入一个独立的样式表。先来看一个例子，代码如下：<head> <style type="text/css"> h1 {color: red} p {color: blue} </style></head>...

2020-03-01 20:56:34 4675 1

原创 hmtl+css基础入门学习教程之HTML 链接

HTML 链接HTML 链接HTML 使用超级链接与网络上的另一个文档相连。超链接可以是文字或图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。通过使用 <a> 标签在 HTML 中创建链接。超链接的代码如：<a href="url">Link text</a>href 属性规定链接的目标，开始标签和结束标签之间的文字被作为超级链接...

2020-03-01 20:55:06 963

原创 html+css基础入门学习教程之HTML 文本格式化

HTML 文本格式化什么是HTML文本格式化HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。如下代码：<p>TThis text is normal</p><b>This text is bold</b><br /><strong>This text is strong</strong&...

2020-03-01 20:53:25 859

原创 html+css基础入门学习教程之html段落

HTML 段落HTML 段落可以把 HTML 文档分割为若干段落，段落是通过 <p> 标签定义的。如下代码：<p>This is a paragraph</p><p>This is another paragraph</p>注释：浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）提示：使用空...

2020-03-01 20:52:28 884

原创 html+css基础教程之html标题学习

HTML 标题标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。<h1>This is a heading</h1><h1>定义最大的标题。<h6>This is a heading</h6><h6> 定义最小的标题。注释：浏览器会自动地在标题的前后添加空行。注释：默认...

2020-03-01 20:51:04 3617

原创 html+css基础教程之html简介和元素

HTML 简介什么是 HTML？HTML即超文本标记语言 (Hyper Text Markup Language)，是用来描述网页的一种语言。超文本标记语言的结构包括"头"部分（外语：Head）、和"主体"部分（外语：Body），其中"头"部提供关于网页的信息，"主体"部分提供网页的具体内容。标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页如下代...

2020-03-01 20:49:41 3662

html前端基础入门教程