（前端）工作总结 2

最新推荐文章于 2024-05-17 08:57:59 发布
最新推荐文章于 2024-05-17 08:57:59 发布
阅读量6.2k 收藏 16
点赞数 4
分类专栏： css 前端 文章标签： 工作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43545329/article/details/84593060
版权
前端 同时被 2 个专栏收录
18 篇文章 0 订阅
订阅专栏
css
3 篇文章 0 订阅
订阅专栏

erp系统所涉及到的主要框架 ace admin 地址：http://ace.jeka.by/

  1. 右侧隐藏按钮
    在这里插入图片描述
    .net 控件 控制一行显示4个，每个label属性display : inline-block 设置成固定宽度 80，外侧div设置min-width：140px 高度随label个数自动增加。注意：设置成table样式的话 checkbox 与 label文本产生高度差 不在同一个水平线上
<div class="ace-settings-box clearfix" id="ace-settings-box">
      <div class="widget-header widget-header-small">
          <asp:UpdatePanel ID="UpdatePanelColall" runat="server" UpdateMode="Conditional">
              <ContentTemplate>
                  <label>表格列显示/隐藏</label>
                  <asp:CheckBox runat="server" AutoPostBack="false" ID="colall" onclick="SltChkAlled('colall', '_GridViewLayout_ChkGridViewColumnList'); document.getElementById('btnGridViewLayout').click();" />
                  <label class="lbl" for="ace-settings-highlight">全选</label>
              </ContentTemplate>
              <Triggers>
                  <asp:AsyncPostBackTrigger ControlID="_GridViewLayout" />
              </Triggers>
          </asp:UpdatePanel>
      </div>
      <div class="ace-settings-item">
          <uc:GridViewLayout ID="_GridViewLayout" runat="server" />
      </div>
  </div>

2.图标部分
在这里插入图片描述
图标用的font awesome 4.5版本 地址 http://fontawesome.dashgame.com/
ui-icon ace-icon 产生放大效果

<div class="ui-pg-div">
    <span class="ui-icon ace-icon fa fa-refresh green" onclick="document.getElementById('btnFsh').click();"></span>
</div>

图标背景widget-header 样式background-image: linear-gradient(to bottom,#FFF 0,#EEE 100%);
3.表格部分：通过头部调用样式<%@ page language="C#" autoeventwireup="true" inherits="Customer_ScreenCusList, DHERP.Web" theme="Themes" enableEventValidation="false" %>
在这里插入图片描述
html：

<table class="tbData" cellspacing="0" rules="all" border="1" id="gvcus" style="border-collapse:collapse;">

css：

.tbData
{
	border:solid 1px #ddd;
	/*border:solid 1px #ddd*/
	background:#ffffff;
	border-top:none;
	/*table-layout:fixed;
	behavior: url(../../Public/Script/dragtable.htc);*/
}

.tdHead1 th
{
   font-weight:normal;
   border:solid 1px #ddd
  background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(231,235,251,1) 0%, rgba(204,214,248,1) 53%, rgba(239,242,253,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(231,235,251,1) 0%,rgba(204,214,248,1) 53%,rgba(239,242,253,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(231,235,251,1) 0%,rgba(204,214,248,1) 53%,rgba(239,242,253,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   text-align:center;
   height:22px;
   line-height:22px;
   border-top:none;
   padding-left:5px;
   padding-right:5px;
   white-space:nowrap;
   /*overflow:hidden;
   text-overflow:ellipsis;        /* for IE */
	/*-o-text-overflow: ellipsis;     for Opera */
   
}
.tdRow1 td
{
	padding-left:5px;
	padding-right:15px;
	border:solid 1px #ddd
	height:20px;
    line-height:20px;
	white-space:nowrap;
	/*overflow:hidden;
    text-overflow:ellipsis;        /* for IE */
	/*-o-text-overflow: ellipsis;     for Opera */
}
/*隔行换色 */
table tr:nth-child(2n)
{
	/*浅紫色*/
	background-color: #EFEDF5;
	
}
/*悬停变色*/
.tbData>tbody>tr:hover
{
  background-color: #dddfff;	
}

4.复选框样式重写
新写一个复选框覆盖原来的样式（参考ace admin的复选框）。

/*//checkBox样式设置*/

input[type=checkbox],
input[type=radio] {
	position: relative;
	display: inline-block;
	margin-right: 5px;
	line-height: 20px;
/*	min-height: 14px;
*/	min-width: 14px;
	font-weight: 400;
	cursor: pointer
}


input[type=checkbox]::before {
	cursor: pointer;
	font-family: fontAwesome;
	font-weight: 400;
	font-size: 12px;
	color: #FFF;
	content: "\a0";
	background-color: #FAFAFA;
	border: 1px solid #C8C8C8;
	
	border-radius: 0;
	display: inline-block;
	text-align: center;
	height: 14px;
	line-height: 14px;
	min-width: 14px;
	position: relative;
	top: -2px
}


input[type=checkbox]:checked::before {
	display: inline-block;
	content: '\f00c';
	background-color: #F9A021;
	border-color: #F9A021;
	color: #FFF
}

input[type=checkbox]:hover::before {
	border-color: #FF893C
}

input[type=checkbox]:focus::before {
	border-color: #F59942
}

input[type=checkbox]:active::before {
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05), inset 0 1px 3px rgba(0, 0, 0, .1)
}

input[type=checkbox]:disabled::before {
	background-color: #DDD!important;
	border-color: #CCC!important;
	box-shadow: none!important;
	color: #BBB
}
input[type=checkbox]:checked::after {
	font-family: FontAwesome;
	font-size: 14px;
	line-height: 14px;
	content: "\a0";
	top: -1px;
	text-shadow: none;
	padding: 0;
	text-align: center;
	color: #BBB;
	letter-spacing: 0
}
input[type=checkbox]#cball:checked::before {
	display: inline-block;
	content: '\f00c';
	background-color: #fff;
	border-color: #2283C5;
	color: #2283C5
}
input[type=checkbox]#cball:hover::before {
	border-color: #2283C5;
	}
.tdRow1>td>input[type=checkbox]:checked::before {
	display: inline-block;
	content: '\f00c';
	background-color: #fff;
	border-color: #2283C5;
	color: #2283C5
}
.tdRow1>td>input[type=checkbox]:hover::before {
	border-color: #2283C5;
	}

此处需要引用<link rel="stylesheet" href="../Public/css/fonts.googleapis.com.css" />

  1. 选项卡左右调节按钮
    在这里插入图片描述
    思路： 将 包含选项卡的div 设置成绝对定位 position：absolute ；left：0； 固定宽度 800px； 当选卡超过宽度时隐藏 overflow：hidden； 为按钮附加点击事件每点击向右或向左移动100px。

JS：位置 …/Public/h-ui.admin/js/H-ui.admin.js

  //横向移动选项卡标题
  $('#js-tabNav-next').click(function(){
  	num==oUl.find('li').length-1?num=oUl.find('li').length-1:num++;
  	toNavPos();
  });
  $('#js-tabNav-prev').click(function(){
  	num==0?num=0:num--;
  	toNavPos();
  });
  //横向移动tab下部分选项卡标题
  $('#js-tabNav-next1').click(function(){
  	num==$("#recent-tab").find('li').length-1?num=$("#recent-tab").find('li').length-1:num++;
  	toNavPos1();
  });
  $('#js-tabNav-prev1').click(function(){
  	num==0?num=0:num--;
  	toNavPos1();
  });
  function toNavPos(){
  	oUl.stop().animate({'left':-num*100},100);
  }
  function toNavPos1(){
  	$("#recent-tab").stop().animate({'left':-num*100},100);
  }

HTML：

 <div id="win-btn" class="ace-settings-container">
                                 <div class="Hui-tabNav-more btn-group" id="tab_btn">
                                    <a id="js-tabNav-prev1" class="btn btn-sm btn-info " href="javascript:;">
                                        <i class="ui-icon ace-icon fa fa-arrow-left"></i></a>
                                    <a id="js-tabNav-next1" class="btn btn-sm btn-info" href="javascript:;">
                                        <i class="ui-icon ace-icon fa fa-arrow-right"></i></a>
                                </div>
                                
                                <span class="changwin">
                                    <i class=" ui-icon ace-icon glyphicon glyphicon-minus blue" id="min" onclick="changmin();" style="display: inline;"></i>
                                    <i class=" ui-icon ace-icon glyphicon glyphicon-modal-window blue" id="res" onclick="changred();" style="display: none;"></i>
                                    <i class=" ui-icon ace-icon glyphicon glyphicon-unchecked blue" id="max" onclick="changmax();" style="display: inline;"></i>
                                </span>
                            </div>

6：最小化，最大化按钮部分 以及左，右上，右下三栏高度控制：
在这里插入图片描述
JS：将table 表格高度设为定高， 获取浏览器高度，通过一系列 计算 算出右下框的高度 使得和左边边框始终对齐。

//三栏高度控制
//调整窗口为默认大小

function changred() {
	var winHeight = 0;
	if(window.innerHeight) winHeight = window.innerHeight;
	else if((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight;
	//通过深入Document内部对body进行检测，获取浏览器窗口高度
	if(document.documentElement && document.documentElement.clientHeight) winHeight = document.documentElement.clientHeight;
	var treeheight = winHeight - 6;

	document.getElementById("tree-style").style.height = treeheight - 60 + "px";
	document.getElementById("tree-box").style.height = treeheight + "px";
	document.getElementById("max-box").style.height = treeheight + "px";
	document.getElementById("widget-body-tab").style.display = "block";
	document.getElementById("widget-body-table").style.display = "block";
	document.getElementById("page1").style.display = "block";
	document.getElementById("widget-body-table").style.height = "460px";
	var tabheight = treeheight - 578;
	if(tabheight > 0) {
		document.getElementById("widget-body-tab").style.height = treeheight - 578 + "px";
	} else {
		document.getElementById("widget-body-tab").style.display = "none";
	}

	document.getElementById("res").style.display = "none";
	document.getElementById("max").style.display = "inline";
	document.getElementById("min").style.display = "inline";

	var h = document.getElementsByClassName("tab-table");
	for(var i = 0; i < h.length; i++) {
		h[i].style.height = "230px";
	}
	document.getElementById("tab-box").style.border = 1;
	document.getElementById("hfListSize1").value = "17";
	document.getElementById("hfListSize2").value = "6";
	document.getElementById("btnClr").click();
}
//点击最大化按钮
function changmax() {
	var winHeight = 0;
	if(window.innerHeight) winHeight = window.innerHeight;
	else if((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight;
	//通过深入Document内部对body进行检测，获取浏览器窗口高度
	if(document.documentElement && document.documentElement.clientHeight) winHeight = document.documentElement.clientHeight;
	document.getElementById("widget-body-tab").style.display = "block";
	document.getElementById("page1").style.display = "none";
	document.getElementById("widget-body-table").style.display = "none";
	document.getElementById("widget-body-tab").style.height = winHeight - 84 + "px";
	document.getElementById("res").style.display = "inline";
	document.getElementById("max").style.display = "none";
	document.getElementById("min").style.display = "inline";
	var h = document.getElementsByClassName("tab-table");
	for(var i = 0; i < h.length; i++) {
		h[i].style.height = "100%";
	}
	document.getElementById("hfListSize1").value = "0";
	document.getElementById("hfListSize2").value = "33";
	document.getElementById("btnClr").click();
}
//点击最小化按钮
function changmin() {
	var winHeight = 0;
	if(window.innerHeight) winHeight = window.innerHeight;
	else if((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight;
	//通过深入Document内部对body进行检测，获取浏览器窗口高度
	if(document.documentElement && document.documentElement.clientHeight) winHeight = document.documentElement.clientHeight;
	document.getElementById("widget-body-table").style.display = "block";
	document.getElementById("widget-body-tab").style.display = "none";
	document.getElementById("page1").style.display = "block";
	document.getElementById("widget-body-table").style.height = winHeight - 126 + "px";
	document.getElementById("res").style.display = "inline";
	document.getElementById("max").style.display = "inline";
	document.getElementById("min").style.display = "none";

	var listnum = parseInt((winHeight -170) / 24);
	document.getElementById("hfListSize1").value = listnum;
	document.getElementById("hfListSize2").value = "0";
	document.getElementById("btnClr").click();

}

HTML：

   <span class="changwin">
        <i class=" ui-icon ace-icon glyphicon glyphicon-minus blue" id="min" onclick="changmin();" style="display: inline;"></i>
      	 <i class=" ui-icon ace-icon glyphicon glyphicon-modal-window blue" id="res" onclick="changred();" style="display: none;"></i>
         <i class=" ui-icon ace-icon glyphicon glyphicon-unchecked blue" id="max" onclick="changmax();" style="display: inline;"></i>
	 </span>

7： ace选项卡部分：基于bootstrap 框架 所以需要引用bootstrap.min.js
HTML：

<div class="widget-box no-border ui-sortable-handle" id="recent-box">
										<div class="widget-header widget-header-small">
											<div class="widget-toolbar no-border">
												<ul class="nav nav-tabs" id="recent-tab">
													<li class="active" id="jqxx">
														<a data-toggle="tab" href="#jqxx-tab" aria-expanded="false">机器信息</a>
													</li>
													<li class="" id="fwxx">
														<a data-toggle="tab" href="#fwxx-tab" aria-expanded="false">服务信息</a>
													</li>
													<li class="" id="gmxx">
                                                    <a data-toggle="tab" href="#gmxx-tab" aria-expanded="false">购买信息</a>
                                              		  </li>
                                               		 <li class="" id="xsxx">
                                                    <a data-toggle="tab" href="#xsxx-tab" aria-expanded="false">销售信息</a>
                                                </li>
													<li class="" id="zjyw">
														<a data-toggle="tab" href="#zjyw-tab" aria-expanded="false">中间业务</a>
													</li>
												</ul>
											</div>
											<div class="widget-right">
												<input type="checkbox" name="check" id="grewshow" checked="checked" />显示
												<!--<input type="checkbox" name="check" id="grewhidden" />隐藏-->
											</div>
										</div>
										<div class="tab-content" style="border-top: 0;">
											<div id="fwxx-tab" class="tab-pane"></div>
											<div id="xsxx-tab" class="tab-pane"></div>
											<div id="jqxx-tab" class="tab-pane active"></div>
											<div id="gmxx-tab" class="tab-pane"></div>	
											</div>

CSS：引用 ace.min.css 以及bootstrap.min.css

8:手风琴部分：
在这里插入图片描述
HTML：

<div class="accordion-style1 panel-group" id="accordion"> 
         <div class="panel panel-default"> 
          <div class="panel-heading"> 
           <h4 class="panel-title"> 
           	<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#khxx"> 
           		<i data-icon-show="ace-icon fa fa-angle-right" data-icon-hide="ace-icon fa fa-angle-down" class="bigger-110 ace-icon fa fa-angle-right">
           		</i>客户信息</a> </h4> 
          </div> 
            <div id="khxx" class="panel-collapse collapse in"> 
           <div class="panel-body" style="height: 400px;overflow-y: scroll;"> 
             </div>
           </div> 
            </div>
           </div>

JS:调用 ace.min.js 以及 bootstrap.min.js ；
暂时写到这以后待补充。。。
1.（补充部分）选项卡插件：

			<div class="widget-box ui-sortable-handle" id="recent-box">
                    <div class="widget-header widget-header-small">
                      <div class="widget-toolbar no-border">
                        <ul class="nav nav-tabs" id="recent-tab">
                          <li class="active">
                            <a data-toggle="tab" href="#jbxx-tab" aria-expanded="false">基本信息</a></li>
                          <li class="">
                            <a data-toggle="tab" href="#jqpz-tab" aria-expanded="false">机器配置</a></li>
                          <li class="">
                            <a data-toggle="tab" href="#fwpj-tab" aria-expanded="false">服务/配件</a></li>
                          <li class="">
                            <a data-toggle="tab" href="#sfjs-tab" aria-expanded="false">收费结算</a></li>
                          <li class="">
                          </ul>
                      </div>
                    </div>
                </div>
					<div class="tab-content">
                          <div id="jbxx-tab" class="tab-pane active">
                          </div>
                    </div>
                   <div class="tab-content">
                          <div id="jqpz-tab" class="tab-pane active">
                          </div>
                    </div>
                    <div class="tab-content">
                          <div id="fwpj-tab" class="tab-pane active">
                          </div>
                    </div>
                    <div class="tab-content">
                          <div id="sfjs-tab" class="tab-pane active">
                          </div>
                    </div>

在这里插入图片描述
选项卡在左侧

	<div class="tabable tabs-left">
                        <ul class="nav nav-tabs" id="recent-tab" >
                          <li class="active" >
                            <a data-toggle="tab" href="#jbxx-tab" aria-expanded="false" style="width: 38px; font-size: 14px;" >基本信息</a></li>
                          <li class="">
                            <a data-toggle="tab" href="#jqpz-tab" aria-expanded="false" style="width: 38px; font-size: 14px;">机器配置</a></li>
                          <li class="" >
                            <a data-toggle="tab" href="#fwpj-tab" aria-expanded="false" style="width: 38px; font-size: 14px;">服务配件</a></li>
                          <li class="" >
                            <a data-toggle="tab" href="#sfjs-tab" aria-expanded="false" style="width: 38px; font-size: 14px;">收费结算</a></li>

在这里插入图片描述
选项卡在右侧

<div class="tabable tabs-right">
                        <ul class="nav nav-tabs" id="recent-tab" style="margin-right: 5px;">
                          <li class="active" >
                            <a data-toggle="tab" href="#jbxx-tab" aria-expanded="false" style="width: 38px; font-size: 14px;" >基本信息</a></li>
                          <li class="">
                            <a data-toggle="tab" href="#jqpz-tab" aria-expanded="false" style="width: 38px; font-size: 14px;">机器配置</a></li>
                          <li class="" >
                            <a data-toggle="tab" href="#fwpj-tab" aria-expanded="false" style="width: 38px; font-size: 14px;">服务配件</a></li>
                          <li class="" >
                            <a data-toggle="tab" href="#sfjs-tab" aria-expanded="false" style="width: 38px; font-size: 14px;">收费结算</a></li>

在这里插入图片描述
手风琴插件代码

 <div class="accordion-style1 panel-group" id="accordion">
 <div class="panel panel-default">
                                <div class="panel-heading">
                                  <h4 class="panel-title">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#khxx">
                                      <i data-icon-show="ace-icon fa fa-angle-right" data-icon-hide="ace-icon fa fa-angle-down" class="bigger-110 ace-icon fa fa-angle-right"></i>客户信息</a>
                                  </h4>
                                </div>
                                <div id="khxx" class="panel-collapse collapse in">
                                  <div class="panel-body" style="height: 300px;overflow-y: scroll;">


                                 </div>
                                </div>
                              </div> 
 <div class="panel panel-default">
                                <div class="panel-heading">
                                  <h4 class="panel-title">
                                    <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#fwxx">
                                      <i data-icon-show="ace-icon fa fa-angle-right" data-icon-hide="ace-icon fa fa-angle-down" class="bigger-110 ace-icon fa fa-angle-right"></i>服务信息</a>
                                  </h4>
                                </div>
                                <div id="fwxx" class="panel-collapse collapse">
                                  <div class="panel-body" style="height: 300px;overflow-y: scroll;">  

								 </div>
                                </div>
                              </div>          

 <div class="panel panel-default">
                                <div class="panel-heading">
                                  <h4 class="panel-title">
                                    <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#ywxx">
                                      <i data-icon-show="ace-icon fa fa-angle-right" data-icon-hide="ace-icon fa fa-angle-down" class="bigger-110 ace-icon fa fa-angle-right"></i>业务信息</a>
                                  </h4>
                                </div>
                                <div id="ywxx" class="panel-collapse collapse">
                                  <div class="panel-body" style="height: 300px;overflow-y: scroll;">      

								 </div>
                                </div>
                              </div>   

 <div class="panel panel-default">
                                <div class="panel-heading">
                                  <h4 class="panel-title">
                                    <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#jqxx">
                                      <i data-icon-show="ace-icon fa fa-angle-right" data-icon-hide="ace-icon fa fa-angle-down" class="bigger-110 ace-icon fa fa-angle-right"></i>机器信息</a>
                                  </h4>
                                </div>
                                <div id="jqxx" class="panel-collapse collapse">
                                  <div class="panel-body" style="height: 300px;overflow-y: scroll;">
           
          						  </div>
                                </div>
                              </div>

在这里插入图片描述
ace admin 框架真的很不错 喜欢的可以去下载源码，网上也有文档虽然不是很易读。

无公害的小bug
关注
  • 4
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
前端年度工作总结
itSeven7的博客
02-09 6827
转载链接地址：http://www.shangxueba.com/fanwen/25177.html 方便以后使用哦哈哈 小编语：Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。以下是关于前端开发人员工作总结的范文，供大家参考! 　　前端开发人员工作总结范文 　　光阴似箭，日月如梭
IT公司前端年度工作总结报告
02-19
年度前端公司工作总结报告,将技术与业务相结合，通过技术改善业务模式，通过业务推动技术革新，将以技术为基石，业务为方舟，乘风破浪，逆水直上！ 其他 严格按照公司规定的方案进行规律的工作，认真对待任务和需求，不拖延，不划水，不懒惰。加强和各部门同事们的沟通与合作，对技术型演讲要保持积极、严谨的态度，力争保持先进和完备，时刻对新技术保持同步，时刻对自身做技术提升准备。
前端项目总结与分享（PPT整理）
最新发布
2401_84092398的博客
05-17 661
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
前端年终总结
油墨香^-^的博客
08-30 4122
从未写过年度总结，恰逢今年是变化较大的一年，所以需要有一个总结仪式。同时希望在未来的每一年都能有一次年度总结，看看当前走过的路，也回望以往的不足。毕竟，前端一世，草木一秋。关于我的年度总结，这里主要分为以下几个模块（文章篇幅很长，大家可以按需阅读）：技术学习杂七杂八招聘掘金「技术」模块主要讲解这一年来自我技术方面的创新以及实践。「学习」模块会讲解 2019 的一些学习内容以及前端新认知，并且也会讲解自我的学习方法，希望对在校以及刚入职前端工作的同学有所帮助（鉴于很多掘友高频询问如何学习前端）...
对前端开发的一些小总结
weixin_42371812的博客
10-31 453
那么，如果你还是按以前的惯例去修改第三方ui（比如 【elementUi 、vantUi】）的样式，那是不能修改的。然而，随随着自己学习的积累和工作经验的积累，慢慢发现。注意在style标签里面的那个scoped，它的意义就是让这里面的css只针对于当前这个页面有效，不会污染其他的页面。/*也就是说，如果需要修改ui里面默认的样式，我们直接在控制台里面找到它的类名*//*然后，在这里面把需要的改了，同时在类名前面加上 /deep/ 就完事*//*请注意，【/deep/】 是固定写法*/
前端开发工作总结
明天也要努力的博客
12-19 1万+
从我进入公司到现在已经有一段时间了，随着工作年限的增加，逐渐成长为一名独立的开发人员，角色改变了，职责也改变了。虽然已经预计了工作之中会有很多困难，可是在实际的项目开发中，自己所遇到远不是想象之中的那么简单。在开发过程中，难题一个接一个的出现，要做到满足公司的产品需求，开发出高质量的，这个过程还很漫长。每天我都在勉励自己，要好好学，好好做，以后会好的。在此同时我衷心感谢公司给我提供了学习的机会和平台，这也使我对以后的日子多了些许的信心。现将我这段时间的工作总结如下： 项目方面 在过去这段时间里，主要担负项
前端开发经验总结
Jason~小杰的学习之家
05-05 2658
 我设置nowrap和不设置nowrap效果都一样。就是表格随着文字自动伸展，为什么？ →回答问题：TD元素noWrap属性的行为与TD元素的width属性有关。 ◆如果未设置TD宽度，则noWrap属性是起作用的。◆如果设置了TD宽度，则noWrap属性是不起作用的。 http://www.blueidea.com/tech/web/2003/943.as
web 前端年总结ppt模板
01-21
本资源为 Web 前端年总结 PPT 模板，主要面向技术研发部，讨论 2021 年度工作总结的主要内容。下面是对该模板中所涉及的知识点的详细解释： 技术研发部汇报人 在 PPT 模板中，技术研发部汇报人负责汇报 2021 年度...
网站前端实习工作总结范文.doc
12-21
网站前端实习工作总结范文 在这个实习报告中，我们可以看到作者在网站前端实习期间的成长和收获。作者从一名新人到最后融入团队，经历了很多挑战和成长。以下是我们从这个实习报告中所提炼出来的知识点： 1. 交流...
web前端试用期工作总结.doc
12-17
【标题】：Web前端试用期工作总结 【主要内容】： 这篇文档是关于Web前端开发者试用期的工作总结，作者在过去的两个月中积累了丰富的经验和技能。以下是对这些内容的详细解析： 1. **责任心与团队协作**：作者在...
一名前端 Leader 的转正述职记录
LuZhenQian2017的博客
05-30 4518
一转眼，已经是 2022 年了。为了我爱的人，我决定离开北上广，去海口或者三亚过两年隐居的日子。
2018年个人有关前端的职位年终总结
02-26
这是一个个人在年终时 上台演讲 的 前端职位的年终总结
前端开发经验总结分享
GengPengShuaiGPS的博客
04-10 497
一.前端js和后端PHP函数的调用 前端JS中onclicks事件调用js函数时，其函数不需要在加载完页面后再加载js中，而给标签作标记的事件需要的函数要放在加载完页面的script中，例： 1、<span οnclick="fun()">点击</span> <script>function fun(){}</script&g...
（前端）工作总结
weixin_43545329的博客
11-28 9302
erp系统所涉及到的前端框架： [ 1] layui ：地址 https://www.layui.com/ 所涉及到的layui表单样式 基本样式： 下拉框： &lt;div class="layui-form-item"&gt; &lt;div class="layui-inline"&gt; ...
2018年前端年度工作总结
热门推荐
禅思院
03-05 2万+
2018年转眼即逝，感觉仿佛就在咋日，可能因为充实，也可能忙碌，所以才感觉到时间过的飞快。自从加入到++这个大家庭一年多以来，见证了++的飞速发展，队伍的不断壮大。在工作中，经历了很多欢快困难的时刻，结识了一批工作上的好同事，生活上的好朋友，领悟了很多新技能，感谢公司和领导给了我展示的空间。在2018年的这段时间里，通过自身的不懈努力，在工作上取得了一定的成果，但也存在了很多不足之处。回首2018...
前端工作总结
hk19950707的博客
10-28 2375
1、typeof操作符返回一个字符串，表示未经计算的操作数的类型。 关于Angular的双向绑定https://www.cnblogs.com/shitoupi/p/6622878.html/ 2、在前端页面的逻辑判断中要善于使用*ngif、||、&amp;&amp;等 逻辑判断符，例如：{{user.avatarUrl || ‘./assets/imgs/head.png’}} 3、| |和&a...
工作总结 年度总结 月度总结 PPT模板 报告
04-22
工作总结：本次工作总结主要以前端工程师在试用期内的工作内容、核心技术、前端框架优化和职业责任等方面进行了详细总结和分析。 在工作内容方面，前端开发是通过使用HTML、CSS及JavaScript等技术，创建Web页面或...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无公害的小bug

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值