模拟的重庆红岩格式和布局
先上效果图
代码如下,图片需要自己导入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
width: 1200px;
height: 80px;
}
li{
list-style-type: none;
}
#app>li{
list-style-type: none;
float: left;
text-align: center;
position: relative;
}
#app li a:hover{
color: #fff;
background-image: url(./nav.png);
}
#app li ul{
position: absolute;
top: 80px;
}
/* 控制整个移动 */
#app{
margin-left: 100px;
width: 1100px;
height: 80px;
margin-top: 150px;
}
a{
text-decoration: none;
display: block;
width: 120px;
height: 80px;
line-height: 80px;
border: 1px solid #fff;
background-color: red;
border-width: 0 0 0 0;
color: #fff;
font-size: 20px;
font-weight: bold;
}
.rotation{
width: 1200px;
height: 400px;
}
.rotation img{
width: 1290px;
height: 400px;
margin-left: -100px;
}
.prev,.next{
height: 50px;
position: absolute;
top: 300px;
margin-top: 100px;
cursor: pointer;
}
.prev{
left: 0px;
}
.next{
right: 0px;
}
#box{
height: 80px;
width: 1400px;
z-index: -2;
margin-top:0px ;
position: absolute;
background-color: red;
}
.img4{
margin-top: -130px;
position: absolute;
margin-left: 100px;
}
.img3{
margin-top: -130px;
position: absolute;
margin-left: 900px;
}
.tel{
margin-top: -90px;
position: absolute;
margin-left: 640px;
font-size: 10px;
}
.serach{
margin-top: -60px;
position: absolute;
margin-left: 1000px;
font-size: 10px;
height: 20px;
width: 100px;
}
.button{
margin-top: -60px;
position: absolute;
margin-left: 1105px;
height: 25px;
color: #fff;
background-color: rgb(170, 16, 16);
}
[v-clock]{
display: none;
}
</style>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="box"></div>
<img src="./3.png" class="img3">
<img src="./4.png" class="img4">
<p class="tel"style="color: red;">设为首页 | 加入收藏 | 热线:023-65312300(沙坪坝区)023-63303457(渝中片区)| English</p>
<input type="serach" name="" class="serach" placeholder="请输入搜索关键字">
<button class="button">搜索</button>
<div id="app" v-cloak></div>
<template id="root">
<li v-for="item in view" @mouseover="item.show=!item.show" @mouseout="item.show=!item.show">
<a :href="view.url">
{{item.name}}
</a>
<ul v-show="item.show">
<li v-for="items in item.view2">
<a :href="items.url">
{{items.name}}
</a>
</li>
</ul>
</li>
<input class="prev" type="button" value="<" v-on:click="prev()" />
<div class="rotation">
<img :src="imgageName[index]" />
</div>
<input class="next" type="button"value=">" v-on:click="next()" />
</template>
<script>
Vue.createApp({
template:`#root`,
data() {
return{
view:[
{name:"首页",url:"#",show:false,view2:[]},
{name:"关于红岩",url:"#",show:false,view2:[
{name:"红岩文化",url:"#"},
{name:"博物馆机构",url:"#"},
{name:"历史沿革",url:"#"}
]},
{name:"公告动态",url:"#",show:false,view2:[
{name:"文博信息",url:"#"},
{name:"政务平台",url:"#"},
{name:"公告",url:"#"},
{name:"专题报道",url:"#"}
]},
{name:"馆藏精品",url:"#",show:false,view2:[
{name:"一级文物",url:"#"},
{name:"二级文物",url:"#"},
{name:"三级文物",url:"#"}
]},
{name:"陈列展览",url:"#",show:false,view2:[
{name:"虚拟展览",url:"#"},
{name:"基本陈列",url:"#"},
{name:"复原陈列",url:"#"},
{name:"临时展览",url:"#"},
{name:"展览交流",url:"#"}
]},
{name:"研究开发",url:"#",show:false,view2:[
{name:"历史研究",url:"#"},
{name:"艺术创作",url:"#"},
{name:"影音在线",url:"#"},
{name:"文创产品",url:"#"}
]},
{name:"公共教育",url:"#",show:false,view2:[
{name:"党性教育",url:"#"},
{name:"爱国主义教育",url:"#"},
{name:"研学实践教育",url:"#"},
{name:"科普教育",url:"#"}
]},
{name:"参观服务",url:"#",show:false,view2:[
{name:"景点介绍",url:"#"},
{name:"服务内容",url:"#"},
{name:"网上预约",url:"#"},
{name:"志愿服务",url:"#"}
]},
{name:"网上预约",url:"#",show:false,view2:[]},
],
//引入照片
imgageName:['./1.jpg','./2.jpg']
,index:0
}
},
methods:{
//调用轮番图变化的函数
next(){
this.index++;
if(this.index >= this.imgageName.length){
this.index=0;
}
},
prev(){
this.index--;
if(this.index < 0){
this.index=this.imgageName.length-1;
}
}
}
}).mount('#app')
</script>
</body>
</html>