![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML
睿里睿气
全栈工程师
展开
-
JavaScript连载12-循环以及举例
一、if和switch的使用场景比较1.分支比较多且无法穷尽的时候,最好使用if,其他情况可以视情况而定2.如果数据不是很大,并且数据都是固定的可以使用switch3.理论上Switch的效率更高4.switch的弊端在于如果是无穷的可能性,那么就不适合使用switch二、循环1.while循环,格式同Java;break,continue使用方法同Java。2.do…while语句格式do{ 语句;}while(条件);3.for循环同Java用法一致4.举个例子<!D原创 2020-05-24 00:20:45 · 116 阅读 · 0 评论 -
HTML连载88-今天把努比亚界面仿真写完了(完结连载)
一、完结HTML连载,手写努比亚首页界面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="CSS/base.css"> <link rel="stylesheet" href="CSS/index.css"&原创 2020-05-14 00:09:43 · 523 阅读 · 0 评论 -
HTML连载87-完善内容区域
一、先上成型之后的图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="CSS/base.css"> <link rel="stylesheet" href="CSS/index.css"></原创 2020-05-10 00:21:22 · 163 阅读 · 0 评论 -
HTML连载86-添加视频、伸缩布局
一、复习了伸缩布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="CSS/base.css"> <...原创 2020-05-06 00:15:32 · 186 阅读 · 0 评论 -
HTML连载85-添加选择圆点
一、添加选择圆点,先上个半成品<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="CSS/base.css"> ...原创 2020-04-27 00:16:28 · 1480 阅读 · 0 评论 -
HTML连载84-添加中部的图片
一、设置图片居中margin:0 auto;这个语法没有效果,对其父元素使用text-align:center;也是没有用的,因为图片太大了,解决方式如下:如果图片的宽度大于了父元素的宽度,不可能使用margin:0 auto;或者text-align:center;来使图片居中如果图片的宽度大于父元素的宽度,可以使用定位流,来使得图片居中,但是定位流的弊端也是比较明显弊端:1.需要写三行代...原创 2020-04-21 00:15:11 · 209 阅读 · 0 评论 -
HTML连载83-编写中间内容层
一、我们填写广告区域<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="CSS/base.css"> <...原创 2020-04-17 00:28:17 · 136 阅读 · 0 评论 -
HTML连载82-努比亚界面顶部区域和广告区域
一、制作顶部区域提示一个快捷键:(1)ctrl+//*.top .top_login>li{*/ /*list-style: none;*/ /*float:right;*//*}*/(2)ctrl+shift+//*.top .top_login>li{ list-style: none; float:right;}*/这两种注释的快...原创 2020-04-12 23:44:54 · 360 阅读 · 0 评论 -
HTML连载81-CSS书写格式、一个手机页面的基本结构
一、CSS书写格式1.行内样式可以直接将CSS代码直接写到开始标签中<div style="color:red">我是div</div>2.内嵌样式可以在一对head标签中写上一堆style标签,然后再style标签中编写CSS代码<head> <style> div{ color:red...原创 2020-04-09 00:12:27 · 263 阅读 · 0 评论 -
HTML连载80-多重背景图片及其练习
一、多重背景图片1.background:url() 重复类型 位置信息,url() 重复类型 位置信息;中间使用英文逗号隔开2.第二种方法就是分开写background-image:url(),url();background-repeat:重复类型,重复类型;background-positon:位置信息,位置信息;<!DOCTYPE html><html l...原创 2020-04-05 00:21:20 · 642 阅读 · 0 评论 -
HTML连载79-背景图片定位区域属性、背景颜色
一、这一节讲解的是背景图片开始的位置也是可以设置的:background-orgin:数值值;这里的属性值就是开始的位置,可分为:padding-left(默认);content-box;border-box <style> *{ margin:0; padding;0; } ...原创 2020-04-01 00:15:35 · 503 阅读 · 0 评论 -
HTML连载78-3D播放器下、背景尺寸属性
一、继续完善之前的页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>D188_3DPlayerXia</title> <style> *{ margin:0...原创 2020-03-28 00:17:16 · 119 阅读 · 0 评论 -
HTML连载77-3D播放器
一、练习一个3D播放器1.注意点:动画中如果有和默认样式同名的属性,会覆盖默认样式中同名的属性2.在编写动画的时候,固定不变的值写在前面,需要变化的值写在后面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>D187_3DPla...原创 2020-03-24 00:27:37 · 326 阅读 · 0 评论 -
HTML连载76-正方体和长方体
一、如何编辑出一个正方体上后下前的顺序编写,最后在写左右<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>D184_3DTransformCube</title> <style> *...原创 2020-03-20 00:13:50 · 180 阅读 · 0 评论 -
HTML连载75-3D转换模块之正方体
一、正方体核心要点就是:使用3D转换模块,以及平移、旋转的在X、Y、Z轴上的应用 <style> *{ margin:0; padding:0; } ul{ width: 200px; height: 200px; ...原创 2020-03-16 00:05:55 · 137 阅读 · 0 评论 -
HTML连载74-制作无限滚动窗口、3D转换模块
一、设计一张无限滚动网页这里面的注释复习了很多知识都是之前学习了但是可能还有些模糊的地方。 <style> *{ padding:0; margin:0; } div{ width: 600px; height: 188px; ...原创 2020-03-12 00:10:17 · 179 阅读 · 0 评论 -
HTML连载73-动画连写、图片连续变化
一、动画模块连写1.animation:动画名称 动画时长 动画运动速度 延迟时间 重复次数 是否循环往复2.简写:animation:动画名称 动画时长; <style> *{ padding:0; margin:0; } div{ w...原创 2020-03-08 00:10:18 · 191 阅读 · 0 评论 -
HTML连载72-动画效果及其他属性
一、动画效果1.过渡与动画相类似,都需要三要素,那么他们的区别在哪里呢?答:过渡必须是人为的触发才会执行动画,动画不需要人为的触发就可以自动执行动画。2.相同点:(1)过度和动画都是用来给元素添加动画的;(2)过渡和动画都是系统新增的一些属性;(3)过渡和动画都需要满足三要素才会有动画效果3.动画的三要素(1)告诉系统需要执行哪个动画;animation-name:动画名称;(2...原创 2020-03-04 00:15:07 · 170 阅读 · 0 评论 -
HTML连载71-翻转菜单练习
一、翻转菜单练习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>D174_OverturnMenu</title> <style> *{ margin:0;...原创 2020-02-28 00:20:19 · 92 阅读 · 0 评论 -
HTML连载70-相片墙、盒子阴影和文字阴影
一、 制作一个相片墙二、<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; ...原创 2020-02-24 00:15:14 · 124 阅读 · 0 评论 -
HTML连载69-透视属性以及其他属性练习
一、透视属性1.什么是透视透视简单来说就是近大远小2.注意点:一定要注意,透视属性必须添加到需要呈现近大远小效果的元素的父元素。3.格式:perspective:数字px;这里的数字代表透视的大小距离。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...原创 2020-02-20 00:22:19 · 285 阅读 · 0 评论 -
HTML连载68-形变中心点、形变中心轴
一、 形变中心点介绍 <style> ul li { width: 100px; height: 100px; list-style: none; float:left; margin:0 auto; /*transfo...原创 2020-02-16 00:35:37 · 241 阅读 · 0 评论 -
HTML连载67-手风琴效果、2D转换模块
一、手风琴效果 <style> *{ margin:0; padding:0; } ul{ width: 960px; height: 300px; margin:100px auto; ...原创 2020-02-12 00:08:47 · 141 阅读 · 0 评论 -
HTML连载66-过度模块的连写、弹性效果
一、过渡模块的连写1.过渡连写格式:过渡属性 过渡时长 运动速度 延迟时间;2.过渡连写注意点:(1)和分开写一样,如果想要多个属性添加过渡效果,也是使用逗号来隔开即可。(2)连写的时候可以省略后面的两个参数,因为只要编写了前面的两个参数就已经满足了过渡的三要素。(3)如果多个属性运动的速度/延迟的时间/持续的时间都一样,那么可以简写为transition:all 0s ...原创 2020-02-08 00:42:26 · 123 阅读 · 0 评论 -
HTML连载65-过渡模块的基本使用
一、过渡模块的基本使用1.*:hover;这个伪类选择器除了可以用在a标签上,还可以用在其他任何标签上。2.过渡三要素:(1)必须要有属性发生变化;(2)必须告诉系统哪个属性需要执行过渡效果;(3)必须告诉系统过渡效果持续的时长。3.注意点:当多个属性需要同时执行过渡效果的时候,可以使用英文逗号进行隔开。例如:transition-property:width,height,back...原创 2020-01-29 16:51:13 · 119 阅读 · 0 评论 -
HTML连载64-a标签伪类选择器的注意点与练习
一、a标签的伪类选择器注意点(1)a标签的伪类选择器可以单独出现,也可以一起出现。也就是可以设置多个状态的样式。(2) a标签的伪类选择器如果一起出现,那么有严格的顺序要求,编写的顺序必须要遵守原则: (love\hate原则,即link\visited\hover\active)默认状态、被访问后的状态、悬停状态、长按状态(3)如果默认状态的阿燕是和被访问过的状态的样式一样,那么可以缩写为...原创 2020-01-19 00:06:45 · 213 阅读 · 0 评论 -
HTML连载63-a标签的伪类选择器
一、a标签的伪类选择器1.通过观察可以发现a标签存在一定状态(1)默认状态,从未被访问过(2)被访问过的状态(3)鼠标长按的状态(4)鼠标悬停在a标签上的演示2.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修改a标签不同状态的样式。a:link{} 用来修改默认的样式a:visited{} 用来修改被点击过之后的样式a:active{} 用来修改被鼠标长按时的状态a...原创 2020-01-15 00:06:32 · 145 阅读 · 0 评论 -
HTML连载62-固定定位练习、z-index属性
一、固定定位应用场景1.练习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>D158_ExerciseOfLocation</title> <style> *{ ...原创 2020-01-11 00:15:40 · 446 阅读 · 0 评论 -
HTML连载61-焦点图、固定定位
一、焦点图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>D156_PictureOfFocus</title> <style> *{ margin:0; ...原创 2020-01-07 00:15:45 · 340 阅读 · 0 评论 -
HTML连载60-水平居中与设计一个团购界面
一、水平居中1.margin:0 auto在绝对定位中就失效了2.如何让绝对定位的元素水平居中?只需要设置绝对定位元素的left:50%;然后再设置绝对定位元素的margin-left:-元素宽的一半;这样就可以完成水平居中了 div{ width:50px;/*如果数值为100%,就代表这个div的宽度就是浏览器的整个宽度*/ ...原创 2020-01-02 00:28:50 · 191 阅读 · 1 评论 -
HTML连载59-子绝父相
一、子绝父相1.只使用相对定位,对图片的位置进行精准定位。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ ...原创 2019-12-27 00:08:47 · 309 阅读 · 0 评论 -
HTML连载58-绝对定位的参考点以及注意事项
一、绝对定位参考点1.规律:(1)默认情况下所有的绝对定位的元素,无论有没有祖先元素,都会以body作为参考点。<style> .box1{ width: 300px; height: 300px; background-color: red; /*position:a...原创 2019-12-23 00:32:16 · 254 阅读 · 0 评论 -
HTML连载57-相对定位和绝对定位
一、定位流1.分类(1)相对定位;(2)绝对定位(3)固定定位(4)静态定位2.什么相对定位相对定位就是相对于自己以前在标准流中的位置来移动。例子: <style> div{ width:100px; height:100px; } .box1{ b...原创 2019-12-18 00:07:38 · 173 阅读 · 0 评论 -
HTML连载56-网易注册界面实战之全部代码
一、今天完成了网易邮箱注册界面的全部编写,编写一个小小的网页就需要这么多时间来进行设计、测量、排版、编写、测试,才能进行使用,同时编写这个网页复习了几乎前面的所有内容,最后来一个汇总就可以了。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <titl...原创 2019-12-11 00:14:26 · 1818 阅读 · 0 评论 -
HTML连载55-网易注册界面实战之input填充
一、又学一招:想要让两个盒子高度对齐,那么让他们浮动起来<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>D139_FrameworkeOfNeteasyInterface</title> <style&g...原创 2019-12-06 00:30:07 · 122 阅读 · 0 评论 -
HTML连载54-网易注册界面实战之信息填写
一、完成了内容中的右边的一部分。练习了三点:小盒子在大盒子中的位置,最好用大盒子的内边距完成布局,而不是用小盒子的外边距来进行布局;复习了ul,li的用法。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>D139_Framewor...原创 2019-12-01 00:17:30 · 168 阅读 · 0 评论 -
HTML连载53-网易注册界面实战之content的头部、content注册信息
一、 这次完成了content部分的右边图片以及content的top部分的边角填充<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>D139_FrameworkeOfNeteasyInterface</title> ...原创 2019-11-27 00:30:30 · 247 阅读 · 0 评论 -
HTML连载52-网易注册界面之上部完成、中部初探
一、看一下注释即可,都是前面学到的知识,然后进行整合完成网页的制作,未完待续,这个网易界面跨度可大三天。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>D139_FrameworkeOfNeteasyInterface</t...原创 2019-11-23 00:07:40 · 109 阅读 · 0 评论 -
HTML51-清除浮动overflow、网易注册界面基本结构搭建
一、overflow:hidden;作用(1)可以将超出标签范围的内容裁剪掉(2)清除浮动 .box1{ background-color: red; /*border:1px white solid;*/ overflow: hidden; } .box2{ ...原创 2019-11-19 00:24:26 · 133 阅读 · 0 评论 -
HTML连载50-伪元素选择器、清除浮动方式五
一、伪元素选择器1.什么是伪元素选择器伪元素选择器作用给指定标签的内容前面添加一个子元素,或者给指定标签的内容后面添加一个子元素。2.格式:标签名称::before{ 属性名称:值;}给指定标签的内容前面添加一个子元素标签名称::after{ 属性名称:值;}给指定标签的内容后面添加一个子元素我们举个例子: div{ width:2...原创 2019-11-15 00:18:22 · 110 阅读 · 0 评论