网站技术干货之主页与分页布局切换原理

 时间:2024-10-12 17:19:07

1、对于网站建设初学者来说,快速入门是最重要的。好多学习者由于没有抓住网站建设的整体思路,导致后面出现这样或那样的问题。本文的宗旨在于引导读者先从整体上掌握网页设计的大纲所在,收墩芬蓥然后再像做填空题一样,把图片文字等网页元素往里填入,那么就会完成整个页面的制作。主页好了以后,以另存为的方式存为分页,保留每个页面的公共部分,比如头部、导航、底部等,分页只需要添加不一样的内容就可以了。本案例主要做出了网页的布局框架,为了明显每个部分加了红色的边框。点击到导航每个链接时,每个超链接的文字变成红色。读者可以自己试着设置其他的切换效果,比如改变背景颜色等等。网页效果图如下:

网站技术干货之主页与分页布局切换原理

2、主页index.html代码如下,注意导航部分每个链接的主页与分页一定要先设置好链接网页,以免网页切换时出现问题。

网站技术干货之主页与分页布局切换原理

4、不知道大家注意了没有,主页和新闻页代码中的红框部分,实现了类active的传递。当前页是首页,将类active应用于首页的超链接,怎剑词阶两样的道理,当前是新闻页,就将类active应用于新闻的超链接;就像运动会接力棒的传递,不同的是传递的是CSS样式的类。外部样式d1.css代码如下:

网站技术干货之主页与分页布局切换原理

5、至此,本案例制作完成。赠人玫瑰,手留余香。觉得文章对大家有帮助的话记得点赞与分享呀!

  • Dreamweaver CC 2019怎么禁止启动时打开文档?
  • 爱护牙齿小游戏怎么玩?
  • 消失的冒险家攻略
  • 缸豆的营养价值及功效
  • 情人节逃离宿舍攻略
  • 热门搜索
    昆虫大全 故事大全童话故事 虚火旺怎么办 哆啦a梦图片大全 于和伟简历个人资料简介 素材图片大全 qq怎么退群 蒙古族舞蹈视频大全 白公馆简介 私家车怎么赚钱