仿豆瓣网(电脑版网页)HTML+CSS实现
步骤一:将豆瓣电脑版网页以图片形式保存下来:
利用了chrome里面的插件:
步骤二:将图片放置到PS中,研究布局:
我将其分为header部分,banner部分,section部分,footer部分;其中相应的比如header部分又要分为header_up部分和header_down部分,header_down部分又得左右划分为左,中,右部分等。
步骤三:确定页面宽度,每部分高度,以及主体内容区域高度,宽度(测量时PS中有辅助线,以及测量工具,比较简单!)。
一般页面部分设置position:relative;主体内容部分设置:position:absolute进行定位。
步骤四:代码编写&测试(HTML+CSS总共2000多行代码)
全部是HTML+CSS代码完成了静态页面的制作!利用的技术有:CSS spirit(图片精灵),position,display等特性。
当时光不再,莫空留遗恨!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步