今日任务:
1, 修改日历页面.
2,给首页公告栏增加附件栏.
======================
1,修改日历页面.
按钮堆砌问题
修改CSS: site.css
#tableControll {
/*width: 30px;*/
height: 24px;
float:left;
margin-left:1px;
margin-right:1px;
}
最终效果
但在低分辨率下,按钮还是会被挤成上下行..下文会解决..(设定固定宽度)
2, 为首页公告栏增加附件栏
最终效果:
首页公告栏
使用到的 ico图标:
(可惜这里没办法上传ICO图标)
修改2处:
1,首页公告栏
2,点击更多,进入公告搜索列表页
*.cshtml :
<td>
@if (@item.FolderId != null)
{
<img src="~/Images/file.ico" style="cursor:pointer;width:16px;height:16px;" onclick="window.open('/Project/OfficeView/Index?fileGuid=@item.FolderId')" />
}
</td>
今天发现一个问题, 如果客户是17寸4:3屏幕, 那屏幕分辨率一般是1024*768px
so, 如果把显示器缩小到这个大小...唉,好多页面都惨不忍睹..
修改日历表格排版
最终效果
1,给table加 table-layout: fixed
2, 设定th固定宽度
<thead id="tablehead">
<tr style="font-weight:bold; font-style:unset;">
<th style="display:none" id="thId"></th>
<th class="text-center" style="border-top-left-radius:8px;width:112px"></th>
<th class="text-center" style="width:55px">日期</th>
<th style="width:50px">周次</th>
<th style="width:75px">出差号</th>
<th style="width:90px">往返标志</th>
<th style="width:100px">省份(区域)</th>
<th style="width:85px">城市(国家)</th>
<th style="width:80px">工作状态</th>
<th>相关服务单</th>
<th style="border-top-right-radius:8px;">个人备注</th>
</tr>
</thead>
固定死宽度..这样 页面无论拉大缩小都对它没关系了.
修改首页 个人信息栏
最终效果
虽然依旧挺不好看的....但现在也没有新的idea.
缩小了每个DIV的宽度,删除了几个padding/margin的属性 给姓名\工号等属性值了一个新样式.
.navT{
font-weight:normal;
}
修改首页 公告栏, 设置固定宽度.
在1024*768下最终样式
之前是百分比宽度..缩小到1024时, 时间等格子,还是会被挤换行..现在设置成固定宽度后,不会再被挤换行了.
<table class="announcementtable" summary="Submitted table designs" style="table-layout: fixed">
@*<caption>公告发文</caption>*@
<thead>
<tr>
<th scope="col" style="min-width:85px;width:85px;">发布时间</th>
<th scope="col" style="min-width:90px;width:90px;">发布单位</th>
<th scope="col" style="min-width:65px;width:65px;">类型</th>
<th scope="col">标题(点击查看)</th>
<th scope="col" style="min-width:30px;width:30px;">附件</th>
<th scope="col" style="min-width:45px;width:45px;">置顶</th>
</tr>
</thead>
修改 首页工程经验,设置固定宽度
还是设定固定宽度.低分辨率下,就不会被挤的很难看.
<table class="table table-striped table-bordered" id="tableExper" style="font-size:14px;word-break:break-all;table-layout:fixed;">
<thead>
<tr style="font-weight:bold; font-style:unset;">
<th style="display:none" id="thId"></th>
<th style="border-top-left-radius:8px;width:70px">更新时间</th>
<th style="width:80px">经验编号</th>
<th>问题描述</th>
<th style="width:90px">产品大类</th>
<th style="width:130px">产品小类</th>
<th style="border-top-right-radius:8px;width:70px;text-align:center;">经验类别</th>
</tr>
</thead>
修改 工程经验页面, 表格设定固定宽度.
最终效果
<table class="table table-striped table-bordered" id="tableExperShare" style="font-size:24px;word-break:break-all;table-layout: fixed">
<thead id="tablehead">
<tr style="font-weight:bold; font-style:unset;">
<th style="display:none" id="thId"></th>
<th style="border-top-left-radius:8px;width:80px">更新时间</th>
<th style="width:90px">经验编号</th>
<th>问题描述</th>
<th style="width:100px">产品大类</th>
<th style="width:150px">产品小类</th>
<th style="border-top-right-radius:8px;width:70px">经验类别</th>
</tr>
</thead>
修改 工程经验页面, 搜索栏重新排版.
1024下的效果
挺费事的...ul li 排列, 内部元素label input排列 问题, 百度了半天..
里面不能有div,我调了半天也没调好.
ProjectExperience.cshtml
<ul class="Search_nvl">
<li>
<label>更新时间</label>
<input type="text" class="input-sm form-control" name="start" id="inputStartTime" value="" onfocus="new Calendar('2000','2020','0','-','yyyy-MM-dd','ymd').show(this)" readonly="readonly" />
-
<input type="text" class="input-sm form-control" name="start" id="inputEndTime" value="" onfocus="new Calendar('2000','2020','0','-','yyyy-MM-dd','ymd').show(this)" readonly="readonly" />
</li>
<li>
<label class="control-label" style="font-size:14px;">问题关键字</label>
<input type="text" class="announcementscreen" style="width:165px" id="exper_keywords" value="" />
</li>
<li>
<label class="control-label" style="font-size:14px;">经验编号</label>
<input type="text" class="announcementscreen" id="exper_no" value="" />
</li>
<li>
<label class="control-label" style="font-size:14px;">经验类别</label>
@Html.DropDownList(" ", ViewData["experiencetKindlist"] as IEnumerable<SelectListItem>, "--请选择--", new { @class = "announcementscreen", id = "exper_type" })
</li>
<li>
<label class="control-label" style="font-size:14px;">产品大类</label>
@Html.DropDownList(" ", ViewData["productKindlist"] as IEnumerable<SelectListItem>, "--请选择--", new { @class = "announcementscreen", id = "exper_bigkinds", @onchange = "GetSmallKindsList(this.value);" })
</li>
<li>
<label class="control-label" style="font-size:14px;">产品小类</label>
<select id="exper_smallkinds" class="announcementscreen">
<option value=""> </option>
</select>
</li>
<li><a href="#" class="btn btn-default btn-body" style="height:30px;padding-top:5px" onclick="refreshProjectExperTable(1)">检索</a></li>
</ul>
site.css
/*搜索栏 ul li布局*/
.Search_nvl {
list-style: none;
margin: 0px;
padding: 0px;
/* 两栏之间的间距 */
-webkit-column-gap: 1px;
-moz-column-gap: 1px;
-o-column-gap: 1px;
column-gap: 1px;
}
.Search_nvl li {
height: 30px;
list-style: none;
line-height: 30px;
display: inline-block;
}
.Search_nvl li input {
height: 26px;
display: inline-block;
width:200px;
}
.Search_nvl li label {
padding-left: 20px;
height: 30px;
font-size:14px;
font-weight: bold;
margin-right: 5px;
display: inline-block;
}
.Search_nvl li select{
height: 26px;
display: inline-block;
width:200px;
}
网友评论