Correction status:qualified
Teacher's comments:
1.css控制元素对齐技巧
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1.CSS控制元素对齐的技巧</title> <style type="text/css"> .box1 { width: 200px; height: 200px; background-color: lightgreen; text-align: center; /*可以使内部行内元素水平居中*/ } .box1 a { line-height: 200px; /*子元素设置行高与父元素高度相同*/ } .box2 { width: 200px; height: 200px; background-color: lightpink; text-align: center; /*可以使内部多行行内元素水平居中*/ /*以下二个声明可以使多行文本垂直居中*/ display: table-cell; /*设置显示方式为表格单元格*/ vertical-align: middle; /*设置该单元格内的元素垂直居中*/ } .box3 { width: 200px; height: 200px; background-color: lightgreen; /*以下二个声明可以使块级子元素垂直居中*/ display: table-cell; /*设置显示方式为表格单元格*/ vertical-align: middle; /*设置该单元格内的元素垂直居中*/ } .box3 .child { width: 100px; height: 100px; background-color: blue; margin: auto; /*水平居中*/ } .box4 { width: 200px; height: 200px; background-color: orange; text-align: center; /*可以使行内元素水平居中*/ /*以下二个声明可以使块级子元素垂直居中*/ display: table-cell; /*设置显示方式为表格单元格*/ vertical-align:bottom; /*设置该单元格内的元素底边居中*/ } .box4 ul { margin: 0; padding: 0; /*line-height: 200px;*/ } .box4 li { list-style: none; display: inline; } </style> </head> <body> <h4>父元素一定是块元素,根据子元素不同分为以下几种:</h4> 1.子元素是行内元素:如:a,span <br> a.水平居中:在父元素上设置: text-align:center;<br> b.垂直居中:在行内子元素上设置行高与父元素相同: line-height <div class="box1"> <a href="">我在PHP中文网</a> </div> <hr> 2. 子元素是多行内联文本 a.水平居中:父元素设置text-align:center b.垂直居中:父元素设置:display:table-cell;vertical-align:middle <div class="box2"> <span>我在php中文网</span><br> <span>www.php.cn</span> </div> <hr> 3. 子元素是块元素:<br> a.水平居中:子元素设置左右自动: margin: auto;<br> b.垂直居中:与多行内联文本处理方式一致:display:table-cell;vertical-align:middle <div class="box3"> <div class="child"></div> </div> <hr> 4. 子元素是不定宽的块元素:最常见的分页导航<br> a.水平居中:子元素转行内元素,父元素加:text-align:center <br> b.垂直居中:可给分页的ul加行高line-height=parent.height c.底边居中:更为常用,与多行内联文本垂直处理方式一致,vertical-align:bottom; <div class="box4"> <ul> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> </ul> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
2.CSS背景设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2.CSS背景设置</title> <style> body { background-color: lightgreen; /*背景色透明,用在元素之间相互叠加时查看下面内容*/ /*background-color: transparent;*/ /*background-image: url('../images/bg/sky3-1.png');*/ /*也可以省略引号*/ background-image: url(../images/bg/sky3-1.png); background-repeat: no-repeat; /*为了兼容性先将背景图像设置为固定,再进行定位*/ background-attachment:fixed; /*background-position: left center;*/ /*background-position: center center;*/ /*background-position: center;*/ /*background-position: 20% 50%;*/ /*background-position: 50px 200px;*/ /*background-position: left top;*/ /*拉升,因为比例原因会超出内容区*/ background-size: cover; /*等比缩放完全适应内容区*/ /*background-size: contain;*/ /*宽度100%,高度会等比自适应,这时与cover参数效果是一样的*/ /*background-size: 100%;*/ /*宽度都为100%,拉抻铺满当前窗口可视区域*/ /*background-size: 100% 100%;*/ } div { width: 300px; height: 200px; line-height: 100px; text-align: center; background-color: pink; /*可以通过js等方式来设置背景色透明*/ /*background-color: transparent;*/ border: 1px solid #363636; } </style> </head> <body> <!-- 背景设置的五个样式规则--> 1. 背景颜色: background-color 2. 背景图片: background-image 3. 背景图片的重复方式: background-repeat 4. 背景图片的定位方式: background-position 5. 背景图片的的是否固定: background-attachment 6. 背景图片大小设置: background-size --> <div> <h2>PHP中文网 (<a href="">www.php.cn</a>)</h2> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3.CSS控制列表</title> <style> .list { width: 408px; height:500px; /*background-color: lightskyblue;*/ border: 1px solid #696969; border-radius: 2%; color: #363636; background-color: #fefefe; } .list h2 { padding-left: 20px; color: red; } .item { /*可看到到:ul默认margin-top:16px;padding-left:40px;*/ /*margin-top: 0;*/ /*padding-left: 0;*/ /*列表项前面的项目符号:可以是标记,也可以来自一张图片*/ /*background-color: #F4FF0A;*/ /*1.list-style-type:列表项标记;*/ /*实心小黑圆点:默认值*/ /*list-style-type: disc;*/ /*空心小圆点*/ /*list-style-type: circle;*/ /*实心小方块*/ /*list-style-type: square;*/ /*数字:将无序列表转为有序列表*/ list-style-type:decimal; /*带前导0的数字*/ /*list-style-type:decimal-leading-zero;*/ /*去掉前面的样式*/ /*list-style-type: none;*/ /*2.列表项图像:list-style-image*/ /*list-style-image: url("../images/list.jpg");*/ /*3.设置列表页的位置*/ list-style-position: inside; /*list-style-position: outside;*/ /*可以将列表符号的三要素:标志/图像 位置进行简写:*/ /*list-style: square inside;*/ /*符号和位置没有先后关系,先写哪个无所谓*/ /*下面进行一些美化:*/ padding: 10px; } .item li { /*background-color: lightgreen;*/ } .item li a { text-decoration: none; } .item li a:hover { text-decoration: underline; color:#6CF; font-size: 1.05em; } </style> </head> <body> <!-- 属性 描述 list-style 简写属性。用于把所有用于列表的属性设置于一个声明中 list-style-image 将图象设置为列表项标志。 list-style-position 设置列表中列表项标志的位置。 list-style-type 设置列表项标志的类型。 --> <div class="list"> <h2>头条公告</h2> <ul class="item"> <li><a href="">以色列宣布取消与联合国达成的非洲移民安置协议</a></li> <li><a href="">俄罗斯副外长称美欧驱逐俄外交官损害欧洲安全</a></li> <li><a href="">美国13岁男孩掉进下水管道 12小时后“奇迹”获救</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="">韩国朴槿惠案6日下午一审宣判 将进行电视直播</a></li> </ul> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
附:手抄代码: