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

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

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,强,值得努力学习。我跟着传智播客的视频教程学习。
我是一个新手,所以如果博文的内容有可以改进的地方,甚至有错误的地方,请留下评论,我一定努力改正,争取成就一个良心博客。
注:此文仅作为科研学习,如果我无意中侵犯了您的权益,请务必及时告知,我会做出改正。

时间: 2024-10-28 14:17:28

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

移动端----CSS基础设置

<html> <head> <meta charset="utf-8"> <title>移动端----CSS基础设置</title> <meta name="keyword" content="移动端----CSS基础设置"> <meta name="discription" content="移动端----CSS基础设置">

css基础 设置div块的上下左右的内填充距离padding(缩写形式)

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

css基础 设置div块的上下左右外填充距离margin(缩写形式)

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

css基础 设置div 上下左右边框线的样式

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

CSS入门(css简介与样式汇总、CSS的使用方式、CSS样式表的特征、CSS基础选择器和复杂选择器、边框阴影)

一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 CSS :构建HTML元素的样式 样式汇总: color:red 字体颜色 font-size:字体大小 font-family:字体样式 background-color 背景颜色 width:宽度 height:高度 字体使用实例(样式) font-family:字体的种类 font-size:字

html+css基础 - 个人备忘录

//======================html部分===================// 表现内容<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 创建一个css链接<link rel="stylesheet" type="text/css" href="css/css.css" />

前端之CSS基础篇

CSS介绍 什么是CSS? CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. CSS注释 /*这是注释*/ 注释是代码之母.--摘自哪吒语录 CSS的几种引入方式 行内样式 行内式是在标记的style属性中设定CSS样式.不推荐大规模使用. 1 <p style=&qu

XHTML+CSS基础知识(四):用CSS控制页面

1.CSS写入页面的方法有哪些? 行内式:直接在标签当中利用style属性来写样式表. 内嵌式:将所有的样式表提取出来放到网页头部的style标签当中. 链接式:将样式表单独写成一个.css文件,利用link标签在网页头部引用,W3C标准推荐. 导入式:利用@import来引入样式表,由于效率等等问题已经被淘汰 2.CSS样式表的优先级? 理论上:行内样式>内嵌样式>链接样式>导入样式 实际上:就近原则,内嵌.链接.导入在同一个文件的头部,谁距离相应的代码近,谁的优先级别就更高一些.相当

HTML + CSS CSS设置背景图片后图片没有铺满屏幕等

在15PB学习了一个星期的 HTML + CSS之后,发现还有一些东西需要去记忆,俗话说的好: 眼过千遍不如手过一遍,这就把需要记忆的东西记下来. 很多时候我们遇到的情况是: 设置背景图片background-image:url(xxx.jpg); 如果背景图片不平铺就达不到全屏的效果,如果平铺了之后效果就有些差强人意,这时候CSS这个属性就派上用场了 background-size: cover; //把背景图像扩展至足够大,以使背景图像完全覆盖背景区域. 这个属性有四个值: length 设