4.1企业实训

4、主体内容与脚注的实现

知识点：

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

（1）先将右侧的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>

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

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/4090526/blog/3031622