通达官网仿写

114 阅读1分钟

整体介绍

通达学院官网仿写:先分出头部、内容部分和尾部。

头部设置三个同等级盒子分别为“欢迎”、“logo和搜索框”还有“导航栏”,“导航栏”为二级菜单,需要隐藏和设置hover属性且将display设置为块状。

内容部分先设置一个大盒子居中,再分四个小盒子,分别加入图片和文字,过程中运用超链接和hover属性,一行信息显示不完全则需要设置溢出隐藏,必要时设置省略号。

尾部通过运用hover属性设置鼠标悬停时图片透明度的变化,二维码和友情链接部分设置和导航栏类似。

困难及解决办法

困难:在将css内部样式改为外部样式的过程中,css中设置的背景图片显示错误。

解决办法:不要直接复制vscode中给的相对定位,先输入“../”再一个一个找。vscode给的定位常出现错误。

核心代码

头部

导航栏:二级菜单

搜索框

内容部分

分栏

利用flex布局

hover属性

超链接