《Web应用基础》课程结业报告

本课程报告我将介绍我使用html和css编写的网页。

这是一个宣传游戏 Civilization6的网站。

主页如下

本页面导航栏连接另外的网页，我对<div>标签和<li>标签 样式进行设计如设置box的宽高背景颜色以及分布方式达成效果

部分css代码如下

.nav{
    width: 100%;
    background-color:rgb(249, 210, 159);
border-top: 2px solid rgb(205, 55, 55);



}
.nav ul{
    display: flex;
    justify-content: center;
    padding: 20px 0;
    
}
.nav ul li{
    
list-style: none;
margin: 0 20px;
}
.nav ul li a{
    color: black;
    text-decoration: none;
}
.nav ul li a:hover{
    color: #cb1e1e;
}

布局设置：

此页面布局是通过对盒模型的操控（如大小，分布等），具体将每个板块的长度和宽度以及外边距设定成自己想要的地步吗，再通过左浮动使几个板块并排。

css代码： 

.con div{
    width: 300px;
    height: 500px;
    margin: 50px;
    float: left;
}

悬浮效果的按钮的设置：

    设定好 <div>的长度、宽度、字体、背景颜色，使用 position: fixed 将其固定在页面上 ，right(left), bottom 调整它的位置。

     悬浮效果靠设置阴影来完成

css代码：

 width: 110px;
    height: 40px;
    border-radius: 5px;
    background-color: rgb(115, 219, 153);
    text-decoration: none;
    text-align: center;
    line-height: 40px;
    color: rgb(64, 61, 61);
    position: fixed;
    right:  20px;
    bottom: 20px;
    box-shadow: 2px 2px 5px gray;

其他的网页设计通常是通过插入图片，文字的方式展示介绍内容，使用，<div>,<h><p>嵌套完成，再css修改他们的大小和格式以及位置，某些地方还使用 边框的颜色和大小来进行美化.

<div><img src="img/c2.png" alt="图片" width="250px" height="250px">
            <h2>冻土</h2>
            <p>食物+1  生产力+0
            </p>

           <p>
            冻土是世界寒带地区里的半冻结土地。没人会在冻土上建造城市，除非那里有他们迫切需要的资源（冻土里往往含有丰富的矿产和石油矿床）…或者他们已无处可去。
           </p></div>

.c1{
    text-align: center;
    width: 100%;
    height: 50px;
    
    border-bottom: 2px solid black;
    margin-bottom: 40px;

对于开发过程中遇到的问题：

1、网站的图标不能正常显现：在网上比对后发现 自己写的rel="ico"，改成icon后正常。

2、<p>标签里的文字 使用text-align :center 没有达到效果：

不知道什么出了问题，直接套一个div，在div里设置文本居中成功。

3、不知道怎么布局：在bilibili上进行学习了几种布局，虽然基本没有用上。

比如三栏布局

双鸭翼布局

 

 网格布局