<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css 选择器</title>
<style type="text/css">
div{
color:red;
}
#box{
color:green;
}
.red{
color:red;
}
.bold{
font-weight:bold;
}
.yahei{
font-family:'Microsoft Yahei';
}
.duanluo{
text-indent:28px;
font-size:14px;
}
.duanluo em{
font-style:normal;
color:pink;
}
.list{
list-style:none;
}
.list li{
height:30px;
}
.list a{
text-decoration:none;
font-family:'Microsoft Yahei';
font-size:14px;
}
</style>
</head>
<body>
<div class="red bold yahei">这是一个div</div>
<div id="box" class="red">这是第二个div</div>
<div class="red yahei">这是第三个div</div>
<p class="duanluo yahei">
HTML是 <em>HyperText Mark-up Language</em> 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
</p>
<p>
<em>xhtml</em>制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求。
1、所有的标签必须小写
2、所有的属性必须用双引号括起来
3、所有标签必须闭合
4、img必须要加alt属性(对图片的描述)
</p>
<ul class="list">
<li><a href="">新闻标题</a></li>
<li><a href="">新闻标题</a></li>
<li><a href="">新闻标题</a></li>
<li><a href="">新闻标题</a></li>
<li><a href="">新闻标题</a></li>
<li><a href="">新闻标题</a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格样式</title>
<style type="text/css">
.goods_list{
width:600px;
height:200px;
border:1px solid #333;
border-collapse:collapse;
font-family: 'Microsoft Yahei';
}
.goods_list th,.goods_list td{
border:1px solid #333;
text-align:center;
}
.goods_list th{
background-color:#3366cc;
color:#fff;
}
</style>
</head>
<body>
<table class="goods_list">
<tr>
<th>序号</th>
<th>名称</th>
<th>数量</th>
<th>价格</th>
<th>备注</th>
</tr>
<tr>
<td>1</td>
<td>苹果</td>
<td>1000</td>
<td>¥ 5.00</td>
<td>销售中</td>
</tr>
<tr>
<td>2</td>
<td>苹果</td>
<td>1000</td>
<td>¥ 5.00</td>
<td>销售中</td>
</tr>
<tr>
<td>3</td>
<td>苹果</td>
<td>1000</td>
<td>¥ 5.00</td>
<td>销售中</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css 盒子模型</title>
<style type="text/css">
.box{
width:200px;
height:100px;
background-color:gold;
/* border-top-width:10px;
border-top-color:#000;
实线：solid 虚线:dashed 点线:dotted
border-top-style: solid; */
/* border-top:10px solid #000;
border-left:10px dashed #000;
border-right:10px dotted #000;
border-bottom:10px solid #000; */
border:10px solid #000;
/*
padding-top:20px;
padding-left:40px;
padding-right:100px;
padding-bottom:200px;
*/
/*
分别设置：上 右 下 左 的值
padding:20px 100px 200px 40px;
*/
/* 分别设置：上(20px) 左右(100px) 下(200px) 的值
padding:20px 100px 200px;*/
/* 分别设置：上下(20px) 左右(100px) 的值
padding:20px 100px;*/
/* 同时设置四个边的值 */
padding:100px;
/*
margin-top:50px;
margin-left:100px;
margin-right:200px;
margin-bottom:300px;
*/
/*
分别设置：上 右 下 左 的margin值
margin:20px 100px 200px 40px;
*/
/* 分别设置：上(20px) 左右(100px) 下(200px) 的margin值
margin:20px 100px 200px;*/
/* 分别设置：上下(20px) 左右(100px) 的margin值
margin:20px 100px;*/
/* 同时设置四个边的margin值
margin:100px;*/
/*
*/
margin:100px auto;
}
</style>
</head>
<body>
<div class="box">元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：</div>
<div class="box">元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子尺寸</title>
<style type="text/css">
.box1,.box2,.box3{
width:50px;
height:50px;
background-color:gold;
margin:20px;
}
.box2,.box3{
border:50px solid #000;
}
.box3{
padding:50px;
}
</style>
</head>
<body>
<!--
盒子的真实尺寸计算：
盒子的宽度： width+左右的padding值+左右的border的值
盒子的高度： height+上下的padding值+上下的border的值
-->
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
从这里开始先放运行结果，再放图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width:385px;
height:35px;
border-top:1px solid #f00;
border-bottom:3px solid #666;
font-size:20px;
font-family: 'Microsoft Yahei';
line-height:20px;
color:#333;
padding-left: 15px;
padding-top:15px;
}
.box2{
width:400px;
height:50px;
border-top:1px solid #f00;
border-bottom:3px solid #666;
font-size:20px;
font-family: 'Microsoft Yahei';
text-indent:15px;
line-height:50px;
}
</style>
</head>
<body>
<div class="box">新闻标题</div>
<br>
<br>
<div class="box2">新闻标题</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直margin合并</title>
<style type="text/css">
.box{
width:600px;
border:1px solid #333;
margin:50px auto;
}
.box div{
text-indent:32px;
/* margin-left:20px;
margin-right:20px;
margin-top:30px;
margin-bottom:30px; */
margin:30px 20px;
}
</style>
</head>
<body>
<div class="box">
<div>
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：
1、使用这种特性
2、设置一边的外边距，一般设置margin-top
3、将元素浮动或者定位
</div>
<div>
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：
1、使用这种特性
2、设置一边的外边距，一般设置margin-top
3、将元素浮动或者定位
</div>
<div>
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：
1、使用这种特性
2、设置一边的外边距，一般设置margin-top
3、将元素浮动或者定位
</div>
<div>
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：
1、使用这种特性
2、设置一边的外边距，一般设置margin-top
3、将元素浮动或者定位
</div>
<div>
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：
1、使用这种特性
2、设置一边的外边距，一般设置margin-top
3、将元素浮动或者定位
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin-top 塌陷</title>
<style type="text/css">
.con{
width:300px;
height:200px;
background-color:gold;
/*
第一种解决塌陷的方法：
border:1px solid gold;
*/
/* overflow:hidden; */
}
.box{
width:100px;
height:100px;
background-color:green;
margin-top:50px;
}
.clearfix:before{
content:"";
display:table;
}
</style>
</head>
<body>
<div class="con clearfix">
<div class="box"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素溢出</title>
<style type="text/css">
.con{
width:500px;
height:300px;
border:1px solid #333;
margin:50px auto 0;
/*
隐藏溢出的部分
overflow:hidden;
*/
/*
不管是否溢出，都显示滚动条
overflow:scroll;
*/
overflow:auto;
}
.box{
width:400px;
height:500px;
background-color:gold;
}
</style>
</head>
<body>
<div class="con">
<div class="box">
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块元素</title>
<style type="text/css">
body{
margin:0px;
}
div{
background-color:gold;
text-align:center;
margin:10px 0;
}
.box2{
width:200px;
height:60px;
}
.box3{
width:300px;
}
</style>
</head>
<body>
<div>这是一个div元素</div>
<div class="box2">这是第二个div元素</div>
<div class="box3">这是第三个div元素</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联元素</title>
<style type="text/css">
.con,.con2{
width:500px;
height:300px;
border:1px solid #333;
margin:50px auto 0;
font-size:0;
}
.con a{
background-color:gold;
width:500px;
height:300px;
/* margin-right:30px;
margin-bottom:50px; */
padding:0px 20px;
font-size:20px;
}
.con2{
text-align:center;
line-height:300px;
}
.con2 a{
font-size:20px;
background-color:gold;
}
</style>
</head>
<body>
<div class="con">
<a href="#">这是一个a标签这是一个a标签</a>
<a href="#">这是第二个a标签</a>
<a href="#">这是第4个a标签</a>
<a href="#">这是第5个a标签</a>
<a href="#">这是第6个a标签</a>
<a href="#">这是第7个a标签</a>
</div>
<div class="con2">
<a href="#">这是一个a标签</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联块元素</title>
<style type="text/css">
.con{
width:500px;
height:300px;
border:1px solid #333;
margin:50px auto 0;
font-size:0;
}
.con a{
background-color: gold;
width:150px;
height:50px;
display:inline-block;
margin:10px 0;
padding:5px;
font-size:20px;
line-height:50px;
text-decoration:none;
}
.con span{
display:inline-block;
background-color:gold;
}
</style>
</head>
<body>
<div class="con">
<a href="#">这是一个a标签</a>
<a href="#">这是第二个a标签</a>
<a href="#">这是第4个a标签</a>
<a href="#">这是第5个a标签</a>
<a href="#">这是第6个a标签</a>
<a href="#">这是第7个a标签</a>
<span>这是一个span标签</span>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜单</title>
<style type="text/css">
.menu{
width:694px;
height:50px;
margin:50px auto 0;
list-style:none;
padding:0;
font-size:0;
}
.menu li{
display:inline-block;
width:98px;
height:48px;
border:1px solid gold;
font-size:16px;
margin-right:-1px;
text-align:center;
line-height:48px;
}
.menu li:hover{
background-color:orange;
}
.menu a{
font-family:'Microsoft Yahei';
color:pink;
text-decoration:none;
}
.menu a:hover{
color:red;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="">首页</a></li>
<li><a href="">公司简介</a></li>
<li><a href="">公司简介</a></li>
<li><a href="">公司简介</a></li>
<li><a href="">公司简介</a></li>
<li><a href="">公司简介</a></li>
<li><a href="">公司简介</a></li>
</ul>
</body>
</html>