11.07 CSS布局及CSS3的新特性
2017-11-07 15:38
645 查看
一、居中和对齐专题
1、margin设置区块元素水平居中margin:0 auto;设置左右外边距的大小，控制元素的水平居中。
<style>
.center{
margin: 20px auto;
width: 600px;
border: 3px solid green;
text-align: center;
}
</style>
<body>
<div class="center">
<p>使用margin进行元素的居中</p>
</div>
</body>注：width不能设置为100%，是没有效果的。
2.position属性设置元素的左右对齐
<style>
.right{
position: absolute;
right: 0;
width: 300px;
border: 3px solid pink;
padding: 10px;
z-index: 0;
}
<style>
<body>
<div class="right">
<p>我是右对齐的区块</p>
</div>
</body>
</html>3.float属性设置左右对齐
<style>
.right1{
float: right;
width: 300px;
border: 3px solid purple;
padding: 10px;
}
</head>
<body>
<div class="right1">
<p>我是浮动右对齐的区块</p>
</div>
</body>
</html>4.padding属性设置水平垂直居中
<style>
.padCenter{
padding: 70px 0;
border: 3px dotted yellow;
text-align: center;
}
</style>
<body>
<div class="padCenter">
<p>我是用padding垂直居中的元素</p>
</div>
</body>
</html>5.line-height属性设置水平垂直居中
<style>
.lineCenter{
line-height:300px;
border: 3px solid #33ff33 ;
height: 300px;
}
</style>
<body>
<div class="lineCenter">
<p>我是利用行高进行水平居中的元素</p>
</div>
</body>
</html>6.绝对定位和transform属性设置水平垂直居中
<style>
.poCenter{
border: 3px solid #ff88c2;
height: 200px;
position: relative;
}
.poCenter p{
position: absolute;
top: 50%;
left: 50%;
/*对水平垂直居中进行修正*/
transform:translate(-50%,-50%);
}
</style>
<body>
<div class="poCenter">
<p>我是利用绝对定位进行水平垂直居中的元素</p>
</div>
</body>
</html>二、CSS3边框
1.圆角边框border-radius :用于指定圆角边框的圆角半径。
如指定1个参数，则4个圆角都使用该长度作为半径。
如指定2个参数，则第一个参数作为左上角和右下角的半径，第二个参数作为右上角和左下角的半径。
如指定3个参数，第一个参数作为左上角的半径，第二个参数作为右上角和左下角的半径，第三个参数作为右下角的半径。
<style>
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
}
</style>
<body>
<div>border-radius 属性允许您为元素添加圆角边框！ </div>
</body>2.边框阴影
box-shadow属性用于增加盒模型元素的边框阴影。一共有5个参数。
第一个参数：控制阴影在水平方向的偏移。
第二个参数：控制阴影在垂直方向的偏移。
第三个参数：控制阴影的模糊程度。
第四个参数：控制阴影的缩放程度。
第五个参数：改属性值控制阴影的颜色。
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 20px 10px 100px 100px #888888;
}
</style>
</head>
<body>
<div></div>
</body>三、动画
1.渐变动画transition动画可以控制HTML组件的某个属性发生改变时经历的时间，使其以平滑渐变的方式发生改变，产生动画效果。有4个参数。
第一个参数：指定对哪个HTML元素进行处理。
第二个参数：定义持续时间。
第三个参数：指定渐变的速度。
第四个参数：指定延迟时间。
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
}
div:hover
{
width:300px;
}
</style>
<body>
<div></div>
</body>2.Animation动画
annimation动画提供了更灵活的制作动画的方法。animation是一个符合属性，有5个参数：
第一个参数：指定动画的名称。
第二个参数：指定动画的持续时间。
第三个参数：指定动画的变化速度。
第四个参数：指定动画延迟多久开始执行。
第五个参数：指定动画循环执行的次数。
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
}
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
</style>
<body>
<div></div>
</body>作业
HTML<html>
<head>
<meta charset="UTF-8">
<title>欢迎光临Coding Coffee </title>
<link href="E:\学习\随堂笔记\CSS\main.css" rel="stylesheet" type="text/css"></link>
<style>
.a ul{
list-style-type:none;
margin:0;
padding: 0;
background-color: brown;
}
.a ul li a{
text-decoration: none;
display: block;
padding:15px 18px;
color: #ffffff;
}
.a li{
float:left
}
.a li:hover{
background-color: #ccc;
}
.c{
width: 100px;
height: 70px;
background-color: orange;
position: fixed;
left:20px;
top:500px;
}
.sidebar{
width:150px;
background-color:#333;
position:fixed;
top:0;
right:-150px;
bottom:0;
padding:20px 0;
transition:right 2s;
}
.sidebar ul{
margin:0;
padding:0;
list-style:none;
}
.sidebar ul a{
color:#ffffff;
text-decoration:none;
padding:10px 30px;
display:inline-block;
width:100%;
}
.sidebar ul a:hover{
background-color:#444444;
}
.mask{
display:none;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background-color:rgba(0,0,0,0.3);
}
.a .userPic{
width:40px;
height:40px;
border-radius:40px;
border:2px solid #eee;
}
.a .pic{
float:right;
position:relative;
top:3px;
right:3px;
}
</style>
</head>
<body>
<div class="a">
<ul>
<li><a href="咖啡.html">产品列表</a></li>
<li><a href="分店.html">分店列表</a></li>
<li><a href="joinUs.html">加入我们</a></li>
<li><a href="onlineOrder.html">网上订购</a></li>
<li class="pic"><img class="userPic" src="../咖啡图片/co.jpg" alt=""></li>
<div style="clear:both"></div>
</ul>
</div>
<div class="b">
<h1>欢迎光临Coding Coffee </h1>
<img src="../咖啡图片/c9.jpg">
<p>
敬请关注我们定期的<a href="咖啡.html">产品列表</a>
CODING COFFEE是一家只对程序员开放的<em>互联网咖啡馆。</em>
</p>
<p>
请查看我们的<a href="分店.html">分店列表</a>
</p>
<p>
如果您想<a href="joinUs.html">加入我们</a>，请查看我们的招聘列表。
</p>
<p>
<a href="onlineOrder.html">网上订购</a>，天天赢好礼！
</p>
</div>
<div class="c">
<p><b>双十一预热<br>第二杯半价！</b></p>
</div>
<div class="mask"></div>
<div class="sidebar">
<ul>
<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>
</ul>
</div>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/main.js"></script>
</body>
</html>js
var sidebar=$('.sidebar');
var mask=$('.mask');
var sidebar_trigger=$('.pic');
function showSideBar(){
mask.fadeIn();
sidebar.css('right',0);
}
function hideSideBar(){
mask.fadeOut();
sidebar.css('right',-sidebar.width());
}
sidebar_trigger.on('click',showSideBar);
mask.on('click',hideSideBar);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
- CSS新特性:圆角边框多栏Gird布局背景设置
- CSS深入理解流体特性和BFC特性下多栏自适应布局
- CSS3新特性应用之结构与布局
- 关于CSS和CSS3的布局小知识（干货）
- 奇妙的CSS之CSS3新特性总结
- CSS3尝鲜（一）：CSS多列布局
- CSS深入理解流体特性和BFC特性下多栏自适应布局
- CSS3尝鲜（一）：CSS多列布局
- css判断不同分辨率显示不同宽度布局实现自适应宽度&css3 @media样式的使用
- CSS深入理解流体特性和BFC特性下多栏自适应布局
- html5+css3之CSS中的布局与Header的实现
- HTML5+CSS3学习笔记（二） 页面布局：HTML5新元素及其特性
- CSS3与页面布局学习总结（六）——CSS3新特性（阴影、动画、渐变、变形、伪元素等）
- css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
- DIV+CSS布局设计时IE6、IE7、FF 与兼容性有关的特性
- css判断不同分辨率显示不同宽度布局实现自适应宽度&css3 @media样式的使用
- DIV+CSS布局时， DIV的高度和宽度特性
- 从零开始前端学习[40]:css3中的resize，user-select属性，多列布局特性，怪异盒子模型，倒影
- HTML5+CSS3学习笔记（二） 页面布局：HTML5新元素及其特性