CSS基础知识之背景图片样式属性、雪碧图、列表导航栏、超链接的伪类样式、盒子模型、overflow、圆角弧度
目录：
背景图片样式属性
雪碧图
列表导航栏
超链接的伪类样式
盒子模型、
overflow、
圆角弧度
背景图片样式属性：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #imgContainer { border: 20px dotted yellow; padding: 50px; height: 400px; /*背景颜色*/ background-color: #FF0000; /*背景图片*/ background-image: url("../../img/qiuqian.jpg"); /*背景填充 repeat-x repeat-y no-repeat*/ background-repeat: no-repeat; /*背景图片覆盖 cover（覆盖）: 图片等比例缩放，直到最小部分填满容器 有可能会出现图片显示不全的效果 contain（包含）: 图片也是等比例缩放，直到最大部分填满容器 有可能会出现图片显示不完整 100% 100%: 图片拉伸后百分百填充容器*/ /*background-size: contain;*/ /*位置坐标，偏移量：当指定x或y中的一个方向时，另一个方向默认是居中效果； x或y也可以是数字px*/ background-position: right /*水平方向*/ bottom /*垂直方向*/; /* !*背景图片的开始位置 border-box:从外边框处开始显示 padding-box：从内边距处开始显示（默认值） content-box：从内容处开始显示*! background-origin: border-box; !*背景图片剪切位置*! background-clip: padding-box;*/ } </style> <title>背景</title> </head> <body> <div id="imgContainer"> 如月之恒，如日之升；如南山之寿，不骞不崩；如松柏之茂，无不尔或承。 </div> </body> </html>
运行图
背景的复合属性：
雪碧图：
icon的图片：
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div { height: 28px; width: 28px; background-repeat: no-repeat; background-image: url("../../img/icon.gif"); } #div2 { background-position: -85px 0; } #div3 { background-position: -163px -30px; } </style> <title>雪碧图</title> </head> <body> <div></div> <div id="div2"></div> <div id="div3"></div> </body> </html>
运行图：
列表导航栏：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { padding: 0; margin: 0; } div { background-color: #F2AD0A; height: 50px; } ul { list-style: none; color: red; font-size: 30px; } li { float: left; width: 200px; line-height: 50px; } li:first-child { margin-left: 30px; } </style> <title>列表导航栏</title> </head> <body> <div> <ul> <li>购物车</li> <li>帮助中心</li> <li>加入收藏</li> <li>设为首页</li> <li>登陆</li> <li>注册</li> </ul> </div> </body> </html>
运行图：
一个小例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { padding: 0; margin: 0; } #container { width: 199px; height: 180px; background-image: url("../../img/bg.gif"); overflow: hidden; margin: 0 auto; } .title { margin-top: 33px; margin-left: 40px; color: #FF6600; font-weight: bold; } .menu ul { list-style: none; margin: 0 10px 0 18px; } .menu ul li { float: left; width: 56px; line-height: 40px; font-size: 12px; } </style> <title>商品信息</title> </head> <body> <div id="container"> <div class="title"> 家用电器 </div> <div class="menu"> <ul> <li>大家电</li> <li>洗衣机</li> <li>电冰箱</li> <li>相机</li> <li>电视</li> <li>DVD</li> <li>相机</li> <li>电视</li> <li>DVD</li> </ul> </div> </div> </body> </html>
运行图：
超链接的伪类样式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /*必须lvha顺序写*/ /*未访问状态*/ a：link { color: blue; } /*已访问状态*/ a:visited { color: darkgrey; } /*鼠标悬浮状态*/ a:hover { color: red; } /*鼠标激活选定状态*/ a:active { color: yellow; } </style> <title>超链接的伪类样式</title> </head> <body> <a href="http://www.jredu100.com/">杰瑞教育</a> </body> </html>
运行图：
自己想象，四种状态有点难以展现。
附加一个小例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> td { background-color: #878787; /*width: 50px; height: 50px;*/ text-align: center; } td:hover { background-color: #F2AD0A; color: red; } </style> <title>九宫格</title> </head> <body> <table border="1" width="300" height="300" align="center"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </body> </html>
运行图：
运行效果是鼠标指针悬浮在哪个单元格，那个单元格就会变成橙黄底红字
盒子模型：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #div1 { background-color: red; text-align: justify; margin: 50px; border: 10px solid yellow; padding: 20px; } </style> <title>盒子模型</title> </head> <body>
<!--任何标签都可以当成盒子来看-->
<!--margin:外边距 影响当前盒子和其他盒子的距离 一个值：四个方向采用相同的值 2个值：上下距离采用第一个 左右距离采用第二个 3个值：上 左右 下依次取值 4个值：上右下左 （margin:0px auto :意思是上下0，左右居中对齐） border:边框 padding:内边距 内容和边框之间的距离 4个值的问题和margin一样 外边距，边框，和内边距都会影响内容区的宽度！！！！！！ content:内容区 width和height都是内容区的属性--> <div id="div1"> 盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型 盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型 盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型 盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型 盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型 </div> </body> </html>
运行图：
一个小例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #div1 { width: 200px; height: 200px; background-color: #878787; margin: 0 auto; overflow: hidden; } #div2 { width: 100px; height: 100px; background-color: #FF0000; margin: 0 auto; margin-top: 50px; } </style> <title>练习</title> </head> <body> <div id="div1"> <div id="div2"> </div> </div> </body> </html>
运行图：
overflow属性：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #div1 { width: 100px; height: 100px; background-color: red; margin: 0 auto; /*visible:默认值 超出的文本默认显示 auto：当文本超出的时候显示滚动条，否则不显示 scroll：不管文本超不超出范围，都加滚动条 hidden：超出部分隐藏*/ overflow: hidden; } </style> <title>overflow</title> </head> <body> <div id="div1"> 杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育 杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育 杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育 杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育杰瑞教育 </div> </body> </html>
运行图：
圆角弧度：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #container{ width: 300px; height: 300px; background-color: red; margin: 0 auto; border-radius: 50px 10px;/*类同于margin的4个属性，这个是对角线的*/ } </style> <title>圆角弧度</title> </head> <body> <div id="container"> </div> </body> </html>
运行图：
