《css基础》

.div {
    margin-top: 5px;/*距离头部5个像素高*/
    margin:5px;/*距离四周为5个像素宽。*/
    text-align:center;/*文本居中*/
    color:red;/*字体颜色*/
    background-image:url('xxx.png');/*背景图片*/
    background:#ffffff url('xxx.png') no-repeat right top;/*背景图片*/
    font-family: fangsong;/*仿宋*/
    font-family: SimSun;
    font-size:40px;/*字体大小*/
    font-weight:bold;;/*字体加粗600-900*/
    /*
宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft YaHei
微软正黑体 Microsoft JhengHei
新宋体 NSimSun
新细明体 PMingLiU
细明体 MingLiU
标楷体 DFKai-SB
仿宋 FangSong
楷体 KaiTi
仿宋_GB2312 FangSong_GB2312
楷体_GB2312 KaiTi_GB2312

宋体：SimSuncss中中文字体（font-family）的英文名称
Mac OS的一些：
华文细黑：STHeiti Light [STXihei]
华文黑体：STHeiti
华文楷体：STKaiti
华文宋体：STSong
华文仿宋：STFangsong
儷黑 Pro：LiHei Pro Medium
儷宋 Pro：LiSong Pro Light
標楷體：BiauKai
蘋果儷中黑：Apple LiGothic Medium
蘋果儷細宋：Apple LiSung Light
Windows的一些：
新細明體：PMingLiU
細明體：MingLiU
標楷體：DFKai-SB
黑体：SimHei
新宋体：NSimSun
仿宋：FangSong
楷体：KaiTi
仿宋_GB2312：FangSong_GB2312
楷体_GB2312：KaiTi_GB2312
微軟正黑體：Microsoft JhengHei
微软雅黑体：Microsoft YaHei
装Office会生出来的一些：
隶书：LiSu
幼圆：YouYuan
华文细黑：STXihei
华文楷体：STKaiti
华文宋体：STSong
华文中宋：STZhongsong
华文仿宋：STFangsong
方正舒体：FZShuTi
方正姚体：FZYaoti
华文彩云：STCaiyun
华文琥珀：STHupo
华文隶书：STLiti
华文行楷：STXingkai
华文新魏：STXinwei
    */
/*border-width	指定边框的宽度
border-style	指定边框的样式
border-color	指定边框的颜色*/
border:1px solid #0000cc;/*定义一个蓝色边框，线宽为1px.*/
    width:300px;/*宽度*/
    height:200px;/*高度*/
}
/*字体居中-加粗-黑体*/
#divfont{
    font-family:SimHei;
    text-align:center;
    margin:auto;
    color: #15e20a;
    font-size:40px;
    font-weight:bold
}
/*上下左右居中：*/
.center {
    text-align: center;
    border: 3px solid green;
}
/*
<div class="center">
  <p>文本居中对齐。</p>
</div>
*/
/*line-height 属性值= height 属性值*/
.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}

.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}
/*--------------------*/

a:hover{
    /*hover是鼠标移动a标签上时，触发此内容*/
}
/*圆角框：*/
div
{
    border:2px solid #a1a1a1;
    padding:10px 40px;
    background:#dddddd;
    width:300px;
    border-radius:25px;
}

/*线性渐变背景 - 从上到下*/
#div1 {
    height: 200px;
    background-color: red;
    background-image: linear-gradient(#e66465, #9198e5);
}
/*线性渐变 - 从左到右*/
       #div2 {
           height: 200px;
           background-color: red;
           background-image: linear-gradient(to right, red , yellow);
       }
      /* 颜色渐变-横向彩虹*/
#div2 {
    height: 55px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */
}

/*button动态圆角按钮*/
.button {
    display: inline-block;
    padding: 15px 25px;
    font-size: 24px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: #fff;
    background-color: #4CAF50;
    border: none;
    border-radius: 15px;
    box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
    background-color: #3e8e41;
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}
/*-------*/

/*分页：*/
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}
​
ul.pagination li {display: inline;}
​
ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
    margin: 0 4px;
}
​
ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
}
​
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
/*
<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a class="active" href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">»</a></li>
</ul>
*/
/*----------------------------------------*/
左中右盒子：
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 100%;
    background-color: lightgrey;
}

.flex-item1 {
    background-color: cornflowerblue;
    width: 17%;
    margin-top: 5px;
}
.flex-item2 {
    background-color: cornflowerblue;
    width: 65.7%;
    margin-top: 5px;
}
.flex-item3 {
    background-color: cornflowerblue;
    width: 17%;
    margin-top: 5px;
}

/*
<div class="flex-container">
    <div class="flex-item1">左侧内容</div>
    <div class="flex-item2">中部内容</div>
    <div class="flex-item3">右侧内容</div>
</div>
*/
/*-----------------*/
/*伪类：*/
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
/*隐藏：*/
#div{
    display:none;/*一般在js动态定义使用。*/
}
/*显示：*/
#div{
    display: block;/*一般在js动态定义使用。*/
}
/*浮动：*/
/*<img src="logocss.gif" width="95" height="84" />*/

img
{
    float:left;/*左浮动*/
}

img
{
    float:right;/*有浮动-图片在最右侧显示*/
}

浮动并规定大小：
.thumbnail
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}
/*
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
*/

/*下拉选项：*/
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
/*
<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="">选项 1</a>
	   <a href="">选项 2</a>
	   <a href="">选项 3</a>
  </div>
</div>
*/




/*未完待续：....*/