实训第二天0528.pm4
css相关知识点（重）
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 500px;
height: 500px;
border: 1px solid #000;
text-align: right; /*文本对其方式*/
text-decoration: underline; /*文本下划线*/
color: #f00; /*设置字体的颜色*/
line-height: 166.67px; /*文本的行高*/
/*一行文字所占的高度,让他上下居中*/
/*font-family: "Microsoft YaHei";*/ /*设置字体的样式:宋体，楷体... 去百度，翻译中英文 */
font-family: "宋体"; /*自己去百度找到宋体对应的英文，节约空间*/
font-style: italic; /*规定字体是否倾斜*/
font-weight: bold;
font-size: 16px ; /*设置字体的大小*/
/*在浏览器中,默认的字体大小16px
谷歌浏览器中，字体大小最小可以为12px
火狐没有限制
*/
}
a{
text-decoration: none;
}
h1{
font-weight: normal;
font-size: 5px;
}
</style>
</head>
<body>
<!--文本类样式-->
<div>
今天天气不错！！！今天天气不错！！！今天天气不错！！！今天天气不错！！！今天天气不错！！！今天天气不错！！！今天天气不错！！！今天天气不错！！！
</div>
<a href="">去百度</a>
<h1>这个是h1标题</h1>
</body>
</html>
列表及样式
<style type="text/css">
ul{
list-style: none;
cursor: none; /*设置鼠标的样式*/
display: block; /*元素分为三大类,设置元素的显示方式
行内 inline
块级 block
行内块 inline-block
none 无
* */
}
li{
display: inline;
}
input{
outline: none;
/*visibility: hidden;*/
display: none;
/*这两个的区别?*/
}
</style>
<body>
<!--有序列表和无序列表-->
<!--实际开发中有序列表基本不用-->
<!--这三个都是块级标签-->
<ol type="1" start="3">
<li>英语</li>
<li>语文</li>
<li>数学</li>
<li>政治</li>
<li>地理</li>
</ol>
<ul type="square">
<li>英语</li>
<li>语文</li>
<li>数学</li>
<li>政治</li>
<li>地理</li>
</ul>
<input type="text" />
</body>
文本可视程度
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 1px solid #000;
}
.div01{
background-color: #f00;
opacity: 0.1; /*取值的范围是0-1之间，可以为0和1*/
/*表示整个元素*/
}
.div02{
background-color: rgba(255,0,0,0.1); /*最后一个参数a表示透明度，取值的范围是0-1之间，可以为0和1*/
/*只表示背景颜色*/
}
</style>
</head>
<body>
<div class="div01">这个是第一段文本</div>
<div class="div02">这个是第二段文本</div>
</body>
</html>
