1. 三星堆文化网页实例大学生期末大作业 Web前端网页制作 html+css

本文链接：https://blog.youkuaiyun.com/VX_L_5201314168/article/details/139381156

一、网页简介

本实例共包含6个页面，应用html+css，包括Div、菜单栏、菜单栏切换效果、二级页面等。页面简单，代码精简，为初级的学生水平，适用于大学生网页课程作业设计。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等主流编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页效果

三、代码展示

节选代码如下：

1.html

<html>
   <head>
       <meta charset="utf-8">
       <link rel="stylesheet" href="./css/style.css">
       <title>三星堆</title>
   </head>
   <body>
       <div class="father1 auto">
           <div class="top auto flex">
               <div>
                   <img src="./images/logo.png" alt="">
                   三星堆
               </div>
               <ul class="flex">
                   <li><a style="text-decoration: underline;" href="index.html">首页</a></li>
                   <li><a href="list2.html">历史</a></li>
                   <li><a href="list3.html">工艺</a></li>
                   <li><a href="list4.html">文化</a></li>
                   <li><a href="list5.html">更多</a></li>
               </ul>
           </div>
           <div class="main1 auto flex">
               <div>
                   <p>三星堆</p>
                   <p>古蜀文化</p>
                   <p>Sanxingdui ruins culture</p>
                   <p>三星堆古遗址位于四川省广汉市西北的鸭子河南岸，分布面积
12平方千米，距今已有5000至3000年历史，是迄今在西南地区
发现的范围最大、延续时间最长、文化内涵最丰富的古城、古
国、古蜀文化遗址。三星堆遗址被称为20世纪人类最伟大的考
古发现之一，昭示了长江流域与黄河流域一样，同属中华文明
的母体，被誉为“长江文明之源”。</p>
                   <p><a href="list2.html">了解更多</a></p>
               </div>
               <img src="./images/2.png" alt="">
           </div>
       </div>
   </body>
</html>

...

2.CSS

代码如下（节选示例）：

html{
   font-family: "microsoft yahei,arial, helvetica, sans-serif";
   font-size: 16px;
}
*{
   margin: 0;
   padding: 0;
}
li,ul,ol{
   list-style: none;
}
a{
   text-decoration: none;
   color: #000;
}
.flex{
   display: flex;
}
.auto{
   margin: 0 auto;
}
.clearfix::after{
   content: '';
   display: block;
   clear: both;
}
body{
   background-color: #3C3D42;
}
.father1{
   width: 1100px;
   height: 600px;
   background: #3C3D42 url(../images/1.png) no-repeat;
   background-size: 100% 100%;
}
.top{
   width: 1000px;
   height: 70px;
}
.top div{
   width: 120px;
   height: 70px;
   line-height: 70px;
   font-size: 20px;
   color: #fff;
}
.top div img{
   width: 45px;
   height: 45px;
   vertical-align: middle;
}
.top ul{
   width: 500px;
   margin-left: 50px;
   height: 70px;
}
.top ul li{
   width: 100px;
   height: 70px;
   line-height: 70px;
   text-align: center;
}
.top ul li a{
   display: block;
   color: #ccc;
}
.main1{
   width: 1000px;
   margin: 40px auto 0;
   justify-content: center;
}
.main1 div{
   width: 45%;
}
.main1 div p:nth-of-type(-n+2){
   font-size: 40px;
   color: #fff;
}