整体介绍
通达学院官网仿写:先分出头部、内容部分和尾部。
头部设置三个同等级盒子分别为“欢迎”、“logo和搜索框”还有“导航栏”,“导航栏”为二级菜单,需要隐藏和设置hover属性且将display设置为块状。
内容部分先设置一个大盒子居中,再分四个小盒子,分别加入图片和文字,过程中运用超链接和hover属性,一行信息显示不完全则需要设置溢出隐藏,必要时设置省略号。
尾部通过运用hover属性设置鼠标悬停时图片透明度的变化,二维码和友情链接部分设置和导航栏类似。
困难及解决办法
困难:在将css内部样式改为外部样式的过程中,css中设置的背景图片显示错误。
解决办法:不要直接复制vscode中给的相对定位,先输入“../”再一个一个找。vscode给的定位常出现错误。
核心代码
头部
导航栏:二级菜单
搜索框
内容部分
分栏
利用flex布局
hover属性