Blogger Information
Blog 21
fans 0
comment 0
visits 12353
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
3月23日作业
许增颜
Original
472 people have browsed it

3月23日作业

代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>3月23日作业</title>

<style type="text/css">

.box{

width: 200px;

height: 200px;

background-color: lightgray;

text-align:center;/*可以使内部行内元素水平居中*/

}

.box.a{

line-height:200px;  /*子元素设置行高与父元素高度相同可以垂直居中*/

}

.box1{

width: 200px;

height: 200px;

background-color:lightgreen;

text-align:center;/*可以使内部行内元素水平居中*/

/*以下两条代码声明可以是多行文本垂直居中*/

display: table-cell; /*设置为表格 ,单元格方式显示*/

vertical-align: middle; /*设置可以使单元格垂直居中*/

}

.box3{

width: 200px;

height: 200px;

background-color: black;

/*以下两条代码声明可以是多行文本垂直居中*/

display: table-cell; /*设置为表格 ,单元格方式显示*/

vertical-align: middle; /*设置可以使单元格垂直居中*/

}

.box3 .child{

width:100px;

height:100px;

background-color: yellow;

margin: auto;/*水平居中*/

}

.box5{

width: 200px;

height:200px;

background-color:skyblue;

text-align: center;

display: table-cell;

vertical-align: bottom;/*居下水平居中*/

}

.box5 ul{

padding: 0;

margin: 0;

/*line-height: 200px;垂直居中*/

}

.box5 li {

list-style: none;

display: inline;

}

body{

background-color:lightgray;/*添加背景颜色*/

background-color: transparent;/*设置背景颜色透明*/

background-image: url(../images/1.jpg);/*添加背景图片*/

background-repeat: no-repeat;/*设置图片固定*/

background-position: left center;/*定位图片位置*/

background-size: cover;/*设置图片为网页的100%*/


}

.list{

width: 400px;

height: 400px;

background-color: #f00000;

border: 2px solid black;

}

.list h3{

padding-left:  30px;

}

.list li{

list-style: none;

text-decoration: underline;

font-size: 2.0em;

}

</style>

</head>

<body>

<div>

<a href="">php</a>

</div>

<div>

<span>php</span>

<span>中文网</span>

</div>

<div>

<div></div>

</div>

<div>

<ul>

<li><a href=""></a>1</li>

<li><a href=""></a>2</li>

<li><a href=""></a>3</li>

<li><a href=""></a>4</li>

</ul>

</div>

<div>

<h3>PHP</h3>

<ul>

<li>

<li><a href="">php</a></li>

<li><a href="">php</a></li>

<li><a href="">php</a></li>

<li><a href="">php</a></li>

<li><a href="">php</a></li>

<li><a href="">php</a></li>

<li><a href="">php</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