您的位置：首页 > Web前端 > JavaScript

HTML5+CSS3+JS学习笔记-2

2016-12-06 21:50 656 查看

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>圆角矩形练习</title>

<style type="text/css">

div{
width:200px;
height:200px;
border:#666666 solid 1px;
margin: 20px;
float: left;

}

#c1{
border-radius:20px;/*4个角半径都是20px*/

}

#c2{
border-radius:20px 40px;/*第一个是上下，第二个是左右*/

}

#c3{
border-radius:20px 40px 60px;/*对应顺序是上-左右-下*/

}

#c4{
border-radius:20px 40px 60px 80px;/*对应顺序是上-右-下-左*/

}

#c5{
border-radius:50%;/*圆形*/

}

#c6{
border-radius:0 0 100%;/*扇形*/

}

img{
border-radius:50%;/*圆形照片头像*/

}

</style>

</head>

<body>

<div id="c1"></div>

<div id="c2"></div>

<div id="c3"></div>

<div id="c4"></div>

<div id="c5"></div>

<div id="c6"></div>

<img src="images/userHead2.jpg" width="200" height="200">

</body>

</html>

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>阴影练习</title>

<style type="text/css">

#con1{
width:200px;
height:200px;
margin: 20px;
float: left;
border:solid 1px #000000;
border-radius:20px;
box-shadow:3px 3px 3px 1px #999999 inset;
/*水平阴影垂直阴影羽化值阴影的大小阴影的颜色阴影的类别：内和外阴影，默认是外阴影*/

}

#con2{
width:200px;
height:200px;
margin: 20px;
float: left;
margin-bottom:20px;
border:solid 1px #000000;
border-radius:20px;
box-shadow:3px 3px 3px 3px #003 ;
/*水平阴影垂直阴影羽化值阴影的大小阴影的颜色阴影的类别：默认是外阴影*/

}

</style>

</head>

<body>

<div id="con1"></div>

<div id="con2"></div>

</body>

</html>

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>垂直居中练习</title>

<style type="text/css">

#content{
width:300px;
height:300px;
border:#000 solid 1px;
margin-bottom:auto;
display:table;/*按照表格显示*/

}

#mess{
border:#F00 solid 1px;
text-align:center;/*文本居中显示*/
display:table-cell;/*按照表格内容显示*/
vertical-align:middle;/*垂直显示*/

}

/*网页绝对居中*/

#content2{
width:300px;
height:300px;
background-color:#999999;
position:absolute;
left:50%;/*盒子左上角点距离左边框50%*/
top:50%;/*盒子左上角点距离上边框50%*/
transform:translate(-50%,-50%);/*整个盒子向左移动50%，向上移动50%*/

}

#mess2{
width:200px;
height:200px;
background-color:#00F;
position:relative;
left:50%;/*盒子左上角点距离左边框50%*/
top:50%;/*盒子左上角点距离上边框50%*/
transform:translate(-50%,-50%);/*整个盒子向左移动50%，向上移动50%*/
display:table;

}

#messing{
color:#FF0000;
text-align:center;
display:table-cell;
vertical-align:middle;

}

</style>

</head>

<body>

<div id="content">
<div id="mess">

内容信息1<br>

内容信息2<br>

内容信息3<br>

内容信息4<br>

内容信息5<br>

内容信息6<br>

</div>

</div>

<div id="content2">
<div id="mess2">

<div id="messing">

内容信息1<br>

内容信息2<br>

内容信息3<br>

内容信息4<br>

内容信息5<br>

内容信息6<br>

</div>

</div>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航