HTML【Hyper Text Markup Language】
超文本标记语言，不是编程语言
软件架构：
1. C/S: Client/Server 客户端/服务器端
* 在用户本地有一个客户端程序，在远程有一个服务器端程序
* 如：QQ，迅雷…
* 优点：
\1. *用户体验好*
* 缺点：
\1. 开发、安装，部署，维护 麻烦
2.B/S: Browser/Server 浏览器/服务器端
* 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
* 优点：
\1. *开发、安装，部署，维护 简单*
* 缺点：
\1. 如果应用过大，用户的体验可能会受到影响
\2. 对硬件要求过高
* B/S架构详解
* 资源分类：
1.静态资源：
* 使用静态网页开发技术发布的资源。
* 特点：
* 所有用户访问，得到的结果是一样的。
* 如：文本，图片，音频、视频, HTML,CSS,JavaScript
* 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
2. 动态资源：
* 使用动态网页及时发布的资源。
* 特点：
* 所有用户访问，得到的结果可能不一样。
* 如：jsp/servlet,php,asp…
* 如果用户请求的是动态资源，那么服务器会执行动态资源，**转换为静态资源，**再发送给浏览器
* 我们要学习动态资源，必须先学习静态资源！
* 静态资源：
* HTML：用于搭建基础网页，展示页面的内容【标准文档流】
* CSS：用于美化页面，布局页面【层叠样式】
* JavaScript：控制页面的元素，让页面有一些动态的效果
W3C World Wide Web Consortium（万维网联盟）
成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
http://www.w3.org/
http://www.chinaw3c.org/
W3C标准包括
结构化标准语言（XHTML 、XML）表现标准语言（CSS）行为标准（DOM、ECMAScript ）
标签分为围堵标签和自闭和标签
1. 围堵标签：有开始标签和结束标签。如
2. 自闭和标签：开始标签和结束标签在一起。如
1.常见标签
| 空格 | ** ** | <a href**="#">百度 | **<a** href="#">新浪** |
|---|---|---|
| 大于号**(>)** | > | 如果时间**>晚上6****点，就坐车回家** |
| 小于号**(<)** | < | 如果时间**<早上7****点，就走路去上学** |
| 引号**(")** | " | **W3C规范中，HTML的属性值必须用成对的"**引起来 |
| 版权符号**@** | © | © 2008-2018****课工场【©】 |
meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。必须写在head里
1-1图像标签
alt属性【图片不能正常显示时】改变路径或图像名称情况下可以看到替代文字和【title属性在鼠标放到图像上提示文字】，并且说明alt属性常和src配合使用。
<img src="path" alt="text" title="text" width="x" height="y" />
<img src="image/hetao.jpg" width="160" height="160" alt="无漂白薄皮核桃" title="无漂白薄皮核桃"/>
(1) 图像标签
① img 单标签
② src属性必须提供【建议alt,title属性也填上】
-
绝对地址
-
相对地址
③ 其他属性可选
-
width 图片的显示宽度
-
height 图片的显示高度
-
alt 替代文本【路径或图片名称错误时】
-
title 鼠标悬浮时的提示文本
5)mark：文件加黄色底纹
1-2超链接
<a href="path" target="目标窗口位置">链接【文本或图像】</a>
网页中插入图片，说明图片经常保存在image或images目录下，以保证网站目录清淅
链接路径href=链接在哪个窗口打开target=【目标窗口打开的不同位置常用值：_self（自身）、_blan（新窗口）】
1-2-1超链接页面间链接从一个页面链接到另外一个页面【网站上使用最多的就是页面间链接，例如网站导航菜单、新闻列表、商品列表等链接，通常都是页面间链】
1-2-2锚链接【从A页面的甲位置跳转到本页中的乙位置；；从A页面的甲位置跳转到B页面中的乙位置】
<a name="marker">乙位置</a>【创建跳转标记】
<a href="#marker">甲位置</a>【创建跳转链接】
1-2-3功能性链接
_self:自身窗口打开
_blank:新建窗口打开
xxx 在某个区域打
在网上单击一些QQ图标直接弹出QQ对话框，或单击MSN图标直接弹出MSN对话框【电子邮件；QQ；MSN】
<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>
1-3列表标签
- ul是unordered lists的缩写 (无序列表)
- li是list item的缩写 （列表项目）
- ol是ordered lists的缩写（有序列表）
- dl是definition lists的英文缩写 (自定义列表)
- dt是definition term的缩写 (自定义列表组)
- dd是definition description的缩写（自定义列表描述）
- nl是navigation lists的英文缩写 （导航列表）
- tr是table row的缩写 （表格中的一行）
- th是table header cell的缩写 （表格中的表头）
- td是table data cell的缩写 （表格中的一个单元格）
- cell (巢)[翻译的好怪.]
- cellpadding （巢补白）
- cellspacing （巢空间）
(1)无序列表（unordered list）
①ul>li(line行)
②无序
③type属性可以指定列表的样式（前面的小图标）
disc：实心圆（默认） circle：空心圆 square：实心矩形
(2)有序列表
①ol>li
②有序
③type属性可以指定列表的样式（序号的类型，比如1、A、I）
1：数字（默认） a：小写字母 A：大些字母 i：小写罗马数字 l：大写罗马数字
(3)自定义性列表(ordered list)
①dl>dt+dd
②图文展示
dl：表
dt：图片
dd：描述
③默认：dd有左外边距
| 无序列表 | 以**<ul>标签来实现以****<li>**标签表示列表项 | 无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对【简单的标题】性质的网页内容 |
|---|---|---|
| 有序列表 | 以**<ol>标签来实现以****
| 有序列表ol-li****一般用于显示带有顺序编号的特定场合 |
| 定义类表 | 以**
| 定义列表一般适用于带有【标题和标题解释性内容】的场合 |
1-4、表格标签【简单通用；结构稳定】
(1)复合标签，一般用于表单form的排版
(2)table>tr>td 创建表格标签
……①table 表cellpadding 单元格内边距 cellspacing单元格外边距 width height border【默认无边框】
caption:标题；
②tr 行row cell align:内容居中 style=”background-color:red”
③td 单元格data cell th:表头单元格【加粗居中】
(3)可以合并单元格
①跨行 rowspan
②跨列 colspan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<style type="text/css">
body{
background: gold;
/* 整个页面背景色 */
}
.tb{
margin-top: 50px;
/* 表单区域的外边距 */
}
.tb table{
background: #CCCCCC;
/* 制表区的背景色 */
}
.tb caption{
color: red;
font: 24px bolder;
/* 表的标题颜色及字体大小 也可以设置隔行变色效果even偶数 */
}
.tb tr:nth-of-type(1){
background-color: green;
}
.tb tr:nth-of-type(even){
background-color: deeppink;
/* 偶数行设置粉红 */
}
</style>
</head>
<body>
<div class="tb">
<table border="1px"width="800px"height="300px" align="center"cellpadding="0px" cellspacing="0px">
<caption align="justify" contenteditable>我的书单</caption>
<!--标题可编辑，居中对齐 -->
<tr>
<th>栏目/图书编号</th>
<th>名字</th>
<th>作者</th>
<th>价格</th>
<th>出版时间</th>
<th>页数</th>
</tr>
<tr>
<th>1</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>2</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>3</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>4</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
超链接实现隐藏与显示效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接实现隐藏与显示效果</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.flower {
width: 200px;
height: 200px;
text-align: center;
margin: 0 atuo;
margin-top: 20px;
border: 1px solid yellow;
margin-left: 42%;
}
.flower img {
display: none;
}
.flower a{
text-decoration: none;
color: #000000;
}
/* 文字和图片应该分别设置不能杂糅*/
.flower a:hover{
font: 45px;
color: blue;
text-decoration: underline;
}
.flower .a:hover img {
display: block;
}
</style>
<body>
<div class="flower">
<div class="a"><a href="#">点我
<div class="img"><img src="img/3.png" alt="鲜花"></div>
</a></div>
</div>
</body>
</html>
<!-- <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#con{
width: 300px;
height: 300px;
border: 1px solid red;
margin: 0 auto;
}
#con .flower{
display:none;
}
#con a:hover .flower{
color:red;
display:block;
}
</style>
</head>
<body>
<div id="con">
<a href="#">
哈哈
<img class="flower" src="img/1.png" alt="" />
</a>
</div>
</body>
</html> -->
快速建表
ul：表示无序
**li：**表示一个列表
**a：**表示带<**a>**标签的列表
{}：表示每个列表之内相同的内容
>：号表示优先级
***3：**表示创建三个，*x表示创建x个标签
li*3三行相同的
ul>li*3无序列表有三行内容
ul>(li>{姓名：})*3 无序列表有三行内容并且每行含有姓名
ul>(li>lable>a{姓名：})*3 多重标签嵌套用大于号；
dl>dt+dd*4 一行dt,四行dd
dl>dt+dd
1-5音频标签默认自动无声打开
| audio | 定义音频，如音乐或其他音频流 |
|---|---|
| video | 定义视频，如电影片段或其他视频流 |
| canvas | 定义图形 |
| datalist | 定义可选数据的列表 |
| time | 标签定义日期或时间 |
| mark | 在视觉上向用户呈现那些需要突出的文字 |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l3VHuWMS-1604328838610)(HTML/image-20201026200456385.png)]
preload的三个值解释一下即可：
auto：当页面加载后载入整个音频；
meta：当页面加载后只载入元数据；
none：当页面加载后不载入音频；
src：指定要播放的视频文件的路径 controls：提供播放、暂停和音量的控件
autoplay：自动播放属性 loop：视频的循环播放
video元素允许多个source元素source可链接不同的视频文件
<h2>在html5中播放音频：</h2>
<video controls="controls">
<source src="video/video.mp4"/>
urce src="video/video.ogg"/>
<source src="video/video.webm"/>
您的浏览器<so不支持video播放的视频
</video>
contentEditabs控制属性designMode属性
* on:表示页面所有元素可编辑；
* off:表示页面所有元素不可编辑；
document.designMode="on";
document.designMode="off";
le 规定是否允许用户编辑内容
designMode 规定整个页面是否可编辑
hidden 规定对元素进行隐藏
spellcheck 规定是否必须对元素进行拼写或语法检查
time 标签定义日期或时间
tabindex 规定元素的tab键迭制次序
| contentEditable | 规定是否允许用户编辑内容 |
|---|---|
| designMode | 规定整个页面是否可编辑 |
| hidden | 规定对元素进行隐藏 |
| spellcheck | 规定是否必须对元素进行拼写或语法检查 |
| time | 标签定义日期或时间 |
| tabindex | 规定元素的tab键迭制次序 |
1-6输入框标签及属性
跨列：colspan="横向跨的单元格数"跨行：rowspan="纵向跨的单元格数
1-7表单元素
post方式提交的数据安全性要明显高于get方式提交的数据。因此在实际开发中通常采用post方式提交表单数据
| type | **指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，**默认为 text |
|---|---|
| name | 指定表单元素的名称 |
| value | 元素的初始值。type 为 **radio时**必须指定一个值 |
| size | **指定表单元素的初始宽度。**当 type 为 【text 或 password】时，表单元素的大小以【字符】为单位。对于其他类型，宽度以【像素】为单位 |
| maxlength | type为text 或 password **时，**输入的最大字符数 |
| checked | **type为radio或checkbox****时，**指定按钮是否是被选中 |
1-7-1type取值为text时为【文本框】
，name属性是必须的，其他几个属性并不是必须的；【size与maxlength的区别】，当没有设置maxlength时向文本框中输入内容没有限制，当设置maxlength时再向文本框中输入值将会有字符数的限制value:文本框初始值
1-7-2.type取值为password时为【密码框】
，name属性是必须的，其他属性并不是必须的，密码框中输入字符时，显示的效果，密码字符以【黑色实心的圆点】来显示。
当注册时需要验证6-16位pattern
密　码：<input type="text" class="password" name="password" id="password" placeholder="请输入6-16位的密码"
pattern="[\d a-z A-Z ]{6,16}" required><br />
1-7-3，type取值为radio时为【单选按钮】
，name和value属性是必须的，其他属性并不是必须的；同一组单选按钮，name属性值必须相同，才能在选中单选按钮时达到互斥；在页面加载时单选按钮有一个默认的选项，则必须使用checked属性，同一组单选按钮只能有一个默认的checked属性
<input name="gen" type="radio" value="男" checked />男
<input name="gen" type="radio" value="女" />女
1-7-4type取值为checkbox时为【复选框】
，name和value属性是必须的，其他属性并不是必须的；同一组复选框，根据需要可设置name属性值【相同，也可不同】；在页面加载时有默认选中的复选框，则必须使用checked属性，同一组复选框中允许有【多个复选框有默认的checked】属性。
<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏
1-7-5【下拉列表框】的语法,重点说明它的标签组成
，一个中至少包含一下；name和value属性是必须的，其他属性并不是必须的；一个列表框中只能有一个列表项默认被选中；页面加载时有默认选中的选中项，则必须使用selected属性，如果没有默认选中项则【第一个选项默认被选中】；
<select name="列表名称" size="行数">
<option value="选项的值" selected>…</option >
<option value="选项的值">…</option >
</select>
1-7-6【提交按钮（提交/重置/图片/普通）】
name和value属性是必须的，其他属性并不是必须的；三个按钮提交后显示的不同效果，主要演示提交按钮和重置按钮，提一下普通按钮是需要添加onclick事件的；图片按钮的用法，强调type和src属性，强调“type”属性没有设置为“submit”，但仍然具备提交表单的功能。【图片按钮还可以时动图，显得更加炫酷】
<input type="reset/submit" name="butReset" value="reset按钮">
<input type="image" name="butSubmit" value="submit按钮">
<input type="button" name="butButton" value="button按钮"/>
1-7-7【多行文本域】
的内容是在和:列数，行数
<textarea name="showText" cols="x" rows="y">文本内容 </textarea >
1-7-7【文件域】的语法及功能，说明type值为file即为文件域；在表单中使用文件域时，必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单数据分为多部分提交
<form action="#" method="post" enctype="multipart/form-data">
<p><input type="file" name="files" />
<input type="submit" name="upload" value="上传" /></p>
</form>
1-7-8滑块，搜索框
<p>邮箱:<input type="email" name="email"/></p>【邮箱】
<p>请输入你的网址:<input type="url" name="userUrl"/></p>【网址】
<p>请输入数字:<input type="number" name="num" min="0" max="100" step="10"/></p>【数字】
<p>请输入数字:<input type="range" name="range1" min="0" max="10" step="2"/></p>【滑块】
<p>请输入搜索的关键词:<input type="search" name="sousuo"/></p>【搜索框】
1-7-9【隐藏域】只是把type属性值设置为hidden；在浏览器中看不到隐藏域，但是在提交表单时可以看到隐藏域的内容被提交至服务器【只读和禁用】的语法，强调不能单写readonly或disabled，必须写readonly＝”readonly”和disabled=“disabled”，【W3C HTML5标准中，规定对于布尔类型的属性，属性值可以省略】
<input type="hidden" value="666" name="userid">
<input name="name" type="text" value="张三" readonly>
<input type="submit " disabled value="保存" >
1-7-8【表单元素的标注】
<label for="id">标注的文本</label>
<input type="radio" name="gender" id="male"/
1-7-9在客户端就对表单进行验证的好处：
表单初级验证：placeholder,required,pattern
（1）减轻服务器的压力。
（2）保证数据的可行性和安全性
1-7-10【提示placeholder/必填required/正则验证pattern】
可以描述文本框期待用户输入何种内容；提示语默认显示，当文本框中输入内容时提示语消失；适合于input标签：text、search、url、email和password等类型
<input type="search" name="sousuo" placeholder="请输入要搜索的关键字"/>
规定文本框填写内容不能为空，否则不允许用户提交表单；适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型
<input type="text" name="username" required/>
<input type="text" name="tel" required pattern="^1[358]\d{9}" />
昵称：pattern="[-\w\u4E00-\u9FA5]{4,10}"
密码：pattern="[\dA-Za-z]{6,16}"
手机号码：pattern="1[3578]\d{9}"
年龄：pattern="\d|[1-9]\d|1[0-2]\d"
1-7-11【只读，禁用，隐藏域】表单的高级应用
在浏览器中看不到隐藏域，但是在提交表单时可以看到隐藏域的内容被提交至服务器
只读（Readonly）与禁用（Disable）的区别与使用
(1)表面上可看到的区别就是当这两个词都设置为true时，都为禁用状态，当鼠标移上时使用disable的相关控件时鼠标出现禁用样式，并且不可做任何操作【通过js也是获取不到的。例如$("input [name='aaa']").val()是不好用的】，而Readonly还可以获取文本框里的焦点。
disabled属性在将input文本框变成只读不可编辑的同时，还会使【文本框变灰】，但是readonly不会。
（2） Disable比readonly的使用范围比广，适用文本框、文本域、下拉框、button按钮、单选框…….而readonly只适用于[input（text、password、textarea）。]
.disabled属性对input文本框，单选radio,多选checkbox都适用，但是【readonly就不适用，用它修饰后的单选以及多选按钮仍然是可以编辑状态的】。
（3） Disable设置为true之后是[不可以向后台提交数据的]，此时可以选择改用readonly进行禁用，或者在提交数据时取消禁用。
1-7-12【labelforid】表单的标注
可以增强鼠标的可用性自动将焦点转移到与该标注相关的表单元素上【for属性对应的id与表单元素id一致】
<label for="male">标注的文本</label>
<input type="raido" name="gender"id="male"/>
1-8页面布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面布局</title>
</head>
<body>
<div>
<header>头部</header>
<main>
<nav class="nav">导航</nav>
<div class="container">
<aside>侧边栏</aside>
<article>正文</article>
</div>
</main>
<<footer>底部</footer>
</div>
</body>
</html>
| header | 标题头部区域的内容（用于页面或页面中的一块区域）【网页头部】 |
|---|---|
| footer | 标记脚部区域的内容（用于整个页面或页面的一块区域）【网页底部】 |
| section | Web页面中的一块独立区域【网页主体部分】 |
| article | 独立的文章内容 |
| aside | 相关内容或应用（常用于侧边栏） |
| nav | 导航类辅助内容 |
内联框架
<iframe>内联框架
<iframe name="mainFrame" src="subframe/the_second.html" />【在被打开的框架上加name属性】
下边显示第二页【在超链接上设置target目标窗口属性为希望显示的框架窗口名】
2.css Cascading Style Sheet 级联样式表
表现HTML或XHTML文件样式的计算机语言
包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
发展史
CSS1.0 1996 读者可以从其他地方去使用自己喜欢的设计样式去继承性地使用样式；
CSS2.0 1998.05 融入了DIV+CSS的概念，提出了HTML结构与CSS样式表的分离
CSS2.1 2004融入了更多高级的用法，如浮动，定位等。
CSS3.0 2010它包括了CSS2.1下的所有功能，是目前最新的版本，它向着【模块化】的趋势发展，又加了很多使用的新技术，如字体、多背景、圆角、阴影、动画等高级属性，但是它需要高级浏览器的支持
优势
内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录
2.1CSS的基本语法结构，
由选择器和声明构成；声明必须在{ }中；每条声明后的分号【;】都要写上,(CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上)
CSS样式引入style标签的应用:style标签在HTML文档中的位置，在与之间;讲解style标签，说明type=“text/css的用法;
<style type="text/css">
h1 {
font-size:12px;
color:#F00;
}
</style>
2.2样式【行内>内部>外部样式表】
1.行内样式使用【style属性引入CSS样式】style属性在【标签】中引入CSS样式的用法；仅对【当前的HTML标签】起作为，并且是写在HTML标签中的；这种方式不能起到内容与表现相分离，本质上没有体现出CSS的优势，因此【不推荐使用】。
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
2.内部样式表【CSS代码写在<head>的<style>标签中】优点方便在同页面中修改样式；缺点不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
<style>
h1{color: green; }
</style>
3外部样式表CSS代码保存在扩展名为.css的样式表中
外部样式表外部文件：
1>在css文件夹下建立一个1.css或者index.css;
2>1.css里面内容把内部样式拷贝进去，然后用ctrl+k格式化；
3>在html中的头部导入link标签【<link href="1.css" rel="stylesheet" type="text/css" />】
HTML文件引用扩展名为.css的样式表，有两种方式3-1链接式3-2导入式
3---1链接外部样式表【文件路径；使用外部样式表；文件类型】，广泛使用
<head>
……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>
<head>
……
3---2导入外部样式表
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>
链接式与导入式的区别
<link/>标签属于XHTML，@import是属于CSS2.1
使用<link/>链接的【CSS文件先加载到网页当中】，再进行编译显示
使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
@import是属于【CSS2.1】特有的，对不兼容CSS2.1的浏览器是无效的
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/taobao.css"/>
</head>
<body>
<div>
<h1>欢迎光临淘宝网站</h1>
<div class="img">
<img src="img/01.png"><br />
<label>￥7960<span>￥9960 </span>
<sapn>包邮</sapn>
</label><br />
<p><a href="#">淘宝独立app,淘宝客云发单系统代理返利多开</a></p>
</div>
<div class="img">
<img src="img/02.png"><br />
<label>￥3<span>￥5 </span>
<sapn>包邮</sapn>
</label><br />
<p><a href="#">专业奖章，金银牌定制，纪念章定制</a></p>
</div>
<div class="img">
<img src="img/03.png"><br />
<label>￥8<span
">￥10 </span>
<sapn >包邮</sapn>
</label><br />
<p><a href="
#" class="d">宝贝热销，设计师图纸盖章消防资质</a></p>
</div>
<div class="img">
<img src="img/04.png"><br />
<label>￥960<span>￥1000 </span>
<sapn>包邮</sapn>
</label><br />
<p><a href="#" class="d">淘宝c店运营托管，天猫店附诊</a></p>
</div>
</div>
</body>
</html>
*****************************************************************
.img{
/* 类选择器 */
/*整个div 浮动向左 */
float: left;
/* display:inline-block;此时不用清除浮动 */
padding: 5px;
width: 300px;
height: 400px;
border: 1px solid red;
/* 内容水平居中 */
text-align: center;
background: #FFFF00;
}
.img a:link{
text-decoration: none;
font: black 18px;
}
.img a:hover{
text-decoration: underline;
font: green 24px;
}
.img img{
width:290px;
height: 320px;
}
.body{
color: #000000;
}
2.3选择器
2-3-1三大基本选择器
标签选择器【直接应用】于HTML标签
类【.】选择器可在页面中【多次】使用
好处，可以多个标签归类，是同一个 class，可以复用
ID【#】好处，可以多个标签归类，是同一个 class，可以复用器在同一个页面中【只能】使用一次；多个id【逗号隔开】#1,2,3,4{ 声明：值；}
基本选择器的优先级:ID选择器>类选择器>标签选择器
标签选择器不遵循“就近原则”。不遵循，无论是哪种方式引入CSS样式，一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级
2-3-2三大高级选择器
层次选择器
| E F | 后代选择器 | 后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入 | 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内 |
|---|---|---|---|
| E>F | 子选择器 | 选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素 | |
| E+F | 相邻兄弟选择器 | 【只有一个，相邻（向下】 | 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面 |
| E~F | 通用兄弟选择器 | 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 |
结构伪类选择器
| E:first-child | 作为父元素的第一个子元素的元素****E |
|---|---|
| E:last-child | 作为父元素的最后一个子元素的元素****E |
| E F:nth-child(n) | **选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、**odd |
| E:first-of-type | 选择父元素内具有指定类型的第一个E元素 |
| E:last-of-type | 选择父元素内具有指定类型的最后一个E元素 |
| E F:nth-of-type(n**)** | 选择父元素内具有指定类型的第n个F元素 |
使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点
E F:nth-child(n)在父级里从一个【元素位置】开始查找，不分类型
E F:nth-of-type(n)在父级里先看【类型】，再看位置odd奇数，even偶数
属性选择器
*= 包含这个元素 ^= 以这个开头 $= 以这个结尾
| E[attr] | 选择匹配具有属性attr的E元素 |
|---|---|
| E[attr=val] | 选择匹配具有属性attr的E元素**,并且属性值为val****（其中val区分大小写）** |
| E[attr^=val] | 选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串 |
| E[attr$=val] | 选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串 |
| E[attr=val]* | 选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配 |
2-4-1span标签
标签 的作用能让某几个文字或者某个词语凸显出来
<p>KGC<span id="dream">每时每课给你新机会</span></p>
<p class="bird">选择<span>KGC</span>，成就你的梦想</p>
2-4-2字体标签
| font-family | 设置字体类型 | font-family:“隶书”; |
|---|---|---|
| font-size | 设置字体大小 | font-size:12px; |
| font-style | 设置字体风格 | font-style:italic; |
| font-weight | 设置字体的粗细 | font-weight:bold; |
| font | 在一个声明中设置所有字体属性 | font:italic bold 36px “宋体”; |
body{font-family: Times,"Times New Roman", "楷体";}
h1{font-size:24px; font-style:italic;}
h1 span{font-style:oblique; font-weight:normal;}
h2{font-size:16px; font-style:normal;}
p{font-size:12px;}
p span{font-weight:bold;}
p span{font:oblique bold 12px "楷体";}
2-4–2-1 字体大小
px(pixels)
像素 (px) 是一种绝对单位，因为无论其他相关的设置怎么变化，像素指定的值是不会变化的。
px就是设备或者图片最小的一个点，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。
(有一种特殊情况，修改屏幕分辨率，px也会随之改变)
em
em与当前元素的字体大小相同（更具体地说，一个大写字母M的宽度）。参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px）。
em是Web开发中最常用的相对单位。
rem
rem与em非常相似，它总是等于默认基础字体大小的尺寸；是相对于根元素html的，继承的字体大小将不起作用。所以，只需要通过设置根元素字体的大小，就可以调节整个页面的比例。【root em】
vm vh
vm：view width的简写，是指可视窗口的宽度的1/100。
vh：view height的简写，是指可视窗口的高度的1/100。
百分比%
pc:12点
pt:1/72英寸，1 磅
为子元素添加百分比后，子元素根据父元素的宽高取值，父元素宽高变化，子元素宽高也随之变化。
2-4–2-2字体风格【normal、italic和oblique】
【并不是】所有字体都做了有粗体、斜体、下划线、删除线等诸多属性，【一些不常用的字体，或许就只有个正常体】如果你用Italic，就没有效果了~这时候你就要用【Oblique】；Italic是使用文字的斜体，Oblique是让没有斜体属性的文字倾斜！
【italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果】
2-4-2-3font-weight属性
mormal【正常属性,400】bold【700】border/lighter【更粗/更细】取值范围【100-900】
font属性
字体属性的顺序：字体风格→字体粗细→字体大小→字体类型
p span{font:oblique bold 12px “楷体”;}
复合属性时，中间不加分号【比如font:】
2-4-3文本样式【首行缩进和文本两端对齐justify】
| color | 设置文本颜色 | color:#00C; |
|---|---|---|
| text-align | 设置元素水平对齐方式 | text-align:right; |
| text-indent | 设置【首行文本的缩进】 | text-indent:20px; |
| line-height | 设置文本的行高 | line-height:25px; |
| text-decoration | 设置文本的装饰 | text-decoration:underline; |
垂直对齐方式：vertical-align属性：middle、top、bottom
水平对齐方式：text-align属性:left/right/center/justify
2-4-3-2文本阴影
text-shadow : color x-offset y-offset blur-radius;
阴影颜色/X轴位移，用来指定阴影水平位移量/Y轴位移，用来指定阴影垂直位移量/阴影模糊半径，代表阴影向外模糊的模糊范围
2-4-4RGBA
color属性
RGB:【十六进制】方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后【两位】表示蓝色分量rgb(r,g,b) : 正整数的取值为0～255
RGBA:在RGB基础上增加了控制alpha【透明度】的参数，其中这个透明通道值为【0～1】
2-4-5排版文本段落【必须是块状元素；例如div,p不可以是span】
水平对齐方式text-align属性；
垂直对齐方式vertical-align属性：【middle】、top、bottom
首行缩进【text-indent：em】或px
行高line-height：px
| left | 把文本排列到左边。默认值：由浏览器决定 |
|---|---|
| right | 把文本排列到右边 |
| center | 把文本排列到中间 |
| justify | 实现两端对齐文本效果 |
2-4-5-2文本装饰text-decoration属性【去除超链接下划线】
| none | 默认值，定义的标准文本【去除超链接下划线】 |
|---|---|
| underline | 设置文本的下划线 |
| overline | 设置文本的上划线 |
| line-through | 设置文本的删除线 |
2-4-5-3超链接伪类【标签名:伪类名{声明;}】
| a:link【未访问时默认尽量无修饰】 | 未单击访问时超链接样式 | a:link{color:#9ef5f9;} |
|---|---|---|
| a:visited | 单击访问后超链接样式 | a:visited {color:#333;} |
| a:hover【悬浮时可选择下划线】 | 鼠标悬浮其上的超链接样式 | a:hover{color:#ff7300;} |
| a:active | 鼠标单击未释放的超链接样式 | a:active {color:#999;} |
实际网页开发中通常只设置两种状态，一是a{color:#333;}，一是a:hover { color:#B46210;}
设置伪类的顺序：a:link->a:visited->a:hover->a:active
a:hover {
color:#B46210;
text-decoration:underline;
}
2-4-5-4列表样式
list-style-type
| none | 无标记符号 | list-style-type:none; |
|---|---|---|
| disc | 实心圆，默认类型 | list-style-type:disc; |
| circle | 空心圆 | list-style-type:circle; |
| square | 实心正方形 | list-style-type:square; |
| decimal | 数字 | **list-style-**type:decimal |
list-style-image
list-style-position:
list-style-position不能准确地定位图像标记的位置，通常，网页中图标的位置都是非常精确的。在实际的网页制作中，通常使用list-style或list-style-type设置项目【无标记符号】，然后通过【背景图像】的方式把设计的图标设置成列表项标记。在网页制作中，list-style和list-style-type两个属性是大家经常用到的
list-style【list-style:none 去除列表前面的小黑点】
i {
list-style:none;
}
2-4-5-5网页背景【background-size 是单独的属性，不包括在background范围内[背景色，图，定位，重复类型]】
使用CSS设置背景图像时，通常会同时设置背景图像（ background-repeat ) 和（ background-position ）属性
使用font属性设置字体类型、风格、大小、粗细时的顺序是什么？字体风格→粗细→大小→类型
使用（ list-style-type ）或（ list-style ）属性设置列表项目符号
2-4-5-5-1background-size中
100%和cover都是用于将图片扩大或者缩放来适应整个容器
background-size：100% 100%;—按容器比例撑满，图片变形；
background-size：cover;—把【背景图片】放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会【裁掉】。
| auto | 默认值，使用背景图片保持原样 |
|---|---|
| percentage | 当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于【元素宽度】来计算的 |
| cover | 整个背景图片[放大]填充了整个元素 |
| contain | 让背景图片[保持本身]的宽高比例，将背景图片[缩放]到宽度或者高度正好适应所定义背景的区域 |
2-4-5-5-2 background-repeat属性
repeat：沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺
2-4-5-5-3background-image属性
background-image:url;
2-4-5-5-4background-position属性
| Xpos Ypos | 单位：px，Xpos表示水平位置，Ypos表示垂直位置 |
|---|---|
| X% Y% | 使用百分比表示背景的位置 |
| X**、Y方向关键词** | **水平方向的关键词：left、center、right垂直方向的关键词：top、center、**bottom |
| background-color | 背景颜色 | .title{background-color:#C00;****} |
|---|---|---|
| background-image | 背景图像 | .title{background-image:url(…/image/arrow-down.gif);****} |
| background-position | 背景定位 | .title{background-position:205px 10px;****} |
| background-repeat | 背景重复方式 | .title{background-repeat:no-repeat;****} |
| background | 背景属性 | .title{background:#C00 url**(…/image/arrow-down.gif) 205px 10px no-repeat;}** |
.title {
font-size:18px;
font-weight:bold;
color:#FFF;
text-indent:1em;
line-height:35px;
/*background-color:#C00;*/
/*background-image:url(../image/arrow-down.gif);
background-repeat:no-repeat;
background-position:205px 10px;*/
background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;
}
2-5盒子模型
盒模型本质上是一个盒子，封装周围的HTML元素包括：外边距【margin】，边框【border】，填充【padding】，和实际内容【content】
盒子模型总尺寸=border+padding+margin+内容宽度
box-sizing：content-box | border-box | inherit;【默认值，盒子的总尺度/盒子的宽度或高度等于元素内容的宽度或高度/元素继承父元素的盒子模型模式】
Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。
它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间
在不同方向排列元素 重新排列元素的显示顺序 更改元素的对齐方式 动态地将元素装入容器
1.content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
- border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的[]border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高
建议将所有的元素的box-sizing都设为border-box
2-5-1边框
2-5-1-1边框颜色: border-color
| border-top-color | 上边框颜色 | border-top-color:#369; |
|---|---|---|
| border-right-color | 右边框颜色 | border-right-color:#369; |
| border-bottom-color | 下边框颜色 | border-bottom-color:#fae45b; |
| border-left-color | 左边框颜色 | border-left-color:#efcd56; |
| **** | 四个边框为同一颜色 | border-color:#eeff34; |
| 上、下边框颜色**：#369左、右边框颜色****：****#000** | border-color:#369 #000; | |
| 上边框颜色**：#369左、右边框颜色****：#000下边框颜色****：****#f00** | border-color:#369 #000 #f00; | |
| border-color 同时设置4个边框颜色时，顺序为【上右下左】 | 上、右、下、左边框颜色**：#369、#000、#f00、****#00f** | border-color:#369 #000 #f00 #00f; |
2-5-1-2边框粗细: border-width
border-width thin/medium/thick/像素值
2-5-1-3边框样式: border-style
border-style none/hidden/dotted/dashed/solid/double
2-5–1-4border: 边框粗细 边框样式 边框颜色
border-top-width:5px;
border-right-width:10px;
border-bottom-width:8px;
border-left-width:22px;
border-width:5px ;
border-width:20px 2px;
border-width:5px 1px 6px;
border-width:1px 3px 5px 2px;
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
border-style:solid ;
border-style:solid dotted;
border-style:solid dotted dashed;
border-style:solid dotted dashed double;
border:3px solid black;【姓名】
border: 1px dashed red;【邮箱】虚线
border: 2px dotted red;【电话】
2-5-1-5圆角边框
四个属性值按顺时针排列【上/右/下/左sha】border-radius: 20px 10px 50px 30px;
利用border-radius属性制作圆形的两个要点
.元素的宽度和高度必须相同;.圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%
div{
width: 100px;
height: 100px;
border: 4px solid red;
border-radius: 50%;
}
半圆形的两个要点
制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值
制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值
扇形遵循“三同，一不同”原则
“三同”是元素宽度、高度、圆角半径相同;“一不同”是圆角取值位置不同
圆角边框一般2px,或者5px,自定义左内边距时圆角等于内边距大小；
2-5-2外边距【上，左右，下 vs 上，右，下，左】与内边距
margin网页中标签，例如
…
、
、、
-
、
- 、
- 、
-
、
、
- 、等都有margin，实际网页制作时通常通一使用并集选择器设置这些可能产生外边框的标签的margin为0
网页居中对齐【margin:0px auto；】
网页居中对齐的必要条件：块元素；固定宽度
margin-top/margin-left/ margin-right/margin-bottom/margin
padding-top/padding-left /padding-right/padding-bottom/padding
margin-top: 1px
margin-right : 2px
margin-bottom : 2px
margin-left : 1px
margin :3px 5px 7px 4px;
margin :3px 5px;
margin :3px 5px 7px;
padding-left:10px;
padding-right: 5px;
padding-top: 20px;
padding-bottom:8px;
padding:20px 5px 8px 10px ;
padding:10px 5px;
padding:30px 8px 10px ;
padding:10px;
2-5-3常见的网页布局
上下结构
上中下结构
上左右下结构：1-2-1结构
上左中右下结构：1-3-1结构
网页基本有3大部分，网站导航、网站主体内容、网站版权部分；
2-6标准文档流和display
**标准文档流：**指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式
块级元素与行级元素的转变（block、inline）
控制块元素排到一行（inline-block）
控制元素的显示和隐藏（none）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dxlw2fJx-1604328838616)(HTML/image-20201102204500270.png)]
2-6浮动【行内样式或者用浮动完成】
定义：如果在同级，并且宽度足够的情况等下，后边的元素会默认占用浮动元素的剩余空间，如果后续元素想单独一行就需要清除浮动。可以clear：left、right、both(两侧都没浮动元素)；清除浮动独占一行，是让自己的这个方向不出现浮动元素
边框塌陷
定义：如果快没有设置高度，并且块内部的所有元素全部浮动了，则块相当于0高，设置背景色、边框等都不会显示
2-6-1.设置浮动【行内标签普通右浮动】
style=“display: inline-block;background-color: aliceblue;”
<style type="text/css" rel="stylesheet">
.s{
float:right;
/*或者：display:inline-block;此种情况下不用清除浮动*/
}
</style>
外部样式放在表头或表头与表身体范围之内；然后在表身内添加选择器
2-6-2左右浮动
| left | 元素向左浮动 |
|---|---|
| right | 元素向右浮动 |
| none | 默认值**，元素不浮动【标准文档流自上而下，没有浮动】** |
.layer01 {
border:1px #F00 dashed;
float:left;
}
.layer02 {
border:1px #00F dashed;
float:left;
}
.layer03 {
border:1px #060 dashed;
float:left;
}
依次设置layer01和layer02右浮动
.layer01 {
border:1px #F00 dashed;
float:right;
}
.layer02 {
border:1px #00F dashed;
float:right;
}
layer04设置宽度和右浮动后，为什么边框塌陷了？怎么解决？
浮动元素脱离标准文档流
清除浮动
2-6-3清除浮动
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8iWIZe69-1604328838618)(HTML/image-20201027162035734.png)]
| left | 在左侧不允许浮动元素 |
|---|---|
| right | 在右侧不允许浮动元素 |
| both | 在左、右两侧不允许浮动元素 |
| none | 默认值。允许浮动元素出现在两侧 |
1.在html中，新建一个空div.
2.在空div的id选中器中，写以下代码
#div {
clear:both;
}
清除左右浮动（左浮动/右浮动）
.lay04{
border:1px #666 dashed;
font-size:12px;
line-height:23px;
width: 200px;
float: right;
clear:both;（left/right）
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aIFaEJoX-1604328838621)(HTML/image-20201102205050327.png)]
一、设置父元素高度。height：0px；
二、在父元素最后加入一个空的子元素，如：
三、设置父元素样式，值为隐藏【常用】。如：id=overflow：hidden；溢出隐藏
四、使用伪类样式【官方推荐】。blank:after{内容为空，显示为块，清除左浮动}，【推荐】
2-7定位
| static | 默认值，没有定位 |
|---|---|
| relative | 相对定位【最近的父类元素】 |
| absolute | 绝对定位【整个body】 |
| fixed | 固定定位【浏览器】 |
固定定位：
类似绝对定位，不过区别在于定位的基准不是祖先元素，而是【浏览器窗口】
固定定位的特性
相对浏览器窗口来定位
偏移量不会随滚动条的移动而移动
固定定位的使用场景
一般在网页中被用在【窗口左右两边的固定广告、返回顶部图标、吸顶导航栏】等
绝对定位的特性
绝对定位是相对于它的定位父级的位置来定位，如果没有设置定位父级，则相对浏览器窗口来
定位
元素位置发生偏移后，原来的位置不会被保留
层级提高，可以把标准文档流中的元素及浮动元素盖在下边
设置绝对定位的元素脱离文档流
绝对定位的使用场景
一般情况下，绝对定位用在【下拉菜单、焦点图轮播、弹出数字气泡、特别花边】等场景
相对定位的特性
相对于自己的初始位置来定位
元素位置发生偏移后，它原来的位置会被保留下来
层级提高，可以把标准文档流中的元素及浮动元素盖在下边
相对定位的使用场景
相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fCNmtU8K-1604328838623)(HTML/image-20201102212753606.png)]
relative
相对自身原来位置进行偏移；偏移设置：top、left、right、bottom
相对定位的特性
相对于自己的初始位置来定位
元素位置发生偏移后，它原来的位置会被保留下来
层级提高，可以把标准文档流中的元素及浮动元素盖在下边
相对定位的使用场景
【相对定位一般情况下很少自己单独使用】，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w1aFg3N3-1604328838624)(HTML/image-20201102212124912.png)]
相对定位：
#third {
background-color:#C5DECC;
border:1px #395E4F dashed;
position:relative;
right:20px;
bottom:30px;
}
浮动元素设置相对定位
先设置第二个盒子浮动，再设置两个盒子相对定位偏移
#first {
background-color:#FC9;
border:1px #B55A00 dashed;
position:relative;
right:20px;
bottom:20px;}
#second {
background-color:#CCF;
border:1px #0000A8 dashed;
float:right;
position:relative;
left:20px;
top:-20px;}
绝对定位
absolute属性值：偏移设置： left、right、top、bottom
设置了绝对定位但没有设置偏移量的元素将保持在原来的位置
在网页制作中可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况
绝对定位的特性
绝对定位是相对于它的定位父级的位置来定位，如果没有设置定位父级，则相对【浏览器窗口】来定位
元素位置发生偏移后，原来的位置【不会被保留】
层级提高，可以把标准文档流中的元素及浮动元素盖在下边
设置绝对定位的元素脱离文档流
绝对定位的使用场景
一般情况下，绝对定位用在【下拉菜单、焦点图轮播、弹出数字气泡、特别花边】等场景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.content {
width: 100%;
background-color: gray;
}
.nav {
width: 1000px;
height: 900px;
position: relative;
background: white;
margin: 0 auto;
/* 一个大div 进行相对定位；一个小div用绝对定位，
都用绝对定位absolution 比如左上 left:0;top:0; 右上right：0，top：0;左下：left：0；bottom：0；右下right：0；bottom:0; */
}
* {
margin: 0;
padding: 0;
}
ul,
ol {
list-style-type: none;
}
.a {
text-decoration: none;
color: black;
}
.content .nav div {
height: 300px;
width: 300px;
background-color: aqua;
font: 18px bolder;
}
.left {}
.middle {
position: absolute;
top: 0px;
left: 350px;
}
.right {
position: absolute;
top: 0px;
right: 0;
}
.content .nav .center {
position: absolute;
left: 450px;
top: 400px;
width: 100px;
height: 100px;
background-color: #000000;
}
.content .nav .left ul {
position: relative;
}
.content .nav .left ul .li1 {
position: absolute;
top: 141px;
left: 10px;
}
.content .nav .left ul .li2 {
position: absolute;
top: 141px;
left: 70px;
}
.content .nav .left .li3 {
position: absolute;
top: 141px;
left: 130px;
}
.content .nav .left .li4 {
position: absolute;
top: 141px;
left: 190px;
}
.content .nav .left .li5 {
position: absolute;
top: 141px;
left: 260px;
}
/* 绝对定位不用设置行高，只设置距离左边上边和绝对定位即可；
后代选择器的空格间隔千万要记得*/
</style>
</head>
<body>
<div class="content">
<div class="nav">
<div class="left">
<ul>
<li class="li1"><a href="#">A</a></li>
<li class="li2"><a href="#">B</a></li>
<li class="li3"><a href="#">C</a></li>
<li class="li4"><a href="#">D</a></li>
<li class="li5"><a href="#">E</a></li>
</ul>
</div>
<div class="middle">
</div>
<div class="right"></div>
<div class="center"></div>
</div>
</div>
</body>
</html>
#second {
background-color:#003580;
border:1px #0000A8 dashed;
position:absolute;
/* top: 0; */
right: 0;
/*top: 30px;*/
/* right:30px; */
}
#second {
background-color:#CCF;
border:1px #0000A8 dashed;
position:absolute;
right:30px;
}
*****************************************8
固定定位
fixed属性值
偏移设置： left、right、top、bottom
类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口
固定定位的特性
相对浏览器窗口来定位
偏移量不会随滚动条的移动而移动
固定定位的使用场景
一般在网页中被用在【窗口左右两边的固定广告、返回顶部图标、吸顶导航栏】等
div:nth-of-type(1) { /*第一个div设置绝对定位*/
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2) { /*第二个div设置固定定位*/
width: 50px;
height: 50px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
2-8**、z-index属性**
调整元素定位时重叠层的上下位置
z-index属性值：整数，默认值为0
设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系
z-index值大的层位于其值小的层上方
标题背景颜色为线性渐变，文字垂直居中
线性渐变
颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
inear-gradient ( position, color1, color2,…
径向渐变
圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合
2-9弹性内容对齐
justify-content: 【flex-start】|flex-end|center|space-between|space-around|【水平方向】
align-content: 【stretch拉伸】|center|flex-start|flex-end|space-between|space-around【垂直方向】
align-items: 【stretch】|center|flex-start|flex-end|baseline|【垂直方向】
align-self: 【auto正居中】|stretch|center正居中|flex-start|flex-end|baseline|【中间单行】
{//对象在水平方向上
display: flex;
justify-content:initial;
}
div
{//对象在竖直方向上
display: flex;
flex-flow: row wrap;//行折叠
align-content:space-around;
}
div
{//在竖直方向上移动，项目个别高度不一致。比如ab两行字，c三行字
display: flex;
align-items:center;
}
div#myBlueDiv
{
align-self:center;//只调节中间的图形在数值方向的移动，本身对象是一横行
}
| flex-start | 【默认值initial】。项目位于容器的开头。 | 测试 » |
|---|---|---|
| flex-end | 项目位于容器的结尾。 | 测试 » |
| center | 项目位于容器的中心。 | 测试 » |
| space-between | 项目位于各行之间留有空白的容器内。 | 测试 » |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 |
| stretch | 【默认值】。元素被拉伸以适应容器。 各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于’flex-start’。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。 | 测试 » |
|---|---|---|
| center | 元素位于容器的中心。 各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。） | 测试 » |
| flex-start | 元素位于容器的开头。 各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。 | 测试 » |
| flex-end | 元素位于容器的结尾。 各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。 | 测试 » |
| space-between | 元素位于各行之间留有空白的容器内。 各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’flex-start’。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。 | 测试 » |
| space-around | 元素位于各行之前、之间、之后都留有空白的容器内。 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’center’。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。 |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dluG1awT-1604328838626)(HTML/1287814-20190227105554256-71254015.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lzcOHPaF-1604328838627)(HTML/image-20201029152849909.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bHn1ZXHE-1604328838627)(HTML/1287814-20190227135037726-1170549985.png)]
flex-grow属性定义项目的放大比例，【默认为0】，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item {
flex-shrink: <number>; /* default 1 */
}
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
对该属性无效
2-10css变形/过渡/动画
CSS3变形是一些效果的集合。CSS3变形是一些效果的集合每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化
transform:translate(,);【两个参数】
transform:translateX(,0);【例如50px,0】Y轴的坐标不用移动
transform:translateY(0,);X轴的坐标不用移动
缩放扩大：scale()函数能够用来缩放元素大小，该函数包含两个参数值，分别用来定义宽度和高度的缩放比例，默认值为1，0～0.99的任意值都可以使元素缩小，而任何大于1的值都能让元素放大。
【默认等比例缩放，也可以单独设置X/Y轴缩放】
translate()：平移函数，基于X、Y坐标重新定位元素的位置【20px,50px】
scale()：缩放函数，可以使任意元素对象尺寸发生变化
rotate()：旋转函数，取值是一个度数值
skew()：倾斜函数，取值是一个度数值
rotate( )函数只是旋转，而不会改变元素的形状
skew( )函数是倾斜，元素不会旋转，会改变元素的形状
3。网站前端页面开发流程
首页/搜索列表页/商品详情页/登录页/注册页
网页制作步骤开发思路
制作网站公用部分（public.html网站导航和版权部分）【是页面制作过程中的过程页面，因此在实际完成的网页中不显示这个过程页面】 （网站导航 网站版权）
制作1号店首页（index.html）（全部商品分类 轮播图 快讯 热门产品 进口生鲜 ）
制作搜索列表页（searchList.html）（全部品牌 浏览历史 商品列表）
制作商品详情页（ detail.html ）（全部商品分类。用户还喜欢 推荐搭配 商品属性）
制作登录页（ loginpage.html）
制作注册页（ registerpage.html）
整体布局
空格对齐
用空格对齐，一个汉字空格 或者三个【牛皮山炮】一个汉字长度
页面整体为上中下布局
部分页面中间又分为左右布局
使用DIV来布局网页结构，整体页面布局使用标准文档流布局，局部布局使用浮动定位
【section/aside】使用无序列表布局网页的局部结构：常用于导航菜单或左侧商品列表，右侧新闻列表
【footer】使用定义列表进行局部布局：常用于二级菜单列表、图文混排、标题与解释性内容相混排的情况【联系我们，招聘等，会员中心】
语义化表单；制作表单并验证 登录、注册页面
<form action="#">
<div class="tableItem">
<span class="userPhone">手机号</span>
<input type="text" required placeholder="手机号"/>
</div>
<div class="cf">
<div class="tableItem onlyItem fl">
<span class="userPhone">手机号</span>
<input class="" type="text" required placeholder="手机号"/>
</div>
<a class="tableText fr" href="#">获取验证码</a>
</div>
<div class="tableItem">
<span class="setPass">设置密码</span>
<input type="password" required placeholder="密码"/>
</div>
页面居中显示使用margin属性设置网页在浏览器中居中显示
#wrap {
width:982px;
margin:0 auto;
}
清除浮动防止父元素边框塌陷使用CSS来设置外层
去除浮动产生的影响
.clear:after{
content: '';
display: block;
clear: both;
}
使用无序列表制作顶部导航和主导航菜单
使用过渡给“天天低价”列表项添加动画
<div class="b_btm_bg b_btm_c">
<ul class="b_btm">
<li>
<a><img src="images/b1.png" width="62"
height="62"/></a>
<div><h2>正品保障</h2>正品行货 放心购买</div>
</li>
…
.b_btm li img{ transition: all 3s;}
.b_btm li img:hover{ transform: rotate(360deg) scale(1.2); }
网站首页
网页主体内容最上方是一个商品列表[20分钟]、焦点轮播图[15分钟]、快讯列表[20分钟]等组成的三栏布局，使用浮动让它们排列在一行
使用<div>和无序列表排版热门商品模块，使用float属性、定位属性、字体属性、文本属性等美化、定义热门商品内容[20分钟]
横条“满199减100”广告使用图片布局
“进口•生鲜”模块使用<div>和无序列表布局，里面的图片鼠标移入时设置放大动画
搜索列表页使用表格布局商品的“品牌”、“价格”、“珍珠颜色”、“珍珠分类”列表[30分钟]
“浏览历史”模块和“默认商品列表”是一个两列布局，使用浮动使之排列在一行[20分钟]
“默认商品列表”使用无序列表布局，鼠标移到每个列表项上出现阴影边框，鼠标移动到“收藏”按钮或“加入购物”按钮上切换各自背景图片[30分钟]
商品详情页面最上方是广告图片banner和目前所在的位置、商品标题[30分钟]
商品描述部分是三列，最左侧是一列是要购买的商品大图，中间是商品名称、价格和尺码、颜色和在线购买功能，右侧是商品广告
页面左侧分为 “用户还喜欢”，这部分用图片和标题混合排版展示[15分钟]
页面右侧是推荐搭配[15分钟]、商品属性[15分钟]、商品详情[20分钟]、商品评论[20分钟]、分页信息五部分，其中商品详情、商品评论两部分使用锚点链接，单击就能跳转到对应的版块
登录页面内容比较单一，页面分为上中下结构，头部和底部与首页的头部、底部不一样，所以得重新布局
中间的主体区域分为两部分，左边是一张图片，右边是表单内容，使用浮动使之排在一行
表单输入内容需要做初步验证才能提交给服务器
“更多合作网站账号登录”部分使用结构伪类选择器里面的元素并添加背景图
使用语义的表单元素布局注册页面
在文本框内输入信息时，默认的提示文字消失
初步验证表单信息
3-1注册【】注册时手机号，邮箱姓名需要pattern正则表达式二次验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>1028注册页面</title>
<link rel="stylesheet" type="text/css" href="css/regist001.css" />
</head>
<body class="regist_center" align="center">
<div>
<h1>登录</h1>
<form action="#" method="post">
用户名：<input type="text" class="nickName" placeholder="请输入用户名" maxlength="30" required><br />
密 码：<input type="text" class="password" name="password" id="password" placeholder="请输入6-16位的密码"
pattern="[\d a-z A-Z ]{6,16}" required><br />
<!-- 使用pattern就不用maxlength了。最大长度 密码和手机号必须正则表达，昵称选择性二次验证-->
姓 名：<input type="text" class="userName" name="userName" id="userName" placeholder="请输入姓名"><br />
性 别:
<input type="radio" class="gender" name="gender" id="gender1" value="1" checked>
<!-- 单选框相同名字互斥，默认选中checked,下拉框默认选中selected,value值和数据库内容保持一致，尽量用数字 -->
<input type="radio" class="gender" name="gender" id="gender2" value="2"><br>
地 区: <select name="province" class="province">
<option value="0" selected>请选择省份</option>
<option value="1">北京市</option>
<option value="2">广东省</option>
<option value="3">广西省</option>
<option value="4">海南省</option>
<option value="5">黑龙江省</option>
<option value="6">西藏</option>
</select><br />
<!-- 昵称：pattern="[-\w\u4E00-\u9FA5]{4,10}"
密码：pattern="[\dA-Za-z]{6,16}"【小写数字，大小写字母在内随机取个数】
手机号码：pattern="1[3578]\d{9}"
年龄：pattern="\d|[1-9]\d|1[0-2]\d" -->
手机号: <input type="tel" class="tel" name="tel" id="tel" placeholder="请输入手机号" pattern="\d[3578]{9}"
required><br />
邮 箱: <input type="email" class="email" name="email" id="email" placeholder="请输入邮箱"><br />
<input type="submit" class="submit" name="submit" id="submit">
<input type="reset" class="reset" name="reset" id="reset"><br />
</form>
<p>已有账号？<a href="login001.html">直接登录</a></p>
</div>
</body>
</html>
**************************************************************************3-1-1
.nickName,.password,.userName,.province,.tel,.email{
height: 35px;
width: 400px;
border: 1px solid darkgray;
margin-bottom: 15px;
/* 多个单元格设置宽度，高度【扩展单元格大小】和外边距【防止单元格太近影响美观】 */
}
.submit,.reset{
height: 35px;
width: 70px;
background: greenyellow;
border: 0;
/* 有背景色一般去除边框 */
/* 给提交重置按钮设置背景色，并去除边框，更改单元格大小 */
}
.reset{
background: red;
color: white;
/* 重置按钮更改背景色和字体颜色 */
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
/* 默认设置内外边距都为0 */
}
.regist_center {
background: url("../img/rg_bgimg.jpg") no-repeat center;
background-size：cover;
/* 灰白的背景图片 */
padding-top: 25px;
/* 在中心区域给背景全部填充到网页中，添加背景图片 */
}
.regist_center p a{
text-decoration: none;
color: red;
font: 18px;
/* 修改立即登录的标签，去除超链接的下划线 */
}
*****************************************************************3-1-2未用表单单元格格式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>1027预习新用户注册</title>
<link rel="stylesheet" type="text/css" href="css/register.css" />
</head>
<body>
<div class="rg_layout">
<!-- 整体布局分为左侧，中间，右侧 -->
<div class="rg_left">
<p>新用户注册</p>
<p>风里雨里，我在这里等你</p>
<!-- 属性应该见名知义，注册的前两个字母 -->
</div>
<div class="rg_center">
<div class="rg_form">
<!--定义表单 form-->
<form action="#" method="post">
<table>
<tr>
<!-- 左侧单元格是名字，右侧单元格是输入框 -->
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
<!-- 把输入框放入单元格中，label for和id对应 -->
</tr>
<tr>
<td class="td_left"><label for="password">密码</label></td>
<td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="td_left"><label for="tel">手机号</label></td>
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
</tr>
<tr>
<td class="td_left"><label>性别</label></td>
<td class="td_right">
<input type="radio" name="gender" value="male" selected> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label></td>
<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
</tr>
<tr>
<td class="td_left"><label for="checkcode">验证码</label></td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
<img id="img_check" src="img/verify_code.jpg">
<!-- 验证码的图片 -->
</td>
</tr>
<tr>
<td align="center"><input type="submit" id="btn_sub" value="注册"></td>
<td align="center"><input type="reset" id="btn_reset" value="取消"></td>
<!-- 占两列，并居中， -->
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有账号?<a href="login.html">立即登录</a></p>
</div>
</div>
</body>
</html>
***************************************************************************3-1-2-1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>1027预习新用户注册</title>
<link rel="stylesheet" type="text/css" href="css/register.css" />
</head>
<body>
<div class="rg_layout">
<!-- 整体布局分为左侧，中间，右侧 -->
<div class="rg_left">
<p>新用户注册</p>
<p>风里雨里，我在这里等你</p>
<!-- 属性应该见名知义，注册的前两个字母 -->
</div>
<div class="rg_center">
<div class="rg_form">
<!--定义表单 form-->
<form action="#" method="post">
<table>
<tr>
<!-- 左侧单元格是名字，右侧单元格是输入框 -->
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
<!-- 把输入框放入单元格中，label for和id对应 -->
</tr>
<tr>
<td class="td_left"><label for="password">密码</label></td>
<td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="td_left"><label for="tel">手机号</label></td>
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
</tr>
<tr>
<td class="td_left"><label>性别</label></td>
<td class="td_right">
<input type="radio" name="gender" value="male" selected> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label></td>
<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
</tr>
<tr>
<td class="td_left"><label for="checkcode">验证码</label></td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
<img id="img_check" src="img/verify_code.jpg">
<!-- 验证码的图片 -->
</td>
</tr>
<tr>
<td align="center"><input type="submit" id="btn_sub" value="注册"></td>
<td align="center"><input type="reset" id="btn_reset" value="取消"></td>
<!-- 占两列，并居中， -->
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有账号?<a href="login.html">立即登录</a></p>
</div>
</div>
</body>
</html>
*****************************************************************3-1-2-2
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
/* 统一去除内外边距 */
}
body {
/* 设置背景图片并覆盖整个页面 */
background: url("../img/rg_bgimg.jpg") no-repeat center;
background-size：contain;
padding-top: 100px;
/* 设置内边距 注册中心div和背景图之间的内边距 */
}
.rg_layout {
width: 900px;
height: 500px;
border: 10px solid lightpink;
/* 白色边框，注册中心div的布局统一格式 */
background-color: lightcyan;
/*让div水平居中*/
margin: auto;
}
.rg_left {
border: 1px solid lightgoldenrodyellow;
float: left;
/* display:inline-block; */
margin: 15px;
}
.rg_left>p:first-child {
/* 后代选择器设置字体大小及颜色 */
color: #FFD026;
font-size: 20px;
}
.rg_left>p:last-child {
/* 后代选择器设置字体大小及颜色 */
color: #A6A6A6;
font-size: 18px;
}
.rg_center {
/* 布局包含浮动格式和边框 */
/* float: left; */
display: inline-block;
/* border: 1px solid red;*/
}
.rg_center {
margin: 20px;
/*只能设置外边距，不能设置内边距，否则影响浮动效果 */
}
.rg_right {
/*border: 1px solid red;*/
float: right;
margin: 25px;
}
.rg_right>p:first-child {
font-size: 15px;
}
.rg_right p a {
/* 超链接去除下划线 */
color: red;
text-decoration: none;
}
.td_left {
width: 100px;
height: 45px;
text-align: right;
border: 0;
}
.td_right {
display: inline-block;
/* 左右两侧确保是一行 */
padding-left: 50px;
}
#username,
#password,
#email,
#name,
#tel,
#birthday,
#checkcode {
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
/*设置边框圆角*/
border-radius: 5px;
padding-left: 5px;
}
#checkcode {
/* 验证码宽度大小 */
width: 110px;
}
#img_check {
height: 32px;
vertical-align: middle;
}
#btn_sub,
#btn_reset {
width: 120px;
height: 32px;
background-color: lawngreen;
border: 0;
}
#btn_reset {
background-color: red;
border: 0;
margin-right: 60px;
}
3-2登录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>1028第一次做登录页面</title>
<link rel="stylesheet" type="text/css" href="css/login001.css"/>
</head>
<body>
<div align="center"id="login">
<h1>登录</h1>
<form action="#" method="post">
账 号：<input class="userName"type="text"placeholder="请输入用户名"required><br>
<!-- 没用表格设置用br换行 -->
密 码：<input class="password" type="password" maxlength="12"placeholder="请输入密码"require><br>
验证码：<input class="code"><br>
<!-- size:显示字体的个数，可以超过这个长度 调整输入框的宽度-->
<!-- text是输入框默认类型，可以省略不写 -->
<input class="btnLogin"type="submit"name="submit"value="登录">
<input class="btnReset"type="reset"name="reset"value="取消">
</form>
<p>没有账号？<a href="regist001.html">请先注册</a></p>
</div>
</body>
</html>
*********************************************************001-1-1不使用表单的HTML
.userName,.password,.code{
height: 45px;
width: 400px;
border: 1px solid darkgray;
margin-bottom: 25px;
}
.code{
border: 0;
background: pink;
font-size: 20px;
/* border:pink 去除边框除了把边框去掉，也可以和背景颜色相同 */
}
.btnLogin,.btnReset{
height: 35px;
width: 70px;
background: greenyellow;
border: 0;
/* 有背景色一般去除边框 */
}
.btnReset{
background: red;
color: white;
}
body{
background: url("../img/rg_bgimg.jpg") no-repeat center;
background-size: cover;
padding-top: 20px;
}
************************************************************001-1-2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>1027预习登录页面</title>
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<div class="lo_layout" align="center">
<div class="lo_center">
<div class="lo_form">
<form action="#"method="post">
<table class="tb">
<tr>
<td class="tb_left"><label for="username">用户名</label></td>
<td class="tb_right"><input type="text"name="username" id="username" placeholder="请输入用户名"required></td>
</tr>
<tr>
<td class="tb_left"><label for="password">密 码</label></td>
<td class="tb_right"><input type="password" name="password" id="password" placeholder="请输入密码"required/></td>
</tr>
<tr>
<td align="center"><input type="submit"id="btn_sub"value="登录"></td>
<td align="center"><input type="reset"id="btn_sub"value="重置"></td>
</tr>
</table>
</form>
</div>
</div>
<div id="footer">
<p>没有账号？<a href="register.html">立即注册</a></p>
</div>
</div>
</body>
</html>
******************************************************************************labelfor id表单登录
{
/* 设置盒子模型去边框 */
margin: 0px;
padding: 0px;
}
body {
/* 设置背景图片 */
width: 400px;
background: url("../img/rg_bgimg.jpg") no-repeat center;
background-size：cover;
padding-top: 25px;
}
.tb{
/* 登录页面的布局 */
width: 500px;
height: 350px;
border: 10px solid lightpink;
/* 白色边框，注册中心div的布局统一格式 */
background-color: lightcyan;
/*让div水平居中*/
margin: auto;
margin-top: 50px;
}
/* 属性src/url :后面跟样式 */
/* 水平居中 align="center"*/
/* botton普通按钮，默认没有文字，如果要有文字value属性进行赋值 */
/* 提交submit,取消reset */
/* 字数不一样，用空格对齐，一个汉字空格　或者三个【牛皮山炮】一个汉字长度 */
.tb>tr:(1){
margin-top: 130px;
}
.tb_left {
width: 80px;
height: 45px;
text-align: right;
/* 文字右对齐没实现； */
border: 0;
}
.td_right {
margin-left: 50px;
display: inline-block;
/* 左右两侧确保是一行 */
padding-left: 50px;
}
#username,#password {
width: 251px;
height: 42px;
border: 1px solid #A6A6A6;
/*设置边框圆角*/
border-radius: 5px;
padding-left: 5px;
}
#btn_sub,
#btn_reset {
margin: 25px;
width: 150px;
height: 42px;
display: inline-block;
background-color: lawngreen;
border: 0;
}
#btn_reset {
background-color: red;
border: 0;
margin-right: 30px;
}
QQ登录仿真页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>qq登录教员版</title>
</head>
<link rel="stylesheet" type="text/css" href="qq_topmiddlefooter.css" />
<body>
<div class="center">
<div class="top">
<div class="left">
<img src="img/qq.png" alt="QQ图标" title="QQ图标" width="30px" height="30px"><span>QQ</span>
<!-- 图片加文字， -->
</div>
<div class="right">
<img src="img/set.png" alt="">
<img src="img/min.png" alt="">
<img src="img/close.png" alt="">
</div>
</div>
<div class="middle">
<img src="img/person.jpg" alt="登录者的头像">
</div>
<div class="bottom">
<form action="#" class="post">
<div class="user"><input type="text" name="user" id="user" value="" placeholder="账号/手机/邮箱" /><label
for="user"></label></div>
<div class="pwd"><input type="password"id="pwd" placeholder="密码"></div>
<div class="choice">
<div class="one"><input type="checkbox">自动登录</div>
<div class="two"><input type="checkbox">记住密码</div>
<div class="three"><a href="#">找回密码</a></div>
</div>
<div class="btnLogin">
<input type="button" id="btnLogin" value="登录">
</div>
<div class="footer">
<div class="a">
<a href="#">注册账号</a>
</div>
<div class="img"><img src="img/erweima.png"></div>
</div>
</form>
</div>
</div>
</body>
</html>
<!-- 1.整体布局上中下三部分，左右两侧部分，尽可能细化div div[class]>div[class]*3
2.div[class]*2
3title:鼠标悬浮上效果显示提示文字
alt：或者的意思；图标正常显示，不显示其属性内容，
4底部form[class]>div[class]*5
-->
************************************************************************************88
/* 通用清0 */
* {
margin: 0;
padding: 0;
}
/* 设置网页背景色默认白色 */
/* body {
background-color: white;
} */
/* 设置操作块的大小 */
.center {
width: 420px;
height: 370px;
border: 1px solid grey;
/** 外边框**/
margin: 0 auto;
margin-top: 50px;
align-content: center;
/* 盒子居中，上下0左右平衡自动 */
font-size: 12px;
/* 注意如果是外边框没有底边，可能是高度设置不够，被隐藏了 */
}
/* 设置顶端 */
.center .top {
background: url(img/bg.gif) no-repeat;
/* 背景图，也可以是动态图 不重复铺满整个页面
【background-size 是单独的属性，不包括在background范围内[背景色，图，定位，重复类型]】
*/
background-size: cover;
/* 弹性布局 */
display: flex;
justify-content: space-between;
align-items: flex-start;
height: 35%;
/* 占整个center的40%高度 */
}
/* 设置左侧字体大小,定位字体风格， */
.center .top .left span {
color: white;
font: bolder 20px;
top: -8px;
position: relative;
/* 所有定位都要有参照物 */
}
/* 设置右侧图片大小， */
.center .top .right img {
width: 25px;
height: 25px;
}
.center .middle {
width: 50px;
height: 50px;
margin: 0 auto;
/* 设置margin复合属性时，中间不能加逗号 */
text-align: center;
/* 水平居中 */
/* 盒子模型 */
background: white;
padding: 2px;
box-shadow: 0 5px 8px skyblue;
/* 设置盒子阴影和背景色 */
border-radius: 50%;
/* 盒子模型的圆角 */
position: relative;
top: -25px;
}
.center .middle img {
border-radius: 50%;
position: relative;
width: 50px;
height: 50px;
/* 图形的圆角及图片大小 */
}
.center .bottom {
text-align: center;
margin: 0 auto;
position: ;
/* 设置对齐方式 */
font: 12px;
/* 默认16px,字体稍小，并给字体设置颜色 */
color: gray;
background: white;
}
.center .bottom #user,
.center .bottom #pwd {
border: 0;
border-bottom: 1px solid gray;
/* 只留底部边框线 */
height: 35px;
width: 260px;
padding-left: 20px;
}
.center .bottom a {
text-decoration: none;
/* 去除超链接下划线时改变字体颜色 */
color: grey;
}
.center .bottom #btnLogin {
height: 35px;
width: 260px;
padding-left: 20px;
/* 设置尺寸大小和背景色 */
background-color: lightskyblue;
border: 0;
border-radius: 5px;
margin-top: 8px;
/* 圆角设置大概5px,顶端8px左右 */
}
.center .bottom .choice {
/* 用弹性边框设置浮动效果 */
display: flex;
justify-content: space-between;
width: 260px;
margin: 0 auto;
margin-top: 8px;
}
.center .bottom .footer .img img {
width: 23px;
height: 23px;
margin-bottom: 5px;
}
/* 后代选择器之间必须有空格，否则引用不正确 */
.center .bottom .footer {
display: flex;
justify-content: space-between;
width: 320px;
margin: 0 auto;
margin-top: 10px;
}
3-3导航栏nav
【背景图必须是放在body中，border-size=“cover”可以保证铺满整个网页，如果放在中心代码块中图片会不完整】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>1028导航栏的制作</title>
<link rel="stylesheet" type="text/css" href="css/nav.css"/>
</head>
<body>
<div class="nav-center">
<div class="nav">
<ul>
<li ><a id="all" href="#">拼多多之家</a></li>
<li><a href="#">拼多多开店</a></li>
<li><a href="#">拼多多规则</a></li>
<li><a href="#">拼多多咨询</a></li>
<li><a href="#">拼多多运营</a></li>
<li><a href="#">拼多多推广</a></li>
</ul>
</div>
</div>
</body>
</html>
**********************************************************************************************
/* 所有边距设为0,初始化 */
* {
margin: 0;
padding: 0;
}
/* 设置背景色字体色和垂直方向居中【行高=高度】 */
.nav {
background-color: red;
color: white;
width: 95%;
height: 30px;
line-height: 30px;
/* 行高和块（背景）高度相同，那么就能保证垂直居中对齐 ，整体居中，在导航栏里设置文字居中即可*/
/* margin-left: 75px;
如果不设置水平居中的话, 导航div让它与左外边距有一定距离此时这样设置 */
text-align: center;
/* 水平居中 */
}
/* 清除小圆点 */
.nav ul li {
list-style-type: none;
display: inline-block;
/* 去除小圆点和实现同行浮动 */
}
/* 首个列表块左移200px */
.nav ul li .all {
margin-left: 200px;
}
/* 成为一行浮动display，去除下划线，超链接有边距 */
.nav ul li a {
text-decoration: none;
margin-left: 30px;
}
/* 设置悬浮样式*/
.nav ul li a:hover {
text-decoration: underline;
color: gold;
font: 20px;
}
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
