本文是作者完全自主网页设计的第二篇记录，主要涵盖了登录界面的样式优化和首页的初步编写。在登录界面，通过CSS实现了表单的圆角边框和透明背景，以及内容的垂直居中。首页部分，创建了index.html和index.css，添加了logo，并编写了导航栏，通过调整元素布局和样式，实现了导航栏与logo的协调显示。
系列文章目录
目录
一、继续优化登录界面
我们接着上次做的登录界面继续优化登录界面的样式。
打开login.css，在里面编写css代码，进行样式的实现。首先给表单设置大小，然后增加一个背景颜色白色，设置透明度，把表单的边框设置为圆角。这样让登录界面看起来更美观一点。
代码如下：
form{
width: 300px;
height: 200px;
background-color: white;
border-radius: 20px;
opacity: 0.7;
}
border-radius表示圆角边框，后面的值表示圆角的大小，这里使用的单位是px，只用一个值表示四个角的大小一样。
opacity表示透明度，值从0.1-1.0，值越小，透明度越高。
然后把表单里面的内容垂直居中放在白色背景里面，方法和把表单垂直居中放在页面一样。代码如下：
form{
display: flex;
}
table{
margin:auto;
}为了实现垂直居中效果需要设置table的上一个节点的大小，前面写过代码了，这里不再重复。
接下来给表单添加标题：登录。这个我们在login.html中进行编写。我们直接在<table>标签中添加表格的标题标签<caption>，它有默认样式在表格的上方居中显示，这样我们就不用额外的添加css样式来进行居中显示。然后在login.css中对标题进行样式的添加，代码如下：
caption{
font-family: "新宋体";
font-weight: 900;
}到这里登录页面的样式就暂时的添加完了，后面如果想添加内容再进行添加。样式效果的显示如图所示：
二、首页的编写
1.创建文件
写完登录页面，接下来编写首页。首先创建实现页面的html文件和编写样式的css文件。右击项目，选择新建→HTML文件，输入文件名index.html，完成html文件的创建。然后再次右击项目，选择新建→样式表→CSS文件，输入文件名index.css，完成样式表的创建。
2.添加logo
我确定了网页的主题是做一个介绍韩国女团IZ*ONE的网页。一般网页都会放logo上去，所以我也添加一个logo到我做的网页。这里直接用IZ*ONE的logo就行了。为了使项目的文件看起来整洁有序，所以在项目中创建一个文件夹用于放置图片。右击项目，选择新建→目录，输入文件夹名img，完成文件夹的创建。然后把logo图片放到这个文件夹下。
存放好logo图片后，就是代码的实现了。打开index.html文件，在<body>中添加<img>标签实现图片的添加，代码如下：
<img src="img/logo.jpeg" alt="logo"><img>标签表示添加图片，src是图片存放的路径，alt是图片无法显示时用于替代的文字。
注意：alt和src一样都是必需的属性，如果没有替代的文字可以用使用空字符串。
我在写代码的时候就不知道要写alt属性，是WebStorm的警告告诉我缺少这个属性我才写的。
添加好图片后如果图片大小不合适的话就需要调整图片的大小，调整图片不是前端方面的技术所以这边不做介绍。
3.编写导航栏
接下来是导航栏的编写。刚开始插入logo，没有对logo进行样式的编写，它是默认放在页面的左上角的，然后我看见logo右边那一行是空的，所以我就想把导航栏写在logo的右边，高度和logo的高度一致，这样子比较好看。然后导航栏的宽度有151px，我就想把导航栏分成两行，一行三个栏目。
为了实现这个效果，我真的是搞了很久，原因就是我太菜了。一开始我没有对logo进行任何的样式编写，然后给导航栏设置了一个<div>，然后我发现把<img>标签包含在<div>里面可以实现图片和<div>在同一行显示，这个就给我后面挖了一个大坑。然后我就在<div>里面写导航栏需要的文字。在HTML中，文字标签是<p>，然后我就给文字加上<p>标签，然后出现的效果是文字显示在图片的上面或者下面，没有显示在同一行，然后我就去百度让文字和图片显示在同一行的方法。百度上说在css中图片对应的节点上添加vertical-align:middle;属性，就可以实现图片和文字在同一行显示并且是在图片高的中间显示。但是我添加了他并没有效果实现。后面发现是因为我添加了<p>标签。因为<div>标签中包含了图片，他就包含了图片的行高，如果你再添加其他标签在里面的话，他又会添加其他标签的行高。所以我就把<p>标签去掉了，然后vertical-align:middle;属性的效果就实现了。然后我要把导航栏中的文字分两行，也就是需要换行。html中的换行标签是<br/>，在需要换行的地方添加<br/>标签，然后换行是换行了，但是<div>也添加了<br/>的高度，所以这个方法也不行。后面又尝试了把导航栏做成表格，给logo右边的位置添加两个大小相同的<div>，这些方法都不行。最后在不断地尝试中，我发现了不能直接把<img>放进<div>里面，这样子虽然可以实现图片和<div>在同一行显示，但是会出现上面出现的问题。然后我就把<img>放到<div>的外面，给<img>设置大小，设置左浮动，然后再给右边的导航栏添加<div>，设置<div>的大小。设置了浮动之后，<img>就可以和<div>在同一行显示。这样在<div>中添加其他标签就不会再给<div>添加其他标签的高度。
图片和导航栏在同一行显示实现了之后，就要给导航栏添加文字。我想要实现的效果是把每一个栏目的名字在导航栏中均匀的分布，并且垂直居中显示。这里也搞了很久。百度告诉我给文字添加text-align-last：justify属性就可以实现，但是我添加之后他出现的效果是每一个字都均匀分布了，跟我想要的效果完全不一样，而且也没有实现换行。然后在百度上找了很久都没有找到简单的方法。然后我就去找了之前上课的时候做的网页，用的方法是<ul><li>标签，然后加上一大堆css样式进行实现。我觉得这种方法需要的代码很多，太麻烦了，不够简便。然后我知道给每个栏目都划分成一样大小的<div>然后再设置文字垂直居中就行了，但是这样子我觉得也不够简便，所以也不想用这个方法。最后实在是没别的办法了，我就给每个栏目的文字分别添加了<p>标签，设置相同的class值，因为在同一个文件中id值不能设置相同的，class值才可以。然后平均设置大小。因为换行我也不知道怎么实现，如果有知道的可以告诉我。所以我给每一行文字都设置了相同大小的<div>和class值。然后再用和前面设置垂直居中一样的方法设置文字垂直居中显示就行了。这种方法其实也就是和划分成一样的<div>是一样的，如果各位有更好的方法也可以告诉我。
代码如下：
index.html
<div class="navigation">
<p>首页</p><p>团体</p><p>成员</p>
</div>
<div class="navigation">
<p>歌曲</p><p>综艺</p><p>发展</p>
</div>index.css
*{
padding: 0;
margin: 0;
}
.navigation{
width: auto;
height:75.5px;
background-color: #ea579e;
display: flex
}
img{
height:151px ;
width: 202px;
float: left;
}
p{
float: left;
height: 50%;
margin: auto;
text-align: center;
}实现效果：
总结
今天对登录页面做了进一步的样式添加，对首页的导航栏进行了初步的编写。其实代码并不多也并不难，但是因为我太菜了，所以写这些代码就花了很多时间。希望后面可以有所进步，提高效率。
403
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
