企业实训第5

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"> <!--先分为2个div-->

先把页面需要展示的标签写上，然后将文章内容拷贝进去 <div class="wenzhang">

            	<h3><a href="#">你好！秋天</a></h3>
				
                <span>zhaoqi@2019-04-01</span>
				
                <p>
				
                    春天是一把琴，将优美琴声带给世人，叫他们脱去衣袄，重新奔跑在温暖的大地中；夏天是一把扇，扇去炎热，以热情的脸庞去温抚他人；冬天时一雪花，飘飘而来，为人们带来雪的姿态，但是秋天的叶则更令我喜欢。</p>
					
                   <p> 秋日的叶是富有诗意的，你好，秋天，你好！</p>
                
                <p>浏览[1051]|评论[105]</p>
				
				<p class="zhu">注：文字摘自网络</p>
				
            </div>
			
            <div class="wenzhang">
			
            	<h3><a href="#">你好！秋天</a></h3>
				
                <span>zhaoqi@2019-04-01</span>
				
                <p>
				
                    春天是一把琴，将优美琴声带给世人，叫他们脱去衣袄，重新奔跑在温暖的大地中；夏天是一把扇，扇去炎热，以热情的脸庞去温抚他人；冬天时一雪花，飘飘而来，为人们带来雪的姿态，但是秋天的叶则更令我喜欢。</p>
					
                   <p> 秋日的叶是富有诗意的，你好，秋天，你好！</p>
				   
                <p>浏览[1051]|评论[105]</p>
				
				<p class="zhu">注：文字摘自网络</p>
				
            </div>
			
        </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;

}

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

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

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

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

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

}

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

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

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

尾部部分：

#footer span{

text-align:center;/*水平居中*/

display:block;/*盒子模型，不然居中属性也不管用*/

color:#FFF;

line-height:80px;/*垂直居中*/

}

转载于:https://my.oschina.net/u/4090474/blog/3031001