web开发的笔记

最新推荐文章于 2022-07-16 16:34:36 发布

Lucky_bo

最新推荐文章于 2022-07-16 16:34:36 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web开发

本文链接：https://blog.youkuaiyun.com/Lucky_bo/article/details/54379629

web开发专栏收录该内容

37 篇文章

订阅专栏

web开发的笔记

1.在CSS中设置这个属性可以使鼠标的箭头产生变化，由箭头变成提示选中的状态

cursor: pointer;

2.webStorm新添加项目时的配置：

1：Alt + F12 (开启命令行)

2：bower install (安装bower)

3：cnpm install (安装cnpm)

4：cnpm install grunt-g (安装到grunt-g)

5：cnpm install grunt-cli-g (安装到全局)

6：cd 到你所在的项目目录下

7：gulp framework

8：然后gulp server

9：Alt + F11 server (开启服务)

3.让web页面最小适配为1024px的设置：

min-width: 1024px;

4.一般float:left 和 float:right 用来控制view的左边位置和右边位置

有时为了清楚浮动需要添加clearfix这个属性，有时还需添加

<div class="clearfix"></div>

5.导航栏

<div class="report-switch">
    <span ui-sref="summary.players" ui-sref-active="active">参赛球队</span>
    <span ui-sref="summary.statistics" ui-sref-active="active">整体数据对比</span>
    <span ui-sref="summary.formation" ui-sref-active="active">球队阵型变化</span>
    <span ui-sref="summary.movement" ui-sref-active="active">跑动情况对比</span>
    <span ui-sref="summary.offense" ui-sref-active="active">进攻情况对比</span>
    <span ui-sref="summary.defence" ui-sref-active="active">防守情况对比</span>
</div>

链接用：summary.players 被选中状态时的处理：ui-sref-active="active" 其中active的样式要自己定义。

其中导航栏平均分配：display:flex 且子元素span中的css样式需要设置flex-grow:1

其中active的css样式为：

.active {
  background: rgba(150, 252, 240, 0.20);
  box-shadow: inset 0 0 8px 0 rgba(159, 255, 241, 0.50);
  border: 10px solid #669FFFF1;
}

6.画一条直线的方式有很多种：

1*如果这条直线是处于内容的下部，我们可以添加 border-bottom 的属性来设置。

2*用div的形式来画

<div class="line"></div>

其中line的样式为：

.line {
  height: 4px;
  background: #437E8A;
  margin-left: 10px;
  margin-right: 10px;
}

3*<hr/>来画

7.有时候调整布局的上次间距时可以用类似这种的形式：

margin-top: -4px;

8.背景是球员，显示不同的号码数，做法是添加图片做背景

<div class="number home-number" ng-bind="homeStart.number"></div>

.number {
  float: left;
  margin-top: 10px;
  width: 34px;
  height: 30px;
  line-height: 30px;
  display: inline-block;
  text-align: center;
  color: #ffffff;
  margin-left: 10px;
  margin-right: 8px;

  &.home-number{
    background: url("../img/icon_shirt_blue.png");
  }

  &.guest-number{
    background: url("../img/icon_shirt_red.png");
  }

}

9.用css画三角形：

向上的三角形：

.triangle-up {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 12px solid #08ff11;
  display: inline-block;
}

向下的三角形：

.triangle-down {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 12px solid #FF4848;
  display: inline-block;
}

10.今天犯了一个错误，显示加载图片的时候忘记添加“{{ }}”，导致显示不出图片：

<div class="team home-team">
    <img class="img-circle" ng-src="{{matchScore.homeTeamLogo}}" >
    //加载图片，并显示该图片为圆形图片：class="img-circle"
</div>

记得给img加限制的大小，不然显示的图片为原图的大小

11.超过长度时用...来表示：

&.name {
  max-width: 88px;
  min-width: 60px;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

12.项目端口被占用时的错误信息：

Error: listen EADDRINUSE :::3000   //端口3000被占用
at Object.exports._errnoException (util.js:1022:11)
at exports._exceptionWithHostPort (util.js:1045:20)
at Server._listen2 (net.js:1259:14)
at listen (net.js:1295:10)
at Server.listen (net.js:1391:5)
at ConnectApp.run (D:\gitCloudWeb\node_modules\.5.0.0@gulp-connect\index.js:82:24)
at new ConnectApp (D:\gitCloudWeb\node_modules\.5.0.0@gulp-connect\index.js:50:10)
at Object.server (D:\gitCloudWeb\node_modules\.5.0.0@gulp-connect\index.js:219:11)
at Gulp.<anonymous> (D:\gitCloudWeb\gulpfile.js:18:12)
at module.exports (D:\gitCloudWeb\node_modules\.0.3.8@orchestrator\lib\runTask.js:34:7)
] Using gulpfile D:\gitCloudWeb\gulpfile.js
    [10:47:08] Starting 'server'...
    [10:47:08] Finished 'server' after 38 ms
    [10:47:08] Starting 'watch'...
    [10:47:08] Finished 'watch' after 75 ms
    [10:47:08] Starting 'framework'...
    [10:47:08] Finished 'framework' after 78 ms
    [10:47:08] Starting 'reload'...
    [10:47:09] Finished 'reload' after 79 ms
    [10:47:09] Starting 'less'...
    [10:47:09] Finished 'less' after 20 ms
    [10:47:09] Starting 'default'...
    [10:47:09] Finished 'default' after 3.42 μs
Process finished with exit code 1

这个时候需要更改你项目中的端口号，把3000改成3030(该端口号任意)。

gulp.task('server', function () {
   connect.server({
       root: 'src',
       port: '3030',
       livereload: true
   })
});

或者关闭与其冲突的端口号项目，这样就可以解决这个问题了。

13.自动居中一列布局需要设置 margin 左右值设置为 auto，而且一定要设置

width为一个定值。

14.盒子模型的立体图片:从第一层到第五层依次为：border、content+padding、

background-image、background-color、margin。

15.清除浮动时，只设置宽度不行，必须设置 overflow:hidden; 才能实现清除浮动的效果

对于父元素的影响清除就是：width:100%;overflow:hidden;

对于自己临近的清除就是：clear：both;

16.可以把图片显示成圆形

border-radius: 50%;

17.如何取舍1，如何取进1

Math.ceil() 求最小的整数，但不小于本身。---进1

Math.round() 求本身的四舍五入。

Math.floor() 求最大的整数但不大于本身。---舍1

18.vertical-align：top 把元素的顶端与行中最高元素的顶端对齐

19.把数字转换为字符串，结果的小数点后有指定位数的数字：

var num = 5.56789;

var n=num.toFixed(2);

n 输出结果: 5.57

20.动态改变背景图片

<div class="team-background" 
     style="background-image: url('{{ teamInfo.groupPhoto || '../img/bg_team.png' }}')">

当图片显示不正常时：

background-size: cover;

21.动态改变列表中item的背景色

li{
  &:nth-of-type(odd){
    background-color: #102A34; //单数时显示的背景色
  }
  &:nth-of-type(even){
    background-color: #0A212A; //双数时显示的背景色
  }
}

22.背景的渐变效果设置：若是在有背景图片的情况下，需要在背景图片的上层添加一个div进行渐变效果的处理

.max-background {
  position: absolute;
  top:0;
  width: 100%;
  height: 200px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, 
      rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 1) 100%);
  //从上而下开始渐变，从0.5渐变到0，距离是0%->30%}

23.渐变效果

background-image: linear-gradient(to bottom, #F2F2F2 0, #F2F2F2 12.5%, #fff 12.5%, #fff 25%, #F2F2F2 25%,
#F2F2F2 37.5%, #fff 37.5%, #fff 50%, #F2F2F2 50%, #F2F2F2 62.5%, #fff 62.5%, #fff 75%, #F2F2F2 75%, #F2F2F2 87.5%, #fff 87.5%, #fff 100%);

24.居中显示

1. top：50%，left：50%，是将色块的左上角定位在了屏幕的中央，但是，整体并不在中央；
2. translate的百分比是根据自身的宽度和高度来定的，translate(-50%,-50%) 配合 top：50%，left：50% 实现了居中

.wrapper {
padding: 20px;
background:orange;
color:#fff;
position:absolute;
top:50%;
left:50%;
border-radius: 5px;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);

}

25.select取选中的值

<select class="form-control " #tttt (change)="selectCurrTeam(tttt.value)">
  <option>选择事件球队</option>
  <option *ngFor="let teamInfo of teamList" value="{{teamInfo.id}}">{{teamInfo.teamName}}</option>
</select>

value绑定对应的值，然后通过#tttt 获取到value的值

26.angular4项目在本地打包dist，起服务，然后在其他电脑上跑，先要装http-server

具体流程如下：cnmp install http-server-g

安装成功之后 -->http-server dist -->然后会出现

其中http://192.168.20.177:8080就是地址你只要在其他电脑输入此地址就能看到相关的信息了。

27.悬浮一个div时，让div的img显示，未悬浮时，该img不显示。

代码如下：

.date-text-content {
  width: 121px;
  heigth: 26px;
  background: #FFFFFF;
  border: 1px solid #E1E1E1;
  border-radius: 2px;
  .clear-label {
    display: none
  }
  &:hover {
    .clear-label {
      display: block
    }
  }
}

顺便说下display:none与visible:hidden的区别

display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别:

display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。

visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。

28.运行项目时出现这个错误：

“Port 4200 is already in use. Use '--port' to specify a different port.”

原因是：The port the application will be served on. Default is 4200.

所以我们可以更改下port的值来避免跟其他项目重复

项目中有这个文件：angular-cli.json 里面的配置信息中加入这个，就可以把端口从4200改成4343了

"serve":{
  "port": 4343
}

29.动态设置div的宽度和高度

<div class="run-total">
  <div class="run-percent" [style.width]="(playerInfo.distance*100 / maxDistance )+'%'"></div>
</div>

这个是动态设置run-percent的宽度占比，这样可以达到进度条进度的占比效果。

<span class="player-name" [ngClass]="playerInfo.name?.length>4?'ellipsis':''" 
      title="{{playerInfo.name?.length>4?playerInfo.name:''}}">
  {{playerInfo.name}}</span>

这个是根据条件动态的设置ellipsis样式。其中title的设置如果有值则会显示title里的值，无值的话就不显示悬浮的方框。

30.通过document控制body的overflow的属性

document.body.style.overflow = 'hidden';