day02
全部掌握
- 超链接
- 列表系列
- 表格结构
- 引入CSS
- 三个方法的区别
- css选择器 (基础)
- css文本属性
超链接
链接 anchor 锚点、
<a href='跳转的地址'>文本or img or div </a>
链接可以完成图片、区域、下载、邮箱链接
属性:
href:跳转地址
target:设置打开方式 id属性 唯一识别
target:_self本页/_blank空白页,新页
base标记
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 配合超链接使用 做全局的设置 href用来设置相同的基础地址 target用于设置统一的打开方式-->
<base href="https://shop.mogu.com/detail/" target="_blank">
</head>
锚点功能
超链接跳转到某一个界面的某一个部分
- 先要给链接的部分加一个id属性 起一个id值
- 在a链接里href="#id值" 如要跳转到其他界面的某一个部分 则 href=“界面地址#id值”
<a href="#ny">农药</a>
列表系列
无序列表
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-adkubYvX-1605621824209)(…/…/…/…/AppData/Roaming/Typora/typora-user-images/1605620313786.png)]
ul>li*n
type:标识的类型
<!-- type:square正方形 /circle空心圆 /desc实心圆 /none没有 -->
<ul type="">
<li>无序列表数据项</li>
<li>无序列表数据项</li>
<li>无序列表数据项</li>
<li>无序列表数据项</li>
<li>无序列表数据项</li>
</ul>
type: 标识的类型,不能修改样式()
有序列表
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5SwJICLf-1605621824211)(…/…/…/…/AppData/Roaming/Typora/typora-user-images/1605620429758.png)]
<!-- type: 1 /a/A/I/i start="数字" -->
<ol type="1" start="6">
<li>数据项1</li>
<li>数据项2</li>
<li>数据项3</li>
<li>数据项4</li>
<li>数据项5</li>
</ol>
自定义列表
----(带有标题的列表) 界面的尾部
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tfz6Zkr5-1605621824212)(…/…/…/…/AppData/Roaming/Typora/typora-user-images/1605620516120.png)]
<!-- dl define list > dt title + dd data-->
<dl>
<dt>购物指南</dt>
<dd>购物流程</dd>
<dd>购物流程</dd>
<dd>购物流程</dd>
<dd>购物流程</dd>
<dd>购物流程</dd>
</dl>
表格结构
二维结构 水平(行tr) 垂直(列td)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y9wf4Xv6-1605621824215)(…/…/…/…/AppData/Roaming/Typora/typora-user-images/1605620556906.png)]
宽度和高度自己适应结构
头部thead 默认居中 加粗
身体tbody 居左
底部(补充)tfoot
<table>
<tr>
<td></td>
</tr>
</table>
复杂结构
<!-- 大盒子 -->
<table>
<!-- 头部 第一行 字段 -->
<thead>
<!-- tr table row 行 -->
<tr>
<!-- th table head单元格 列 -->
<th>姓名</th>
<th>基本工资</th>
<th>岗位工资</th>
<th>补助</th>
<th>其他</th>
</tr>
</thead>
<!-- 主体 具体数据 -->
<tbody>
<tr>
<td>马杰伦</td>
<td>800</td>
<td>100</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>朱德华</td>
<td>2000</td>
<td>500</td>
<td>50</td>
<td>0</td>
</tr>
<tr>
<td>张荣浩</td>
<td>3000</td>
<td>1000</td>
<td>1000</td>
<td>0</td>
</tr>
</tbody>
<tfoot>
数据s说明
</tfoot>
</table>
简单结构 (90%常用)
<table border="1px" cellpadding="0" cellspacing="0" style="border-collapse:collapse"
align="center" width="500px" height="300px" >
<tr bgcolor="red">
<td>姓名</td>
<td>基本工资</td>
<td>岗位工资</td>
<td>补助</td>
<td>其他</td>
</tr>
<tr align="center">
<td bgcolor="yellow">马杰伦</td>
<td >800</td>
<td>100</td>
<td width="200px">0</td>
<td>0</td>
</tr>
<tr align="center">
<td>朱德华</td>
<td>2000</td>
<td>500</td>
<td>50</td>
<td>0</td>
</tr>
<tr>
<td>张荣浩</td>
<td>3000</td>
<td>1000</td>
<td>1000</td>
<td>0</td>
</tr>
</table>
默认属性
border:边框 border=“1px”
cellpadding:单元格内部边框和内容的距离
cellspacing: 单元格与单元格之间的距离
align:水平对齐方式 left right center
(1)写在table里 那就是表格大盒子对齐
(2)写在td单元格里 那就是单元格内容对齐,不要一个个的给td加,应该加在tr身上
width: 宽度
height:高度
bgcolor:背景色 table or tr or td
css属性: border-collapse:collapse 细线边框属性(table)
合并属性
跨行合并rowspan 列合并 rowspan =“n” n表示要合并的行数
跨列合并colspan 行合并 colspan =“n” n表示要合并的行数
被合并的要删掉 删除个数=合并列数-1
应用
原始:布局,已淘汰
目前:装文字的多行多列
CSS(层叠样式表)cascading style sheets
内容:文本样式,布局,选择器,动画,背景插入图片…
功能:美容院
特点:无逻辑 不能计算
引入方法(html文件里)
css属性写法
{
属性名:属性值;
属性名:属性值;
属性名:属性值;
属性名:属性值;
…
}
行内引入
<!-- 行内 style=“css属性集合”
style: {
width:200px;
height:200px;
background-color: slateblue;
}
-->
<div style="width:200px;height:200px;background-color: slateblue;">
div元素
</div>
<!-- width 自带属性 默认属性 -->
<img src="./image/timg.jpg" alt="" style="width:500px">
缺点:1、代码冗余 2、结构不清晰 3.后期维护困难
内部嵌入
<!--内部 嵌入 -->
<style>
* {
color:tomato;
}
p {
font-size: 30px;
}
.list-data {
font-size: 22px;
color: springgreen;
}
.first {
color: #000;
}
#one {
color: #000;
}
</style>
</head>
缺点:没有形成结构与样式相分离,不利于后期代码复用和维护
外部链接
1.创建一个.css文件
2.把css样式代码写入文件里
3.引入 head>link
<!-- link rel:声明你引入的那个文件类型 href=""-->
<link rel="stylesheet" href="./a.css">
link
rel:声明你引入的文件类型 stylesheet
href:路径
优点:彻底形成分离 复用 + 好维护
导入
优先级
行内 > 内部嵌入 >外部引入
行内:js获取行内样式是非常方便的 优先级高 覆盖外部样式 ,内部嵌入
内部嵌入:覆盖公共样式文件里的样式 common.css
选择器
基础选择器 css选择器 ---》挑选元素
全局选择器 通配符) 匹配的是包含html在内的所有元素
标签选择器
*{
}
标签选择器 标签名 { }
p{
}
类选择器(英文,不以数字开头、方位词、汉字)
(1)先写一个类名
(2)挑选 .类名 {}
.box{
}
id选择器(一个)
(1)先起一个id名字
(2)#id值{}
#id值{
}
link
rel:声明你引入的文件类型 stylesheet
href:路径