关于学习css的心得体会

最新推荐文章于 2024-03-10 22:00:30 发布

⁢⁧⁩⁣⁣⁦

最新推荐文章于 2024-03-10 22:00:30 发布

阅读量4.4k

点赞数 2

本文链接：https://blog.csdn.net/qq_53012201/article/details/111779259

版权

经过一段时间的学习，我们已经学到了css，css给我最大的感觉就是对于文章结构的控制，当学到了盒子模型的时候，对于大多数网页布局方式有了一定的认知，自己也可以着手尝试一些简单的网页。下面是我自己对css的心得体会

css知识总结

css有三种引入方式，但需要注意的时，需要在head标签内引入，其次我觉得css比较重要的就是盒子模型，在CSS中，所有HTML元素可以看作盒子，
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。当我们把网页各部分看成一个个盒子，就很容易对他进行布局。可以用margin等标签对他们进行控制。在这里插入图片描述

然后就是浮动布局，这是最常用的布局方式，利用左浮和右浮，可以让块状元素在同一列显示。利用这一些我也是完成了一些简单的css例子。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/inder.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="logo"></div>
<div class="nav">
	<li>Phone</li>
	<li>Mi Pad</li>
	<li>Mi Tv</li>
	<li>Mi Band</li>
	<li>Mi Power Bank</li>
    <li>Headphones</li>
	<li>Store</li>
</div>
</div>
<div id="container">
<div class="pr"></div>
<div class="good">
<div class="left">
	<h1>MI 4I</h1>
	<p>Innovation made compact</p>
	<img src="image/11.png">
</div>
<div class="midder">
	<h1>MIUI</h1>
	<p>Readingfining Androld</p>
	<img src="image/22.jpg">
</div>
<div class="right">
	<h1>MI Headphones</h1>
	<p>Our first audlophile-grade Headphones</p>
	<img src="image/33.jpg">
</div>
</div>
<div id="fotter">
<div class="fotter1">
	<li>Aobut us</li>
	<li>Mangengment</li>
	<li>Cntact us</li>
	<li>Privacy policy</li>
	<li>User Agreement</li>
</div>
<div class="fotter2"><li>copyright @ 2010-2015 xiaomi. All Rights Reservesd&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;</li></div>
<div class="fotter3">
	<li><img  src="image\i1.png" ></li>
	<li><img  src="image\i3.png" ></li>
	<li><img  src="image\i2.png" ></li>
</div>	


</div>








</div>	
</body>
</html>

在这里插入图片描述

当学到了css3动画部分的时候我看到了更多好玩的东西，虽然老师说要配合js才能更好看，但照样为我打开了新世界的大门，以为之前做的都是静态的页面，通过css3中的2d和3d转换以及动画配合，让页面活了过来，在老师的帮助下，做了摇篮式照片和小黄人。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/20.css">
</head>
<body>
<div class="slider">
       <div class="x_rot">
          <div class="y_rot">
            <div id="i1"><img src="image/1.png"></div>
            <div id="i2"><img src="image/2.png"></div>
            <div id="i3"><img src="image/3.png"></div>
            <div id="i4"><img src="image/4.png"></div>
            <div id="i5"><img src="image/5.png"></div>
            <div id="i6"><img src="image/8.png"></div>
          </div>

       </div>
	








</div>

	
</body>
</html>

在这里插入图片描述

css思维导图

最后是我自己总结的css思维导图
在这里插入图片描述

⁢⁧⁩⁣⁣⁦

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
关于学习css的心得体会

经过一段时间的学习，我们已经学到了css，css给我最大的感觉就是对于文章结构的控制，当学到了盒子模型的时候，对于大多数网页布局方式有了一定的认知，自己也可以着手尝试一些简单的网页。css知识概括...
复制链接

扫一扫