今日任務:
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;
}
