简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 323作业：元素居中_背景_列表与链接
Blogger Information
Blog 7
fans 0
comment 0
visits 4288
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
323作业：元素居中_背景_列表与链接
漫云的博客
Original
638 people have browsed it

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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

附：手抄代码：

323_1.jpg323_2.jpg

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！