100天UI学习笔记-网页样式与布局

内容整理自线下课程笔记。

使用软件：Dw

文章内容：学习html和css制作网页

一、切片工具

1. 拆分网页结构

（1） 1 像素原则

（2）逐级划分原则

拆分顺序：先整体后局部，先上下后左右

如上图，红色区域为1级划分区域，分为：header区，main区，footer区；黄色区域是main的二级区域划分；如此，还可以有更细的拆分。

2.切图（获取局部图像）

第一步：使用Ps软件，用切片工具切出图像区域

第二步：文件菜单-导出-存储为web所用格式-JPEG-存储-文件名（快捷键：shift+opt+cmd+s）

格式：仅限图像

切片：选中的切片，保存好之后会在当前文件夹里新建一个images文件夹

二、网页结构

使用Dw软件，新建：文件菜单-新建（页面类型：html，文档类型：xhtml1.0 transitional）

标记分类：

双标记：<标记>  内容 </标记> 

比如：<div>内容</div>

单标记：<标记/>

比如：<img src="images/icon_01.png" />

标记关系：

嵌套关系（父子关系）

比如：

<div>内容一

<div>内容二</div>

</div>

并列关系（兄弟关系）

比如：

<div>内容一</div>

<div>内容二</div>

1. html 超文本标记语言

2. head 网页头部

3. title 网页标题

4. body 网页主体内容

5. 文件保存：首页名称必须为index

6. div区块，定义网页中的分区（division）

写法: <div> 内容 </div>

特点：

（1）独立成行

（2）默认为父级宽度的100%

（3）高度自适应（内容有多少就有多高）

7. img图片标记

 写法：<img src="图片路径地址"/>

8. h1-h6最大-最小标题

写法：<h3>标题</h3>

特点：

（1）独立成行

（2）自带加大加粗

（3）自带间距

9. P段落标记

比如：<p>段落文字内容</p>

特点：

（1）独立成行

（2）自带间距

10. ul li 无序列表 子列表

写法：

    <ul>

        <li></li>

        <li></li>

   </ul>

特点：

（1）独立成行

（2）自带外间距和内填充

（3）自带小黑点

11. a超链接标记

写法：<a href="链接地址"></a>

href意思是超文本引用，用来指定超链接目标

如果不确定地址，用href="#"来代替

12. 标记类型

（1）块级标记

a. 独立成行

b. 默认宽度是父级的100%

c. 具有盒模型的全部特征

代表性标记：div  P  h系列   ul  li

（2）行级标记

a. 水平显示

b. 宽度自适应（内容撑开）

c. 具有盒模型的部分特征

支持：border  左右margin和padding

不支持: width\height, 上下方向的margin和padding

d. 换行会解析出一个空格

代表性标记：a

12. span 行级标记

可以给一行文字添加不同样式

13. video视频标记

 <video src="视频路径地址" controls  loop poster=""></video>

controls 控件组

autoplay自动播放 (chrome66 后版本禁止)

loop 循环

poster="图片路径" 设置视频播放前显示的图像

14. audio音频标记

<audio src="音频地址" controls  loop></audio>

三、网页样式（CSS 层叠样式表）

1. 内部样式表

在head标记结束前添加：

      <style>

            选择器{属性:值;}

      </style>

比如，定义div高度170px，宽度1000px：

    <style>

       div{

                 height:170px;

                 width:1000px;

            }

     </style>

2. 选择器-找对象

（1）标记选择器  div   ul li h系列  p  img

样式：名字{属性:值;}

比如，定义div高度170px，宽度1000px：

    <style>

       div{

                 height:170px;

                 width:1000px;

            }

     </style>

（2）ID选择器

结构：<div id="名字"></div>

样式：#名字{属性:值;}

比如，定义header高度170px，宽度1000px：

    <style>

       #header{

                 height:170px;

                 width:1000px;

            }

     </style>

ID名是唯一的，不能重复取名使用

命名规范：不能使用中文、纯数字或者数字开头、特殊符号（_-除外）

（3）class(类)选择器，在二级及以上拆分时使用

结构：<div class="名字"></div> 

样式：.名字{属性:值;}

比如，定义logo高度170px，宽度1000px：

    <style>

       .logo{

                 height:170px;

                 width:1000px;

            }

     </style>

（4）群组选择器--把相同的样式定义在一起

选择器A,选择器B,选择器C{属性:值;}

比如，定义header、banner、main、footer水平居中

#header,#banner,#main,#footer{

margin:0 auto;

}

（5）* 通配符选择器-找到页面中所有元素

*{margin:0;  padding:0;} 清楚所有元素度外间距和内填充

在CSS样式里最上面添加

（6）后代选择器

父选择器 子选择器{属性:值;}

父选择器可以是直接父级，也可以是祖辈

（7）a 的伪选择器

a:hover{属性:值；}

鼠标经过（悬停）

3. css属性

（1）width宽度

（2）height高度

（3）float浮动（谁要做水平布局就给谁加浮动）

left 左 / right 右

A. 浮动元素一般都是并列关系，要浮动都要浮动

B. 浮动元素会脱离原来的位置（不占位）- 脱离标准的文档流

C. 浮动元素宽超过父级宽会自动换行

D. 浮动元素如果没有给宽度，宽度变为自适应（内容来撑开） 

（4）margin:0 auto;

实现盒子水平方向居中显示，配合宽度来写

（5）background-color背景颜色

可以写16进制色值（需要带#），也可以写表示颜色的英文单词

比如，background-color:black; 背景填充黑色

background-color:#000; 背景填充黑色

background-color:rgba(0,0,0,0.5); 背景填充黑色，50%度透明度

（6）清除列表自带小黑点

li{list-style:none;} 

（7）background-image背景图片 （不占位）

写在样式里，起修饰作用，默认重复平铺

background-repeat:no-repeat; 不重复平铺

（8）margin外间距

margin-top上外间距     margin-bottom下外间距

margin-left左外间距     margin-right右外间距

margin:20px; 代表四周

margin:20px 30px; 上下 左右   

margin:20px 30px 40px; 上 左右 下（上中下）

margin:20px 30px 40px 50px; 上右下左（顺时针方向）

margin-top问题：

第一个子级的margin-top值会传递给父级

解决方法：给父级加padding-top来代替

（9）padding 内填充

（10）border边框线（描边）

border:线的大小  线的颜色  线的类型;

border-top上边框线     border-bottom下边框线

border-left左边框线     border-right右边框线

比如：border-top:5px red solid; 定义描边，5px宽，红色，实线

线的类型：

A. 实线：solid

B. 条状虚线：dashed

C. 点状虚线：dotted

（11）盒模型（width\height、padding、border、margin）

盒子实际高度=height（内容高）+ 上下padding + 上下border

盒子实际宽度=width（内容宽）+ 左右padding + 左右border

（12）color 文字颜色

（13）font-size 字号大小

（14）font-family 字体字族

如果字体名称是中文或者多个单词组成，必须用双引号引起来（英文符号）

苹方-简 常规体
font-family: PingFangSC-Regular, sans-serif;
苹方-简 极细体
font-family: PingFangSC-Ultralight, sans-serif;
苹方-简 细体
font-family: PingFangSC-Light, sans-serif;
苹方-简 纤细体
font-family: PingFangSC-Thin, sans-serif;
苹方-简 中黑体
font-family: PingFangSC-Medium, sans-serif;
苹方-简 中粗体
font-family: PingFangSC-Semibold, sans-serif;

（15）font-weight设置字体是否加粗

bold 加粗

normal 不加粗（标准的）

（16）text-align文本对齐方式(水平方向) 

对图片也起作用

left 左

right 右

center 居中

justify 两端对齐

（17）line-height行高

一行文字所占的高度

将一行文字的行高设置成和所在的盒子的高度一致，可以让该文字在盒子里垂直方向居中

（18）background-repeat设置背景图片是否重复平铺

no-repeat 不重复平铺   

repeat-x 水平方向重复平铺

repeat-y 垂直方向重复平铺

（19）background-position背景图片位置

background-position:水平方向  垂直方向；

水平方向:left  center  right

垂直方向:top  center  bottom

水平和垂直方向各写一个值，也可以写具体的数值

（20）text-decoration 文本修饰

none 定义标准的文本（没有下划线）

underline 下划线

overline 上划线

line-through 中划线

（21）position位置（定位）

如果网页中出现覆盖关系，首先要用定位

A. 绝对定位 position:absolute;

a. 基于浏览器四个坐标点

left距离左边   right距离右边

top距离上边   bottom距离下边

b. 加了绝对定位的元素不占位

c. 加了绝对定位的元素，如果没有给宽度，宽度为自适应（内容撑开宽度）

B. 给父级添加相对定位 position:relative;

（22）display显示（转换）

A. display:block; 转为块级标记

B. display:inline; 转为行级标记

（23）border-radius 圆角

（23）box-shadow盒阴影

box-shadow:X轴偏移量   Y轴偏移量  阴影羽化值  阴影扩展值  阴影的颜色  阴影的位置

box-shadow: 5px   8px   10px  20px  red  inset;

（24）clear清浮动：清除浮动产生的影响（会导致父级不占位），恢复父级占位

结构：在一组浮动标记的最后添加

<div class="clear"></div>

样式：.clear{clear:both;}

（25）line-height

行高=上留白+文字+下留白

文字在行高里是垂直居中

（26）<br> 换行

（27）&nbsp 空格

最后展示一下我做的网页