关键词：
1. 写在前面
自从入了前端的坑。坑是越来越大，快把自己埋了。如今又開始搞样式了。
2. CSS样式的写法
CSS样式的写法有这么3种，以下我们一一介绍。
1. 外部样式表
链入外部样式表是这种，一般放在<head></head>里：
<link href="mystyle.css" rel="stylesheet" type="text/css" media="all">…… </head>当中mystyle.css是自己写的CSS文件。内部大概是长这种：
.text-center{
vertical-align: middle;
text-align:center;
display: table-cell;
}
.vw {
width: 50%;
height: 50%;
}
.contentstyle{
transform: scale(0.95);
border-left-color:black;border-left-width:1px;border-left-style:solid;
border-right-color:black;border-right-width:1px;border-right-style:solid;
margin-top:-13px;
}引入的时候，通过class来引入。像以下这样：
<div class="mybackgrounds" id="maindiv">2. 内部样式表
内部样式表大概长这样：
<head> …… <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> …… </head>3. 内嵌样式
内嵌样式一般是这样子的：
<p style="color: sienna;margin-left: 20px;"> 这是一个段落 </p>一般不推荐这第三种这种，一般使用第一种写法。easy管理，也便于重用。
只是这三种样式也是有优先级的：内联式 > 嵌入式 > 外部式，可是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。
事实上总结来说。就是–就近原则（离被设置元素越近优先级别越高）。
3. CSS样式表和Js文件位置
一般来讲引用的外部js放在以下。外部css放在上面这是习惯，其原因例如以下：
1. JS 有可能会改动 DOM.
典型的，可能会有 document.write. 这意味着，在当前 JS 载入和运行完毕前，兴许全部资源的下载有可能是不是必需的。这是 JS 堵塞兴许资源下载的根本原因。
2. JS 的运行有可能依赖最新样式。
比方，可能会有 var width = $(‘#id’).width(). 这意味着，JS 代码在运行前，浏览器必须保证在此 JS 之前的全部 css（不管外链还是内嵌）都已下载和解析完毕。这是 CSS 堵塞兴许 JS 运行的根本原因。
3. CSS要先渲染。
CSS放在前端是页面渲染时首先是依据DOM结构生成一个DOM树然后加上CSS样式生成一个渲染树，假设CSS放在后面可能页面会出现闪跳的感觉，或者是白屏或者布局混乱样式非常丑直到CSS载入完毕。
可是，现代浏览器之间的竞争也十分激烈。他们通常有自己的优化方式。能够进行prefetch优化，这种话。性能是如此重要，现代浏览器在竞争中。在 UI update 线程之外。还会开启还有一个线程。对兴许 JS 和 CSS 提前下载（注意，仅提前下载，并不运行）。有了 prefetch 优化。这意味着，在不存在不论什么堵塞的情况下，理论上 JS 和 CSS 的下载时机都非常优先。和位置无关。
4. iframe与变换缩放
使用iframe的时候。最大的优点就是内网页不用自己写了，能够引用。可是一般会有一个问题。由于iframe有可能仅仅是我们自己网页的一部分，那么引用网页有可能是一个完整的网页，那么这样子的话，会造成显示上的问题。那这时候，事实上使用缩放来做，能够做一个折中的方案，毕竟原网页不是你想改就能改的。
缩放也是有2种的。一种是ZOOM，还有一种是CSS3的transform:scale。那么他们有什么不同呢？
- 首先。他们的来源不同：
还在几年前，zoom还仅仅是IE浏览器自己私有的玩具，可是，如今，除了FireFox浏览器，其它。尤其Chrome和移动端浏览器已经非常好支持zoom属性了。注意。尽管Chrome/Safari浏览器支持了zoom属性。可是，事实上zoom并非标准属性。
而Transform则是CSS3标准，明明白确写入规范的。从IE9+到其它现代浏览器都支持。
- 其次，是他们写法不同：
来看一下他们假设都是缩放一半，应该怎么写：
.zoom-half { zoom: 0.5; }
.scale-half { transform: scale(0.5); } - 最后是他们的效果不同：
zoom缩放是相对于左上角的，而scale默认是相对于元素的中心点缩放的。scale能够通过设置transform-origin来改变缩放的相对位置。当设置transform-origin: 0 0时。scale缩放能够达到和zoom缩放类似的结果。
总而言之还是有一些差异的：
- 浏览器兼容性。IE全族/Chrome/Safari和IE9+现代浏览器的区别。
- 控制缩放的值不一样。
zoom更全面，可是不能是负数。仅仅能等比例控制；而scale尽管仅仅能是数值。可是能负数，能够仅仅控制1个维度。
- zoom的缩放是相对于左上角的；而scale默认是居中缩放；
- zoom的缩放改变了元素占领的空间大小；而scale的缩放占领的原始尺寸不变，页面布局不会发生变化；
- zoom和scale对元素的渲染计算方法可能有差异。
- 对文字的缩放规则不一致。zoom缩放依旧受限于最小12像素中文限制大小；而scale就是纯粹的对图形进行比例控制，文字50%原来尺寸。
- 渲染的性能差异明显。
综合上述原因。iframe应当使用的是transform：scale放缩更好一些。
5.背景渐变
背景渐变这个应该简单的不能再简单了，简单来讲就是长这种：
.mybackgrounds{
background:-webkit-linear-gradient(top,#222222,#FFFFFF);
}这里详细的，来讲。background是设置背景，而-webkit-linear-gradient则表示线性渐变，(top,#222222,#FFFFFF)分别表示的是開始位置（从上到下），開始颜色（灰黑），结束颜色（白色）。更详细的能够看一下以下这里：背景渐变详细解释
6. 输入框组
输入框组就像之前提到的那样，boostrap里提供了一个简单的样式，可是还算美观。详细的写法例如以下：
<div class="form-group">
<div class="input-group ">
<span id="hotwordspan" class="input-group-addon">
热点词汇
</span>
<asp:TextBox ID="TextBox2" class="form-control"runat="server">
</asp:TextBox>
</div>
</div>尤为值得注意的是，class="form-control"输入框的这个class要加入。不然的话。输入框会比前一个span小上一部分，因此必须加上这个。
相同的，<asp:TextBox ID="TextBox2" class="form-control"runat="server"></asp:TextBox>
这个能够换成其它的组件。包含像下拉框、选择框、输入框等等都能够。
7. 时间选择
时间框也是非经常见的组件。我们来看一下长什么样：
<div class="form-group">
<div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
<span class="input-group-addon">选择日期</span>
<!--这是终于获取日期的框-->
<asp:TextBox ID="TextBox1" class="form-control" runat="server"></asp:TextBox>
<!--这是一个清除图标-->
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<!--这是一个日期图标-->
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<!--这是一个展示日历框-->
<input type="hidden" id="dtp_input1" value="" />
</div>这都写完了就完毕了么？不。这个组件被称为是Js组件，因此还须要写以下js代码：
$(‘.form_date‘).datetimepicker({
format: ‘yyyy-mm-dd‘,
weekStart: 1,
autoclose: true,
startView: 2,
minView: 2,
forceParse: false,
//选择语言
language: ‘zh-CN‘,
//今天button可用否
todayBtn: true,
//今天高亮否
todayHighlight: true,
//初始化日期
initialDate: ‘2016-07-01‘,
});当然。把这些都写完了以后，还是不成功的话。你须要考虑以下有没有引入这个：
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen" />上一个是Bootstrap样式，下一个是datetimepicker组件。
纯小白学编程的感受
...没事看看教程视频，打打代码，有时忍不住就打打游戏。对于一个零基础，初中文化而且英语水平接近于零的人来说，在网上看教学视频自学真的有难度，遇到大一点的问题，在网上查找不到方法，完全找不到人可以帮忙解决一... 查看详情
前端小白，自学前端遇到的各种bug
...不会利于百度搜索呢？）① 关键词：idclass一起hover 一个标签<li>同时设置了id和class，我仅用id设置了背景色，然后使用class设置link， 查看详情
初入前端，面对一个项目应注意哪些？
前言：对于初入职场的前端小白来说，一整个项目来了，顿时感觉压力山大，张皇失措，也总会感到手忙脚乱。其实不用怕，拆分步骤，把每个步骤做好，做细，一切都迎刃而解，犹如顺藤摸瓜般畅快淋漓。目录：概念的介绍（... 查看详情
脚本安装数据库
...方面遇到了麻烦，不论是yum装还是源码安装代码都很多，对于一些有基础的人来说不是×××烦但是对于一些小白来说，自己手打代码，代码又很多，打错很容易，排错有很浪费时间，所以在这里给那些刚入门的小白一个便捷的方... 查看详情
简单粗暴的在vmware虚拟机中固定ip
虚拟机对于很多做测试的或者在学习测试中的人来说是位常客，经常会用到，但是虚拟机重启之后，很多人遇到虚拟机ip变化，很是头痛，我在学习过程中也遇到了这个问题，百度了很多办法，有些办法对于网络知识小白来说难... 查看详情
小白有一个关于python递归的问题求教
...查完后才能进行加（相当于你的返回上级目录的操作）。对于每个省来说，类似的，只要让每个市进行人口普查，然后把结果相加即可。每个省也都要等到它的所有市都普查完毕后才能相加。同理，每个市对于每个县也是同样的... 查看详情
2020年小白学习web前端应该知道的学习路线
...o;高光时刻”，因此，现在学习web前端正当时。那么，对于零基础小白而言，如何才能快速学习web前端呢？下面，小编就为大家分享web前端学习路线。很多对于web前端工程师并不了解，先给大家介绍一下什么 查看详情
懒人笔记web前端开发库(代码片段)
...相关工具和库。Web框架用的是Django，不得不说，对于我这样的前端小白来说，上手容易很多。也让我进一步了解到Python的强大。工具用途说明djangoweb框架前端小白快速上手，功能强大，为了和django-celery搭配& 查看详情
小白该如何培养自己的产品感？
对于产品经理来说，产品感是非常重要的东西。我们都说生活是最好的老师，对于产品新人来说，我们如何通过生活这个老师培养自己的产品感觉呢？下面就围绕这个问题和大家分享一二。 一、什么是产品感觉？ 我翻阅了很多... 查看详情
3分钟学会sessionstorage用法
...动端开发过程中遇到一个运营提出的所谓技术难点需求，对于原生APP来说轻而易举，毕竟自己的APP用户操作指哪打哪，但是H5该怎么做?H5就实现不了么？对于一个爱研究攻克这些前端棘手问题的我来说，我没尝试过，我是拒绝对... 查看详情
一个编程小白，如何入门app软件开发领域？
...App软件开发领域呢？如何快速掌握App开发技术呢？ 对于APP开发，如何选择原生与混合，小编的意见就是选择自己擅长的，对于新手来说，选择简单的。从无到有，循序 查看详情
正确代码之-grunt
...前端js激增的态势，一个项目下来几十个js文件轻轻松松对于复杂一点的单页应用来说，文件上百简直是家常便饭，那么这个时候我们的js文件应该怎么处理呢？另外，对于css文件，又该如何处理呢？？这些都是我们实际工作中要... 查看详情
手撕系列文章-序言
...作为功能开发，不重复造轮子，无可厚非，但长此以往，对于前端工程师来说，无疑是一种束缚，束缚了解决问题的思维，束 查看详情
劝人写码，千刀万剐——“前端已死”难道要成真了？
...现实折磨的职场老鸟。对菜鸟来说，市场永远是饱和的。对于想进入前端的小白来说，你需要知道：只有前端技术才能给你界面，假如没有了前端，你再也上不了B站、刷不了抖音，就像电脑没有了显示器，只有主机一样。所以... 查看详情
记使用vue-element-admin做后台管理遇到的问题，我是一个小白。
1.vue-element-template添加国际化，$t可以直接使用，但是在面包屑和左侧导航使用时，打印hasKey为false，代表语言库里没有对应的内容，但是语言库我是从admin拷过来的，于是对比有什么不同，发现，router里面的meta的title的首字母和... 查看详情
文件对于 Eclipse 来说太大了
】文件对于Eclipse来说太大了【英文标题】：filetoolargeforeclipse【发布时间】：2012-07-2218:02:01【问题描述】：所以...我正在生成查询，然后我将一个特别长的查询粘贴到eclipse中，eclipse遇到了堆错误，然后崩溃了。我想，没什么大... 查看详情
微服务项目启动遇到的问题
...没有什么问题的话，是可以正常启动的，如果，在启动某一个模块的时候，我们会遇到，提示：某一个模块出现了重新加载，这个时候，我建议大家是不能够点击 yes的，因为点击了yes的时候，你的项目就启动不起来了，然后... 查看详情
一个小白的前端学习历程
...程已经告一段落，回首望去，从什么都不会，到可以写出一个完整的静态页面了。这段时间我的心里路程是起伏的。我但现在还记得第一次写出一个页面后自己心里的那 查看详情