![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端基础
阳光搬运工
这个作者很懒,什么都没留下…
展开
-
DOM---选字游戏
上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选字游戏</title> <style type="text/css"> *{ margin原创 2021-08-21 16:12:47 · 106 阅读 · 0 评论 -
DOM---升级瀑布流
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>升级版瀑布流</title> <style type="text/css"> *{ margin: 0.原创 2021-08-21 14:52:31 · 63 阅读 · 0 评论 -
DOM---瀑布流
上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="./css/font_2759667_f8uizjl原创 2021-08-21 13:10:46 · 100 阅读 · 0 评论 -
DOM---轮播图
直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="./css/font_2759667_f8uiz原创 2021-08-21 12:40:41 · 98 阅读 · 0 评论 -
手机版---购物车
js部分主要目标为加减购物的数量和总钱数的计算。上js代码<script type="text/javascript">//获取钱数 var pAllMoney=document.querySelector(".all_money");//获取加号 var addButs=document.getElementsByClassName("add"); var subButs=document.getElementsByClassName("sub"); va原创 2021-08-20 19:53:10 · 85 阅读 · 0 评论 -
网页制作---手风琴效果
废话不多说直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>手风琴效果</title> <style type="text/css"> *原创 2021-08-20 18:57:24 · 185 阅读 · 0 评论 -
网页倒计时制作(js)
p标签设定倒计时时长具体代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>倒计时</title> <style> *原创 2021-08-20 18:09:58 · 710 阅读 · 0 评论 -
DOM与BOM
原创 2021-08-19 17:07:15 · 76 阅读 · 0 评论 -
web---js
原创 2021-08-10 20:52:26 · 47 阅读 · 0 评论 -
web---网格布局
在CSDN学习前端的感想: 在这个暑假,我没有虚度,我很感谢策哥,我的网页设计知识在这个暑假得到了充分的巩固,我也希望能够参加csdn的线下培训,希望看到屏幕后策哥的样子,CSDN的前端课程,真奔主题干脆直爽,我非常喜欢这种风格。 感谢CSDN! ...原创 2021-08-09 16:05:31 · 176 阅读 · 1 评论 -
css预处理器:less
作用:给css添点料原创 2021-08-06 17:55:47 · 45 阅读 · 0 评论 -
web---特效
目录阴影渐变过渡变形滤镜阴影<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style>...原创 2021-08-03 15:52:02 · 78 阅读 · 0 评论 -
web---新的选择器及css变量
选择器css变量例子:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css变量</title> <style> ...原创 2021-08-02 13:27:33 · 58 阅读 · 0 评论 -
web---弹性布局(思维导图)
原创 2021-07-30 18:01:51 · 267 阅读 · 0 评论 -
web---响应式布局
设置viewport<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=3.0"> <title>viewport</title> <st..原创 2021-07-28 16:14:12 · 113 阅读 · 0 评论 -
html5新标签特性
html <header> 语义 :定义页面的头部 页眉</header> <nav> 语义 :定义导航栏 </nav> <article> 语义: 定义文章</article> <section> 语义: 定义区域</section> <aside> 语义: 定义其所处内容之外的内容 侧边</aside> <footer&g...原创 2021-07-27 16:10:45 · 56 阅读 · 0 评论 -
HTML5新标签
header功能:header标签定义页面的页眉信息。【主要用于定义结构,一般来说也可以使用其他方式来创建头部,但使用header就标注出了这个结构是头部,比其他多出了语意】nav:定义导航链接。【主要用于定义结构,一般来说也可以使用其他方式来创建导航,但使用nav就标注出了这个结构是导航,比其他多出了语意】article:功能:定义一个独立的内容【虽然本质上它还是网页中的内容,但特别的是,它就像浏览论坛时浏览某一个帖子一样,它有自己的相对独立的内容,比如它可以有标题(...原创 2021-07-27 15:58:00 · 77 阅读 · 0 评论 -
web---表格、表单(思维导图)
原创 2021-07-26 16:55:02 · 228 阅读 · 0 评论 -
web---定位(思维导图)
原创 2021-07-23 17:09:37 · 184 阅读 · 0 评论 -
web---浮动(思维导图)
原创 2021-07-21 15:04:41 · 103 阅读 · 0 评论 -
web---标签(思维导图)
原创 2021-07-21 13:55:13 · 110 阅读 · 0 评论 -
web---盒子模型(思维导图)
原创 2021-07-20 17:54:29 · 611 阅读 · 0 评论 -
web----思维导图
原创 2021-07-20 16:57:22 · 706 阅读 · 0 评论 -
web---常用css样式
原创 2021-07-19 18:34:02 · 82 阅读 · 0 评论 -
web---relative
positionrelative(相对定位)注意:不影响元素本身的特性相对于原位置进行偏移偏移后,原位置保留<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> div { width: 100px; height: 100px; background-原创 2021-07-19 18:02:45 · 239 阅读 · 0 评论 -
web---浮动
总结:1、float取值 none——不浮动 left——左浮动 right——右浮动 inherit——继承父级2、浮动用于解决水平布局3、两个浮动放在一起会水平摆放4、可以解决换行被解析的问题5、特点:所有标签同排显示 行标签支持所有css样式 默认内容撑开宽高 脱离文档流6、清除浮动原因:因子级浮动脱离文档流,父级无法撑开高度...原创 2021-07-19 17:10:43 · 735 阅读 · 0 评论 -
块标签,行标签,行块标签
1、块标签特点:独占一行 默认占满父级,高度为02、行标签span(空格的话,页面会显示空格,无论多少个空格,只显示一个空格)、a(链接标签)、特点:同排序跟显示 支持不同宽高的设置,内容撑开宽高 不支持上下的margin 不正常显示上下的padding(可能遮盖内容) 换行被解析3、行块标签img特点:同排序跟显示 当只设置宽度或高度时,另一边等...原创 2021-07-19 16:53:08 · 274 阅读 · 0 评论 -
三种基本选择器
1、标签名选择器2、class选择器3、id选择器只有一个,唯一一个4、优先级id>class>标签名原创 2021-07-19 16:15:56 · 408 阅读 · 0 评论 -
web---盒子模型
div----无意义的标签(常用于屏幕的区域划分)网页重中之重:划分区域1、padding:内边距方向:上右下左可以跟1~4个值:1个值或4个值——由上开始,按顺时针赋值 2个值——第一个值给上下,第二个值给右左 3个值——第一个值给上,第二个给右左,第三个给下2、margin:外边距用法同padding注意:1、同级上下产生叠压(谁大听谁) ...原创 2021-07-19 15:57:13 · 680 阅读 · 0 评论 -
web开发基础
1、web1.0时间:1993技术:HTML+CSS特点:静态、被动2、web2.0时间:2003技术:js特点:分享、互动3、web文件夹结构css:用于存放css文件js:用于存放js文件img:用于存放图片资源index.html:web站的首页other.html:web站的其他页面4、web基本结构在sublime text中空处填写html+TAB (web的最简结构)<!DOCTYPE html> ...原创 2021-07-19 15:09:17 · 149 阅读 · 0 评论