https://www.flyingwhale.site/tags/%E5%89%8D%E7%AB%AF/Recent content in 前端 on FlyingWhale's BlogHugo -- gohugo.iozh-cnWed, 14 Dec 2022 00:00:00 +0000https://www.flyingwhale.site/p/0014/Wed, 14 Dec 2022 00:00:00 +0000https://www.flyingwhale.site/p/0014/<h2 id="前言">前言</h2> <p>由于选修了Bootstrap前端课程，就又开始了前端之旅，和之前的老师不同，这门课的老师讲授方式和技术水平都很不错，也算是学会了一些基础的网页设计理念，在此记录。</p> <h2 id="练习内容">练习内容</h2> <p>模仿实现下面的网页效果图 <img src="https://img-blog.csdnimg.cn/20200922204102971.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZseWluZ193aGFsZTE=,size_16,color_FFFFFF,t_70#pic_center" loading="lazy" alt="网页效果图" ></p> <h2 id="实现步骤">实现步骤</h2> <p><strong>建立整体框架</strong> 稍微细心留意下，可发现该页面可大致分为4部分：页头、导航栏、文章内容、页尾，如下示意图。 <img src="https://img-blog.csdnimg.cn/20200922204545166.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZseWluZ193aGFsZTE=,size_16,color_FFFFFF,t_70#pic_center" loading="lazy" alt="示意图" > <strong>进一步细化</strong>整体框架的内部框架，如下图所示。 <img src="https://img-blog.csdnimg.cn/20200922205106834.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZseWluZ193aGFsZTE=,size_16,color_FFFFFF,t_70#pic_center" loading="lazy" alt="示意图2" > <strong>填充框架内容</strong>，注意父子元素之间的宽度和高度的传递，实现得到下图。 <img src="https://img-blog.csdnimg.cn/20200922205607847.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZseWluZ193aGFsZTE=,size_16,color_FFFFFF,t_70#pic_center" loading="lazy" alt="实现的效果图" ></p> <h2 id="小结">小结</h2> <p>虽然之前也有过类似做法设计网页，但是并未如同老师教授的那样严格执行，导致最终网页的整体结构混乱。完成上诉效果图的过程中，也碰到很多问题，除了一些常见的问题之外，这次用上了Bootstarp库中的元素完成轮播图，但是调用的时候发现css文件默认修改了好多元素的属性值，导致布局混乱。对于页头，使用css实现了下拉栏的效果。需要改进的地方有很多，比如图标可以使用矢量图，可以进一步实现成响应式页面，实现作品展示的阴影效果等等。此练习暂时告一段落，有机会会继续更新改进版。</p>