Web—第一阶段
关注
分享
扫一扫
HTML基础+CSS基础+JS基础
Kong_十六
慢慢来，才是快。
展开
-
原生js小游戏
emmmmmm，这个小小的游戏，其实也是模仿别人的拉，但是，我自己又做了一个另外功能的。哈哈哈哈！！按钮点击类型看下大概的效果呗，就是有九个选项，按下不同的方向，就能让小人转变方向进行移动。核心：定时器、动画、点击事件对象。案例核心就是这三点。动画的话，其实是分两部分，首先，我们得让小人自己动起来，核心就是利用定时器改变img得src属性。其次我们需要让动起来的小人向上向...原创 2020-04-11 22:09:45 · 7845 阅读 · 5 评论 -
JavaScript基础——BOM基础
目录写在前面的反思BOM笔记案例说明常用事件定时器this指向问题JS执行机制写在前面的反思用了大概一个星期的时间吧，把DOM的基础知识点和对应的一些案例过了一遍。其实我也没有严格要求自己在多长多长时间内去学完多少多少知识或者看完哪部分知识。我都是看视频、记笔记，然后再整理整理笔记，练习练习视频里面的案例，敲敲代码，整理思路。就是在敲代码的过程中要试着去复...原创 2020-03-13 20:25:06 · 491 阅读 · 0 评论 -
CSS——转换小案例
CSS中的转换：transform位移 transform：translate（x，y）；水平方向x和垂直方向y，值为数字或者百分比 transform：translateX（num）；水平方向 transform：translateY（num）；垂直方向转换中位移最大的优点：不影响其他盒子的位置里面的百分...原创 2020-02-26 22:10:40 · 248 阅读 · 0 评论 -
HTML+CSS实战---------一个电商类的小型项目：品优购（三）
昨天完成到了main主体区域板块。公共样式写好了，就该新建一个CSS文件单独为首页index设置样式。进度有点慢，因为昨天出现了问题，debug都用了半个小时，最后找到出问题的地方。就是有一个盒子的高度没有控制好，导致底部分布局坏掉了，最后通过控制台进行调试的。所以，当遇到问题的时候，先不要去找代码，先去控制台调试，慢慢慢来，不能着急，一定要细心，仔细。切图也是一样的，一定要细...原创 2020-02-19 10:37:44 · 1706 阅读 · 2 评论 -
品优购项目学习总结（一）
网站的ico图标这个图标就是主页面上面的小图标，与页面的title一起显示的。图标的引用<!--图标--><linkrel="shortcuticon"href="bitbug_favicon.ico"/>href：值为图标的路径注意：图标最好要放在项目的根目录下，防止出错图标的制作链接——比特虫在线制作这...原创 2020-02-17 14:47:35 · 1213 阅读 · 0 评论 -
HTML+CSS实战---------一个电商类的小型项目：品优购（二）
费了半天劲，终于把头和尾部的样式做完了。下次更新就是我画得页面了。期待着自己（哈哈哈哈哈哈哈哈）还有很多不足的地方，需要反思，很多地方就是凭借自己的想法来的，代码有点冗余（我改不了啊啊啊啊）。前期嘛，就是练手找布局的思路，学了浮动、定位，但是还是不能上来就可以确定是用定位好还是用浮动好，emmmmmm。。。。这是我需要克服的问题。还有一点，padding和margin有时候也不知道应该...原创 2020-02-17 08:03:52 · 1306 阅读 · 2 评论 -
网站优化的三大标签！！！
SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”！常见的搜索引擎，像百度，谷歌，搜狗等等...........SEO是指通过对网站进行站内优化、网站结构调整、网站内容建设、网站代码优化等)和站外优化，从而提高网站的关键词排名以及公司产品的曝光度。 简单的说就是，把产品做好，搜索引擎就会介绍客户来。 emmmmmmm.........原创 2020-02-14 21:43:05 · 371 阅读 · 0 评论 -
HTML+CSS实战---------一个电商类的小型项目：品优购（一）
模仿做的一个小型网站，仅限于前端页面的构建。资源实在哔哩哔哩上面找的，若是侵权了请联系我，立刻删除。原创 2020-02-14 22:00:04 · 2015 阅读 · 1 评论 -
淘宝顶部导航——待解决的问题——已解决
控制台显示：多了三个空的a标签。HTML：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="中国大陆.css"> <title>淘宝网 -...原创 2020-02-09 21:52:15 · 503 阅读 · 1 评论 -
纯CSS制作二级导航
主要思路：默认显示一级导航，二级导航隐藏。当鼠标滑过一级导航时二级导航显示。主要方法有两种：a. 一开始设置二级导航display为none、鼠标滑过一级导航时，二级导航displayb. 给二级导航设置绝对定位，left：-1000px，鼠标滑过一级标题时再设置为left：0.在这里我只实现了第一种方法。就这样自己还搞了半天，中间出出现了一些有关选择器的问题。...原创 2020-02-08 20:46:24 · 720 阅读 · 0 评论 -
CSS预处理器—Less
CSS中常用预处理器有两种：Less和Sass。今天接触的是Less预处理器，简单的了解了一下。emmmmm，其实吧，今天主要是看了看Less的语法什么的，Less的语法跟CSS语法很像，及其的相似。Less是预处理，就是在浏览器解析代码之前，Less先执行，CSS是浏览器解析的。Less通过解析，生成CSS文件，应用在页面中。Less比CSS强大，有很多CSS没有的东西，比较灵活一点。...原创 2020-02-05 22:13:00 · 307 阅读 · 0 评论 -
CSS3 flex实现等分布局的小案例
就是模仿了一下移动端的淘宝页面上的一小部分的导航栏哼哼哼 主要是我还得自己切图 然后做，着实有一点点的开心哈哈哈哈哈代码走起：个人还是比较喜欢把样式表单独放。html部分：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>flex做等分布...原创 2020-02-04 17:10:04 · 1054 阅读 · 0 评论 -
新版flex布局新增属性
相对于旧版的flex'布局而言，新版的flex布局新增了很多旧版没有的属性，进而可以实现旧版flex实现不了的布局。其实，严格来说，在旧版flex中，没有侧轴的概念，项目在容器中不会自己换行，即项目不会按照侧轴的方向进行堆砌，但是在新版的flex布局中，可以对侧轴进行更好的控制。容器新增属性flex-wrap：控制容器但是单行/列，多行/列，并且控制侧轴的方向，项目按照侧轴的方向进行堆...原创 2020-02-04 15:24:33 · 349 阅读 · 0 评论 -
flex布局
flex布局也叫弹性布局flex布局有旧版和新版之分，旧版的flex适合移动端开发，新版flex比旧版使用更多学习flex布局得明白三个问题和一个规则1，什么是容器？2，什么是项目？3，什么是主轴和侧轴？4，项目永远在主轴的正方向上排列。旧版flex布局容器布局方向-webkit-box-orient：控制主轴为哪一根（x或y） horizonta...原创 2020-02-03 21:55:16 · 203 阅读 · 1 评论 -
CSS中的过渡与动画
一些简单的动画效果，是可以用纯CSS做出来的。所谓动画，我认为就是交互嘛，让页面不是那么死板。过渡就是让动画的效果不是那么的突兀，显得自然一些。简单写一些过渡和动画的API。过渡transition-duration: 过渡的属性transition-property:过渡的时间transition-timing-function: 过渡的形式 （贝塞尔曲线 搜一...原创 2020-02-03 20:59:50 · 421 阅读 · 0 评论 -
自定义单选按钮
使用表单伪类制作自定义单选按钮lable标签的作用是：点击文字时也会选中按钮。其实也可以包裹着链接与图片，当点击图片时也会点击链接。换句话说就是文字与链接绑在一起、文字与按钮绑在一起。这样用户体验会好一点，不用必须点中按钮才会选中。<!DOCTYPE html><html> <head> <meta charset="utf-8"&...原创 2020-02-02 21:23:47 · 497 阅读 · 0 评论 -
结构性伪类----:not的使用
结构性伪类中的：not（选择器）在使用时牵扯到的问题。典型的问题：在需求中，每个列表项都需要添加一个效果，除了（选择器）的列表项。这个伪类选择器解决的是：在满足要求中的所有元素中剔除一个不需要满足这个要求的元素可能我的表述不是特别的清楚明了，举个相似的例子就明白了（捂脸捂脸）制作项目栏最后一项不要分割线<!DOCTYPE html><html>...原创 2020-02-02 20:26:32 · 405 阅读 · 0 评论 -
纯CSS制作选项卡----:target的重要性
:target是链接伪类的一种:target表示一个特殊的元素 它的id是URL的片段标识符换句话说就是 有id属性的元素，同时id的属性值是URL的标识符举个例子：做一个简单的选项卡 原理是一样的，回头还可以做一个漂亮一点的<!DOCTYPE html><html> <head> <meta charset="utf-8"&...原创 2020-02-01 11:55:16 · 227 阅读 · 0 评论 -
CSS中的BFC和清除浮动的方法
BFC：Box Formatting Context（块级格式上下文）的缩写。通俗来讲，就是管理块级元素的。一个块级元素开启BFC后，可以管理块内的所有元素的排版布局，但是不能管理自己本身BFC的布局规则a．内部的Box会在垂直方向，一个接一个的放置（块级元素独占一行）b．BFC的区域不会与float box重叠------两列布局：左边固定右边自适应（可以开启BFC）c...原创 2020-01-31 21:31:04 · 292 阅读 · 0 评论 -
CSS3—选择器总结
在开始学习的时候，只是简单的了解了一下 id和类选择器，同样这两个选择器个人用的也是最多的。因为前期嘛，主要是学习，不考虑负担和CSS代码冗余的问题，多半会看着元素就像用类选择器和id选择器。再往后学习的时候，会遇到稍微复杂一点的练习就会用到其他一些更好的选择器来实现。所以就想着，把CSS中的所有的选择器都总结总结，也方便后期自己复习看嘛。早起的第二天、打卡！！！！！基本选...原创 2020-01-31 09:57:52 · 197 阅读 · 0 评论 -
盒子和图片的水平垂直居中
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>练习</title> <style type="text/css"> *{ /* 清楚默认样式 */ margin: 0; padding: 0; ...原创 2020-01-15 14:36:58 · 1028 阅读 · 0 评论 -
解决IE6双倍边距bug问题
出现双边距一般都是在排版中遇到的问题。IE6 的双倍边距bug：在IE6中，当为一个向左浮动的元素添加左外边距，或者为一个向右浮动的元素添加右外边距时，这个外边距值将会是设置的值的两倍举个例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...原创 2019-12-24 16:13:14 · 533 阅读 · 0 评论 -
CSS的一个小案例——模拟soso搜搜导航器
CSS中最常用的个人认为是链接方式，即外部连接。通常刚学习的小白，容易忘记在头部中加link标签，比如我，我用的时候，容易忘记写，所以，在使用外部连接方式时一定先把link标签写上。html源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t...原创 2019-11-18 18:15:01 · 248 阅读 · 0 评论 -
用CSS制作简单的导航条和简单的布局框架
导航条和简单的一个布局试着做一些综合性的练习，后期做的页面丰富性会高一点的。导航条在网页中非常常见的，网页中的导航器或者导航条一般都是用无序列表制作的，今天我做了一个简单的导航条和一个简单的布局框架。感兴趣的话可以在我这个代码上修改，也可以自己去试着写写，其实是很简单的。在这里一般我把CSS代码和html写在一起了 方便一点。导航条的源代码<!DOCTYPE html&...原创 2019-11-27 18:46:26 · 938 阅读 · 0 评论 -
适合自学Web的小白—HTML基础
身为大三的我，终于找到了自我。虽然我来CSDN好久了 一直都没有好好i利用它，零落了它，从今天开始，好好宠幸它。自学有一段时间了。今天才来写下我的第一篇博客。接下来写的一些内容个人认为是比较常用而且重要的一些知识点。HTML 基础任何一个html文件必须有文件说明即：<!DOCTYPE html>html文件的基本结构主要分为两大部分：头部和 主体。头部中...原创 2019-11-15 15:13:58 · 350 阅读 · 3 评论