中职院-国外合作首页-新闻中心部分

3-column home page news list

h5, template, list

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1483
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    padding: 0px;
    margin: 0px;
}
#main {
    width: 1100px;
    margin: 0px auto;
}
.news {
    float: left;
    display: inline;
    margin: 0px 8px;
    width: 350px;
    height: 355px;
}
#main h2 {
    color: #004e87;
    line-height: 42px;
    height: 42px;
    font-size: 20px;
    font-weight: 100;
    float: left;
    padding-left: 10px;
}
.more {
    float: right;
    margin: 20px 0 10px 0;
}
#new_c #img,
#notice_c #img,
#zs_c #img {
    padding: 5px 10px 10px 10px;
    clear: both;
}
#new_c ul,
#notice_c ul,
#zs_c ul {
    list-style: none;
}
#new_c ul li,
#notice_c ul li,
#zs_c ul li {
    border-bottom: dotted 1px #CCC;
    line-height: 34px;
    height: 34px;
    background: url(/uploads/user_upload/36477/t2.png) no-repeat 0 13px;
    padding-left: 10px;
}
#new_c span,
#notice_c span,
#zs_c span {
    float: right;
    display: inline;
    color: #ccc;
    font-family: "微软雅黑";
    font-size: 13px;
}
#new_c a,
#notice_c a,
#zs_c a {
    color: #333;
    text-decoration: none;
    font-family: "微软雅黑";
    font-size: 13px;
}

HTML

<div id="main">
    <div id="news" class="news">
        <h2>新闻中心</h2>
        <a href="" class="more"><img src="/uploads/user_upload/36477/more.jpg">
        </a>
        <div id="new_c">
            <div id="img"><img src="/uploads/user_upload/36477/news_11.jpg" width="100%">
            </div>
            <ul>
                <li><span>2017-06-30</span><a href="" title="我校成功举办第二届“香港职业教育体验营”活动 ">我校成功举办第二届“香港职业教育体验</a>
                </li>

<li><span>2017-06-21</span><a href="" title="香港职业训练局一行来我校交流访问 ">香港职业训练局一行来我校交流访问 </a>
                </li>

<li><span>2017-06-21</span><a href="" title="美国北亚利桑那大学来我校交流访问">美国北亚利桑那大学来我校交流访问</a>
                </li>

<li><span>2017-06-23</span><a href="" title="中澳项目合作会议在我校召开 ">中澳项目合作会议在我校召开 </a>
                </li>

<li><span>2017-06-23</span><a href="" title="美国夏威夷大学卡比奥拉尼学院代表再次来访 ">美国夏威夷大学卡比奥拉尼学院代表再次</a>
                </li>

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

<div id="notice" class="news">
        <h2>通知公告</h2>
        <a href="" class="more"><img src="/uploads/user_upload/36477/more.jpg">
        </a>
        <div id="notice_c">
            <div id="img"><img src="/uploads/user_upload/36477/gonggao_t.jpg" width="100%">
            </div>
            <ul>
                <li><span>2017-06-30</span><a href="" title="我校成功举办第二届“香港职业教育体验营”活动 ">我校成功举办第二届“香港职业教育体验</a>
                </li>

<li><span>2017-06-21</span><a href="" title="香港职业训练局一行来我校交流访问 ">香港职业训练局一行来我校交流访问 </a>
                </li>

<li><span>2017-06-21</span><a href="" title="美国北亚利桑那大学来我校交流访问">美国北亚利桑那大学来我校交流访问</a>
                </li>

<li><span>2017-06-23</span><a href="" title="中澳项目合作会议在我校召开 ">中澳项目合作会议在我校召开 </a>
                </li>

<li><span>2017-06-23</span><a href="" title="美国夏威夷大学卡比奥拉尼学院代表再次来访 ">美国夏威夷大学卡比奥拉尼学院代表再次</a>
                </li>

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

<div id="zhaosheng" class="news">
        <h2>招生咨询</h2>
        <a href="" class="more"><img src="/uploads/user_upload/36477/more.jpg">
        </a>
        <div id="zs_c">
            <div id="img"><img src="/uploads/user_upload/36477/zhaosheng.jpg" width="100%">
            </div>
            <ul>
                <li><span>2017-06-30</span><a href="" title="我校成功举办第二届“香港职业教育体验营”活动 ">我校成功举办第二届“香港职业教育体验</a>
                </li>

<li><span>2017-06-21</span><a href="" title="香港职业训练局一行来我校交流访问 ">香港职业训练局一行来我校交流访问 </a>
                </li>

<li><span>2017-06-21</span><a href="" title="美国北亚利桑那大学来我校交流访问">美国北亚利桑那大学来我校交流访问</a>
                </li>

<li><span>2017-06-23</span><a href="" title="中澳项目合作会议在我校召开 ">中澳项目合作会议在我校召开 </a>
                </li>

<li><span>2017-06-23</span><a href="" title="美国夏威夷大学卡比奥拉尼学院代表再次来访 ">美国夏威夷大学卡比奥拉尼学院代表再次</a>
                </li>

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

3-column home page news list

h5, template, list

编辑器支持Emmet

快捷键

3-column home page news list

h5, template, list

中职院-国外合作首页-合作交流部分

HTML5一款不规则大小瓦片堆叠风格的新闻网站首页模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：