用Bootstrap模板完成一个漂亮的奋斗目标页面
Eve
23人收藏 4157次学习

用Bootstrap模板完成一个漂亮的奋斗目标页面

下载BootStrap模板页面

点右键“链接另存为”下载模板文件 http://1ke.co/files/course/09/original-template.html

保存到你的电脑,用浏览器打开模板文件,展示的效果如下:

 

 

 

改变菜单上的文字 设置背景色

在上一节下载的页面的基础上做两个修改:

1 修改菜单上的文字,注意:菜单上的链接也做了相应的改变。




2 在CSS定义区域定义body的背景颜色和文字颜色

修改完成后保存,用浏览器打开查看效果

 

点右键“链接另存为”下载老师制作的版本作为学习参考 http://1ke.co/files/course/09/goals.html

 

 

 

为三个目标区域分别添加背景图

1 下载背景素材图 (点右键“链接另存为”)将图片和你修改的页面放到同一个目录下
http://1ke.co/files/course/09/workout.jpg

http://1ke.co/files/course/09/style.jpg

http://1ke.co/files/course/09/career.jpg

2 在上节修改的基础上

删除 container标签内的内容

然后在container标签内增加三个目标区域的内容

3 通过CSS定义这三个区域的背景图

保存文件 用浏览器打开查看效果,点击不同的菜单看看会发生什么

 

点右键“链接另存为”下载老师制作的版本作为学习参考

http://1ke.co/files/course/09/goals-finished.html

 

 

 

所有源码下载

http://1ke.co/files/course/09/goals.rar

 

 

 

 

加入1KE学习俱乐部

1KE学习俱乐部是只针对1KE学员开放的私人俱乐部