博客静态网页 第四部分

博客静态网页

主体内容与脚注的实现

知识点：

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>注：文字摘自网络</p>

   </div>

 

.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;

}

 

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

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

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

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

 

1、优先级相同时，则采用就近原则，选择最后出现的样式;
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

2、span的盒子属性不好用，但是left和right还是管用的。要是用到margin-top/bottom等不起作用的话，可以再设置display:block

3、首行缩进：2em，我们字体大小一般用px这个单位，这里em首行缩进用，更好用一点，说是不管是字体多大，可以自适应缩进2个字符的大小

 

.wenzhang span{

font-size:12px;

color:#666666;

margin-left:520px;

}

.wenzhang p{

font-family:"微软雅黑";

font-size:14px;

color:#666666;

line-height:35px;

text-indent:2em;

}

.zhu{

color:#999999 !important;

font-size:10px !important;

}

 

 

 

<!--尾部的部分-->

    <div id="footer">

     <span>临沂大学 计算机科学与技术18级</span>

    </div>

 

Css：

#footer{

height:80px;

background-color:#328048;

}

#footer span{

display:block;

text-align:center;/*文字居中*/

line-height:80px;

color:#FFFFFF;

}

发布

步骤：

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

需要做一些配置，比如

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

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

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

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

需要做一些配置，比如

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

将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/4090676/blog/3031141