博客静态网页—（第四部分·完结）

五、右边部分：

·HTML 中的标签：块标签 div 、 <a> 、行内标签 <span> 、 h3 标题，段落 <p>

CSS 样式中的属性：

      class 选择器和标签选择器混合使用写法

       高： height   宽： width

       内边距： pandding

       外边距： margin

       字体： font-size 、 font-family 、 font-weight 、 color

       行高： line-height ( 设置垂直居中 )

       浮动： float

      下划线： text-decoration

     首行缩进：text-indent:2em

①. 先 将 右 侧的 div 块划分成 2 个 div 区域，使用 div 标签

<!—右侧的部分-->
<div id="right">
	<div class="wenzhang"></div>
            	<div class="wenzhang"></div>
</div>

②.先把页面需要展示的标签写上，然后将文章内容拷进去

   <div class="wenzhang">
         <h3><a href="#">你好！秋天</a></h3>
         <span>zhaoqi@2018-11-11</span>
         <p>...文章内容...</p>
         <p>浏览[200] | 评论[234]</p>
         <p>注：文字摘自网络</p>
   </div>
   <div class="wenzhang">
          <h3><a href="#">快乐是一种心态</a></h3>
          <span>zhaoqi@2018-11-11</span>
          <p>...文章内容...</p>
          <p>浏览[200] | 评论[234]</p>
          <p class="zhu">注：文字摘自网络</p>
   </div>

css设置：

Padding：内边距，内容与边框距离。设置顺序：上 右  下 左

border-bottom：下边框，设为虚线，浅灰色，粗细为1

padding-bottom：只设置内边距的下边的距离

text-decoration:none;  去掉超链接的下划线

.wenzhang{
	padding:0 30px 0 30px;
}
.wenzhang h3{
	margin:10px;
	border-bottom:1px dashed #666;	
	padding-bottom:8px;	
}
.wenzhang h3 a{
	text-decoration:none;
	color:#F60;
}
.wenzhang h3 a:hover{
	color:#390;
}
.wenzhang span{
	font-size:12px;
	color:#666666;
	margin-left:520px;/*通过这个margin使文字靠右展示*/
}
.wenzhang p{
	font-family:"微软雅黑";
	font-size:14px;
	color:#666666;
	line-height:35px;/*行高*/
	text-indent:2em;/*首行缩进2字符，em单位随着字的大小占2个字符空*/
}
.zhu{
	color:#999999 !important;/*强制使用此样式!important*/
	font-size:10px !important;
}

六、网页尾部

1.尾部内容

<div id="footer">
    		<span>临沂大学出品 @2019-04-01</span>
    	</div>

2.css设置

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

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

七、发布

步骤：

l 首先，你得有一台服务器（可以被外网访问的电脑），简单点就是网上有现成的云服务器，比如阿里云 ECS 服务器（ ps ：天下没有免费的午餐，不花钱就用别想了。。好在有学生机，月功能费 9.9 元）

         需要做一些配置，比如

               ①  放开80端口，不然ip不能被外网访问啥的

               ②  需要域名的，可以买个域名，不过想要用这个域名代替ip地址访问你的服务器，必须把域名备案，就是邮寄一些资料到某某地址，然后~~等啊等~~~通过了就可以用了

       此时你就有个外网的 ip 了，就是别人访问这个 ip 就可以访问的你服务器

l 然后，在服务器上装个软件， tomcat( 可以存放个网页，给个可以被外网访问的路径地址，这种软件很多，不过tomcat 后期我们学 java 也会用到，我们这里就用它了 ) 。。百度下载，然后放上去，然后傻瓜式安装

         需要做一些配置，比如

                   如果这学期只有这个静态网页用，可以使用80端口跑tomcat，但是后期做商城什么的，不建议用。我们先不管这个，就设置80

l 将 blog 博客网页的文件夹放到 tomcat/ webapps /ROOT 下，点击 tomcat/bin/startup.bat 启动。。

      本地浏览器访问地址： http://http:// 47.97.102.140/blog/blog.html  或者 http:// www.softok.top/blog/blog.html

转载于:https://my.oschina.net/u/4090553/blog/3031572