前端
关注
分享
扫一扫
前端开发必看
理想不闪火
研究开放环境下的深度学习算法、生成模型推理加速和医学图像。
欢迎订阅专栏！
展开
-
使用 jQuery 修改 DOM 方法
一旦你使用jQuery函数找到元素集合后，你就可以使用各种方法更改它们。用该命令设置内部文本 text():$(“h1”).text(“All about cats”);用该命令设置内部文本 html():$(“h1”).html(“I love cats”);用该命令设置属性 attr():$(".dog-pic").attr(“src”, “dog.jpg”);$(".google-link").attr(“href”, “http://www.google.com”);用该命令修改 C原创 2022-03-31 11:56:34 · 1998 阅读 · 0 评论 -
【响应式Web前端设计】CSS3 :nth-of-type() 选择器
<!DOCTYPE html><html><head><style> p:nth-of-type(2){background:#ff0000;}</style></head><body><h1>这是标题</h1><p>第一个段落。</p><p>第二个段落。</p><p>第三个段落。</p><p原创 2021-06-11 16:03:06 · 395 阅读 · 1 评论 -
【响应式Web前端设计】HTML ＜td＞ 标签的 colspan 属性
<html><body><table width="100%" border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td colspan="2">January</td> </tr> <tr> <td cols原创 2021-06-10 19:10:35 · 673 阅读 · 0 评论 -
【响应式Web前端设计】H5新特性
三种写法都可以。当属性值不包括空字符串、“<”、“>”、"="、单引号、双引号等字符时，属性两边的引号可以省略。属性有空格当然就必须有单引号或者双引号。标签不区分大小写 新增的语言标签可以简化页面设计，便于搜素HTML5的内容类型还是text/html格式...原创 2021-06-10 19:04:11 · 297 阅读 · 0 评论 -
【响应式Web前端设计】css如何设置边框的圆角样式？border-radius属性设置圆角样式（图 文）
border-radius包含5种设置圆角样式方式：border-radius ：同时设置4个边框的圆角样式。border-top-left-radius ：设置左上角边框的圆角样式。border-top-right-radius ：设置右上角边框的圆角样式。border-bottom-left-radius ：设置左下角边框的圆角样式。border-bottom-right-radius ：设置右下角边框的圆角样式。图片示例（设置四个边框圆角值为20px）：border-radius的参数原创 2021-06-10 18:49:11 · 2392 阅读 · 0 评论 -
【响应式Web前端设计】css中：overflow：hidden解决塌陷
overflow:hidden是当元素内的内容溢出的时候使它隐藏溢出的部分，即超出部分隐藏。1.我们给一个父元素，里面有两个子元素2.样式如下：给父元素设置背景颜色，子元素设置边框，两个字元素向左浮动。3.运行结果如下：我们发现父元素的背景色并没有显示出来4.给父元素加上overflow：hidden5.运行结果：父元素的背景色被显示出来当子元素浮动时，它的父元素不是不在了，因为父元素的高height：auto为自动值，就是根据里面的内容自动设置高度，由于子元素设置了左浮动，已经浮动起原创 2021-06-10 15:19:09 · 699 阅读 · 0 评论 -
【响应式Web前端设计】CSS浮动(float,clear)讲解
首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。如下图：可以看出，即使div1的宽度很小，页面中一行可以容下div1和div2，div2也不会排在div1后边，因为div元素是独占一行的。 注意，以上这些理论，是指标准流中的div。 小菜认为，无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。 显然标准流已经无法满足需求，这就要用到浮动。 浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不原创 2021-06-10 15:04:52 · 448 阅读 · 0 评论 -
【响应式Web前端设计】!important的用法及作用
div { color: #f00 !important; }div { color: #000; }//上述代码中，ie6及其以下浏览器div的文本颜色为#fff,后面的重写的div样式没有起作用，important的样式属性和覆盖它的样式属性单独使用时(不在一个{}里)，IE 6.0认为!important优先级较高,可以识别!important。...原创 2021-06-09 09:25:58 · 1221 阅读 · 0 评论 -
【响应式Web前端设计】HTML+CSS3 旋转齿轮特效
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>html5+c原创 2021-05-25 09:25:35 · 561 阅读 · 0 评论 -
【响应式Web前端设计】子元素absolute定位时父元素有无relative的区别
.father{ width: 200px; height: 200px; background-color: red; margin:0 auto; /*position: relative;*/ } .son{ width: 50px; height: 50px; background-color:原创 2021-05-25 09:15:47 · 338 阅读 · 0 评论 -
【响应式Web前端设计】new Option()函数的作用（三区联动）
在做三级联动的时候遇见了这个函数，对函数的用法进行一下小总结，不太详细，敬请谅解。作用：用于创建一个新的选项Option()构造函数接受两个参数：文本(text)和值(value);第二个参数可选.虽然这个构造函数会创建一个Object的实例，但是兼容DOM的浏览器会返回一个元素。我们依然可以使用appendChild()将新的选项加到选择框中。例如：var newOption = new Option("Option text","Option value");selectbox.appendCh原创 2021-04-01 19:25:12 · 760 阅读 · 2 评论 -
【响应式Web前端设计】i标签和em标签的区别
很多人以为i标签和em标签都只是HTML用于斜体的标签，并不知道他们有什么区别。其实对于熟悉SEO的人来说，他们的区别挺大的（普通用户略过）。i标签的作用：仅仅是为了让字体显示斜体，对于SEO没什么作用。em标签的作用：不仅可以让字体显示斜体，而且可以加强语气，告诉搜索引擎这里是重要的。...原创 2021-03-31 19:16:28 · 2765 阅读 · 0 评论 -
【响应式Web前端设计】在html页面实时显示系统时间
在html页面实时显示系统时间桌面新建记事本，将下列代码复制粘贴，重命名后缀为.html，保存，用浏览器打开即可<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>系统时间</title></head><body><div id="datetime">原创 2021-03-30 21:30:38 · 3342 阅读 · 1 评论 -
【响应式Web前端设计】一文学会使用Bootstrap！
文章目录1 概念2 Bootstrap简介3 布局容器4 导航栏（navbar）4.1 基本4.2 响应式5 垂直表单-基本表单6 栅格系统7 标签页8 响应式工具请先学习该文1 概念媒体查询媒体(media)查询在 CSS3 上有介绍：CSS3 @media 查询。使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。实例如果浏览器窗口小于 500px, 背景将变为浅蓝色：@media only screen and (max-width: 500px) {body {原创 2021-03-29 17:08:54 · 460 阅读 · 0 评论 -
【响应式Web前端设计】:link、:hover、:active和:visited的区别
:link、:hover、:active和:visited的区别？:link表示鼠标点击之前，也称为原始状态:hover表示鼠标悬停状态:active表示鼠标点击状态:visited表示鼠标点击之后状态<!DOCTYPE html><html lang="en"><head> <meta http-equiv="content-type" content="text/html" charset="UTF-8"> <title原创 2021-03-28 09:58:45 · 1849 阅读 · 0 评论 -
【响应式Web前端设计】HTML DOM padding 属性
定义和用法padding 属性设置元素的内边距。padding 属性定义元素边框与元素内容之间的空间。该属性可采取 4 个值：如果规定一个值，比如 div {padding: 50px} - 所有四个边的 padding 都是 50 px。如果规定两个值，比如 div {padding: 50px 10px} - 上下内边距是 50 px，左右内边距是 10 px。如果规定三个值，比如 div {padding: 50px 10px 20px} - 上内边距是 50 px，左右内边距是 10 p原创 2021-03-28 09:51:22 · 648 阅读 · 0 评论 -
【响应式Web前端设计】Register Demo
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>用户注册</title> <link type="text/css" rel="stylesheet" href="css/register.css"></head><body><div><img class="tree" src="原创 2021-03-28 09:44:26 · 510 阅读 · 0 评论 -
【响应式Web前端设计】H5原生表单验证
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="#" method="get"> <!-- 作者：88304454@qq.com 时间：2021-03-28 描述：原创 2021-03-28 09:30:14 · 360 阅读 · 0 评论 -
【响应式Web前端设计】常用表单控件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="http://lixiang007.top/" method="post" name="search" autocomplete="true"> <input name="sa原创 2021-03-28 09:12:19 · 420 阅读 · 0 评论 -
【响应式Web前端设计】Login Demo
body{ background: url('../img/1.png')no-repeat center center fixed; background-size: cover; padding: 20px;}form{ width: 343px; height: 500px; margin: 0 auto; padding: 30px; border: 1px solid rgba(0,0,0,0.2); /*CSS 属性 border-radius 允许你设置元素的外边框圆角。原创 2021-03-27 21:30:06 · 482 阅读 · 1 评论 -
【响应式Web前端设计】CSS3伪类与伪元素的区别
首先先来看看伪类与伪元素的定义w3c中对于它们是这么解释的CSS中伪类与伪元素的概念是很容易混淆的,今天就来谈谈伪类与伪元素之间的区别伪类：用于向某些选择器添加特殊的效果伪元素：用于将特殊的效果添加到某些选择器讲道理，可能我语文不好，我觉得这两句话是等价的根本不能看出有什么区别都是对某些选择器“加特技”标准有这么一句话翻译过来是这样的CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化这话更抽象，其实意思就是对那些我们不能通过class、id等选择元素的补充区别这个区原创 2021-03-27 21:19:46 · 294 阅读 · 0 评论 -
【响应式Web前端设计】CSS后代选择器和子代选择器
文章目录子代选择器：>号后代选择器：空格文章目录子代选择器：>号后代选择器：空格子代选择器：>号 .father>div{ border: 2px solid blue; }`后代选择器：空格 .father div{ border: 2px solid pink; }后代，顾名思义，子孙后代，不仅包括子还包括孙，曾孙，曾曾孙原创 2021-03-27 21:11:14 · 617 阅读 · 0 评论 -
【响应式Web前端设计】CSS 定位详解
文章目录1 position 属性的作用2 static 属性值3 relative，absolute，fixed3.1 relative 属性值3.2 absolute 属性值3.3 fixed 属性值1 position 属性的作用position属性用来指定一个元素在网页上的位置，一共有4种定位方式，即position属性主要有4个值。staticrelativefixedabsolute2 static 属性值static是position属性的默认值。如果省略position属性，原创 2021-03-27 20:46:30 · 486 阅读 · 1 评论 -
【响应式Web前端设计】Viewport解析
文章目录1 什么是 Viewport?2 设置 Viewport1 什么是 Viewport?viewport 是用户网页的可视区域。viewport 翻译为中文可以叫做"视区"。手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。2 设置 Viewport一个常用的针对移动网页优化过的页面的 viewpo原创 2021-03-02 08:57:23 · 492 阅读 · 0 评论 -
【响应式Web前端设计】Bootstrap入门Demo(导航栏)
文章目录1 导入bootstrap.min.css2 效果3 代码1 导入bootstrap.min.css2 效果3 代码<!-- 作者：88304454@qq.com 时间：2021-03-01 描述：--><!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-w原创 2021-03-01 19:20:25 · 660 阅读 · 0 评论 -
【网页前端设计Front end】JavaScript教程.下（看不懂你来打我）
JavaScript事件及处理onclick事件<html><body><form name=form1> Field:<input type="text" name="field1" value="hello word"><br/> Field:<input type="text" name="field2">...原创 2019-10-04 17:31:42 · 328 阅读 · 0 评论 -
【网页前端设计Front end】JavaScript教程.下（看不懂你来打我）
文章目录onclick事件onmousedown事件文本输入框即选择域的内容变化事件onchangeJavaScript表单处理——radio单选钮JavaScript事件及处理onclick事件<html><body><form name=form1> Field:<input type="text" name="field1" valu...原创 2021-10-06 10:18:32 · 239 阅读 · 0 评论 -
【网页前端设计Front end】JavaScript教程.上（看不懂你来打我）
文章目录**1.JavaScipt的作用和特点****2.JavaScript语法****3.JavaScript函数****4.JavaScirpt的使用方法**如需使用外部文件，需要在标记的src属性中设置该.js文件5.JavaScript内置对象**6.浏览器对象模型BOM**1.JavaScipt的作用和特点可以将JavaScipt看成是Java语言的某种简化版本。嵌入HTMl文档...原创 2020-03-04 21:17:34 · 532 阅读 · 0 评论 -
【网页前端设计Front end】CSS入门（看不懂你来打我）
文章目录**css的基本语法和使用方法****css的层次及其作用优先级****css常用属性****css布局**css的基本语法和使用方法/*选择符组*//*类选择符*//*id选择符*/#intro{ font-size:110%; font-style:italic; color:#0000ff; background-color: transpare...原创 2020-03-04 21:11:52 · 428 阅读 · 0 评论 -
【网页前端设计Front end】HTML语言基础.下(看不懂你来打我)
文章目录文本框，password示例复选框示例单选框示例文件提交按钮标记标记提交按钮和重置按钮HTML表单文本框，password示例<form><p>请输入姓名：<input type="text" name="Name" size="25"></p><input type="password" name="pwd"/>...原创 2020-03-04 21:08:12 · 408 阅读 · 0 评论 -
【网页前端设计Front end】HTML语言基础.上(看不懂你来打我)
文章目录1.HTML文档的基本结构与语法2.HTML标记及其属性3.段落标记4.文字标记5.表格标记6.超链标记7.图片8.列表1.HTML文档的基本结构与语法<html><head><title>一个简单的HTML实例</title></head><body><h2 align="center">一个简...原创 2020-03-04 21:05:18 · 546 阅读 · 0 评论