第四周第一天上班

今日任务:

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;
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第四周第一天上班。我骑电动
    我不想和他们说那么多家长里短。 我自己在心中决定，我要走我自己的路。 尽管姐姐说跑一天是一天，车已经很久了。但是我...
    lygly9阅读 1,135评论 0赞 0
  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,005评论 25赞 709
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 14,690评论 1赞 92
  • 乔布斯
    今早打开微博看到一条微博：《十封电邮解剖乔布斯个性：率直而不乏诙谐》乔布斯去世已有三年，但他生前说过的一些话却言犹...
    RobinZhang阅读 2,958评论 0赞 3
  • 回头
    那是关于很久以前的记忆。最初的上学情景，一个规模很小的小园，坐着三十多个孩子。家都是附近的。那时的我对于上学是十分...
    云翻海浪阅读 2,586评论 0赞 1

友情链接更多精彩内容