频道栏目
首页 > 程序开发 > web前端 > HTML 5 > 正文
HTML5设置div标签以及其内容均为居中显示以及添加阴影实例讲解
2018-06-02 10:47:34         来源:hudaJY的博客  
收藏   我要投稿

先看看效果图片:

\

我们将p这一块设置为水平方向居中显示,以及调整其与上边框的距离。

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title>阴影内容相关</title>  
        <style>  
            *{  
                margin: 0;  
                padding: 0;//  
            }  
            .p{  
                width: 300px;  
                height: 300px;  
                background-color: red;  
                margin: 0 auto;  
                /*设置p为水平居中显示*/  
                text-align: center;  
                /*设置p里面的内容为居中显示*/  
                line-height: 200px;  
                /*设置p里面的内容向下200px*/  
                margin-top:100px ;  
                /*设置p离顶部距离为100px*/  
                box-shadow: 10px 5px 6px 5px black;  
            }  
        </style>  
    </head>  
    <body>  
        <p class="p">  
            我是p里面的内容  
        </p>  
    </body>  
</html>  

补充的知识点:

1.外边距:标签与标签之间的距离就是外边距

格式;

margin-top: ;

margin-right: ;

margin-left: ;

margin-bottom: ;

连写格式: margin: 上 右 下 左;

margin属性本质上用于控制兄的关系之间的间隙 padding 一般用于控制父子关系(嵌套模型)

margin: 0 auto; //设置里面的盒子本身为水平居中显示 :注:此方法对垂直方向无效;

//设置为水平和垂直 均为居中显示: margin: 150px auto; (150px举例)

margin: 0 auto; //设置盒子本身为水平居中;

2.内边距: 边框和内容之间的距离即为内边距

格式:

padding-top: ;

padding-right: ;

padding-bottom: ;

padding-left: ;

连写格式: padding: 上 右 下 左;

省略时的规律:

上 右 下 -> 左边的取值和右边的一样

上 右 -> 左边的取值与右边的一样 下边的取值与上边一样

上 -> 其他三边取值与上边一样

给标签设置完内边距之后,标签占有的宽度以及高度会发生变化

3.部分p相关内容 :

    <p>标签内设置字体、行高、间距等
	p 简写形式
		p.box$*5   即出现5个名称分别为box1 box2 ....的p   tab键
	    <p>
		height: 100px;
		background-color: skyblue;		
		margin-top: 100px;//设置此板块里面内容距离上边界的距离
		text-align: center;//设置p里面的内容为居中显示
		line-height:100px;//设置p里面的内容距离p上边界的距离


		display:inline block;  //行内块元素
	  </p>

		margin: 10px 20px; //设置当前所在标签(自身)的上下间距以及左右间距

4.添加阴影部分:

给盒子添加阴影:

格式: box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影

(默认情况下为外阴影)

点击复制链接 与好友分享!回本站首页
上一篇:HTML5重写video控制栏,Chrome去除下载按钮的代码实例讲解
下一篇:HTML5中的伪类选择器实现一张图片翻转特效(代码实例)
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站