主体内容与脚注的实现与发布

今天我们学习主体内容与脚注的实现和发布

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

本节课总代码如下

@charset "utf-8";
/* CSS Document */
*{/*通配符选择器*/
	margin:0px;
	padding:0px;
}
ul{
	list-style:none;
}
#box{
	/*background-color:#F00;*/
	width:1024px;
	height:1300px;
	/*margin:0 auto;*/
	margin:0 auto 0 auto;/*上 右 下 左*/
}
/*放图片，设置高度和图片一样高*/
#banner{
	background-color:#66F;
	height:209px;
}
#menu{
	background-color:#328048;/*用颜色取色器取的*/
	height:50px;
}
/*修改id为menu的、html标签下面的、ul标签的样式*/
#menu ul{
	list-style:none;/*去掉点*/
	float:right;/*靠右*/
	height:50px;	
	width:450px;
}

#menu li{
	line-height:50px;/*设置行居中*/
	float:left;/*可以使列表竖着变横着*/
	margin-left:20px;/*li距离左边那个li的距离*/
}

/*#menu ul li a{}*/
#menu a{
	color:#FFF;/*字体颜色*/
	text-decoration:none;/*去掉下划线*/
	font-size:16px;/*字体大小*/
	font-family:"微软雅黑";/*word中常见字体一般都可以写*/
}

#menu a:hover{/*当鼠标滑过超链接标签时的样式*/
	color:#F60;
}

#main{
	/*background-color:#6F0;*/
	height:1000px;
}
#left{
	/*background-color:#33C;*/
	height:1000px;
	width:250px;
	float:left;/*可以使div横向排排坐*/
}

#zuozhe{
	padding-top:15px;
	padding-left:15px;/*上边和左边留点空*/
	text-align:center;/*整个内容水平居中*/
}

#zuozhe img{
	border:1px solid #999;/*加边solid实线*/
	padding:8px;/*边与图片有个空白，类似相框*/
	border-radius:10px;/*圆角，值越大，角越园*/
}
	
#zuozhe span{
	margin:10px;/*一圈的距离*/
	display:block;/*改成盒子元素，可以识别盒子元素的一些属性：margin、border\padding*/
	/*border-top:1px #999 dashed;上面的虚线边 粗细是1，颜色是灰色 */
	border-top-color:#999;
	border-top-style:dashed;
	border-top-width:1px;
	
	border-bottom:1px #999 dashed;/*下边的虚线*/
	font-size:18px;/*字号*/
	padding-top:5px;/*内容距离边的距离-上面的*/
	padding-bottom:5px;/*下面的*/
}

/*class选择器的写法 以点开头 后面跟着html标签上的class属性里面的那个名*/
.biaoti{
	color:#FFF;
	background-color:#328048;/*背景色绿色，取色器取到的*/
	height:40px;
	width:220px;
	line-height:40px;/*设置垂直居中，值要和height的值一样*/
	font-size:16px;
	font-weight:bolder;/*加粗，h5本来就是标题，已经加粗过了，不加也可以*/
	padding-left:30px;/*左边撑出来一个空*/	
	border-radius:0 10px 10px 0;/*和margin、broder、padding，都是4个值*/
	/*顺序：左上角、右上角、右下角、左下角，0代表没有圆角*/
}

#huoli ul{
	list-style:none;/*去点*/
	padding-left:20px;
	padding-top:10px;
}

#huoli ul li{
	margin:5px;/*每个li之间的距离*/
	width:90px;
	float:left;/*因为外面的ul的宽度太小了，所以原本应该都放在一行的，会自动的掉下去，变成一行只能展示2个li*/
	
}

#huoli ul li a{
	font-size:12px;
	text-decoration:none;/*去下划线*/
	color:#333;/*网站字体一般都不是黑色，扎眼*/
}
#huoli ul li a:hover{/*鼠标滑过变色*/
	color:#090;
}

#huoli ul li img{
	margin-right:5px;/*让图标和文字之间的距离大点*/
}

#list{
	clear:both;/*清空所有的自带的float影响*/
}

#list ul{
	list-style:none;
	padding:15px;/*不靠左边和上边，留空*/
}

#list ul li{
	padding-bottom:8px;
	padding-left:15px;
	border-bottom:1px #999 dotted;/*下面的虚线：dashed或者dotted*/
	margin-bottom:8px;/*我的边和其他人的字的距离，padding我的字和我的边的距离*/
	background:url(images/icon1.gif)  no-repeat;/*不重复的话，变成背景*/
	/*background-image:url(images/icon1.gif) ;
	background-repeat:repeat-x;*/
	background-position:5px center;/*背景点的位置*/
}

#list ul li a{
	text-decoration:none;/*去掉下划线*/
	color:#333;/*黑色太扎眼，用深灰*/
	font-size:12px;	
}

#list ul li a:hover{
	color:#F60;
	text-decoration:underline;/*鼠标滑过，显示下划线*/
}

#right{
	/*background-color:#F3F;*/
	height:1000px;
	width:774px;
	float:right;/*可以使div横向排排坐*/
}

.wenzhang{
	padding:10px 30px 0 30px;/*上 右 下 左*/
}

.wenzhang h3{
	margin:10px;
	border-bottom:1px #666 dashed;/*  下边 */
	padding-bottom:8px;/*内容与边距离*/
}

.wenzhang a{
	text-decoration:none;
	color:#F60;
	font-weight:bolder;
}

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


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

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

 

转载于:https://my.oschina.net/u/4090471/blog/3031045