1 第一阶段
简单介绍html和css
margin属性怎么用
HTML(HyperText Mark-up Language)：被称为文本标记语言或超文本链接标示语言(标准通用标记语言下的一个应用)是一种制作万维网页面的标准语言。现主流版本html4.0，正在崛起的版本：html5.0。
CSS（层叠样式表）：级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。
HTML+CSS
新建文件夹：1.新建文件夹“html”，2在html中新建“index.html”；3新建“css”文件夹；4在C
SS中新建“base.css”；5在html中新建“images”文件夹
用DW打开新建的文件，建立站点。
例（不引用中文字符编码——中文乱码）：
用dw打开index.html输入文字，在googlechrome浏览器中打开index.html，发现文字是乱码
乱码原因：txt文件本身有一种“ansi”编码
解决方式：输入<meta charset="utf-8">
参考页面：www.w3school
1.1 介绍组成页面的基础标签 
常见标签有：
段落：<p></p>
文字 <h1> <h1> 
链接 <a> 
图片 <img>(相对路径、绝对路径)
相对路径：相对于自身的位置，反推路径、
<img src="images/bg2.jpg"/>    当前目录
        <img src="./ images/bg2.jpg"/>  当前目录
        <img src="../html1/bg1.jpg"/>    上一层目录
例举：以个人自身为例，如果要给“我”指定路径，用相对路径怎么指，用绝对路径怎么指。
注意：这里是反斜杠
    绝对路径：绝对路径-以Web站点根目录为参考基础的目录路径。
        <img src="G:\html1\bg2.jpg"/>
注意：这里是正斜杠
1.2 介绍组成页面的块标签 div
1.2.1 认识Div
DIV是一个盒子
介绍引入外部文件
<link rel="stylesheet" href="./css/base.css"/>
Rel=relationship(的关系)
href：Hypertext Reference的缩写。意思是超文本引用。
Stylesheet（样式表）
Style（风格）
1.2.2 选择器及div命名类等
认识选择器  标签选择器(div)  id选择器(#id)  类名选择器(.class)
Div命名：id=”11”
练习用div在页面中做块以及块和块的嵌套
难点：复合选择器  选择器的优先级
1.2.3 盒模型
简单介绍盒子的一些基本属性
高度height 宽度width 边框border 背景颜ackground-color
浮动：float
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
浮动会使元素横排：float：left/right；
1.2.3.1 Margin(盒子外边距):
例一：margin:10px 5px 15px 20px——上外边距是 10px；右外边距是 5px；下外边距是 15px；左外边距是 20px。
例二：margin:10px 5px 15px(margin:10px auto 12px auto)——上外边距是 10px；右外边距和左外边距是 5px；下外边距是 15px
例三：margin:10px 5px(margin:auto auto)——上外边距和下外边距是 10px；右外边距和左外边距是 5px；
例四：margin:10px（margin:auto）——所有 4 个外边距都是 10px
Margin-left：{margin-left: 2cm;}或{margin-rigth:25%;}或{margin-left:auto;}
Margin-rigth:
Margin-top
Margin-bottom
例（设置水平居中块）：
.main1{
width:500px;
height:300px;
margin-right:auto;
margin-left:auto;
border:1px #000 solid}
min-width：设置段落的最小宽度：
练习常见的居中布局    margin-left:auto;    margin-right:auto;
讲解谷歌浏览器的调试工具，常见错误排查
盒模型查看：如何在调试工具中观察盒子模型
Css样式查看：
放大镜
Show drawer：报错查看
1.2.4 补充：
Body盒子margin去除：在页面顶端会有一个默认的盒子大小，如果要使页面置顶，应该使用代码去除：body{margin:0;    padding:0;}
2 第二阶段
2.1 列表标签 ul ol  li  dl dt dd 
<ol> 标签定义有序列表。
<ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
</ol>
<ul> （unorderList）：标签定义无序列表。
Ul样式属性：ul{
  margin:0;
  padding:0;
  list-style:none;
}
<ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
2.2 介绍盒子模型的padding属性
2.3 例：页面底部效果
通过制作常见页面底部效果 讲解利用列表标签＋padding + 后代选择器快速布局
系统的讲解选择器相关的知识：
文字的一些属性：
Color：文本的颜
text-align:center/left/right;//居中
font-size:12px;//字体大小为12像素
line-height:20px;//  设置行间的距离（行高）像素或%；
font-weight:bold;//加粗
font-family:"宋体";  字体的种类 
后代选择器： 
1.可以无限向后  #id .class div ul .c 
2．从父元素开始一层一层往下
行内样式(少用)
<p class="test" id="test" >
            1234 </p>
总结css选择器
演示css选择器的优先级
行内样式 >  后代选择器 >  id选择器 > 类名选择器 > 标签选
深入讲解浮动，向左向右
通过锤子页面错落有致的产品展示图讲解浮动知识点
浮起的特性，卡的特性，如何清除浮动
如何解决双边框
3 第三阶段
3.1 详细讲解定位和hover
3.1.1 Position:absolute;
设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。
要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。