web前端学习（三）css学习笔记部分（7）-- 文字和字体相关样式、盒子相关样式、背景与边框相关样式
12. 文字和字体相关样式
12.1 CSS3 给文字添加阴影
使用 text-shadow 属性给页面上的文字添加阴影效果，text-shadow 属性是在CSS2中定义的，在 CSS2.1 中删除了，在 CSS3 的 text 模块中又恢复了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
/*text-shadow可以写多个阴影*/
text-shadow: -5px -5px 10px #ff00ff,
5px 5px 5px #ff00ff,
20px 20px 2px #ff00ff;
color:black;
font-size:40px;
font-weight:bold;
/*font-family:宋体，老师没有带引号，我觉得还是带引号的好一些*/
font-family:"宋体";
/*background-image: url("");*/
height:200px;
width:100px;
padding:30px 0;
text-align:center;
}
</style>
</head>
<body>
<div>你好</div>
</body>
</html>
12.2 CSS3 使用服务器端字体
在 CSS3 之前，页面文字所使用的字体必须已经在客户端中被安装才能正常显示，在样式表中允许指定当前字体不能正常显示时使用的替代字体，但是如果这个代替字体在客户端中也没有安装时，使用这个字体的文字就不能正常显示了。
直接加载服务器端的字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*需要服务器端加载的字体样式*/
/*字体有两种：
ttf :o otf:t
truetype opentype
*/
@font-face {
font-family:"myFont";
src: url("xindexingcao57.ttf")format("truetype");
font-weight:normal;
}
div{
font-family: "myFont";
}
</style>
</head>
<body>
<div>
This is my div!
</div>
</body>
</html>
先加载客户端的字体，加载失败之后执行加载服务器端的字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*先加载客户端已有的字体，如果客户端没有则在服务器端加载
*/
/*将Arial修改一下之后就会加载服务器端的字体了。*/
@font-face {
font-family: myFont;
src: local("Arial"),
url("xindexingcao57.ttf")format("truetype");
}
div{
font-family: myFont;
}
</style>
</head>
<body>
<div>
这是我的字体测试
This is my font test.
</div>
</body>
</html>
12.3 CSS3 修改字体种类而保持字体尺寸不变
在 CSS3 中，增加了 font-size-adjust 属性，使用这个属性，可以在保持文字大小不变的情况下改变字体种类。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--font-size-adjust-->
<!--x-height:58 font-size:100px aspect:0.58-->
<!--c = (a/b)*s
a实际使用的aspect值
b修改前的aspect值
s当前字体的尺寸
c浏览器实际显示的尺寸
-->
<style>
/*目前只有firefox支持font-family-adjust属性*/
#div1{
font-family: Menlo;
font-size:30px;
font-size-adjust: 0.40;
}
#div2{
font-family: cursive;
font-size:30px;
font-size-adjust: 0.57;
}
#div3{
font-family: "Tahoma";
font-size:30px;
font-size-adjust: 0.57;
} </style>
</head>
<body>
<div id="div1">Wo shi div1</div>
<div id="div2">Wo shi div2</div>
<div id="div3">Wo shi div3</div>
</body>
</html>
13. 盒子相关样式
13.1 盒子的类型
使用display属性来定义盒的类型，总体来说，CSS中的盒子分为block类型与inline类型。
inline、block、inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*display:inline以行内元素显示
display:block以块级元素
inline-block属性允许将行内元素当成块级元素调整 仅仅是inline属性显示的话不能够设置宽度。
*/
div{
background-color: aqua;
display:inline;
width:200px;
}
span{
background-color: brown;
display:block;
width:200px;
height:50px;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<span>span1</span>
<span>span2</span>
</body>
</html>
让table标签可以和其他元素同行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>inline-table</title>
<style>
table{
/*本来table标签是块级元素，独占一行，
但是使用了这个属性之后可以和其他元素同行*/
display:inline-table;
border: solid 3px #00aaff;
}
td{
border:solid 1px #ff00ff;
}
</style>
</head>
<body>
我在上面
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
</tr>
</table>
我在下面
</body>
</html>
div以列表li形式展现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
display:list-item;
list-style-type: circle;
/*边距还是要带着的，不然点就看不见了。*/
margin-left:30px;
}
</style>
</head>
<body>
<div>div实例1</div>
<div>div实例2</div>
<div>div实例3</div>
<div>div实例4</div>
</body>
</html>
13.2 对盒子中容纳不下的内容的显示
对盒子中容纳不下的内容的显示，可以使用overflow属性来指定对盒子中容纳不下的内容的显示方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
/*overflow: hidden;*/
/*auto自动
scroll滚动
hidden隐藏
visible看得见，相当于不写
inherit继承父元素属性设置
*/
overflow-x:scroll;
overflow-y:scroll;
/*white-space属性设置文档空白的处理，使用nowrap值可以控制文档不换行*/
white-space: nowrap;
width:300px;
height:150px;
border:solid 1px orange;
}
</style>
</head>
<body>
<h1>标题</h1>
<div>
<p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例字实例文字实例文字实例文字实例文字实例文字实例</p>
<p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</p>
<p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</p>
<p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</p>
<p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</p>
<p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</p>
<p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</p>
<p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</p>
<p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</p>
<p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</p>
<p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</p>
<p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</p>
<p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</p>
<p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</p>
<p>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</p>
</div>
</body>
</html>
13.3 盒子的阴影和大小计算方式
盒子的阴影和大小计算方式，在CSS3中，使用box-sizing属性来指定针对元素的宽度与高度的计算方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin-left: 100px;
margin-top:100px;
background-color: #ffaa00;
box-shadow: -10px -10px 10px gray;
/*box-shadow: -10px -10px 1px gray;*/
/*阴影：左边长度 上边长度 阴影程度大小（数越小阴影越明显） 颜色*/
width: 200px ;
height: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
盒子的大小的计算方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
box-sizing: border-box;
/*提供的宽度和高度是包括了padding的*/
width:100px;
height:100px;
padding:10px;
background-color: #00aaff;
}
#div2{
box-sizing: content-box;
/*提供的宽度和高度是不包括padding的*/
width:100px;
height:100px;
padding:10px;
background-color: #ffaa00;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
14. 背景与边框设计
14.1 与背景相关的新增属性
background-clip.background-origin.background-size
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: black;
border: dashed 15px aqua;
padding:30px;
color:white;
font-size: 30px;
font-weight:bold; background-image:url("img/1.jpg");
background-repeat: no-repeat;
}
.div1{
/*background-origin用来设置图片的起始位置
图片起始位置也有三种*/
background-origin: border-box;
/*背景的颜色填充计算位置*/
background-clip: border-box; }
.div2{
background-origin: padding-box;
background-clip: padding-box;
}
.div3{
background-origin: content-box;
background-clip: content-box;
} </style>
</head>
<body>
<div class="div1">示例1</div><br/>
<div class="div2">示例2</div><br/>
<div class="div3">示例3</div><br/>
</body>
</html>
14.2 圆角边框
圆角边框的绘制也是Web网站或Web应用程序中经常用来美化页面效果的手法之一。
多个背景图片的设置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-image: url("img/2.jpg"),url("img/1.jpg");
background-repeat: no-repeat,no-repeat;
background-position:100% 10%, center center;/*老师这里写的是都有逗号，我认为老师写的有错误，我在其他网站查到的资料也是每两个一组的。正确的在下面写了*/
/*上面这条语句是第一张图从左往右的位置，从上往下的位置
第二张图从左往右的位置，从上往下的位置*/
/*background-position调整的是背景图片的位置*/
/*background-size: 200px 600px;*/
/*图片源大小不能保证的话在这里最好是
添加能够调整背景图片大小的语句，如下*/
background-size: 50% 50%;
background-color: #00aaff;
width:1000px;
height:800px; /* 也可以这么写：
background:url("haoroomsCSS1_s.jpg") 0 0 no-repeat,
url("haoroomsCSS2_s.jpg") 200px 0 no-repeat,
url("haorooms.jpg") 400px 201px no-repeat;*/ }
</style>
</head>
<body>
<div></div>
</body>
</html>
圆角边框
四个值是顺时针转一圈的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: gray;
border: 3px solid #000;
width:300px;
height:200px;
padding:20px;
/*border-radius:100px;*//*只写一个值是四个半径都是这个值*/
/*boeder-radius:20px 40px;*//*只写两个值浏览器不识别*/
border-radius:100px 15px 50px 10px;/*顺时针方向从第一个开始算的*/
}
</style>
</head>
<body>
<div>
文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字
</div>
</body>
</html>
14.3 使用图像边框
在CSS3中，增加了border-image属性，可以让元素的长度或宽度处于随时变化状态的边框统一使用一个图像文件来进行绘制。
图像边框自己代码测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:200px;
padding: 5px 10px;
border-width: 10px;
border-style: solid;
border-color: transparent; /*-webkit-border-image: url(img/png.png) 20 20 20 20 stretch;!*保持图片四角部分不变，只拉伸其余5个区域*!*/ border-image: url(img/png.png) 15 15 15 15 stretch;/*保持图片四角部分不变，只拉伸其余5个区域*/ -webkit-border-image: url(img/png.png) 20 20 20 20 stretch;/*保持图片四角部分不变，只拉伸其余5个区域*/ /*border-image: url(img/png.png) 15 15 15 15 stretch;!*保持图片四角部分不变，只拉伸其余5个区域*!*/ /*卧槽，我终于明白了，想要在google浏览器中实现选定边角在border中拉伸，中间也拉伸的效果，必须至少有
-webkit-border-image: url(img/png.png) 10 10 10 10 stretch;这一句语句，但是只有border-image: url(img/png.png) 10 10 10 10 stretch;
这一句的话或者border-image: url(img/png.png) 10 10 10 10 stretch;这一句在-webkit-border-image: url(img/png.png) 10 10 10 10 stretch;
这一语句之后的话，效果还是只有border上有图片，如果border-image: url(img/png.png) 10 10 10 10 stretch;在-webkit-border-image: url(img/png.png) 10 10 10 10 stretch;
之后的话也是只有border有效果，这是很奇怪的一件事，具体原因不详（我猜测是由于谷歌浏览器在解释这一语句的时候发现自己是谷歌浏览器，就用了带上自己标识的
样式之后，另外的这一句css语句是通用的，然后又按照普通的方法又更改了一次样式，所以会导致样式的更改，
所以这要求我们在写不同浏览器语句的时候最好是先写不带浏览器标识的方法。）。 怎么说呢，我在网上查资料又查到了，我在上面写的理解有问题，网上解释说是这两句都有作用，但是谁在后面就会
覆盖前面那一句的效果。
具体可以查看我上面留下的参考链接。 备注：三个属性
图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
写代码的时候已经和w3school不一样了，都不带ed了。
*/ /*那想要实现正常的只有border里有图像夹怎么做呢？
那就老老实实不写浏览器标识就可以了。
*/ /*background-image: url("img/png.png") 20 20 20 20;!*保持图片四角部分不变，只拉伸其余5个区域*!*/
/*background-image: url("img/png.png");*//*默认是全部拉伸*/ /* height:40px;*/ }
#round2 {
-webkit-border-image:url(https://sfault-image.b0.upaiyun.com/333/390/3333902996-5a02cf581ceb1_articlex) 40 40;
border-image:url(https://sfault-image.b0.upaiyun.com/333/390/3333902996-5a02cf581ceb1_articlex) 40 40 repeat;
}
</style>
</head>
<body>
<div>border</div>
</body>
</html>
这段代码搞了好长时间，参考了一些资料，基本已经搞懂，就不单独开篇记录了，转载信息如下 ：
参考资料链接：
最让我恍然大悟的链接：
CSS3 border-image 不同浏览器的表现记录：
https://blog.csdn.net/jjbob77/article/details/8263073?utm_source=blogxgwz4
最详细的链接：
CSS3 border-image详解、应用及jQuery插件
https://blog.csdn.net/jjbob77/article/details/8262812
启蒙链接：
css引用图片，有图片属性是两端不拉伸中间拉伸的css属性吗
https://segmentfault.com/q/1010000011915723/a-1020000011915914
http://jsbin.com/sutohaxahe/1/edit?html,css,output
其他相关链接：
CSS3 border-image 彻底明白
https://segmentfault.com/a/1190000010969367
关于-webkit-border-image的理解
http://www.bubuko.com/infodetail-1997447.html
最重要的启蒙代码（这特么居然是有一句是过时导致错误的代码（这里我已经改正了，通过这个还有我查阅的资料我理解了很多。），repeated已经变成了repeat了）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.title {
display:block;
} div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
} #round
{
-moz-border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 round; /* Old Firefox */
-webkit-border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 round; /* Opera */
border-image:url(http://www.w3school.com.cn/i/border.png) 30 30 round;
} #round2 {
-webkit-border-image:url(https://sfault-image.b0.upaiyun.com/333/390/3333902996-5a02cf581ceb1_articlex) 40 40 ;
/*border-image:url(https://sfault-image.b0.upaiyun.com/333/390/3333902996-5a02cf581ceb1_articlex) 40 40 repeated;*/
/*上面这句语句因为写错了，reported应该改成report，所以和注释掉一样。只剩上面一个默认为stretch属性的谷歌浏览器的样式有效*/
}
</style>
</head>
<body>
<span class="title">这是我使用的图片</span>
<img src="http://www.w3school.com.cn/i/border.png">
<div id="round">看我被图片包围了</div>
<div class="title">楼主的图片</div>
<img src="https://sfault-image.b0.upaiyun.com/333/390/3333902996-5a02cf581ceb1_articlex">
<div id="round2">楼主要的效果</div>
</body>
</html>
border-style测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
border:10px;
padding:10px;
border-width: 10px;
/*border-style:solid;*/
/*border不设置style样式他妈的不显示（直接不存在）
，所有的浏览器都是这样，我真是醉了*/
}
</style> </head>
<body>
<div>test</div>
</body>
</html>
web前端学习（三）css学习笔记部分（7）-- 文字和字体相关样式、盒子相关样式、背景与边框相关样式的更多相关文章
- Web前端与移动开发学习路线图
文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.ba ...
- 想做web前端project师应该学习些什么？
偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...
- 最全的WEB前端开发程序员学习清单
史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...
- 1+x证书Web前端开发HTML+CSS专项练习测试题（八）
1+x证书Web前端开发HTML+CSS专项练习测试题(八) 官方QQ群 1+x 证书 Web 前端开发 HTML+CSS 专项练习测试题(八) http://blog.zh66.club/index ...
- Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
- web前端篇：CSS使用，样式表特征，选择器
目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...
- 前端html与css学习笔记总结篇(超详细)
第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...
- 新手学习Web前端的三个高效学习方法，基础要重视
作为新手,出于对风险的担心,不免在学习一项新技能或者转投一个新行业的时候,有所犹豫与徘徊.毕竟,在这场类似冒险的选择中,我们需要投入时间.精力以及承受相关的经济损失.但是,只有勇敢迈出第一步,才能为生 ...
- web前端开发控件学习笔记之jqgrid+ztree+echarts
版权声明:本文为博主原创文章,转载请注明出处. 作为web前端初学者,今天要记录的是三个控件的使用心得,分别是表格控件jqgrid,树形控件ztree,图表控件echarts.下边分别进行描述. ...
随机推荐
- windows环境下运行Elasticsearch
1.Elasticsearch下载地址:https://github.com/medcl/elasticsearch-rtf 直接下载ZIP包: 2.配置JAVA环境 jdk64位地址:jdk-win ...
- PAT甲级——A1077 Kuchiguse
The Japanese language is notorious for its sentence ending particles. Personal preference of such pa ...
- java基础温习 -- 多态
1. 基本概念 多态是指一个事物有不同的表现形式或形态. 多态存在的三个必要条件:要有继承.要有重写.父类变量引用子类对象. 当使用多态方式调用方法时: 首先检查父类中是否有该方法,如 ...
- redis Hash 命令
HDEL key field2 [field2] 删除一个或多个哈希表字段 HEXISTS key field 查看哈希表 key 中,指定的字段是否存在. HGET key field 获取存储在哈 ...
- OSG在VS2008下的配置安装
一.准备工作 下载相关的工具软件: 1, 最新版的OSG库:OpenSceneGraph-2.8.2.zip. 2, 安装源代码所需要的工具:cmake-2.6.4-win32-x86.zip 3, ...
- Spring AOP(二)--注解方式
本文介绍通过注解@AspectJ实现Spring AOP,这里要重点说明一下这种方式实现时所需的包,因为Aspect是第三方提供的,不包含在spring中,所以不能只导入spring-aop的包,为了 ...
- Python爬虫笔记【一】模拟用户访问之提交表单登入—第二次（7）
在第一次登入时遇到这个问题,页面验证码与下载下来需要识别的验证码不同的问题,从网上查寻说是叫验证码同步问题.发现是用cookie解决的,那次cookie介绍到通过cookie就可以实现时间戳同步问题, ...
- Chrome 地址栏如何设置显示 http/https 和 www
首先在 chrome 地址栏输入以下地址 chrome://flags/#omnibox-ui-hide-steady-state-url-scheme-and-subdomains 然后使用 Ctr ...
- 在Linux中常用的启动引导工具：grub和lilo
在Linux和WINDOWS两系统并存时就需要安装GRUB(Grand Unified Bootloader),GRUB被广泛地用于替代lilo,GRUB支持在启动时使用命令行模式,支持md5加密保护 ...
- 跟我一起做一个vue的小项目（三）
接下来我们进行轮播的开发 安装插件,选用2.6.7的稳定版本 npm install vue-awesome-swiper@2.6.7 --save 根据其github上面的用法,我们在全局引用,在m ...