关于学习css的心得体会

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

css知识总结

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

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。当我们把网页各部分看成一个个盒子,就很容易对他进行布局。可以用margin等标签对他们进行控制。关于学习css的心得体会_第1张图片

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


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<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>Phoneli>
	<li>Mi Padli>
	<li>Mi Tvli>
	<li>Mi Bandli>
	<li>Mi Power Bankli>
    <li>Headphonesli>
	<li>Storeli>
div>
div>
<div id="container">
<div class="pr">div>
<div class="good">
<div class="left">
	<h1>MI 4Ih1>
	<p>Innovation made compactp>
	<img src="image/11.png">
div>
<div class="midder">
	<h1>MIUIh1>
	<p>Readingfining Androldp>
	<img src="image/22.jpg">
div>
<div class="right">
	<h1>MI Headphonesh1>
	<p>Our first audlophile-grade Headphonesp>
	<img src="image/33.jpg">
div>
div>
<div id="fotter">
<div class="fotter1">
	<li>Aobut usli>
	<li>Mangengmentli>
	<li>Cntact usli>
	<li>Privacy policyli>
	<li>User Agreementli>
div>
<div class="fotter2"><li>copyright @ 2010-2015 xiaomi. All Rights Reservesdli>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>

关于学习css的心得体会_第2张图片

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


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<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的心得体会_第3张图片

css思维导图

最后是我自己总结的css思维导图
关于学习css的心得体会_第4张图片

你可能感兴趣的:(关于学习css的心得体会)