![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端入门
文章平均质量分 51
安之ccy
非志无以成学
展开
-
前端入门篇(五十三)JS应用6打地鼠小游戏
1.加载游戏背景和锤子;当鼠标点击游戏背景时,有锤子敲打的动作游戏背景和锤子的大小根据实际下载的图片大小做调整 <style> #scene { width: 500px; height: 349px; background: url(bg.jpg); } #hammer { width: 50px; height: 5原创 2021-02-23 12:21:13 · 2500 阅读 · 14 评论 -
前端入门篇(五十二)外部文件(js)引入
将js文件提前引入在html文件中,js文件定义的变量可以直接在html文件中使用上篇文章中的代码拿来示例:1.将城市名单独拎出来,放在js文件中,原来的index.html文件直接调用provList变量2.将原来的城市信息单独出来效果与之前一致...原创 2021-02-22 17:39:48 · 1001 阅读 · 0 评论 -
前端入门篇(五十一)JS应用5三级城市联动选择
一个select,用数组的方式列出城市名称<body> <select name="" id="prov"></select> <script> var prov = document.getElementById('prov'); var provList = ['北京','上海','广州'] for (var i = 0; i < provList.length; i++){原创 2021-02-22 17:10:18 · 305 阅读 · 0 评论 -
前端入门篇(五十)select创建option元素,清空option元素
方法一:createElement()和appendChild() <select name="" id="prov"></select> <script> var prov = document.getElementById('prov'); //创建元素方法一 var option = document.createElement('option'); option.text = '上海s原创 2021-02-22 16:04:17 · 536 阅读 · 0 评论 -
前端入门篇(四十九)JS应用4转盘抽奖活动记录
1.简易抽奖页面定义一个5行5列的表格,填上1-16,和中间的”开始“,再给一些简单的样式css文件:td { background-color: #666; width: 150px; height: 100px; font-size: 50px; text-align: center;}.select { background-color: #f60;}.start { background-color: #f60; curs原创 2021-02-21 21:11:53 · 644 阅读 · 2 评论 -
前端入门篇(四十八)JS应用3自动切换焦点图问题记录
1.总体分为左右两个部分,分别竖直排列,右边大图一次只显示一张,其他都隐藏html代码:<body> <div class="clearfix"> <div id="left"> <img src="1.jpg" alt=""> <img src="2.jpg" alt=""> <img src="3.jpg" alt="">原创 2021-02-20 11:31:03 · 371 阅读 · 0 评论 -
前端入门篇(四十七)JS应用2弹窗问题记录
1.首先用iframe将腾讯页面内嵌到自己的页面,做案例背景html文件:<iframe src="http://www.qq.com" frameborder="0" width="100%" height="100%"></iframe>此时腾讯页面不能占满整个页面,并且出现两个滚动条;先设置高度宽度均为100%,再在css中设置内嵌页面的高度,直至内嵌页面完全铺满现有页面css文件: body { padding:0; marg原创 2021-02-19 22:58:54 · 184 阅读 · 0 评论 -
前端入门篇(四十六)JS应用1二级下拉菜单问题记录
一级菜单问题记录:html文件:<body> <div> <div class="container"> <ul class="nav-list clearfixed"> <li><a href="">首页</a></li> <li><a href="">关于蝉壳</a原创 2021-02-19 15:43:45 · 660 阅读 · 0 评论 -
前端入门篇(四十五)JS基础12控制菜单固定
当页面滚动,菜单栏被滚动到上方,页面里看不见菜单;设置固定,即使滚动,页面上也能看见菜单html文件:设置id,方便js获取元素<div id = "seckilNav" class="seckill-nav"> <ul id="tabs"> <li class="activate"><em>18:00</em><span><em>即将开始<br>距开始01:25:15</em&原创 2021-02-19 09:45:43 · 298 阅读 · 0 评论 -
前端入门篇(四十四)JS基础11商品信息随选项卡切换
html文件:div下有5个商品页,此处放其中一个的代码,其他类似<div id="lists" class="seckill-goods"> <ul class="clearfix activate"> <li> <div class="bg"> <img src="img/1原创 2021-02-17 14:48:33 · 348 阅读 · 1 评论 -
前端入门篇(四十三)JS基础10选项卡标签切换
想要的效果:点击到选项卡中不同标签时,被选中的标签背景颜色变红html文件:选项卡<div class="seckill-nav"><ul id="tabs"> <li class="activate"><em>18:00</em><span><em>即将开始<br>距开始01:25:15</em></span></li> <li><em原创 2021-02-17 10:58:15 · 340 阅读 · 0 评论 -
前端入门篇(四十二)JS基础9事件的原理
基本概念JS是由事件驱动的方式来操作页面的,当用户操作html元素时,产生事件,会主动去调用事先设定好的方法1.事件源:事件产生的地方2.事件类型:如点击事件3.事件对象:记录信息4.事件处理程序:设定的方法注册概念理解:将可能会发生的事情,先提前报备一下,设定好处理程序1.通过html属性的方式注册属性名:on+事件的名字,如onclick属性值:方法1.1直接在html标签中注册html文件:<body> <div onclick="add()">原创 2021-02-15 11:37:35 · 281 阅读 · 0 评论 -
前端入门篇(四十一)JS基础8动态修改网页内容(DOM操作)
基本概念:1.DOM操作:JS动态修改网页内容2.DOM树:将html文件转换为机器能看得懂的数据结构;包含document节点、标签节点、文本节点;document里面包含相应的方法,一个html文件里有且只有一个;标签节点包含其属性,可用于修改页面样式;文本节点挂靠在标签节点下面;3.注意js时间线查找标签节点1.通过id查找var div1 = document.getElementById('div1');//返回节点2.通过标签名查找var ps = document.原创 2021-02-11 13:06:34 · 4440 阅读 · 2 评论 -
前端入门篇(四十)JS基础7浏览器原理和BOM
浏览器原理和js时间线基本概念:1.操作页面:文字图片等,DOM操作2.操作底层(浏览器):BOM操作浏览器加载页面的过程1.打开浏览器,输入网址,如www.baidu.com/map2.用DNS服务器将网址转为IP地址浏览器将域名www.baidu.com发送给DNS服务器,DNS服务器将对应IP地址转给浏览器3.浏览器把收到的IP地址和域名的对应缓存到本地,下次可以直接使用,不用经过DNS服务器4.浏览器向www.baidu.com发送请求,使用http或https协议,目的地为80原创 2021-02-10 23:23:34 · 354 阅读 · 2 评论 -
前端入门篇(三十九)JS基础6对象
对象的定义一堆变量+一堆函数的集合对象的创建用直接量{}的方式创建:var obj1 = { x: 60, y:70, z:function() {console.log('z func')}}1.x: 60是一个属性,x为属性名,60为属性值;属性与属性之间以逗号隔开2.属性名均为string,会被系统隐式地转为string类型3.如果属性名是纯数字、纯字母、以字母开头的字母+数字,可以不写引号4.如果属性名包含特殊字符(如空格,连接符’-’),就要加上引号(原创 2021-02-10 17:38:47 · 234 阅读 · 0 评论 -
前端入门篇(三十八)JS基础5函数
记录内容如下:1.函数定义、形参、实参;2.函数的arguments;3.函数的作用域;4.函数预解析;5.闭包;6.函数的立即执行原创 2021-02-09 20:47:40 · 297 阅读 · 0 评论 -
前端入门篇(三十七)JS基础4流程控制与循环
if 条件判断//if 条件判断语法格式:if {执行条件} { 执行语句}else if (执行条件) { 执行语句}else { 执行语句}switch选择//switch选择语法格式:switch(表达式的值) { case xxx: 执行语句 break; ... default: 执行语句 break;}var day = 1;switch(day){原创 2021-02-09 17:30:07 · 153 阅读 · 0 评论 -
前端入门篇(三十六)JS基础3数据类型和转换
数据类型js数据为弱类型,统一由var定义/声明js支持的数据类型有:原始类型和对象1.原始类型:数据Number 字符串String 布尔值Boolean2.对象Object: 1.系统自带对象:数组,函数 2.自定义对象:{}3. null空对象, undefined未定义(var a;只声明但不指明类型)数组:var a = [60, 61, 62];使用下标访问值:a[0]、a[1]、a[2]自定义对象:var a = {'a1':60, 'a2':61,原创 2021-02-09 16:44:02 · 225 阅读 · 0 评论 -
前端入门篇(三十五)JS基础2运算符
算术运算符加减乘除取余( + - * / %)加法中,如果有字符串则将加数都转成字符串,再相加;如果没有字符串,最后都转成数字1 + '1' = '11'1 + 'a' = '1a'1 + false = 1false + 'a' = 'falsea'除加法以外的算术运算符,都是变成数字,如果引号包含的不是数字,结果就是NAN1 - '1' = 01 - 'a' = NAN赋值运算符等号=,等号与算术运算符组成的组合运算符(+=; -= ;*=; /= ;%=)a += 10原创 2021-02-08 16:12:41 · 221 阅读 · 0 评论 -
前端入门篇(三十四)JS基础1
概念:1.轻量级编程语言(脚本)2.在浏览器中运行(只需有js解释器即可运行)3.可以做动态页面、验证表单、检查浏览器、创建cookies等4.由逻辑处理、DOM操作(增删改查html元素)、浏览器BOM信息构成引入js的三种方式:1.外部引入:js文件:alert("hello world!")html文件:在head区域<script src="1.js"></script>2.内部引入html文件:在head区域,也可以在body区域 <原创 2021-02-07 22:55:10 · 203 阅读 · 0 评论 -
前端入门篇(三十四)商品信息填入
html文件:<div class="seckill-goods"><ul class="clearfix"> <li> <div class="bg"> <img src="img/1.png" alt=""> </div> <div class="info"> <a href="#" class="name"原创 2021-02-07 17:18:33 · 301 阅读 · 0 评论 -
前端入门篇(三十三)商品列表布局
一行放置3个小框,负margin值的作用html文件:<div class="seckill-goods"> <ul class="clearfix"> <li></li> <li></li> <li></li> </ul></div>css文件:.seckill-goods ul{ margin-righ原创 2021-02-07 14:34:30 · 1682 阅读 · 0 评论 -
前端入门篇(三十二)选项卡
使用em和span辅助设置选项卡文本样式html文件:<div class="seckill-nav"> <ul> <li class="activate"><em>18:00</em><span><em>即将开始<br>距开始01:25:15</em></span></li> <li><em>20:00<原创 2021-02-07 11:52:30 · 289 阅读 · 0 评论 -
前端入门篇(三十一)搜索框和购物车图标
搜索框html文件:<div class="header-search"> <form action="" class="search-form"> <input type="search" class="search-text"> <input type="button" value="" class="search-btn iconfont"> </f原创 2021-02-07 11:07:44 · 1451 阅读 · 0 评论 -
前端入门篇(三十)logo导航栏问题记录
1.链接内加背景图片,需先将链接标签设置为块元素,并设置宽高否则无法显示出图片css文件:.header-log a { display: block; width: 55px; height: 55px; background: #ff6700 url(../img/img.png) no-repeat 50% 50%;}更详细的解释:链接2.获取嵌套标签下的class,注意空格html文件: <div class="header">原创 2021-02-05 11:29:48 · 861 阅读 · 1 评论 -
前端入门篇(二十九)顶部菜单栏问题记录
1.文字靠上解决办法:设置高度和行高,使高度与背后的黑条一致(40px).topbar-nav { height: 40px; line-height: 40px;}2.消除因代码排版而带来的空格(在选项中间加竖线,竖线与选项要分开,鼠标移动到选项时,竖线不应跟着改变样式,所以用span标签括起竖线,另外加样式)如果只是简单添加,会因为代码编写的换行,使竖线与下一个选项间隔一个空格解决:先设置导航栏字号为0,再设置span的高度、行高、字号、margincss文件:原创 2021-02-04 10:46:44 · 671 阅读 · 1 评论 -
前端入门篇(二十八)每行文字统一添加标签快捷方法
1.选中文字2.selection——选中columns selection mode,此时光标在每行文字前3.使用左箭头,取消选中文字,并添加文字4.selection——取消选中columns selection mode5.使用alt+鼠标,可以给多处添加光标,并添加所需文字...原创 2021-02-03 17:16:28 · 784 阅读 · 1 评论 -
前端入门篇(二十七)定位
固定定位使用具体的像素,并且滚轮滚动时不会改变位置css文件:div { width: 200px; height: 200px; background-color: yellow; position: fixed; bottom: 200px; right: 30px;}html文件:<div class="div1">div1</div><!-- 为制造能滚动的效果,添加一百个br,用br*100,回原创 2021-02-03 12:06:30 · 177 阅读 · 0 评论 -
前端入门篇(二十六)浮动float与清除clear
float功能标准流中,块级元素是独占一行的,float可使一行中放进多个块级元素,一行放不下,就到下一行没有添加floatcss文件:```htmldiv { width: 300px; height: 300px; border: 1px solid black;}```html文件:<body> <div class="div1">div1</div> <div class="div2">div2原创 2021-02-03 10:31:48 · 318 阅读 · 1 评论 -
前端入门篇(二十五)记录快速生成方法
标签名.class命名{标签文本内容}*个数$会被替换成从1开始的递增数原创 2021-02-03 09:17:18 · 124 阅读 · 0 评论 -
前端入门篇(二十四)盒子模型
内边距padding如果只写一个数,代表上下左右都是这个间隔如果要写上下左右四个方位,要顺时针写,上-右-下-左background只包含盒子内部的部分,即padding和内容,不包括边框border和外边距css文件:.box1{ border: 1px solid black; /* 上下左右20px */ padding: 20px; /* 上下20px 左右50px */ padding:20px 50px; /* 上20px,左右50px,原创 2021-02-02 10:15:43 · 528 阅读 · 2 评论 -
前端入门篇(二十三)列表样式优化
list-style-type的种类见官网:案例:前面是图片css文件:ul { list-style-type: none;}li { background-image: url("img1.png"); height: 50px; background-repeat: no-repeat; padding:30px 60px 0;}html文件:<body> <ul> <li>第一个原创 2021-01-29 12:25:26 · 206 阅读 · 0 评论 -
前端入门篇(二十二)伪类选择器
伪类选择器,案例:链接状态改变,则样式改变链接四种状态:link初始状态,visited被访问过,hover鼠标悬浮,active点击时css文件:a:link { color:blue}a:active { color: green;}a:hover { color: red; font-size: 30px;}a:visited { color: yellow;}html文件:<body> <a href="#5原创 2021-01-29 12:08:03 · 224 阅读 · 0 评论 -
前端入门篇(二十一)文本
1.字符间距letter-spacing2.字间距word-spacing3.左右方向:direction4.给文字加线:text-decoration5.文字对齐方式:text-align6.缩进text-indent7.英文字母大小写text-transform8.多余的字变成省略号:①width;②white-space:nowrap;③overflow:hidden;④text-overflow:ellipsis9.图片文字结合(垂直对齐、文字浮动)1.字符间距letter-s原创 2021-01-29 11:33:55 · 301 阅读 · 2 评论 -
前端入门篇(二十)字体
1.字体font-family:默认宋体,可以设置多个,当前面的字体没有时,就用后面的,都没有时,用默认字体,逗号隔开2.字号font-size:像素px,em;字号大,是指定高度,宽度根据高度调整,默认16px,16px=1em3.字体粗细font-weight:9个级别,100-900,通常用normal(约等于400的效果)、lighter(细)、bold(粗)4.字体形状font-style:正常normal、斜体italic5.简洁写法顺序:style,weight,size/line-h原创 2021-01-28 22:18:44 · 1509 阅读 · 0 评论 -
前端入门篇(十九)背景
颜色:background-color图片:background-image位置:background-position颜色:background-colorcss文件:body { background-color: greenyellow; }html中的body不添加任何内容效果:图片:background-imagecss文件:body { background-image: url("img1.png");}效果:默认平铺设置成只有沿着y.原创 2021-01-28 11:33:51 · 177 阅读 · 0 评论 -
前端入门篇(十八)伪元素选择器
伪元素:我们写的元素都会带上两个隐藏的伪元素,一个在开始,称为"before",一个在结束,称为"after"伪元素位置如下注释的地方:<body> <p> <!-- <before></before> --> p1 <!-- <after></after> --> </p></body>css文件:p::befo原创 2021-01-27 21:53:13 · 442 阅读 · 3 评论 -
前端入门篇(十七)属性选择器
属性选择器:对带有指定属性的 HTML 元素设置样式。1.基本标签[属性]2.基本标签[属性=值]3.基本标签[属性~=值]:空格隔开,包含指定值的元素4.基本标签[属性^=值]:以指定值开始的元素5.基本标签[属性$=值]:以指定值结束的元素更完整的见官网:1.基本标签[属性]css文件:p[title] { color: red; font-size: 30px; border: 1px solid black;}html文件:<body>原创 2021-01-27 21:18:37 · 534 阅读 · 0 评论 -
前端入门篇(十五)继承原则
继承原则:前提:嵌套的标签1.只有文本相关的样式才能被继承2.块级元素的宽若不设置,则会继承(最接近的)父类元素的宽度,高度不被继承,由内容决定1.只有文本相关的样式才能被继承css文件:.txt { color: red; border:1px solid black;}html文件:<body> <div>div1 <div class="txt">div2 <p>p1<原创 2021-01-27 20:34:34 · 457 阅读 · 1 评论 -
前端入门篇(十六)组合选择器
组合选择器:分组选择器、嵌套选择器、子选择器、相邻同级选择器1.分组选择器,用逗号隔开css文件:div,p { color: red; font-size: 30px; /* border:1px solid black; */}html文件:<body> <div>div1 <div>div2 <ul> <li><p&g原创 2021-01-27 20:09:12 · 640 阅读 · 0 评论