Java Web开发基础第五课

  这一节是对之前的网页进行加工，修改，做出最后的版面，添加内容，完成发布。

 

    首先对右侧的部分使用div标签，把页面所需展示标签写上，拷贝文章内容。具体实现如下：

  <div id="right">
                <!--先分为2个div-->
                <div class="wenzhang">
                    <h3><a href="#">你好！秋天</a></h3>
                    <span>zhaoqi@2019-04-01</span>
                    <p>
                        春天是一把琴，将优美琴声带给世人，叫他们脱去衣袄，重新奔跑在温暖的大地中；夏天是一把扇，扇去炎热，以热情的脸庞去温抚他人；冬天时一雪花，飘飘而来，为人们带来雪的姿态。</p> 
                    <p>浏览[1051]|评论[105]</p>
                    <p class="zhu">注：文字摘自网络</p>
                </div>
               具体的效果如图：

 

 

 

 

 

  设置脚注（课使用span属性），对它进行细化。

#footer{
    background-color:#328048;
    height:80px;
    clear:both;/*清空其他的div的float的影响*/
}

#footer span{
    text-align:center;/*水平居中*/
    display:block;/*盒子模型，不然居中属性也不管用*/
    color:#FFF;
    line-height:80px;/*垂直居中*/
}

 

    对网页样式、字体、颜色等加以改善。

.wenzhang a:hover{/*当div下面所有的a标签都该样式，那可以不用h3*/
    color:#690;
}

.wenzhang span{
    margin-left:520px;/*通过这个margin使文字靠右显示*/
    font-size:12px;
    color:#666;
}

.wenzhang p{
    font-family:"微软雅黑";
    font-size:14px;
    color:#666;
    line-height:35px;/*行高*/
    text-indent:2em;/*首行缩进2字符，em单位随着字的大小占2个字符空*/
}

.zhu{
    color:#999 !important;/*强制使用此样式!important*/
    font-size:10px !important;
}
 

  最后进行网页发布。可使用网上现有的云服务器配置ip，在服务器上装载tomact软件，将博客网页文件夹放到tomact/webapps/ROOT软件下，点击tomcat/bin/startup.bat启动

转载于:https://my.oschina.net/u/4090425/blog/3032723