标签：url 前端 height color 小白学 background image CSS 属性
01.文本相关属性
文本相关属性包括字体相关属性以及文本相关属性。以下用脑图写出基本的一些属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0%;
margin: 0%;
}
h1{
color: white;
background-color: #808080;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 25px;
}
p{
width:500px ;
text-indent: 2em;
text-align: justify;
line-height: 30px;
}
b{
font-size: 20px;
}
div1{
color: #ff0000;
}
</style>
</head>
<body>
<h1>千峰简介</h1>
<p>
<b>北京千锋互联科技有限公司（简称千锋） </b>成立于2011年1月。公司总部位于北京，目前已在 <div1>深圳、上海、郑州、广州、大连、武汉、成都、西安、杭州、青岛、重庆、长沙、哈尔滨、南京、太原 </div1>建立分公司。
</p>
<p>
千锋旗下现有 <b>教育培训、人才服务、项目研发、创业孵化</b>等业务。 教育培训业务主要为大学生、企业提供技术培训服务；人才服务业务主要为企业提供优秀的互联网研发人才； 项目研发业务主要为企业提供APP解决方案及APP项目研发； 创业孵化业务为有创业梦想的学员设立，为其提供创业辅导及天使投资等服务。
</p>
<p>
千锋秉承着 <div1>“用良心做教育” </div1>的理念踏踏实实的做事， <div1>创办7年，现已成为业内口碑好、规模大、教学强的移动互联网研发培训机构。</div1> 目前累计与国内 <b>超过8200多家</b> IT相关企业建立人才输送合作，与 <b>562所大学</b> 建立实训就业合作，每年为中国IT企业输送上万名移动开发工程师。计划未来5年内实现年营收过10亿，为中国教育行业贡献一份力量。
</p>
</body>
</html>02.列表相关属性
举例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{
list-style-type:circle;
list-style-image: url(icon3.jpg);
list-style-position: inside;
/* list-style: none; */
/* background-color: burlywood; */
background-image: url(1.jpg);
/* background-repeat:repeat-y; */
/* background-position: left; */
background-attachment:fixed;
}
</style>
</head>
<body>
<ul class="div1">
<li>放松再慢慢升空</li>
<li>被窝里做一个梦</li>
<li>外面的噪音太多</li>
<li>外面的噪音太多</li>
<li>外面的噪音太多</li>
<li>外面的噪音太多</li>
<li>外面的噪音太多</li>
</ul>
</body>
</html>03.背景相关属性
注意背景属性也是可以简写的，但是不强制要求顺序。
在设置背景图片位置时，如果只有一个方位或者一个px值，只能控制水平位置那么另外一个则默认为中间值。
当有一个位置为top,bottom时，另一个值不可以为这两个。
举例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100%;
height: 800px;
/* background-color: thistle;
background-image: url(img/pic.jpg);
background-repeat: no-repeat;
background-position: left center;
background-attachment: fixed; */
background: violet url(img/pic.jpg ) no-repeat 50px ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>附练习代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
background-size: 200% 200%;
height: 1200px;
background-attachment: fixed;
background-position: center center;
overflow: hidden;
}
.box1{
background-image: url(img/bg1.png);
}
.box2{
background-image: url(img/bg2.png);
}
.box3{
background-image: url(img/bg3.png);
}
.box4{
margin-top: 0;
}
p{
height: 200px;
width: 100%;
/* line-height: 200px; */
text-align: center;
background-color: hsla(0, 0%, 100%, 0.8);
margin-top: 200px;
}
span{
font-size: 30px;
font-weight: bold;
line-height: 200px;
}
</style>
</head>
<body>
<div class="box1">
<p>
<span>Text information1</span>
</p>
</div>
<div class="box2 ">
<p class="box4">
<span>Text information2</span>
</p>
</div>
<div class="box3 ">
<p class="box4">
<span>Text information3</span>
</p>
</div>
</body>
</html>标签：url,前端,height,color,小白学,background,image,CSS,属性 来源： https://blog.csdn.net/m0_48353529/article/details/118766471
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。