前端
知远同学
年龄永远不是学习的障碍,不断积累,必然有所收获。加油!
展开
-
JS基础学习笔记1(尚硅谷)
一 基础知识1、alert弹出窗口alert("这是我的第一行JS代码");2、向浏览器输出内容document.write("这是我的第一行JS代码");3、向控制台输出内容console.log("这是我的第一行JS代码");4、JS代码的位置<!-- 可以写在HTML元素的属性中 --><button onclick="alert('讨厌,点我干嘛!')">点我</button><!-- 可以将JS代码写在超链接的href属性中,点击原创 2021-02-26 17:14:40 · 167 阅读 · 0 评论 -
简单script函数定义和调用
简单script函数定义和调用。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-02-24 14:02:53 · 1657 阅读 · 0 评论 -
HTML 表单
1、表单在现实生活中,用于提交数据,网页中的表单用于将本地的数据提交给服务器。使用form标签创建表单。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</t原创 2021-02-14 15:19:15 · 133 阅读 · 2 评论 -
CSS 像素的问题
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <!--原创 2021-01-29 18:31:17 · 274 阅读 · 0 评论 -
CSS弹性盒练习-淘宝手淘导航
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ mar原创 2021-01-29 17:51:49 · 337 阅读 · 0 评论 -
CSS 弹性容器和弹性元素的属性学习笔记
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin:原创 2021-01-29 11:23:25 · 327 阅读 · 0 评论 -
CSS 弹性盒导航条练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./reset.原创 2021-01-28 17:02:16 · 285 阅读 · 0 评论 -
CSS 弹性盒学习笔记
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin:原创 2021-01-28 16:48:40 · 77 阅读 · 0 评论 -
CSS 变形
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{原创 2021-01-27 14:53:13 · 186 阅读 · 0 评论 -
CSS 3D六面盒子制作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html{原创 2021-01-26 17:11:26 · 287 阅读 · 0 评论 -
CSS 利用动画制作表盘
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>鸭子表</title> <style> *{ marg.原创 2021-01-26 16:14:28 · 563 阅读 · 1 评论 -
CSS 元素居中
一 当父元素的大小确定时,使得子元素居中的方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>原创 2021-01-26 14:53:49 · 96 阅读 · 0 评论 -
CSS使用过渡使图片动起来
利用CSS代码,实现鼠标移入图片,使得图片动起来。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>.原创 2021-01-26 14:22:13 · 1042 阅读 · 2 评论 -
CSS 利用边框设置三角形
利用边框设置三角形的方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box0{原创 2021-01-15 19:04:58 · 409 阅读 · 0 评论 -
HTML 表格
目录一 基础表格二 长表格三 表格的样式一 基础表格在现实生活中,经常用表格来表示一些格式化的一些数据,例如课程表、人名单,成绩单等。在网页中也需要使用到表格,我们通过table标签来创建一个表格。使用tr表示一行,td表示一个单元格,td嵌套到tr中。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" cont原创 2021-01-07 10:08:33 · 169 阅读 · 0 评论 -
CSS 模拟电影卡片
使用CSS模拟图片中红色区域的部分代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="styl原创 2021-01-05 23:13:08 · 633 阅读 · 1 评论 -
CSS渐变
目录一 线性渐变二 径性渐变一 线性渐变通过渐变可以设置复杂的背景颜色,可以实现从一个颜色向其他颜色过渡的效果。渐变是图片,需要通过background-image来设置,特质是图片,跟图片一样。线性渐变:颜色沿着一条直线发生变化。background-image:linear-gradient(to right,red,yellow);红色在开头,黄色在结尾,中间是过渡区域。线性渐变的开头,可以指定一个渐变的方向,可以写to right,to left,to top,to bottom.还原创 2021-01-05 23:09:00 · 216 阅读 · 0 评论 -
CCS 雪碧图的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{原创 2021-01-02 16:49:59 · 131 阅读 · 0 评论 -
CSS背景
一 背景1、背景颜色background-color:2、背景图片background-image:url(路径),路径可以加引号,避免有些东西显示不出来。背景颜色和背景图片可以同时设置,背景颜色将会成为图片的背景色。如果背景图片小于元素,背景图片会自动在元素中平铺。如果背景图片比元素大,将会有一部分背景图片无法显示。如果背景图片和元素一样大,则会正常显示。background-repeat用来设置背景的重复方式:可选值:repeat 默认值,背景会沿着X轴和Y轴双方向重复;repeat-原创 2020-12-30 23:14:36 · 192 阅读 · 0 评论 -
模仿京东顶部导航条2(带下拉框的制作)
直接上代码,要求见:模仿京东顶部导航条 ,这次带下拉框的制作。代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东顶部导航条练习3</title> &l原创 2020-12-23 22:29:33 · 1267 阅读 · 0 评论 -
模仿京东顶部导航条
任务:模仿京东顶部导航条,只作出样式,下来框不做。主要考察布局、图标字体的使用。案例中涉及的图标字体下载于阿里巴巴iconfont网站,该网站的图标字体数量比较多,适合自己练习使用,如果商用最好提前练习作者,确认版权之后在使用。字体已经下载好,在我的博客资源中心可以下载到,链接:https://download.csdn.net/download/weixin_47401101/13724922代码:<!DOCTYPE html><html lang="en"><原创 2020-12-18 23:23:20 · 984 阅读 · 2 评论 -
CSS行高、字体简写属性、文本样式学习笔记
目录一 行高二 字体的简写属性三 文本的样式一 行高行高:line-height,指的是文字占有的实际高度,可以通过line-height设置行高。行高可以直接指定一个大小,单位可以是px 或者 em,也可以直接设置一个整数,将是字体大小的倍数;line-height:2;表示行高是字体大小的2倍。默认是1.33;字体框:字体存在的格子,设置font-size是设置字体框的大小。行高会在字体框的上下平均分配。一般会将行高设置为和高度一样的值,使得单行字体居中。行间距=行高-字体大小。二原创 2020-12-17 10:12:26 · 1024 阅读 · 0 评论 -
CSS字体和图标字体
目录一 字体font二 图标字体三 阿里巴巴iconfont图标字体使用方法一 字体font字体相关的样式:color:用来设置字体的颜色;严格意义上color设置前景色,一般都是这样设置;font-size:设置字体的大小,和font-size相关的单位:em相当于当前元素的一个font-size;rem相当于根元素的一个font-size;font-family:指定字体族,字体格式:可选值:serif(衬线字体) sans-serif(非衬线字体) monospace(等宽字体),这不是指原创 2020-12-16 23:10:23 · 228 阅读 · 0 评论 -
京东首页轮播图练习
没有js的加持,有些效果没有实现,本案例练习的重点是定位和布局,后面学习了js之后继续完善。理解相对定位和绝对定位的使用。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东首页轮原创 2020-12-16 00:39:42 · 1902 阅读 · 0 评论 -
CSS定位相关知识学习笔记
这里写目录标题一 定位position1、相对定位2、绝对定位一 定位positionposition定位,定位是一种更高级的布局手段;通过定位将一个元素摆放到任意位置;使用position属性来设置定位:position可选值:static 默认值,元素是静止的,没有开启定位,写与不写没有区别;relative 开启元素的相对定位;absolute 开启元素的绝对定位;fixed 开启元素的固定定位;sticky 开启元素的粘滞定位;1、相对定位当position设置为relativ原创 2020-12-14 23:02:26 · 135 阅读 · 0 评论 -
CSS浮动与高度塌陷的解决方法
这里写目录标题一浮动一浮动通过浮动将一个元素,向其父元素向左或者向右移动,使用float属性设置元素的浮动。float的可选值:none 默认值,不浮动;left 元素向左浮动;right 元素向右浮动。元素设置浮动以后,水平布局的等式不需要强制成立了,等式失效了。元素设置浮动以后,完全从文档流中脱离,不在占用文档流的位置。所以元素下边在文档流中的元素会自动向上移动。浮动的效果可以使元素横向排列,浮动的特点如下:1、完全脱离文档流,不占用文档流的位置;2、设置浮动以后,元素会向父元素的原创 2020-12-11 23:26:29 · 592 阅读 · 0 评论 -
简单网页布局练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网页简单布局</title> <link rel="stylesheet" href="reset.css"原创 2020-12-10 16:53:10 · 418 阅读 · 0 评论 -
尚硅谷 模拟w3school首页导航条练习
模拟w3school网站首页导航条,使用到css中float属性,使得元素水平布局。代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>w3school导航条</ti原创 2020-12-10 16:15:08 · 456 阅读 · 0 评论 -
CSS盒子的大小、轮廓、阴影、圆角设置方法
目录一盒子的大小一盒子的大小默认情况下盒子的大小由内容区、内边距和外边框共同决定的,但是也是可以通过属性进行设置。box-sizing用来设置盒子尺寸的计算方法(设置width和height的作用):可选值:box-sizing:content-box;默认值,宽度和高度设置内容区的大小;box-sizing:border-box;边框盒子,宽度和高度设置整个盒子可见框的大小,包括内容区、内边距、外边框的大小;...原创 2020-12-08 23:55:51 · 6820 阅读 · 0 评论 -
尚硅谷 模拟网易新闻列表练习
要求网址:https://news.163.com/代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网易新闻列表案例练习2</title> <原创 2020-12-08 16:39:41 · 188 阅读 · 0 评论 -
css著名的 Meyer Reset(重置)
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, .原创 2020-12-06 18:49:02 · 437 阅读 · 0 评论 -
尚硅谷 模拟京东首页图片列表
要求:模拟京东首页,使用css模拟该图片列表。代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片列表</title> <link rel原创 2020-12-03 23:44:33 · 176 阅读 · 0 评论 -
CSS学习2(2020年11月)
目录一继承二选择器的权重一继承样式的继承,为一个元素设置了样式,也会应用到它的后代元素。继承是发生在祖先和后代当中的。继承是好还是不好?利用继承可以将一些通用的样式统一设置到共同的祖先元素上。这样只设置一次就可以让所有的元素具有该样式。注意:并不是所有的样式都会被继承,背景、布局相关的不会被继承。二选择器的权重样式冲突,当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值时,此时就发生了样式的冲突。发生冲突时,应用哪个样式由选择器的权重(优先级)决定。权重:内联样式原创 2020-11-28 00:24:05 · 169 阅读 · 0 评论 -
CSS学习笔记1(2020年11月)
目录一 CSS简介二 CSS语法一 CSS简介1、网页分成三个部分:结构(HTML)表现(CSS)行为(JAVASCRIPT)上一期学习了HTML,现在学习CSS,CSS 指层叠样式表 (Cascading Style Sheets),目前的版本是css3。网页实际上是一个多层的结构,通过CSS可以分别为网页的每一层设置样式,而最终我们看到的是最上层的样式。样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 中,是为了解决内容与表现分离的问题外部样式表可原创 2020-11-23 15:07:19 · 129 阅读 · 0 评论 -
HTML5学习笔记(2020年11月)
一、编辑器的选择建议选择VScode,全称Visual Studio Code,VScode是微软公司出的一个新款编辑器,功能笔记强大,目前来说反馈比较好。VScode的特点如下:开源,免费;自定义配置集成git智能提示强大支持各种文件格式(html/jade/css/less/sass/xml)调试功能强大各种方便的快捷键强大的插件扩展新手使用VScode的步骤如下:1、下载vscode安装包;2、修改语言,下载中文包;3、修改默认设置,设置为自动保存,然后配合LIve ser原创 2020-11-21 01:04:51 · 486 阅读 · 2 评论