山东大学项目实训（九）——前端完善之特色诊疗页面

经过组内商讨，在我们的前端开发初步完成之后，我们决定将医院页面和医生问答等功能分离开来，在原本的基础上为了使医院页面更加丰富需要对前端进行进一步的完善。

如图所示是目前医院的主页截图

本次我要再添加一个“特色诊疗”页面，页面效果如下：

（这只是页面组件，页面头部以及底部均有统一组件）

布局分析

1. 全局样式：

   • 将所有元素的内边距和外边距设置为0，列表样式去除。

2. 主背景和内容：

   • .main_bg：定义了相对定位，高度100%，字体颜色和背景颜色，使用微软雅黑字体。
   • .main_content：设置了自动左右外边距来居中对齐，使用盒阴影、边框和背景颜色来美化，使用弹性盒模型（flexbox）进行布局，确保内容左右两侧对齐且不换行。

3. 标题：

   • .leftNavTitle：设置了字体大小、颜色、粗体以及边距，使其视觉上更显眼，并与内容的左边距对齐。

4. 内容标题：

   • h2.title_header：设置了高度、下边框、字体大小、颜色、行高和对齐方式，确保标题在视觉上的突出。

5. 列表内容和段落：

   • ul.dxk-ul li p：设置了段落的首行缩进。
   • ul.dxk-ul li：设置了行高和字体大小。

6. 图片：

   • .responsive-img：设置了宽度为100%，高度自动调整，确保图片响应式布局。

7. 辅助样式：

   • .pr10和.pl10：分别设置了左右内边距。
   • .mb20：设置了底部外边距。
   • .col-md-6：设置了宽度和盒模型。
   • .clearit：用于清除浮动效果。

8. 响应式设计：

   • 使用媒体查询（@media only screen and (max-width: 1366px)）来调整在小屏幕下的样式。

后期还可以把右边图片赋予超链接，链接至AI对话页面