6）“学院新闻”和“通知公告”如图 2 进行设计，当每行文字太多时，超出容器的文字显示为“…”。 图2 7）“通知公告”宽度 308px，高度 280px，右侧有通知时间,使用JavaScript实现获取当前时间，通知标题宽230px 显示在左侧，时间都靠右显示，如图 2 所示。

好的，根据您的要求，我为您提供以下的设计思路：

1. 对于“学院新闻”，可以使用CSS中的`text-overflow: ellipsis`属性来实现当每行文字太多时，超出容器的文字显示为“…”的效果。同时，也需要设置容器的宽度和`overflow: hidden`属性来限制容器的大小和文本的显示区域。

2. 对于“通知公告”，可以使用以下的HTML和CSS代码来实现布局和样式：

<div class="notice-container">
  <div class="title">通知标题</div>
  <div class="datetime">2022-12-20</div>
</div>

.notice-container {
  width: 308px;
  height: 280px;
  border: 1px solid #ccc;
  position: relative;
}

.title {
  width: 230px;
  height: 100%;
  padding: 10px;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.datetime {
  width: 78px;
  height: 30px;
  padding: 5px;
  position: absolute;
  top: 10px;
  right: 10px;
  text-align: right;
}

其中，`.notice-container`是通知公告的容器，设置了宽度和高度，并使用了`position: relative`属性来定位内部元素。`.title`是通知标题，设置了宽度和高度，并使用了`position: absolute`属性来定位元素。同时，也使用了和“学院新闻”相同的`text-overflow: ellipsis`属性来实现文本溢出时的省略号效果。`.datetime`是通知时间，使用了`position: absolute`属性来定位元素，并使用了JavaScript来获取当前时间并显示在右侧。

总的来说，以上就是对于“学院新闻”和“通知公告”的设计思路和实现方法。希望能对您有所帮助！