简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 第七课居中和背景图片居中平铺缩放行高等
Blogger Information
Blog 8
fans 1
comment 0
visits 5926
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
第七课居中和背景图片居中平铺缩放行高等
家户通
Original
697 people have browsed it
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1.CSS控制元素对齐的技巧</title>
<style type="text/css">
        body {
            background-color: lightcyan;

            /*背景色透明,用在元素之间相互叠加时查看下面内容*/
            /*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%;*/

        }
        .beijing{
            width: 300px;
            height: 200px;
            line-height: 100px;
            text-align: center;
            background-color: aquamarine;

            /*可以通过js等方式来设置背景色透明*/
            /*background-color: transparent;*/
            border: 1px solid #363636;
        }


.box1 {
width: 200px;
height: 200px;
background-color: #FFFF0A;
text-align: center;  /*可以使内部行内元素水平居中*/
}
.box1 a {
line-height: 200px;  /*子元素设置行高与父元素高度相同*/
}
.box2 {
width: 200px;
height: 200px;
background-color: #FC0107;
text-align: center;  /*可以使内部多行行内元素水平居中*/
/*以下二个声明可以使多行文本垂直居中*/
display: table-cell;  /*设置显示方式为表格单元格*/
vertical-align: middle; /*设置该单元格内的元素垂直居中*/
}
.box3 {
width: 200px;
height: 200px;
background-color: #66CCFF;
/*以下二个声明可以使块级子元素垂直居中*/
display: table-cell;  /*设置显示方式为表格单元格*/
vertical-align: middle; /*设置该单元格内的元素垂直居中*/
}
.box3 .child {
width: 100px;
height: 100px;
background-color: #F4FF0A;
margin: auto;  /*水平居中*/
}

.box4 {
width: 200px;
height: 200px;
background-color: #FD6FCF;
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;
}

.list {
            width: 350px;
            height:500px;
            /*background-color: lightskyblue;*/
            border: 1px solid #696969;
            border-radius: 2%;
            color: #363636;
            background-color: #fefefe;

        }

        .list h2 {
            padding-left: 20px;
        }

        .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>
<h4>父元素一定是块元素,根据子元素不同分为以下几种:</h4>
1.子元素是行内元素:如:a,span <br>
a.水平居中:在父元素上设置: text-align:center;<br>
b.垂直居中:在行内子元素上设置行高与父元素相同: line-height

<div>
      <a href="">PHP中文网</a>
</div>
<hr>

2. 子元素是多行内联文本
a.水平居中:父元素设置text-align:center
b.垂直居中:父元素设置:display:table-cell;vertical-align:middle
<div>
<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>
<div></div>
</div>
<hr>

4. 子元素是不定宽的块元素:最常见的分页导航<br>
a.水平居中:子元素转行内元素,父元素加:text-align:center <br>
b.垂直居中:可给分页的ul加行高line-height=parent.height
c.底边居中:更为常用,与多行内联文本垂直处理方式一致,vertical-align:bottom;
<div>
<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>

<!--
    背景设置的五个样式规则-->
    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>


<!--
属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
-->
<div>
    <h2>头条公告</h2>
    <ul>
        <li><a href="">物理学家史蒂芬·霍金去世，享年76岁</a></li>
        <li><a href="">物理学家史蒂芬·霍金去世，享年76岁</a></li>
        <li><a href="">物理学家史蒂芬·霍金去世，享年76岁</a></li>
        <li><a href="">物理学家史蒂芬·霍金去世，享年76岁</a></li>
        <li><a href="">物理学家史蒂芬·霍金去世，享年76岁</a></li>
        <li><a href="">物理学家史蒂芬·霍金去世，享年76岁</a></li>
        <li><a href="">物理学家史蒂芬·霍金去世，享年76岁</a></li>
        <li><a href="">物理学家史蒂芬·霍金去世，享年76岁</a></li>
        <li><a href="">物理学家史蒂芬·霍金去世，享年76岁</a></li>
    </ul>
</div>
</body>
</html>


Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！