CSS属性其他小案例

最新推荐文章于 2021-08-03 18:47:58 发布
最新推荐文章于 2021-08-03 18:47:58 发布
阅读量150 收藏
点赞数
分类专栏： 前端 文章标签： CSS属性其他小案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43776742/article/details/103394407
版权

CSS小案例

运动的汽车

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
        img {
        	animation: move 5s infinite;
        }
        /*定义动画*/
	   @keyframes move {
           0% {
           	  transform: translate3d(0,0,0);
           }
           50% {
           	  transform: translate3d(800px,0,0);
           }
           51% {
           	  /*多组变形 空格隔开即可*/
           	  transform: translate3d(800px,0,0) rotateY(180deg);
           }
           100% {
           	  transform: translate3d(0,0,0) rotateY(180deg);
           }
	   }
	</style>
</head>
<body>
	<img src="car.jpg" alt="" width="100" />
</body>
</html>
返回顶层目录

无缝滚动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   * {
	   	  padding: 0;
	   	  margin: 0;
	   }

	   ul {
	   	  list-style: none;
	   }

	   img {
	   	  display: block;
	   }

	   section {
	   	   width: 378px;
	   	   height: 86px;
	   	   margin: 100px auto;
	   	   overflow: hidden;
	   }

	   section ul {
	   	   width: 1000%;
	   	   animation: moving 5s linear infinite;
	   }

	   ul li {
	   	  float: left;
	   }

	   /*定义动画*/
	   @keyframes moving {
	   	   from {
               transform: translateX(0);
	   	   }
	   	   to {
              transform: translateX(-882px); 
	   	   } 
	   }

	   section:hover ul {
	   	   /* 鼠标放到section时候让ul的动画暂停*/
	   	   animation-play-state: paused;
	   }
	</style>  
</head>
<body>
	<section>
		<ul>
			<li><img src="nav1.jpg" alt=""></li>
			<li><img src="nav2.jpg" alt=""></li>
			<li><img src="nav3.jpg" alt=""></li>
			<li><img src="nav4.jpg" alt=""></li>
			<li><img src="nav5.jpg" alt=""></li>
			<li><img src="nav6.jpg" alt=""></li>
			<li><img src="nav7.jpg" alt=""></li>
			<li><img src="nav1.jpg" alt=""></li>
			<li><img src="nav2.jpg" alt=""></li>
			<li><img src="nav3.jpg" alt=""></li>
		</ul>
	</section>
</body>
</html>
返回顶层目录

传统三等分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   section {
	   	  width: 80%; 
	   	  height: 200px;
	   	  margin: 100px auto;
	   	  border: 1px solid #ccc;
	   }

	   section div{
          width: 33.33%; 
          height: 100%;
          float: left;
	   }

	   div:nth-child(1) {
	   	  background-color: pink;
	   }

	   div:nth-child(2) {
	   	  background-color: red;
	   }

	   div:nth-child(3) {
	   	  background-color: blue;
	   }
	</style>
</head>
<body>
	<section>
		<div></div>
		<div></div>
		<div></div>
	</section>
</body>
</html>
返回顶层目录

伸缩布局实现三等分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   section {
	   	  width: 80%; 
	   	  height: 200px;
	   	  margin: 100px auto;
	   	  border: 1px solid #ccc;
	   	  /*父盒子添加flex*/
	   	  display: flex; /*伸缩布局模式 这个盒子具有弹性*/
	   }

	   section div{
          height: 100%;
          flex: 1; /*子元素添加份数*/
	   }

	   div:nth-child(1) {
	   	  background-color: pink;
	   	  flex: 2;
	   	  order: 10;
	   }

	   div:nth-child(2) {
	   	  background-color: red;
	   	  order: -2;
	   }

	   div:nth-child(3) {
	   	  background-color: blue;
	      order: -1;
	   }
	</style>
</head>
<body>
	<section>
		<div></div>
		<div></div>
		<div></div>
	</section>
</body>
</html>
返回顶层目录

伸缩布局实现固定高度

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   section {
	   	  width: 80%; 
	   	  height: 200px;
	   	  margin: 100px auto;
	   	  border: 1px solid #ccc;
	   	  /*父盒子添加flex*/
	   	  display: flex; /*伸缩布局模式 这个盒子具有弹性*/
	   	  min-width: 500px;
	   }

	   section div{
          height: 100%;
	   }

	   div:nth-child(1) {
	   	  background-color: pink;
	   	  width: 200px;
	   }

	   div:nth-child(2) {
	   	  background-color: red;
	   	  width: 100px;
	   }

	   div:nth-child(3) {
	   	  background-color: blue;
	   	  flex: 1;
	   }

	   div:nth-child(4) {
	   	  background-color: green;
	   	  flex: 1;
	   }
	</style>
</head>
<body>
	<section>
		<div>111</div>
		<div>222</div>
		<div>3333</div>
		<div>4444</div>
	</section>
</body>
</html>
返回顶层目录

伸缩布局实现排列方式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   section {
	   	  width: 80%; 
	   	  height: 200px;
	   	  margin: 100px auto;
	   	  border: 1px solid #ccc;
	   	  /*父盒子添加flex*/
	   	  display: flex; /*伸缩布局模式 这个盒子具有弹性*/
	   	  min-width: 500px;
	   	  flex-direction: row-reverse;
	   	  flex-direction: column-reverse;
	   }

	   section div{
         
	   }

	   div:nth-child(1) {
	   	  background-color: pink;
	   	  width: 200px;
	   }

	   div:nth-child(2) {
	   	  background-color: red;
	   	  width: 100px;
	   	  margin: 0 6px;
	   }

	   div:nth-child(3) {
	   	  background-color: blue;
	   	  flex: 1;
	   }

	   div:nth-child(4) {
	   	  background-color: green;
	   	  flex: 1;
	   }
	</style>
</head>
<body>
	<section>
		<div>111</div>
		<div>222</div>
		<div>3333</div>
		<div>4444</div>
	</section>
</body>
</html>
返回顶层目录

justify-content属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   section {
	   	  width: 80%; 
	   	  height: 200px;
	   	  margin: 100px auto;
	   	  border: 1px solid #ccc;
	   	  /*父盒子添加flex*/
	   	  display: flex; /*伸缩布局模式 这个盒子具有弹性*/
	   	  min-width: 500px;
	   	  justify-content: flex-start;
	   	  justify-content: flex-end; 
	   	  justify-content: center;
	   	  justify-content: space-between;
	   	  justify-content: space-around;
	   }

	   section div{
           width: 200px;
	   }

	   div:nth-child(1) {
	   	  background-color: pink;  
	   }

	   div:nth-child(2) {
	   	  background-color: red;
	   	  margin: 0 6px;
	   }

	   div:nth-child(3) {
	   	  background-color: blue;
	   	  
	   }

	   
	</style>
</head>
<body>
	<section>
		<div>111</div>
		<div>222</div>
		<div>3333</div>
	</section>
</body>
</html>
返回顶层目录

align-items属性详解

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   section {
	   	  width: 80%; 
	   	  height: 600px;
	   	  margin: 100px auto;
	   	  border: 1px solid #ccc;
	   	  /*父盒子添加flex*/
	   	  display: flex; /*伸缩布局模式 这个盒子具有弹性*/
	   	  min-width: 500px;
	   	  align-items: stretch; /*默认 子元素高度会拉伸适应父容器（子元素没有设置高度前提下）*/
	   	  align-items: center; /*垂直居中*/
	   	  align-items: flex-start;/*上对齐*/
	   	  align-items: flex-end;/*下对齐*/
	   }

	   section div{
           width: 200px;
           height: 200px;
	   }

	   div:nth-child(1) {
	   	  background-color: pink;  
	   }

	   div:nth-child(2) {
	   	  background-color: red;
	   	  margin: 0 6px;
	   }

	   div:nth-child(3) {
	   	  background-color: blue;
	   	  
	   }

	   
	</style>
</head>
<body>
	<section>
		<div>111</div>
		<div>222</div>
		<div>3333</div>
	</section>
</body>
</html>
返回底层目录

flex-wrap属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   section {
	   	  width: 80%; 
	   	  height: 600px;
	   	  margin: 100px auto;
	   	  border: 1px solid #ccc;
	   	  /*父盒子添加flex*/
	   	  display: flex; /*伸缩布局模式 这个盒子具有弹性*/
	   	  min-width: 500px;
	   	  flex-wrap: nowrap;
	   	  flex-wrap: wrap-reverse;
	   	  flex-wrap: wrap;
	   	  align-content: space-between;
	   }

	   section div{
           width: 500px;
           height: 200px;
	   }

	   div:nth-child(1) {
	   	  background-color: pink;  
	   }

	   div:nth-child(2) {
	   	  background-color: red;
	   	  margin: 0 6px;
	   }

	   div:nth-child(3) {
	   	  background-color: blue;
	   	  
	   }

	   
	</style>
</head>
<body>
	<section>
		<div>111</div>
		<div>222</div>
		<div>3333</div>
	</section>
</body>
</html>
返回底层目录

返回目录

端脑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
20多个CSS样式表精选案例（实用、常用案例）
08-24
个人精心整理收藏，值得推荐！包括《网页设计标准尺寸》文档 搜索引擎 DIV层居中 无图片实现圆角框 精典布局等实用案例！无论新手老手都值得收藏！
CSS标签属性及案例超详细笔记
Willing卡卡的博客
07-11 1101
本文主要分享了有关CSS的知识包括：CSS的书写规范、CSS与HTML结合的三种方式、CSS中常用的选择器（ID选择器、类选择器、标签选择器...）、伪类、CSS中的属性（字体、文本、背景、表格、边框...）、盒子模型、CSS的三种定位、CSS的伸缩布局（flex-container容器）以及利用CSS完成的注册界面；
一个简单的CSS样式布局案例
04-04
最近用DreamWeaver做了个CSS样式布局项目，跟大家分享一下，教CSS初学者怎么使用CSS样式进行布局。
CSS基础标签属性及案例
Willing卡卡的博客
04-10 1169
CSS基础 CSS：cascading style sheets，层叠样式表格；CSS起到装饰作用，将不同功能的代码做分离，方便维护；可以大大提高工作效率，将HTML代码和样式代码分离； 1. 书写规范 格式：选择器 {属性:属性值;属性:属性值} 选择器：确定当前css修饰的是哪一个元素 2. CSS与HTML的结合 2.1 内联结合 使用font标签可以改变文本的字体大小和字体颜...
CSS3实现的几个小loading效果
weixin_30872157的博客
09-27 105
　　　　昨晚上闲的没事突然想做几个小loading效果，下面是昨晚上做的几个小案例，分享给大家 　　　　1.水波loading：这个loading是我觉得非常简单，但是看上去的效果却非常不错的一个小loading 　　　　 这个是效果图片 　　　　下面我直接把代码放上来，大家需要的可以直接拉走 核心思想：（旋转，以及overflow:hidden属性），...
CSS3渐变属性案例.pdf
07-10
CSS3渐变属性案例.pdf 学习资料 复习资料 教学资源
css背景属性案例
12-09
详细描述css背景属性。有案例进行支持，学习之后对css背景能很好的应用。
CSS position属性和实例应用演示
09-24
主要介绍了CSS position属性和实例应用演示,absolute（绝对定位）,relative（相对定位）,relative与absolute的结合使用以及fixed(固定定位),需要的朋友可以参考下
CSS网页背景属性2案例.pdf
07-10
CSS网页背景属性2案例.pdf 学习资料 复习资料 教学资源
CSS网页背景属性1案例.pdf
07-10
CSS网页背景属性1案例.pdf 学习资料 复习资料 教学资源
运用css样式的一个小例子
weixin_30781775的博客
08-24 53
今天听了老师的讲课,把css样式应用整理了一下,参考书籍,写了如下例子:呵呵! mytest.html <html> <head> <title>css测试</title> <link rel=stylesheet href="mytest.css"/> </head> <body> &l...
css层叠实例,21个超赞的CSS实现技术应用实例
weixin_42364852的博客
08-03 371
层叠样式表(CSS)是现代网站设计非常重要的组成部分，如果没有它，那网站就会像10年前那样难看。随着时间的推移，在网络上的CSS教程的质量有了大幅度提高。这里有21个令人称赞的CSS技术应用实例，您可能从来没想过这些也能够通过CSS来实现。这是一个只用CSS技术实现的跨浏览器图库的精彩范例。本实例用让人着迷的方式演示了一个仅仅用CSS技术来实现的图像热区效果创建一个无js纯CSS的lighbox。...
四、CSS样式案例集合
panchang199266的博客
05-13 1163
·1.两排图标 <template> <div class="icons"> <div class="icon"> <div class="icon-img"> <img class="icon-img-content" src="http://img1.quna...
css 的常用案例
gaodda的博客
10-29 1449
Css 的几个常用案例 1. css 编写三角形 2. css编写燕尾角 3. css编写多边形 4. css伪类的妙用 5. css浮动的清除 6. css响应式页面的编写 Created with Raphaël 2.2.0开始我的操作确认？结束yesno ...
overflow属性的使用
qq_43776742的博客
08-01 1010
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 120px; height...
小球圆周运动
qq_43776742的博客
12-15 948
小球圆周运动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
CSS浮动目录
qq_43776742的博客
07-31 665
浮动介绍
小白快速入门篇---HTML+CSS+JS
qq_43776742的博客
11-04 605
1. HTML封神之路 — 目录 2. CSS封神之路 —— 目录
html基础知识
qq_43776742的博客
07-09 561
基本骨架： html基本骨架： <html> <head> <title></title> </head> <body> 网页要显示的内容 </body> </html> html：5骨架 <!DOCTYPE html> //DTD 文档类...
css属性background使用及案例
最新发布
04-22
CSS 属性 background 可以用来设置元素的背景样式，包括背景颜色、背景图片、背景重复方式、背景位置等，具体的用法如下： 语法： background: background-color background-image background-repeat background-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值