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

HTML学习笔记 CSS样式 第六节 (原创)

时间:2017-09-10 01:19:24      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:lan   styles   com   doctype   lin   style   center   页面   pos   

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式</title>
<link rel="stylesheet" href="tzy.css" type="text/css">
</head>
<body>
<p>测试能否被继承</p>
<h2>啦啦啦啦啦啦啦啦</h2>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
<p>测试能否被继承</p>
</body>
</html>



css文件tzy.css
body {
background: blue;
/*背景颜色,不能被继承*/
background-image: url("http://mpic.tiankong.com/125/4a0/1254a004e301cef092bbb4259655e309/640.jpg");
/*设置图片*/
width: 900px;
height: 900px;
background-size: 500px 500px;
/*设置图片大小*/
background-repeat: no-repeat;
/*设置图片不允许重复*/
background-attachment: fixed;
/*设置滚动页面的时候图片不滚动*/

}

p {
width: 150px;
height: 20px;
background: red;
}

h2 {
background-image: url("http://mpic.tiankong.com/125/4a0/1254a004e301cef092bbb4259655e309/640.jpg");
/*设置图片*/

background-repeat: repeat;
/*设置图片允许重复(默认)*/
background-repeat: repeat-x;
/*设置图片X轴可以重复*/
background-repeat: repeat-y;
/*设置图片y轴可以重复*/
background-repeat: no-repeat;
/*设置图片不允许重复*/
background-position: right center;
/*设置图片起始位置可以写入 100px 100px*/

}

HTML学习笔记 CSS样式 第六节 (原创)

标签:lan   styles   com   doctype   lin   style   center   页面   pos   

原文地址:http://www.cnblogs.com/ttzzyy/p/7499871.html

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