問題
#可能原因
沒做RWD/ 原始標題文字處理失當
原始程式
位置:https://www.mnd.gov.tw/ : 475
<a href="Publish.aspx?title=國防消息&p=75204&SelectStyle=公告專區" title="新竹縣107年「民安4號演習」已於3月30日(星期五)辦理完畢">
新竹縣107年「民安4號演習」已於3月3..</a>
位置:https://www.mnd.gov.tw/ : 488
<a href="Publish.aspx?title=國防消息&p=75203&SelectStyle=公告專區" title="國防部國防採購室107年4月第1、2週開標案件預覽表">
國防部國防採購室107年4月第1、2週開..</a>
建議修改
公告專區裡面的標題縮略(將多餘的內容以…刪節號表示)請不要用手動處理,css 有一個 attr叫做text-overflow, 換行的部份則是用display: inline-block處理
<a href="Publish.aspx?title=國防消息&p=75204&SelectStyle=公告專區" title="新竹縣107年「民安4號演習」已於3月30日(星期五)辦理完畢">
<span style="text-overflow : ellipsis; display : inline-block">新竹縣107年「民安4號演習」已於3月30日(星期五)辦理完畢</span></a>
補充
修正之後截圖(用了span以後不知道為什麼套到標題的background-color)
1個讚
問題:
可能原因:
RWD 設定錯誤
原始程式:
位置:
inspector://www.facebook.com/plugins/inspector-stylesheet:1
element.style {
min-width: 180px;
width: 500px;
}
建議修改:
建議用@media的方式把[._2p3a]的[width]修正為[100%]
@media (min-width: 300px) and (max-width: 991px){
._2p3a {
width: 100%;
min-width: 180px;
}
}
補充
修正後之截圖
結尾(選填,可增加網站建議) (edited)
無
問題:
可能原因:
RWD 沒設定
建議修改:
因為新聞的標題與內文都是屬於較長的文字內容,
因此建議重寫版面配置改為上圖下文的方式(參考instagram),
優先衡量再不影響版面的情況下讓使用者能在每一篇看到的最多字。
參考連結:如何使用CSS的「text-overflow: ellipsis;」屬性限制內容字數?
補充
無
結尾(選填,可增加網站建議) (edited)
無
問題:
可能原因:
RWD 設定問題
原始程式:
.principal th {
color: #333333;
background: #f6f6f6;
font-weight: normal;
border-bottom: #cccccc dotted 1px;
padding: 2px 5px;
text-align: left;
width: 30%;
}
建議修改:
把width改大一點即可。
.principal th {
color: #333333;
background: #f6f6f6;
font-weight: normal;
border-bottom: #cccccc dotted 1px;
padding: 2px 5px;
text-align: left;
width: 40%;
}
補充
無
結尾(選填,可增加網站建議) (edited)
無
可能原因:
RWD 根本沒設定
原始程式:
element.style {
}
建議修改:
element.style {
text-align: center;
}
補充
修正後之截圖
結尾(選填,可增加網站建議) (edited)
無
問題:
可能原因:
RWD 根本沒設定
原始程式:
.armystyle td, td {
padding: 16px;
font-size: 1em;
}
建議修改:
@media (max-width: 420px){
.armystyle td, td {
padding: 0;
font-size: 1em;
}
}
補充
無
結尾(選填,可增加網站建議) (edited)
無
問題:
可能原因:
所見即所得問題
原始程式:
<p style="">國軍志願役士官兵於每年春節前十日,<br>
依行政院頒布之「軍公教人員年終工作獎金<br>
發給注意事項」及個人年終考績等要件,按<br>
前一年12月份所領取之薪俸、專業加給及<br>
主管職務加給計發年度之年終工作獎金。</p>
建議修改:
請參考文章 [Ray2018 所見即所得編輯器的問題]
參考連結:https://hackmd.io/s/S1qyth49z
補充
無
結尾(選填,可增加網站建議) (edited)
無
問題:
可能原因:
使用者體驗問題
建議修改:
把element位置換一下就好了
<div class="img-rwd768" style="">
<h2><span id="ctl00_ContentPlaceHolder1_LabelTitle2">國防譯粹 第45卷第2期</span></h2><table class="table-bordered">
<tbody><tr>
<td id="Subject">專題名稱</td>
<td id="Publisher">發表人</td>
</tr>
<tr>
<td headers="Subject">定義新型態俄式資訊作戰
<input type="image" name="ctl00$ContentPlaceHolder1$RtList2$ctl01$ButDown" id="ctl00_ContentPlaceHolder1_RtList2_ctl01_ButDown" title="4502-10_574066.pdf-檔案下載" src="Images/DownLoad.jpg" style="border-width:0px;cursor:pointer;">
(下載次數:51)
</td>
<td headers="Publisher">Scott J. Harr 譯者:黃文啟</td>
</tr>
<tr>
<td headers="Subject">新杜魯門主義
<input type="image" name="ctl00$ContentPlaceHolder1$RtList2$ctl02$ButDown" id="ctl00_ContentPlaceHolder1_RtList2_ctl02_ButDown" title="4502-5_561090.pdf-檔案下載" src="Images/DownLoad.jpg" style="border-width:0px;cursor:pointer;">
(下載次數:28)
</td>
<td headers="Publisher">Tim Kaine 譯者:章昌文</td>
</tr>
<tr>
<td headers="Subject">正視直升機式指揮官的危害
<input type="image" name="ctl00$ContentPlaceHolder1$RtList2$ctl03$ButDown" id="ctl00_ContentPlaceHolder1_RtList2_ctl03_ButDown" title="4502-2_020479.pdf-檔案下載" src="Images/DownLoad.jpg" style="border-width:0px;cursor:pointer;">
(下載次數:36)
</td>
<td headers="Publisher">Lynn Marie Breckenridge 譯者:黃國賢</td>
</tr>
</tbody></table><div class="callout clearfix armystyle">
<span id="ctl00_ContentPlaceHolder1_lbWarning"></span>
<br>
搜尋:<input name="ctl00$ContentPlaceHolder1$txtSearch" type="text" id="ctl00_ContentPlaceHolder1_txtSearch" title="搜尋">
<input type="submit" name="ctl00$ContentPlaceHolder1$btnSearch" value="確定" id="ctl00_ContentPlaceHolder1_btnSearch">
<input type="submit" name="ctl00$ContentPlaceHolder1$btnClear" value="清除" id="ctl00_ContentPlaceHolder1_btnClear">
</div><span id="ctl00_ContentPlaceHolder1_LbLink"><a title="歷史資料" href="PublishMPPeriodical-Old.aspx?title=軍事刊物&id=2">歷史資料</a></span><table class="table-bordered">
<tbody><tr>
<th id="MPBookName">軍事期刊刊物名稱</th>
<th id="Yearly">年度</th>
<th id="Periodical">期別</th>
<th id="MPTable">檢視專題</th>
<th id="dates">公告日期</th>
</tr>
<tr>
<td headers="MPBookName">國防譯粹</td>
<td headers="Yearly">107</td>
<td headers="Periodical">第45卷第3期</td>
<td headers="MPTable">
<a id="ctl00_ContentPlaceHolder1_RtList_ctl01_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl01$LkBt','')">檢視專題</a></td>
<td headers="dates">107/04/02</td>
</tr>
<tr>
<td headers="MPBookName">國防譯粹</td>
<td headers="Yearly">107</td>
<td headers="Periodical">國防譯粹徵才啟事(4/1-4/15)</td>
<td headers="MPTable">
<a id="ctl00_ContentPlaceHolder1_RtList_ctl02_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl02$LkBt','')">檢視專題</a></td>
<td headers="dates">107/03/31</td>
</tr>
<tr>
<td headers="MPBookName">國防譯粹</td>
<td headers="Yearly">107</td>
<td headers="Periodical">第45卷第2期</td>
<td headers="MPTable">
<a id="ctl00_ContentPlaceHolder1_RtList_ctl03_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl03$LkBt','')">檢視專題</a></td>
<td headers="dates">107/03/16</td>
</tr>
<tr>
<td headers="MPBookName">國防譯粹</td>
<td headers="Yearly">107</td>
<td headers="Periodical">第45卷第1期</td>
<td headers="MPTable">
<a id="ctl00_ContentPlaceHolder1_RtList_ctl04_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl04$LkBt','')">檢視專題</a></td>
<td headers="dates">107/02/05</td>
</tr>
<tr>
<td headers="MPBookName">國防譯粹</td>
<td headers="Yearly">106</td>
<td headers="Periodical">第44卷第12期</td>
<td headers="MPTable">
<a id="ctl00_ContentPlaceHolder1_RtList_ctl05_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl05$LkBt','')">檢視專題</a></td>
<td headers="dates">106/12/06</td>
</tr>
<tr>
<td headers="MPBookName">國防譯粹</td>
<td headers="Yearly">106</td>
<td headers="Periodical">第44卷第11期</td>
<td headers="MPTable">
<a id="ctl00_ContentPlaceHolder1_RtList_ctl06_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl06$LkBt','')">檢視專題</a></td>
<td headers="dates">106/11/22</td>
</tr>
<tr>
<td headers="MPBookName">國防譯粹</td>
<td headers="Yearly">106</td>
<td headers="Periodical">第44卷第10期</td>
<td headers="MPTable">
<a id="ctl00_ContentPlaceHolder1_RtList_ctl07_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl07$LkBt','')">檢視專題</a></td>
<td headers="dates">106/10/11</td>
</tr>
<tr>
<td headers="MPBookName">國防譯粹</td>
<td headers="Yearly">106</td>
<td headers="Periodical">第44卷第9期</td>
<td headers="MPTable">
<a id="ctl00_ContentPlaceHolder1_RtList_ctl08_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl08$LkBt','')">檢視專題</a></td>
<td headers="dates">106/08/23</td>
</tr>
<tr>
<td headers="MPBookName">國防譯粹</td>
<td headers="Yearly">106</td>
<td headers="Periodical">第44卷第8期</td>
<td headers="MPTable">
<a id="ctl00_ContentPlaceHolder1_RtList_ctl09_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl09$LkBt','')">檢視專題</a></td>
<td headers="dates">106/08/02</td>
</tr>
<tr>
<td headers="MPBookName">國防譯粹</td>
<td headers="Yearly">106</td>
<td headers="Periodical">第44卷第7期</td>
<td headers="MPTable">
<a id="ctl00_ContentPlaceHolder1_RtList_ctl10_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl10$LkBt','')">檢視專題</a></td>
<td headers="dates">106/07/11</td>
</tr>
<tr>
<td headers="MPBookName">國防譯粹</td>
<td headers="Yearly">106</td>
<td headers="Periodical">第44卷第6期</td>
<td headers="MPTable">
<a id="ctl00_ContentPlaceHolder1_RtList_ctl11_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl11$LkBt','')">檢視專題</a></td>
<td headers="dates">106/06/13</td>
</tr>
<tr>
<td headers="MPBookName">國防譯粹</td>
<td headers="Yearly">106</td>
<td headers="Periodical">第44卷第5期</td>
<td headers="MPTable">
<a id="ctl00_ContentPlaceHolder1_RtList_ctl12_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl12$LkBt','')">檢視專題</a></td>
<td headers="dates">106/05/15</td>
</tr>
<tr>
<td headers="MPBookName">國防譯粹</td>
<td headers="Yearly">106</td>
<td headers="Periodical">第44卷第4期</td>
<td headers="MPTable">
<a id="ctl00_ContentPlaceHolder1_RtList_ctl13_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl13$LkBt','')">檢視專題</a></td>
<td headers="dates">106/04/06</td>
</tr>
<tr>
<td headers="MPBookName">國防譯粹</td>
<td headers="Yearly">106</td>
<td headers="Periodical">第44卷第3期</td>
<td headers="MPTable">
<a id="ctl00_ContentPlaceHolder1_RtList_ctl14_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl14$LkBt','')">檢視專題</a></td>
<td headers="dates">106/03/08</td>
</tr>
<tr>
<td headers="MPBookName">國防譯粹</td>
<td headers="Yearly">106</td>
<td headers="Periodical">第44卷第2期</td>
<td headers="MPTable">
<a id="ctl00_ContentPlaceHolder1_RtList_ctl15_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl15$LkBt','')">檢視專題</a></td>
<td headers="dates">106/02/07</td>
</tr>
<tr>
<td headers="MPBookName">國防譯粹</td>
<td headers="Yearly">107</td>
<td headers="Periodical">第45卷第2期</td>
<td headers="MPTable">
<a id="ctl00_ContentPlaceHolder1_RtList_ctl16_LkBt" title="檢視專題" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$RtList$ctl16$LkBt','')">檢視專題</a></td>
<td headers="dates">107/03/16</td>
</tr>
</tbody></table>
<br>
</div>
補充
修正後之電腦版截圖
修正後之手機版截圖
結尾(選填,可增加網站建議) (edited)
無
問題:
可能原因:
圖片解析度不足
原始程式:
.connectwrap img {
height: 55px;
}
建議修改:
@media (min-width: 300px) and (max-width: 991px){
.connectwrap img {
height: 100%;
}
}
補充
修正後之截圖
結尾(選填,可增加網站建議) (edited)
無