养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

web前端初学--头部和导航

时间:2024-11-10 23:35:06

最简单的头部和导航效果,给初学者小试牛刀!图中显示文字可自行拟定,最终效果如下:

web前端初学--头部和导航

工具/原料

软件Dreamweavercs5

软件photoshopcs5

方法/步骤

1、首先打开photoshopcs5,根据上节课的分享很容易做好ps的准备

2、目标1填充页面背景色值:#f龀音孵茧1f1f1选择工具栏最下方的填充工具,点击前景色框,输入色值f1f1f1(快捷键alt+del填充背景前景色)

web前端初学--头部和导航

3、目标2设置头部文字1选择工短铘辔嗟具栏T工具输入头部文字(文字可自行组织)2头部标题设置:字号30微软雅黑颜色:黑色效果:锐利

web前端初学--头部和导航

web前端初学--头部和导航

4、目标3完成导航部分1选择矩形工具画出导航条,默认前景色是黑色2再次选择T工具输入导航文字3文字设置:白色宋体14号字

web前端初学--头部和导航

web前端初学--头部和导航

5、目标4完成html和css代艨位雅剖码将html插入到<body></body>之间将css代码输入完成代码如图所示:

web前端初学--头部和导航

web前端初学--头部和导航

6、完成后,F12浏览看效果

© 一点知识