CSS模型，常用操作，动画

最新推荐文章于 2024-01-22 00:10:20 发布
最新推荐文章于 2024-01-22 00:10:20 发布
阅读量242 收藏
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JiangCaifu/article/details/95344559
版权

CSS盒子模型

边距

css

td{
    padding-left:100px;
    padding-right: 100px;
    padding-top: 100px;
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边距</title>
    <link rel="stylesheet" type="text/css" href="Mycss.css">
</head>
<body>
    <table border="1">
        <tr>
            <td>内边距</td>
        </tr>
    </table>
</body>
</html>

边框

css文件

/*p{
    border-style: double;
    border-top-style: dotted;
    border-width: 5px;
    border-bottom-width: 10px;
    border-color:aquamarine;
}*/
p{
    border-radius: 10px;
    width:100px;
    height:50px;
    background-color: aquamarine;
}
.cssid{
    background-color: aqua;
    width:100px;
    height:100px;
    text-align: center;
    box-shadow: 10px 10px 5px red;
}

html5文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边距</title>
    <link rel="stylesheet" type="text/css" href="Mycss.css">
</head>
<body>
    <p>css边框样式</p>
    <div class="cssid">css阴影效果</div>
</body>
</html>

外边距

css文件

body{
    margin:0;
}
.mg{
    background-color: blue;
    width:100px;
    height:100px;
    margin-top:100px;
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边距</title>
    <link rel="stylesheet" type="text/css" href="Mycss.css">
</head>
<body>
    <div class="mg">外边距</div>
</body>
</html>

盒子模型的应用

css模型

*{
    margin:0px;
    padding:0px;
}
.top{
    width:100%;
    height:50px;
    background-color: black;
}
.top_content{
    width:75%;
    height:50px;
    margin: 0px auto;
    background-color: blue;
}
.body{
    margin:0px auto;
    width:75%;
    height:1500px;
    background-color: aqua;
}
.body_img{
    width:100%;
    height:400px;
    background-color: darkgoldenrod;
}
.body_content{
    width:100%;
    height:1100px;
    background-color: bisque;
}
.body_no{
    width:100%;
    height:50px;
    background-color: pink;
}
.footing{
    width:75%;
    height:330px;
    background-color: indigo;
    margin:0px auto;
}
.footing_content{
    width: 100%;
    height:350px;
    background-color: aquamarine;
}
.footing_subnav{
    width:100%;
    height:50px;
    background-color: black;
}

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型的应用</title>
    <link href="Mycss.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class="top">
        <div class="top_content"></div>
    </div>
    <div class="body">
        <div class="body_img"></div>
        <div class="body_content"><div class="body_no"></div></div>
    </div>
    <div class="footing">
        <div class="footing_content"></div>
        <div class="footing_subnav"></div>
    </div>
</body>
</html>

对齐

css文件

*{
    margin:0px;
}
.div{
    width:70%;
    height:1000px;
    background-color: red;
    /*position:absolute;
    right:0px*/
    /*float:right;*/
    margin:0px auto;
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对齐</title>
    <link href="Mycss.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class="div"></div>
</body>
</html>

分类

css文件

/*.p1{
    width:400px;
    line-height:normal;
    max-width: 250px;
}
.p2{
    width:400px;
    line-height:200%;
}
.p3{
    width:400px;
    line-height:50%;
}*/
p{
    cursor:normal;
}
li{
    display: inline;
    visibility: hidden;
}

html文件

</head>
<body>
    <!--
    <p class="p1">this is my web pagethis is my web page
        this is my web pagethis is my web page
        this is my web pagethis is my web page
        this is my web pagethis is my web page
    </p>
    <p class="p2">this is my web pagethis is my web page
        this is my web pagethis is my web page
        this is my web pagethis is my web page
        this is my web pagethis is my web page
    </p>
    <p class="p3">this is my web pagethis is my web page
        this is my web pagethis is my web page
        this is my web pagethis is my web page
        this is my web pagethis is my web page
    </p>-->
    <ul>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
    </ul>
</body>
</html>

导航

css文件

ul{
    list-style-type:none;
    margin:0px;
    padding:0px;
    background-color: bisque;
    width:200px;
    text-align: center;
}
a:link,a:visited{
    text-decoration: none;
    /*display: block;*/
    background-color: aquamarine;
    color: red;
    width:50px;
    text-align: center;
}
a:active,a:hover{
    background-color: crimson;
}
li{
    display:inline;
    padding-left: 5px;
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航</title>
    <link href="Mycss.css" type="text/css" rel="stylesheet">
</head>
<body>
    <ul><a href="#">导航1</a></ul>
    <ul><a href="#">导航2</a></ul>
    <ul><a href="#">导航3</a></ul>
    <ul><a href="#">导航4</a></ul>
</body>
</html>

图片

body{
    margin:10px auto;
    width:90%;
    height:auto;
    background-color: blueviolet;
}
.image{
    border:1px solid darkgray;
    width:auto;
    height:auto;
    float:left;
    text-align: center;
    margin:5px;
}
img{
    margin:5px;
    opacity: 0.5;
}
.text{
    font-size:12px;
    margin-bottom: 5px;
}
a:hover{
    background-color: burlywood;
}

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航</title>
    <link href="Mycss.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class="image">
        <a href="#" target="_self">
            <img src="timg9CPA9YOX.jpg" alt="人物" width="150px" height="150px">
        </a>
        <div class="text">郑宇盛</div>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="timg9CPA9YOX.jpg" alt="人物" width="150px" height="150px">
        </a>
        <div class="text">郑宇盛</div>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="timg9CPA9YOX.jpg" alt="人物" width="150px" height="150px">
        </a>
        <div class="text">郑宇盛</div>
    </div>
    <div class="image">
        <a href="#" target="_self">
            <img src="timg9CPA9YOX.jpg" alt="人物" width="150px" height="150px">
        </a>
        <div class="text">郑宇盛</div>
    </div>
</body>
</html>

选择器

类选择器

css文件

.p1{
    color:blue;
}
.p2{
    font-size:30px;
}
.p1.p2{
    font-style: italic;
}

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <link href="Mycss.css" type="text/css" rel="stylesheet">
</head>
<body>
    <p class="p1">this is my web page</p>
    <p class="p2">this is my web page</p>
    <p class="p1 p2">this is my web page</p>
</body>
</html>

后代选择器

css文件

.p1{
    color:blue;
}
.p2{
    font-size:30px;
}
.p1.p2{
    font-style: italic;
}

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <link href="Mycss.css" type="text/css" rel="stylesheet">
    <style>
        [title]{
            color:aqua;
        }
        [href ="http://www.jikexueyuan.com"]{
            font-size:30px;
        }
        [title~="title"]{
            font-size:50px;
        }
    </style>
</head>
<body>
    <p title="tit">hello</p>
    <p title="title">hello</p>
    <p title="t">hello</p>
    <p title="title hello">hello</p>
    <a href="http://www.jikexueyuan.com">极客学院</a>
    <p>this is my<strong>web<i>hello</i>hello</strong>page</p>
</body>
</html>

css动画

移动

css

div{
    width:100px;
    height:100px;
    background-color: blue;
}
.div2{
    transform: translate(200px,100px);
    -webkit-transform: translate(200px,100px);/*safari chrome*/
}

过渡

css文件

div{
    width:100px;
    height:100px;
    background-color: blue;
    -webkit-transition:width 2s,height 2s,-webkit-transform 2s ;
    transition:width 2s,height 2s,transform 2s ;
    transition-delay:2s;
}
div:hover{
    width:200px;
    height:200px;
    transform:rotate(360deg);
    -webkit-tranform:rotate(360deg);
}

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
    <link href="Mycss.css" type="text/css" rel="stylesheet">

</head>
<body>
    <div>效果展示</div>
</body>
</html>

动画

css文件

div{
    width:100px;
    height:100px;
    background-color: red;
    position:relative;
    animation: anim 5s infinite alternate;
    -webkit-animation: anim 5s infinite alternate;
}
@keyframes  anim{
    0%{background: red;left:0px;top:0px}
    25%{background: blue;left:200px;top:0px}
    50%{background: aqua;left:200px;top:200px}
    75%{background: pink;left:0px;top:200px}
    100%{background: red;left:0px;top:0px}
}
@-webkit-keyframes anim{
            0%{background: red;left:0px;top:0px}
            25%{background: blue;left:200px;top:0px}
            50%{background: aqua;left:200px;top:200px}
            75%{background: pink;left:0px;top:200px}
            100%{background: red;left:0px;top:0px}
        }

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
    <link href="Mycss.css" type="text/css" rel="stylesheet">

</head>
<body>
    <div>动画效果</div>
</body>
</html>

分列

css文件

.div1{
    column-count: 3;
    -webkit-column-count: 3;
    -webkit-column-gap: 50px;
    column-gap: 50px;
    column-rule: 5px outset #FF0000;
    -webkit-column-rule:5px outset #FF0000;
}

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
    <link href="Mycss.css" type="text/css" rel="stylesheet">

</head>
<body>
    <div class="div1">
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
        大家好，欢迎来到极客学院,在这里您将会有很好的视频可以观看。
    </div>
</body>
</html>

css瀑布流

css文件

.container{
    column-width:250px;
    -webkit-column-width:250px;
    -webkit-column-gap: 5px;
    column-gap: 5px;
}
.contanier div{
    width:250px;
    margin:5px;
}

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <link href="Mycss.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class="contanier">
        <div><img src="image/1.jpg"></div>
        <div><img src="image/2.jpg"></div>
        <div><img src="image/3.jpg"></div>
        <div><img src="image/4.jpg"></div>
        <div><img src="image/5.jpg"></div>
        <div><img src="image/6.jpg"></div>
        <div><img src="image/7.jpg"></div>
        <div><img src="image/8.jpg"></div>
        <div><img src="image/9.jpg"></div>
        <div><img src="image/1.jpg"></div>
        <div><img src="image/2.jpg"></div>
        <div><img src="image/3.jpg"></div>
        <div><img src="image/4.jpg"></div>
        <div><img src="image/5.jpg"></div>
        <div><img src="image/6.jpg"></div>
        <div><img src="image/7.jpg"></div>
        <div><img src="image/8.jpg"></div>
        <div><img src="image/9.jpg"></div>
    </div>
</body>
</html>

 

JiangCaifu
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
教你用 CSS 实现超真实的 3D 相册，让你的照片立体感 UPUP
Shids_的博客
02-07 5993
教你用 CSS 实现超真实的 3D 相册，让你的照片立体感 UPUP
纯CSS实现的非常酷的卡通肖像和眨眼动效
陈小峰（iefreer）的专栏
06-28 6432
当前产品设计和开发的一个主要技术趋势除了响应式外，还有尽量使用CSS/HTML5技术替代图片，这样可以获得很好的设计扩展性和页面访问性能。本文是对一个使用纯CSS构建卡通人物肖像技术的介绍，非常酷的设计和效果。
CSS之模型
木四小哥的博客
08-30 263
目录 盒模型 布局模型 Relative与Absolute组合使用 盒模型简写 颜色简写 字体样式简写 颜色值设置 长度单位 百分比设置行高   盒模型 在CSS中，盒子模型这个术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括边距、边框、填充和实际内容。 盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色这...
CSS模型
lxw的博客
10-12 994
css模型一、css元素分类1. 块级元素2. 内联元素3. 内联块状元素二、CSS盒模型1. 盒模型原理2. 边框3. 宽度和高度4. 填充5. 边界三、CSS布局模型1. 流动模型（Flow）2. 浮动模型 (Float)3. 层模型（Layer）A 绝对定位(position: absolute)B 相对定位(position: relative)C 固定定位(position: fixed...
CSS样式、动画以及盒子模型
hhhahahaha的博客
06-30 323
CSS: 级联样式表 优势： 内容与表现分离 网页的表现统一，容易修改 丰富的样式，使得页面布局更加灵活 减少网页的代码量，增加网页的浏览速度，节省网络带宽 运用独立于页面的CSS，有利于网页被搜索引擎收录 行内样式： <p style="color: red;">我叫 xxx</p> 内部样式表(一般书写在head标签内部)： <style type="text/css"> p{ color: red;} </style> 外部样式:
纯CSS3汽车3D模型动画特效
04-25
【纯CSS3汽车3D模型动画特效】是一个利用现代CSS3技术实现的创新性互动设计。这个特效展示了如何仅通过CSS3属性构建一个逼真的3D汽车模型，并且结合JavaScript进行交互控制，使得用户可以对汽车模型进行旋转、缩放等...
CSS3同心矩形动画特效
04-25
2. **盒模型**：CSS3中的盒模型包括内容(content)、内边距(padding)、边框(border)和外边距(margin)，理解这一模型是布局的基础。 3. **边框与背景**：CSS3支持圆角边框、渐变背景、阴影效果等，为元素添加丰富的...
纯CSS3滚筒洗衣机动画特效
04-25
CSS3提供了许多新的选择器、布局模型和动画效果，使得开发者能够创建出丰富多彩的网页动态效果，而不仅仅是滚筒洗衣机动画。 在提供的【压缩包子文件的文件名称列表】中，`说明.htm`可能包含关于这个特效的详细使用...
CSS3爱心形状加载动画特效
04-25
JavaScript可以通过操作DOM（文档对象模型）来与CSS交互，改变元素的样式属性，从而实现更复杂的交互效果。 至于`说明.htm`，这可能是一个包含详细说明和示例代码的HTML文件，帮助开发者理解和使用这个特效。而`...
css常用属性速查表1
08-04
以上只是CSS的一部分基础知识，实际上CSS包含更丰富的布局技术（如盒模型、定位、流体布局、Flexbox和Grid）、动画和过渡效果、响应式设计等内容。掌握CSS有助于我们构建美观、功能丰富的Web界面。
CSS基础学习十六：CSS盒子模型补充之border-radius属性
life is wonderful
11-22 3057
CSS盒子模型有很多的内容和属性，CSS也一直在更新和新增属性，今天我们来说说CSS3新增的盒子模型中的 边框中的内容，也就是border-radius属性。        border-radius属性设置元素的边框添加圆角，其实没有边框也可以添加圆角效果。但是要是显示出来，就必须增 加背景色或者边框。       可能的值：xpx；圆角是xpx，半径为xpx的四分之一圆。      
【CSS之美】原来纯CSS也能绘制人物头像
dac_bb的专栏
03-19 2194
这篇文章给大家分享一组纯 CSS 绘制的《辛普森一家》人物头像。《辛普森一家》（The Simpsons）是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧。该剧通过对霍默、玛琦、巴特、莉萨和玛吉一家五口生活的描绘，用搞笑的方式自我嘲讽了美国的文化、社会、电视以及人类境况的诸多方面。     温馨提示：为保证最佳的效果，请在 Chrome、Firefox 和 Safari 等现代浏览器中
CSS布局模型（三）——层模型
chenchao's blog
02-07 1672
什么是层模型？ 什么是层布局模型？层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。 如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定
纯css实现人物介绍特效
weixin_43898383的博客
07-24 510
lao.html <!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>编译中梦见未来</title> <link rel="stylesheet"
CSS盒子模型
热门推荐
微风洋洋的博客
02-08 1万+
CSS盒子模型在CSS中算是比较重要的部分了，他已经开始涉及到网页布局和设计了，对于这一块内容要引起重视，多加练习。
【Web前端开发基础】CSS的盒子模型
最新发布
m0_62611367的博客
01-22 1063
盒子的概念页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子盒子模型内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin ）构成，这就是盒子模型记忆：可以联想现实中的包装盒。
CSS 动画 animation
Hello_super的博客
02-12 6660
CSS 动画 animation 1、基本属性介绍 动画（animation）：和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才可以触发，而动画效果则可以自动触发动态效果。设置动画效果必须先要设置一个关键帧，关键帧设置了动画执行的每一个步骤。关键帧设置的格式如下： <style> /* 定义动画关键帧，关键帧的名字为test */ @keyframes test{ /* from表示动画的开始位置，也可以使用0%来表示。 */
CSS 3.0实现水波纹动画特效
越陌度阡
05-30 6497
给大家分享一个用CSS实现的波纹动画效果，效果如下： 以下是代码实现，欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h
css常用代码大全文库
10-16
在布局代码方面，文库中包含了常用的盒子模型布局、网格布局、响应式布局等等的代码。这些布局代码可以帮助你快速构建出具有不同结构和排版的网页。 在样式代码方面，文库中提供了各种常用样式的代码，如字体样式、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值