11.07 CSS布局及CSS3的新特性

最新推荐文章于 2022-03-30 15:38:40 发布

紫色枫韵

最新推荐文章于 2022-03-30 15:38:40 发布

阅读量189

点赞数

本文链接：https://blog.csdn.net/cw1249801974/article/details/78468565

版权

一、居中和对齐专题

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>

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);

紫色枫韵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
11.07 CSS布局及CSS3的新特性

一、居中和对齐专题1、margin设置区块元素水平居中margin:0 auto;设置左右外边距的大小，控制元素的水平居中。<style> .center{ margin: 20px auto; width: 600px; border: 3px solid green;
复制链接

扫一扫