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>运行实例 »
点击 "运行实例" 按钮查看在线实例
附：手抄代码：
