11月7日笔记

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

studyit10086

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

阅读量151

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/studyit10086/article/details/78469975

版权

笔记专栏收录该内容

25 篇文章 0 订阅

订阅专栏

专题：居中和对齐
我们在学习中经常会遇到需要水平居中、垂直居中、对齐元素的场景，而居中和对齐又有很多方法和前提条件，本节我们来整理一下。

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属性设置左右对齐

<sty>
        .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>

coding coffee网页添加侧栏和面纱

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎光临Coding Coffee</title>
    <style type="text/css">
        .navigator ul{
            list-style-type:none;
            margin:0;
            padding: 0;
             background-color: #333;
        }
        .navigator li a{
            text-decoration: none;
            display: block;
            padding:15px 18px;
            color: #ffffff;
        }

        .navigator li{
            float: left;
        }
        .navigator li:hover{
            background-color: #cccccc;
        }
        .userpic{
            width:60px;
            height:50px;
            border-radius:20px; 
        }
        .navigator .pic{
            float:right;
            position:relative;
            top:2px;
            right:10px;

        }
        .sidebar{
            position:fixed;
            top:0;
            right:-300px;
            bottom:0;
            background-color:#333;
            width:300px;
            padding:20px 0;
        }
        .sidebar ul{
            margin:0;
            padding:0;
            list-style-type:none;
        }

        .sidebar ul a{
            color:#ffff;
            text-decoration:none;
            display:inline-block;
            padding:10px 30px;
            width:100%;
        }
        .sidebar ul a:hover{
            background-color:#444444;
        }
        .mask {
            display:none;
            background-color:rgba(0,0,0,0.3);
            position:fixed;
            top:0;
            right:0;
            bottom:0;
            left:0;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="./css/main.css">
</head>
<body>
    <div class="navigator">
        <ul>
            <li><a href="./html/list.html">产品列表</a></li>
            <li><a href="./html/shopList.html">分店列表</a></li>
            <li><a href="./html/joinUs.html">加入我们</a></li>
            <li><a href="./html/onlineOrder.html">网上订购</a></li>
            <li class="pic"><img  class="userpic"src="./bd_logo1_31bdc765.png"></li>
            <div style="clear:both;"></div>
        </ul>
    </div>
    <div class="wraper">
        <h1 style="color:blue;">欢迎光临Coding Coffee</h1>
         <img src="./img/c9.jpg"> 
        <div>
            <p>
                敬请关注我们定期的<a href="./html/list.html">产品列表</a>,
                <span>CODING COFFEE</span>是一家只对程序员开放的<em>互联网咖啡馆。</em>
            </p>
        </div>
        <div>
            <p>
                请查看我们的<a href="./html/shopList.html">分店列表！</a>
            </p>
        </div>
        <div>
            <p>
                如果您想<a href="./html/joinUs.html">加入我们</a>，请查看我们的招聘列表。
            </p>
        </div>
        <div>
            <p>
                <a href="./html/onlineOrder.html">网上订购</a>CODING COFFEE天天赢大礼！
            </p>
        </div>  
    </div>
    <div  class="sidebar">
        <ul>
            <li><a href="">1咖啡</a><li>
            <li><a href="">2咖啡</a><li>
            <li><a href="">3咖啡</a><li>
    </div>
    <div class="mask"></div>

</body>
</html>

studyit10086

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
11月7日笔记

专题：居中和对齐我们在学习中经常会遇到需要水平居中、垂直居中、对齐元素的场景，而居中和对齐又有很多方法和前提条件，本节我们来整理一下。1.margin设置区块元素水平居中 margin:0 auto;设置左右外边距的大小，控制元素的水平居中。<style> .center{ margin: 20px auto;
复制链接

扫一扫