网页

最新推荐文章于 2024-09-12 18:45:53 发布

chuncui11

最新推荐文章于 2024-09-12 18:45:53 发布

阅读量320

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/chuncui11/article/details/80507717

该网页为河南省政府官方网站的布局设计，包含顶部红色区域显示政府名称，灰色导航栏提供多个链接入口，以及左侧绿色区域列出相关新闻或政策信息。网页采用HTML与CSS进行布局，通过:hover效果增强交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0 auto;}
.box{
width: 1000px;
height: 600px;
background-color: pink;
}.a1{
width: 1000px;
height: 160px;
}
.a1-1{
width: 120px;
height: 160px;
background-color: red;
float: left;
}
.a1-2{
width: 800px;
height: 160px;
background-color: red;
float: right;
}
.a1-2:hover{
transform: rotate(360deg);
transition: all 10s;
}

.a2{
width: 1000px;
height: 50px;
background-color: darkgray;
line-height: 50px;
}
a{
text-decoration: none;
margin-left: 80px;
}
a:hover{
background-color: darkred;
font-size: 20px;
}
.a3{
width: 600px;
height: 300px;
background-color: #008000;
float: left;
line-height: 40px;
list-style: none;
}

</style>
</head>
<body>
<div class="box">
<div class="a1">
<div class="a1-1">
a1-1
</div>
<div class="a1-2">
<span>
<font size="15px" color="white">河南省人民政府</font>
</span>
</div>
</div>
<div class="a2">
<p>
<a href="#">首页</a>
<a href="#">河南要闻</a>
<a href="#">政府信息公开</a>
<a href="#">政务服务</a>
<a href="#">互动交流</a>
<a href="#">河南概况</a>
</p>
</div>
<div class="a3">
<ul style="margin-top: 15px;">
<li style="list-style: none;"><a href="#">河南省贯彻落实十三五就业精神</a></li>
<li><a href="#">河南省贯彻落实十三五就业精神</a></li>
<li><a href="#">河南省贯彻落实十三五就业精神</a></li>
<li><a href="#">河南省贯彻落实十三五就业精神</a></li>
<li><a href="#">河南省贯彻落实十三五就业精神</a></li>
<li><a href="#">河南省贯彻落实十三五就业精神</a></li>

</ul>
</div>
</div>
</body>
</html>