不是框架页,模仿框架页的左右结构

由于做论坛时要给用户能复制地址,但框架页上地址是不变的,所以不能用框架页,但又要保持左边菜单不能随整页一起滚动。只能用模板页,但又要做出框架页的效果。
< html >
< head >
< style  type ="text/css" >
html,body
{
width
:100%;
height
:100%;
margin
:0px;
padding
:0px;
overflow
:hidden;
}

#Main
{
position
:absolute;
padding-left
:210px;
margin
:0px 0px 0px 0px;
width
:100%;
height
:100%;
overflow-x
:hidden;
overflow-y
:auto;
z-index
:1;
border
:solid #000000 1px;
}

#MenuBar
{
position
:absolute;
margin
:0px 0px 0px 0px;
width
:200px;
height
:100%;
background
:#ccc;
z-index
:2;
overflow-x
:hidden;
overflow-y
:auto;
}

</ style >
</ head >
< body  scroll ="no" >
< div  id ="MenuBar" ></ div >
< div  id ="Main" ></ div >
</ body >

</ html >  
 
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用Vue框架模仿黑马程序员官网,你可以按照以下步骤进行操作: 1. 创建Vue实例:首先,在HTML文件中引入Vue.js库,并创建一个Vue实例。在实例中,你可以定义数据、方法和计算属性等。 2. 绑定数据和视图:使用Vue的数据绑定语法,将数据和视图进行绑定。你可以在HTML中使用双花括号{{}}来显示数据,也可以使用v-bind指令来绑定属性。 3. 创建组件:根据官网的结构,将面拆分为多个组件。每个组件都有自己的模板、数据和方法。你可以使用Vue的组件系统来创建和注册组件。 4. 路由配置:使用Vue Router来配置面的路由。你可以定义不同的路由路径和对应的组件,以实现面之间的切换。 5. 状态管理:使用Vuex来管理应用的状态。你可以在Vuex中定义状态、mutations和actions等,以实现数据的共享和管理。 6. 样式设计:根据官网的样式,使用CSS来设计面的样式。你可以使用Vue的样式绑定语法,将样式与数据进行绑定。 7. 响应式交互:根据官网的交互效果,使用Vue的指令和事件处理机制,实现面的响应式交互。你可以使用v-on指令来监听事件,也可以使用v-if和v-for等指令来控制元素的显示和循环。 8. 发布部署:最后,将你的代码打包并发布到服务器上,以实现在浏览器中访问你的模仿官网。 下面是一个简单的示例代码,演示了如何使用Vue框架模仿黑马程序员官网: ```html <!DOCTYPE html> <html> <head> <title>模仿黑马程序员官网</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <header> <h1>{{ title }}</h1> </header> <nav> <ul> <li v-for="item in menu" :key="item.id">{{ item.name }}</li> </ul> </nav> <main> <router-view></router-view> </main> <footer> <p>{{ copyright }}</p> </footer> </div> <script> // 创建Vue实例 const app = new Vue({ el: '#app', data: { title: '模仿黑马程序员官网', menu: [ { id: 1, name: '首' }, { id: 2, name: '课程' }, { id: 3, name: '讲师' }, { id: 4, name: '社区' }, { id: 5, name: '关于我们' } ], copyright: '版权所有 © 2021 黑马程序员' } }); </script> </body> </html> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值