码迷,mamicode.com
首页 > Web开发 > 详细

css基础 设置背景 背景色 背景图片 不平铺 背景图片在x、y轴上的位置

时间:2017-02-16 14:37:39      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:color   tom   text   距离   position   lis   模块   兼容   成就   

 镇场诗:
    清心感悟智慧语,不着世间名与利。学水处下纳百川,舍尽贡高我慢意。
    学有小成返哺根,愿铸一良心博客。诚心于此写经验,愿见文者得启发。
——————————————————————————————————————————

code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        /*first,全局css设置*/
            /*去除内外边距后,兼容性好*/
            html,body,h1,p{
                padding:0px;
                margin:0px;
            }
            /*去除项目符号*/
            ul,li,ol{list-style:none;}
            /*全局链接初始化*/
            a:link,a:visited{color:blue;text-decoration:none;}
            a:hover{color:red;}
            /*网页中的普通文字 标题的大小不变,超链接的颜色不变*/
            body{font-size:12px;color:#444;background-color:#ccc;}
        /*second,新闻模块设置*/
            .news{
                border:1px solid #b200ff;
                width:400px;
                margin:40px auto;/*div在网页中居中显示*/
                padding:20px 20px 176px;/*边线到内容的距离*/
                            /*171px的内填充是用来装载图片的*/
                /*加背景图*/
                        /*背景色   背景图                  不平铺*/
                background:white url(images/bgpicture.jpg) no-repeat;
                        /*控制背景图的方位*/
                background-position-x:152px;/*400+20+20-20-268(内容宽+左右填充和-图片宽度-图片到右边的距离)*/
                background-position-y:bottom;
            }
            .news .title{
                padding:5px 0px 10px;/*内填充 上5 下15 左右0px*/
                text-align:center;
            }
            .news p{
                text-indent:25px;/*首行缩进*/
                line-height:150%;
                padding:7px 0px;/*内填充 上下16 左右0*/
            }
    </style>
</head>
<body>
    <div class="news">
    <h1 class="title">九华山地藏菩萨露天铜像</h1> <!--块元素h1,p 自动撑满父元素-->
<p class="newsContent1">九华山地藏菩萨露天铜像坐落于中国四大佛教名山之一、国家级重点风景名胜区、首批5A级旅游景区的九华山。1995年开始筹建,由顶峰国际规划设计公司承担景区规划设计,圣像主体高99米,是目前世界上最高的露天地藏菩萨大铜像,是九华山国际性佛教道场的标志性景观。</p>
<p class="newsContent2">九华山地藏菩萨露天铜像,像身高度84米,加上莲花座底盘高度99米,整个铜像连同底座高155米,是目前世界上最大最高的佛教造像之一。地藏菩萨为比丘相,右手持锡杖,左手持摩尼宝珠。面向西北方,端庄慈祥,以示“昭示众生,国泰民安”。</p>
    </div>
</body>
</html>

 

文字介绍节选自《百度百科》

result:

技术分享

 



——————————————————————————————————————————
博文的精髓,在技术部分,更在镇场一诗。编辑器 VS2015,浏览器 Firefox。
html+css+js,强,值得努力学习。我跟着传智播客的视频教程学习。
我是一个新手,所以如果博文的内容有可以改进的地方,甚至有错误的地方,请留下评论,我一定努力改正,争取成就一个良心博客。
注:此文仅作为科研学习,如果我无意中侵犯了您的权益,请务必及时告知,我会做出改正。

css基础 设置背景 背景色 背景图片 不平铺 背景图片在x、y轴上的位置

标签:color   tom   text   距离   position   lis   模块   兼容   成就   

原文地址:http://www.cnblogs.com/jinlingzi/p/6404708.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!