![](https://img-blog.csdnimg.cn/20190918140145169.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Web前端
文章平均质量分 63
前端
来老铁干了这碗代码
算法爱好者 终生学习践行者 雨雪刀霜阻不住 不成大神誓不休
展开
-
数字签名、数字证书、对称加密算法、非对称加密算法、单向加密(散列算法)——Web网络系列学习笔记
数字签名是什么? 1. 鲍勃有两把钥匙,一把是公钥,另一把是私钥。 2. 鲍勃把公钥送给他的朋友们—-帕蒂、道格、苏珊—-每人一把。 3. 苏珊给鲍勃写信,写完后用鲍勃的公钥加密,达到保密的效果。 4. 鲍勃收信后,用私钥解密,看到信件内容。 5. 鲍勃给苏珊回信,写完后用Hash函数,生成信件的摘要(digest)。 6.原创 2021-11-13 20:35:41 · 411 阅读 · 0 评论 -
入门响应式Web?看懂这篇文章就够了!——Web前端系列学习笔记
文章目录视口基础知识视口概念视口基本属性视口基础知识视口概念视口在响应式设计中是一个非常重要的概念。视口的概念针对移动端浏览器,分为两种视口,一种是可见视口即设备大小,另一种是视窗视口即网页宽度。视口基本属性<meta>标签HTML5中,<meta>标签可以用于配置视口属性。<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximu原创 2021-06-28 16:56:04 · 723 阅读 · 2 评论 -
深入理解input中的value、name、id的区别和用法——Web前端自学笔记
value:指该标签本身的值,如<input type="button" value="123">这条语句运行出来时,button按钮上显示的数值就是123;name:指一类控件的名称,可以重复。如<input type="button" name="123" value="提交">这条语句运行出来时,该按钮上显示的值为提交,该按钮的名字是123id:指唯一区分控件的属性值,含义与name相同,不过id值是唯一的,而name允许重复。即:<input type="but原创 2021-06-28 14:52:52 · 6176 阅读 · 1 评论 -
入门JavaScript?看懂这篇文章就够了!——Web前端系列学习笔记
文章目录JavaScript简介什么是JavaScript?JavaScript的构成JavaScript特点JavaScript基础知识JavaScript的引入方式1. 将JS代码嵌入在元素"事件"中2. 内嵌式3. 外链式JavaScript数据类型JavaScript变量JavaScript函数JavaScript对象JavaScript事件处理JavaScript HTML DOMDOM简介DOM应用*1. 按id属性,精确查找一个元素对象*2. 按标签名找*3. 通过name属性查找*4. 通过原创 2021-06-27 20:30:39 · 2282 阅读 · 11 评论 -
一站式服务!图片+代码-构建移动版旅游网站页面
文章目录页面展示技术要点抽象化实现细节代码实现HTML代码CSS代码common.cssmain.css图片页面展示本项目将使用HTML5语义化结构标签来构建一个简单的页面。与此同时,也通过本项目来回顾一下CSS的基础知识。页面效果如右图所示。技术要点HTML5语义化结构标签CSS选择器盒子模型CSS浮动与定位抽象化实现细节侧边栏使用<aside>标签嵌套<nav>标签来实现,在<nav>标签中嵌套<ul>列表实现导航菜单。原创 2021-06-27 10:05:50 · 1923 阅读 · 1 评论 -
【附全部代码+图片】使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记
文章目录页面展示技术要点代码实现html代码CSS代码用到的图片页面展示本项目将使用HTML5+CSS3绘制出HTML5的logo,页面效果如下所示。技术要点HTML5新特性HTML5基本语法CSS3新特性在HTML中引入样式代码实现html代码<!DOCTYPE html><html><head><meta charset="utf-8" /><!--网页标题为HTML5 logo--><title&原创 2021-06-27 10:05:04 · 1287 阅读 · 0 评论 -
深入理解弹性盒布局(fiex-box)——Web前端系列自学笔记
文章目录弹性盒布局弹性盒布局概述弹性盒布局属性displayflex-flowjustify-contentalign-itemsorderflexalign-self总结弹性盒布局小案例实现效果图使用弹性盒布局建设个人社交网站弹性盒布局弹性盒布局概述说到响应式,就不得不提CSS3中的弹性盒布局了,它可以轻松的创建响应式网页布局,为盒状模型增加灵活性。CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式原创 2021-06-27 10:04:50 · 1204 阅读 · 0 评论 -
用HTML和CSS实现一个漂亮的个人博客页面!
文章目录网站结构社交网站个人信息页面实现代码htmlCSS代码图片包网站结构社交网站的个人信息页面主要由div.element嵌套三个<div>标签构成了页面的三个模块。社交网站个人信息页面使用弹性盒对页面进行布局,将div.element设置为弹性盒容器,将div. element-left、div.element-right、div.element-last作为该容器的三个子元素。在PC端子元素按横轴方向顺序排列,并且使用媒体查询,在浏览器窗口小于或等于640px时,子元素原创 2021-06-27 10:04:22 · 4124 阅读 · 0 评论 -
第一个响应式网站之环保网站(源码+图片下载)
文章目录效果图桌面端:移动端代码和包html代码CSS代码图片包效果图桌面端:移动端代码和包html代码<!DOCTYPE html><html lang="en"><head> <title>响应式绿色环保</title> <!-- 自定义主题文件 --> <meta name="viewport" content="width=device-width, initial-scal原创 2021-06-27 10:02:16 · 5435 阅读 · 1 评论 -
保姆级解读!CSS属性transform变形+2D转换+3D转换实例+代码+解析——Web前端系列学习笔记
文章目录transfrom2D转换案例代码效果图元素变形原点3D转换3D转换——案例案例代码transfromtransform,翻译成中文的含义是“改变,使…变形;转换”,用于向元素应用2D或3D 转换。transform属性的基本语法如下所示:transform:none | transform-functions;属性一:默认值为none,适用于内联元素和块元素,表示不进行变形。属性二:用于设置变形函数,可以是一个或多个变形函数列表。2D转换transform-function原创 2021-06-27 10:00:52 · 718 阅读 · 0 评论 -
CSS过渡属性transitions详细解读——Web前端系列学习笔记
文章目录transitionteansition-property 属性名称transtion-duration 花费时间transition –timing -function 时间曲线transition-delay 等待时间样例代码效果图transitiontransition是一个复合属性,由4个属性构成,如下表所示。teansition-property 属性名称transtion-duration 花费时间transition –timing -function 时间曲线t原创 2021-06-27 10:00:44 · 546 阅读 · 0 评论 -
面试官问我圆角边框,我交出了满分的答卷!——Web前端系列学习笔记
文章目录border-radius 属性border-radius的其他写法代码实例效果图border-radius 属性CSS3的圆角边框实际上是在矩形的四个角分别做内切圆,然后通过设置内切圆的半径来控制圆角的弧度。CSS3的圆角边框使用border-radius 属性来实现,基本语法如下所示:border-radius: 1-4 length | % /1-4 length | %;其中:length用于设置对象的圆角半径长度,不可为负值。如果“/”前后的值都存在,那么“/”前面的值原创 2021-06-27 09:56:23 · 477 阅读 · 0 评论 -
【详细解读】CSS渐变用法——Web前端系列学习笔记
文章目录线性渐变属性解析实例代码效果图径向渐变属性解析示例代码效果图多学一招:重复渐变线性渐变属性解析通过关键词来确定渐变的方向。默认值为top(从上向下),取值范围是 [left,right,top,bottom,center,top right,top left,bottom left,bottom right,left center,right center]。注意:IE10只能取[left,top],Chrome则没有[center,left center,right center]。b原创 2021-06-26 15:50:30 · 1061 阅读 · 2 评论 -
【详解】CSS阴影用法——Web前端系列学习笔记
3. CSS阴影和渐变盒阴影对象选择器 { box-shadow:投影方式|| X轴偏移量|| Y轴偏移量 ||阴影模糊半径 || 阴影扩展半径 ||阴影颜色}投影方式:此参数是一个可选值,如果不设值,其默认的投影方式是外阴影,设置阴影类型为“inset”时,其投影就是内阴影。x轴偏移量:是指阴影水平偏移量其值可以是正负值,如果值为正值,则阴影在对象的右边,反之其值为负值时,阴影在对象的左边。y轴偏移量:是指阴影原创 2021-06-26 15:44:33 · 609 阅读 · 0 评论 -
详细解读CSS链接属性——Web前端系列学习笔记
文章目录在实际开发中,网页中的链接有四种状态,具体如下所示:a:link:超级链接的初始状态。a:hover:把鼠标放上去时悬停的状态 。a:active :是鼠标点击时。a:visited:是访问过后的状态。这四种状态的排序有一个有趣的规则——LoVe HAte原则,即按照link、visited、hover、active的顺序进行设置。改变超链接的示例代码如下所示。/*对全站有链接的文字颜色样式为color:#333; 并无下划线*/a{color:#333;text-decorati原创 2021-06-26 15:10:37 · 568 阅读 · 0 评论 -
详细解读CSS优先级——Web前端系列学习笔记
文章目录样式优先级选择器的优先级总结样式优先级CSS优先级即是指CSS样式在浏览器中被解析的权重不同。多重样式(Multiple Styles):如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。一般情况下,优先级如下所示:选择器的优先级CSS选择器的优先级如下所示。内联样式表的权值最高为 1000;id 选择器的权值为 100;class 类选择器的权值为 10;html 标签选择器的权值为 1 ;总结权值越大越优先当权值相等时,后出现的样式表设置要优原创 2021-06-26 15:04:22 · 407 阅读 · 0 评论 -
详解CSS三大特性之层叠性、继承性和重要性——Web前端系列学习笔记
1. CSS层叠性CSS层叠性就是在HTML文件中对于同一个标签元素可以有多个CSS样式存在,当有相同权重的样式存在时,会根据这些CSS样式的前后顺序来决定,处于最后面的CSS样式会被应用,示例代码如下:p{color:red;}p{color:green;}</style><p >小红是一个胆小如鼠的女孩。</p>2. CSS继承性CSS中的某些样式具有继承性,它允许样式不仅应用于某个特定HTML标签,而且应用于其后代。CSS继承性的示例代码如下所示:原创 2021-06-26 15:02:13 · 852 阅读 · 0 评论 -
@font-face详细用法+实例——Web响应式前端学习笔记
@font-face是CSS3的新特性,用于定义服务器字体。通过@font-face规则,开发者便可以使用用户计算机未安装的字体。语法格式@font-face规则的语法格式如下所示。@font-face { font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*;原创 2021-06-26 14:51:56 · 1066 阅读 · 0 评论 -
CSS浮动、定位与z-index层叠等级详解——响应式Web系列学习笔记
文章目录CSS的浮动框1{float:none;}框1{float:right;}框1{float:left;}框1、2、3{float:left;}CSS的定位浮动和定位的使用区别CSS层叠等级在一个网页中,默认情况下块级元素独占一行,是自上而下排列,行内元素自左向右排列,但是在实际的网页布局中往往需要改变这种单调的排列方式,使网页内容变得丰富多彩,CSS的浮动和定位完美的解决了这个问题。CSS的浮动CSS的浮动可以通过float属性进行设置,默认值为none(不浮动)。框1{float:no原创 2021-06-26 14:30:26 · 1417 阅读 · 1 评论 -
CSS盒子模型的使用及其注意事项——响应式Web系列学习笔记
CSS中的一个基本概念就是盒子模型,所谓盒子模型就是把HTML页面中的元素看作是一个矩形区域,即元素的盒子。盒子由margin(外边距)、border(边框)、padding(内边距)、content(内容)四部分组成。多个盒子之间需要注意的问题网页是由多个元素构成的盒子排列而成的。而多个盒子之间会出现外边距合并的现象,具体如下:上下相邻相邻的块元素垂直外边距合并,如果上面的元素有下外边距,下面的元素有上外边距,则垂直边距为两者中的较大者。嵌套块级元素的垂直外边距合并,父元素没有上内边距和边原创 2021-06-26 14:20:01 · 374 阅读 · 0 评论 -
CSS常用选择器、伪元素选择器、伪类选择器大全——响应式Web系列学习笔记
1. 常用的CSS选择器CSS选择器的作用就是从HTML页面中找出特定的某类元素。常用的几类CSS选择器如下表所示。选择器代码示例代码说明通用选择器**{}选择所有元素。标签选择器元素名称a{}、body{}、p{}根据标签选择元素。类选择器.<类名>. beam {}根据class的值选择元素。id选择器#<id值>#logo{}根据id的值选择元素。属性选择器[<条件>][href]{}、原创 2021-06-26 14:17:24 · 652 阅读 · 0 评论 -
HTML中引入CSS的三种方式——响应式Web系列学习笔记
1. 行内式行内式是通过标签的style属性来设置元素的样式,其基本语法格式如下。<标签名 style="属性1:属性值1;属性2:属性值2;">内容</标签名>任何HTML标签都拥有style 属性,用来设置行内式。2. 内嵌式内嵌式是将CSS代码集中写在 HTML文档的头部标签中,并且用<style> 选择器{属性1:属性值1;属性2:属性值2;}</style>3. 链入式链入式是将所有的样式放在一个或多个以.css为扩展名的外部样原创 2021-06-26 13:53:17 · 708 阅读 · 2 评论 -
【哈理工实验二】HTML+CSS3 旋转齿轮特效
实现效果:HTML部分代码:<!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"> &l原创 2021-04-03 09:40:55 · 809 阅读 · 1 评论 -
overflow-x理解_前端系列学习笔记
用法:值描述visible不裁剪内容,可能会显示在内容框之外。hidden裁剪内容 - 不提供滚动机制。scroll裁剪内容 - 提供滚动机制。auto如果溢出框,则应该提供滚动机制。no-display如果内容不适合内容框,则删除整个框。no-content如果内容不适合内容框,则隐藏整个内容。...原创 2021-03-12 00:02:31 · 699 阅读 · 0 评论