web前端CSS全局样式,意外的惊喜

开头

Web前端开发基础知识学习路线分享,前端开发入门学习三大基础:HTML、CSS、JavaScript。除此之外还要学习数据可视化、Vue、React、Angular相关框架,熟练运用框架提升开发效率,提升稳定性。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ps5h6U03-1622546305137)(//upload-images.jianshu.io/upload_images/23082890-b561553d82597393.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/771/format/webp)]

html

1,浏览器存储的方式有哪些
2,如何解决跨域的?
3,浏览器 cookie 和 session 的认识。
4,输入URL发生什么?
5,浏览器渲染的步骤
6,页面渲染优化
7,强制缓存和协商缓存
8,GET 和 POST 请求的区别
9,HTTP1.0 / 1.1 / 2.0 及HTTPS
10,介绍下304过程
11,HTTP 状态码
12,Web性能优化

css

1,盒模型
2,如何实现一个最大的正方形
3,一行水平居中,多行居左
4,水平垂直居中
5,两栏布局,左边固定,右边自适应,左右不重叠
6,如何实现左右等高布局
7,画三角形
8,link @import导入css
9,BFC理解

js

1,判断 js 类型的方式
2,ES5 和 ES6 分别几种方式声明变量
3,闭包的概念?优缺点?
4,浅拷贝和深拷贝
5,数组去重的方法
6,DOM 事件有哪些阶段?谈谈对事件代理的理解
7,js 执行机制、事件循环
8,介绍下 promise.all
9,async 和 await,
10,ES6 的 class 和构造函数的区别
11,transform、translate、transition 分别是什么属性?CSS 中常用的实现动画方式,
12,介绍一下rAF(requestAnimationFrame)
13,javascript 的垃圾回收机制讲一下,
14,对前端性能优化有什么了解?一般都通过那几个方面去优化的?

vue

1,Vue 双向绑定原理,
2,描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程?,
3,你是如何理解 Vue 的响应式系统的?,
4,虚拟 DOM 实现原理,
5,既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?,
6,Vue 中 key 值的作用?
7,Vue 的生命周期,
8,Vue 组件间通信有哪些方式?,
9,watch、methods 和 computed 的区别?
10,vue 中怎么重置 data?,
11,组件中写 name 选项有什么作用?
12,vue-router 有哪些钩子函数?
13,route 和 router 的区别是什么?
14,说一下 Vue 和 React 的认识,做一个简单的对比
15,Vue 的 nextTick 的原理是什么?
16,Vuex 有哪几种属性?
17,vue 首屏加载优化
18,Vue 3.0 有没有过了解?
19,vue-cli 替我们做了哪些工作?

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验,干货满满呀!如果你能够一直坚持看到这儿,那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动,或者直接进入你的收藏夹里吃灰,那么我写这篇文章就没多大意义了。所以看完之后,还是多多行动起来吧!

可以非常负责地说,如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话,那么你就至少已经达到了中级开发工程师以上的水平,进入大厂技术这块是基本没有什么问题的了。

以非常负责地说,如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话,那么你就至少已经达到了中级开发工程师以上的水平,进入大厂技术这块是基本没有什么问题的了。

资料领取方式:戳这里前往免费领取

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
### 回答1: 当我们开始为网站或应用程序编写CSS样式表时,我们通常需要创建一组通用样式,以确保整个网站或应用程序保持一致的外观和风格。 以下是一些常见的前端CSS通用样式: 1. 字体和字号:设置网站或应用程序的默认字体和字号。通常使用Sans-serif或Serif字体。 ``` body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; } ``` 2. 颜色:设置文本和背景颜色,以及链接的默认颜色和悬停颜色。 ``` body { color: #333; background-color: #fff; } a { color: #007bff; } a:hover { color: #0056b3; } ``` 3. 边框和阴影:为网站或应用程序中的元素添加边框和阴影效果。 ``` .box { border: 1px solid #ccc; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); } ``` 4. 布局:设置元素的位置和大小,以及页面布局的样式。 ``` .container { max-width: 1200px; margin: 0 auto; } .header { height: 60px; background-color: #333; color: #fff; } .footer { height: 40px; background-color: #333; color: #fff; } ``` 5. 按钮:创建一组通用的按钮样式。 ``` .btn { display: inline-block; padding: 6px 12px; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; border: 1px solid #ccc; border-radius: 4px; background-color: #fff; color: #333; } .btn-primary { background-color: #007bff; border-color: #007bff; color: #fff; } .btn-primary:hover { background-color: #0069d9; border-color: #0062cc; color: #fff; } ``` 以上是一些常见的前端CSS通用样式,但这只是一个开始。在编写CSS样式表时,我们应该根据实际需求创建自己的通用样式,以确保网站或应用程序的外观和风格一致。 ### 回答2: 前端CSS通用样式Web前端开发中常用的一套样式集合,用于统一网页的外观和布局。以下是一份基本的前端CSS通用样式: 1.盒模型样式: * 设置元素的宽度和高度:width、height; * 设置元素的内边距:padding; * 设置元素的外边距:margin; * 设置元素的边框样式和宽度:border。 2.文本样式: * 设置文本颜色:color; * 设置文本大小:font-size; * 设置文本粗细:font-weight; * 设置文本字体:font-family; * 设置文本对齐方式:text-align; * 设置文本装饰:text-decoration。 3.背景样式: * 设置背景颜色:background-color; * 设置背景图片:background-image; * 设置背景重复方式:background-repeat; * 设置背景大小:background-size; * 设置背景位置:background-position。 4.布局样式: * 设置元素的浮动方式:float; * 设置元素的居中方式:text-align: center; * 设置元素的定位方式:position; * 设置元素的显示方式:display。 5.其他样式: * 设置元素的透明度:opacity; * 设置元素的阴影效果:box-shadow; * 设置元素的过渡效果:transition; * 设置元素的动画效果:animation。 以上是一些常用的前端CSS通用样式,可以根据具体需求进行扩展和修改。在前端开发中,通过合理运用这些样式,可以使网页的外观更加统一、美观,并且提高开发效率。 ### 回答3: 前端CSS通用样式是用来设置网页元素外观和布局的一组样式规则。以下是一个简单的示例: ``` /* 设置全局样式 */ body { font-family: Arial, sans-serif; /* 设置字体样式 */ background-color: #f5f5f5; /* 设置背景颜色 */ margin: 0; /* 设置页面边距 */ padding: 0; /* 设置元素内边距 */ } /* 设置链接样式 */ a { color: #337ab7; /* 设置链接颜色 */ text-decoration: none; /* 去除下划线 */ } a:hover { text-decoration: underline; /* 鼠标悬停时增加下划线 */ } /* 设置标题样式 */ h1, h2, h3 { color: #333; /* 设置标题颜色 */ font-weight: bold; /* 设置字体粗细 */ margin: 10px 0; /* 设置标题的上下边距和左右边距 */ } /* 设置按钮样式 */ .button { display: inline-block; /* 行内块级元素 */ background-color: #4caf50; /* 设置按钮背景颜色 */ color: #fff; /* 设置按钮文本颜色 */ padding: 8px 16px; /* 设置按钮内边距 */ border-radius: 4px; /* 设置按钮圆角 */ text-decoration: none; /* 去除按钮下划线 */ } .button:hover { background-color: #45a049; /* 鼠标悬停时改变背景颜色 */ } /* 设置表格样式 */ table { border-collapse: collapse; /* 合并表格边框 */ width: 100%; /* 设置表格宽度为100% */ } th, td { padding: 8px; /* 设置单元格内边距 */ text-align: left; /* 设置文本居左 */ border-bottom: 1px solid #ddd; /* 设置单元格下边框 */ } th { background-color: #f2f2f2; /* 设置表头背景颜色 */ } /* 设置输入框样式 */ input[type=text], textarea { width: 100%; /* 设置输入框宽度为100% */ padding: 12px; /* 设置输入框内边距 */ border: 1px solid #ccc; /* 设置边框 */ border-radius: 4px; /* 设置输入框圆角 */ box-sizing: border-box; /* 设置输入框尺寸计算方式为包含边框和填充 */ } /* 设置图片样式 */ img { max-width: 100%; /* 图片宽度最大为100% */ height: auto; /* 图片高度自动调整 */ } ``` 以上是一个简单的前端CSS通用样式示例,你可以在基础上根据你的项目需求进行修改和扩展。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值