38. 大学生HTML5期末大作业 ―【三星堆文化精品网页】 Web前端网页制作 html5+css3-CSDN博客

本文链接：https://blog.csdn.net/m0_67368443/article/details/143636499

一、更多推荐

欢迎来到我的CSDN主页！Web前端网页制作、大学生期末大作业、课程设计、毕业设计、网页模版源码、学习资料等，更多优质博客文章、网页模板点击以下链接查阅：

仙女网页设计-CSDN博客

5000+完整代码，主题涵盖30+种类型:

二、网页简介

本实例应用html5+css3，页面布局简约，代码精简，适用于大学生网页课程作业设计。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

三、网页文件

本网页实例共包含5个页面：

四、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

五、代码展示

1.html

<!DOCTYPE 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;
}
.main1 div p:nth-of-type(3){
   margin: 15px 0;
   color: #999;
   font-size: 18px;
}
.main1 div p:nth-of-type(4){
   color: #777;
   margin-bottom: 30px;
}
.main1 div p:nth-of-type(5){
   width: 100px;
   height: 40px;
   line-height: 40px;
   text-align: center;
   background-color: #fff;
   border-radius: 20px;
}
.main1 div p:nth-of-type(5) a{
   display: block;
}
.main1 img{
   width: 45%;
   height: 300px;
}
.father3{
   width: 1200px;
}
.main2{
   width: 1000px;
   margin: 40px auto 0;
}
.main2 div{
   width: 45%;
}
.main2 div p:first-child{
   font-size: 40px;
   color: #fff;
}
.main2 div p:nth-of-type(2){
   color: #ccc;
   margin: 15px 0;
   font-size: 18px;
}
.main2 div p:nth-of-type(3){
   color: #ccc;
   margin-bottom: 15px;
}