Web前端
关注
分享
扫一扫
主要涉及HTML、CSS、JavaScript、JQuery、Bootstrap、Ajax、Json等一些指示
青叶的全栈之路
绝望就是比你聪明还比你努力！
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
16、弹性布局（flex）
弹性布局（flex）相关概念容器属性子元素属性一、相关概念1.1、什么是Flex？ Flex（Flexible Box）：翻译为弹性布局，用来为盒状模型提供最大的灵活性。 需要注意的是，Flex只有在支持CSS3的情况下才能生效。1.2、Flex容器和项目 采用Flex布局的元素被称为Flex容器，简称容器。它的所有子元素自动成为容器成员，也被称为项目。1.3、主轴和交叉轴 容器默认存在两根轴：水平的主轴和垂直的交叉轴。主轴的开始位置（与边框的交叉点）叫做main原创 2020-07-05 19:29:06 · 310 阅读 · 0 评论 -
15、定位（Position）
定位（Position）相关概念定位组成使用一、相关概念1.1、什么是定位？定位：将一个元素定在某一个位置（坐标）。1.2、为什么要使用定位？定位可以让多个块级元素在一行显示定位可以让一个元素在某一个盒子内固定在任意位置，且可以覆盖其它元素。二、定位组成 定位由两个基本元素组成：定位模式（position）和边偏移（top、right、bottom、left），其中定位模式决定了元素在文档中的定位方式，而边偏移则决定了元素的最终位置（坐标）2.1、定位模式（positio原创 2020-07-05 19:26:20 · 1795 阅读 · 1 评论 -
14、浮动（Fload）
浮动（Fload）相关概念浮动的特性和使用清除浮动一、相关概念1.1、标准流（普通流/文档流）标准流：即标签按照默认的排列方式排列。块级元素：独占一行，从上往下排列。（div、hr、h1~h6、ul、ol、form、table等）行内元素，从左往右排列，碰到父元素边缘自动换行。（span、a、i、em等）1.2、浮动流 浮动流：顾名思义，将物体（元素）向某一个方向浮起来。如果说标准流中的元素是河底的石头，那么浮动流中的元素就是水面上的漂浮物。 河水总是有流向的，石头不会原创 2020-07-05 19:22:45 · 1461 阅读 · 0 评论 -
13、盒子模型
盒子模型（Box Model）盒子组成圆角边框阴影一、盒子组成CSS盒子模型本质上就是一个盒子，其组成为：外边距、边框、内边距、实际内容。1.1、外边距（margin）语法：margin:length;margin：定义外边距的大小，单位（px）/*写法1*/#div1{ margin:10px;/*上下左右的外边距都是10px*/}/*写法2*/#div2{ margin:10px 20px 30px 40px;/*顺序为：上右下左*/}/*写法原创 2020-07-05 19:18:03 · 259 阅读 · 0 评论 -
12、背景
背景背景一、背景background-color：背景色background-img：背景图片background-repeat：平铺background-attachment：图像固定background-size：图像大小1.1、背景色（background-color）语法：background-color:transparent | color;transparent：透明色（默认）color：支持颜色名（英文）、rgb、十六进制<!--案例-->原创 2020-07-05 19:16:07 · 213 阅读 · 0 评论 -
11、常用CSS样式
常用CSS样式字体文本高度与宽度背景色/图像列表一、字体样式font-style：normal(正常)、italic(斜体)font-variant：normal(正常)、small-caps(所有字母变成小型大写字母)font-weight：normal(正常)、bold(粗)、bolder(更粗)、lighter(较细)font-size：字体大小font-family：字体类型font：综合定义，style>variant>weight>size &g原创 2020-07-05 19:12:13 · 262 阅读 · 0 评论 -
10、CSS选择器
CSS选择器CSS选择器一、CSS选择器1.1、通配符选择器*{ /*不需要调用，html全部标签都将使用该样式*/}1.2、标签选择器标签名{ /*不需要调用，所有该类标签都将使用该样式*/}1.3、ID选择器#自定义名称{ /*只有通过id="自定义名称"调用后才会生效，且该样式只能被调用一次*/}1.4、CLASS选择器.自定义名称{ /*只有通过class="自定义名称"调用后才会生效，该样式可以被多次调用*/}前面4种选原创 2020-07-01 19:59:39 · 206 阅读 · 0 评论 -
9、CSS样式引入
CSS入门CSS样式引入一、CSS样式引入1.1、内联样式 标签上使用style属性直接引入CSS样式，即内联样式。<body> <p style="color:red;font-size:24px;">这是一个段落</p> <!--样式用；结尾，哪怕只有一个样式--></body>1.2、内部样式 在头部标签内通过<style></style>设置CSS样式，即内部样式。&原创 2020-07-01 19:56:04 · 468 阅读 · 0 评论 -
8、显示模式转换
显示模式转换相关概念显示模式转换一、相关概念 HTML中的每个元素（标签）都有一个属性display，dispaly属性有3个可选值，分别对应块级、行级、行内块，决定了元素的显示模式。1.1、块级元素 块状元素代表性的就是div，h系列，<li>，<dt>，<dd>，<p> ，<form>，<ul>等等，都可以用div来实现。不过为了可以方便程序员解读代码，一般都会使用特定的语义化标签，使得代码可读性强，且便于原创 2020-07-01 19:55:34 · 274 阅读 · 0 评论 -
7、嵌套页面
嵌套页面framesetiframe一、frameset1.1、背景 frameset曾经是HTML标签中的王者，但是到了现在都很少用了。为什么呢？归根结底还是因为它不支持body标签的原因吧！个人感觉这个frameset还是挺强大的，下面简单介绍下frameset的作用吧~~1.2、作用 相信你肯定不止一次看到过这样的页面：页面顶部和页面左侧的部分永远都不刷新，尽管他们有不少的功能按钮和链接，页面永远都只有右下的部分在刷新内容。这就是frameset的作用。 用来做图书管原创 2020-07-01 19:52:56 · 301 阅读 · 0 评论 -
6、表单
表单<form>标签<input>标签<select>标签<textarea>标签一、<form>标签1.1、说明 主要用于提交表单数据的。1.2、属性action：提交表单数据的URLname：表单名称method：表单项提交方式。get：请求参数会显示在地址栏中。请求参数的长度是有限制的。不太安全。post：请求参数不会显示在地址栏中，被封装在请求体中。请求参数的长度没有限制。相对安全。…总共7种原创 2020-07-01 19:52:21 · 209 阅读 · 0 评论 -
5、列表、表格
列表、表格列表表格一、列表1.1、说明 列表是块级元素。<ul>是无序列表，<ol>是有序列表。1.2、属性无序列表<ul>type：disc——实心圆，square——实心方块，circle——空心圆。有序列表<ol>reverset=“reverset”：将列表设置为降序排列。type：1、A、a、I、i。（后面两个是罗马数字符号）start：规定列表序号的起始下标（数字），最好还是配合type属性一起使用。原创 2020-07-01 19:51:20 · 301 阅读 · 0 评论 -
4、背景和图片
背景和图片背景图片一、背景1.1、说明 <body>标签拥有两个配置背景的属性： 1）、bgcolor：设置页面背景颜色，属性值参考："#000000"、“rgb(0,0,0)”、“red”。 2）、background：设置页面的背景图片，属性值参考："./picture.jpg"1.2、属性1.3、使用<!--案例1--><body bgcolor="red"> <!--设置页面背景为红色--></b原创 2020-07-01 19:48:22 · 188 阅读 · 0 评论 -
3、文本标签
文本标签标题标签<h1> ~ <h6>段落标签<p>文本修饰标签<span>超链接标签<a>其它常用文本标签，斜体、加粗、删除线、下划线、水平线、换行一、<h>标签1.1、说明 <h1>到<h6>用于定义不同级别的标题，标题标签有文本结构的意义，如果只是想要达到类似的样式效果，请用CSS来实现。<h>标签是块级元素，前后会自动换行。1.2、属性1.3、使用<bod原创 2020-07-01 19:47:35 · 1070 阅读 · 0 评论 -
2、头部标签
头部标签<title>标签<meta>标签<link>标签<script>标签一、<title>标签1.1、说明 <title> 标签用于定义文档的标题，提供页面被添加到收藏夹时的标题名称。1.2、使用<!DOCTYPE><html><head> <title>网页名称</title></head></html>原创 2020-07-01 19:46:28 · 367 阅读 · 0 评论 -
1、HTML基本标签
HTML基本标签文档声明<html>标签<head>标签<body>标签 关于HTML的历史这里就不讲了，想要了解可以去百度百科。本章主要将一下HTML的最基本的标签的使用。这些标签都是一个HTML文档必不可少的标签。一、文档声明1.1、说明 <!DOCTYPE> 声明位于HTML文档中的第一行，处于 <html> 标签之前，<!DOCTYPE> 声明不是一个 HTML 标签，它用于告知 Web 浏览器按照原创 2020-07-01 19:43:03 · 257 阅读 · 0 评论