第一部分
- 1. 基础HTML
- 2. 基础CSS
-
- 2.1 CSS基础语法
-
- 2.1.1 样式及属性
- 2.1.2 选择器
- 2.1.3 注释
- 2.1.4 CSS样式
- 2.1.5 颜色表示法
- 2.1.6 背景实现视觉差效果
- 2.1.7 标签群组通配等选择器（选择器内容均为标签）
- 2.1.8 CSS的继承
- 2.1.9 CSS优先级
- 2.1.10 盒子模型
- 2.1.12 标签分类
- 2.1.13 显示框类型
- 2.1.14标签嵌套规范
- 2.1.15 overflow溢出隐藏
- 2.1.16 透明度与手势
- 2.1.17 最大、最小宽高
- 2.1.18 CSS默认样式
- 2.1.19 CSS重置样式
- 2.1.20 float浮动概念及原理
- 2.1.21 清除float浮动
- 2.1.22 position定位
- 2.1.22 css添加省略号
- 2.1.23 CSS Sprite
- 2.1.24 css圆角
- 3 PC端企业类型整页制作
- 3.1 博文尚美
- 3.2 QQ飞车
1. 基础HTML
1.1 了解什么是HTML
它是一种编程语言，是作为软件开发的基础语言
浏览器解析代码后呈现的就是我们看到的网页，可以鼠标右击查看网页源代码
一个网站一般都是由多个网页组成，每一个网页实际上都是一个.html文件
通常html的代码标签可以相互嵌套，但要符合嵌套规范
1.2 编辑器 VS Code
VS Code的全称为Visual Studio Code，来自微软，来自微软，是一个开源的、基于Electron的轻量代码编辑器
1.2.1 下载方式：
1. 电脑自带的应用商店内搜索
2. VS Code下载地址：http://code.visualstudio.com/
1.2.2 设置
文件→首选项→设置（大小、是否换行等设定）
1.2.3 编辑器的基本使用（小小的快捷方式）
1.2.3.1 ctrl相关
ctrl + s : 保存
ctrl + a : 全选
ctrl + x : 剪切
ctrl + c : 复制
ctrl + v : 粘贴
ctrl + z : 撤销
ctrl + y : 前进
ctrl + / : 快捷添加和删除注释
ctrl + d : 选择相同元素的下一个
1.2.3.2 shift相关
shift + end : 从头选一行
shift + home : 从尾部选中一行
shift + alt + ↓ : 快速复制一行
shift + alt + a : 快捷添加和删除注释
1.2.3.3 Alt相关
alt + ↑或↓ : 快速移动一行
alt + 鼠标左键 : 多光标
1.2.3.4 Tab相关
tab : 向后缩进
tab + shift : 向前缩进
tab + 单词 或 单词 + tab : 创建标签
1.3 了解网页开发
一个大型网站的开发，离不开团队内各个岗位的配合，每个岗位都不可或缺
1.3.1三个基本职位：
UI设计师：设计稿撰写
web前端开发师（H5开发）：将设计稿编写为代码
将数据库里的数据显示到页面
编写HTML(结构)以及CSS（样式）
web后端开发师
1.3.2 Web前端的三大核心技术
HTML：结构
CSS：样式
JavaScript：交互行为
1.4 HTML的基本结构和属性
超文本标记语言是标准通用标记语言下的一个应用，是网页制作必备的编程语言
超文本：文本内容+非文本内容（图片、视频、音频等）
语言：编程语言
标记（也叫做标签）：<单词>
单标签：<head></head>；<p></p>等
双标签：<br>等（种类少）
标签可以上下排列，也可以组合嵌套
标签的属性：用来修饰标签，设置当前标签的一些属性
<标签 属性1="值1" 属性2="值2">
1.5 HTML的初始代码
每个.hrml文件都有的代码叫做初始代码，要符合.html文件的规范写法
无论写什么样的网页，这些代码都是要有的
初始代码：（快捷方式：！+Tab键）
<!DOCTYPE html> 文档声明：告诉浏览器这是一个.html文件
<html lang="en"> html的最外层标签，包裹着所有html标签代码
lang="en"：表示是一个英文网站 lang=“zh-CN”：表示这是一个中文网站
<head> 设置的内容
<meta charset="UTF-8"> 元信息：编写网页中的一些赋值信息
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> 网页的标题
</head>
<body>
显示网页内容的区域
</body>
</html>
1.6 HTML语义化
HTML语义化指的是：根据网页中内容的结构，选择合适的HTML标签进行编写
1.7 HTML除初始以外的常用代码
1.7.1注释
写法：<!-- 注释的内容 -->
快捷键：ctrl + /
功能：在浏览器中看不到，也不会运行或显示注释的内容，只能在代码中看到
1.7.2 标题
写法：<h1></h1>……<h6></h6>
注意：在一个网页中，h1标题最重要，一个.html文件中只能有一个h1标题
1.7.3 段落
写法：<p>段落内容</p>
功能：文章分段
1.7.4 文本修饰标签
1.7.4.1 强调
写法：<srong>强调内容</strong>
功能：：会对文本进行加粗
写法：<em>强调内容</em>
功能：会对文本进行斜体
1.7.4.2 上标文本及下标文本
写法：<sup>上标内容</sup>
功能：使文本上标
用法：a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>（代码输入）
=a² + b² = c²（展示效果）
写法：<sub>下标内容</sub>
功能：使文本下标
用法：H<sub>2</sub>O（代码输入）
= H₂O（展示效果）
1.7.4.3 删除文本及插入文本
一般删除文本都是和插入文本一同使用
写法：<del>删除内容</del>
功能：删除文本内容（就是在“删除内容”中间横划一道黑线）
写法：<ins>插入内容</ins>
功能：插入文本内容（就是在“插入内容”的下方划一条横线）
1.7.5 图片标签及图片属性
写法：<img src="图片位置" alt="当图片出问题时显示的文字"title="提示图片信息"width="图片宽度"height="图片高度">
功能：<img>：单标签（插入图片时需要输入）
src: 引入图片的地址(网址或文件路径)
alt：当图片出问题时显示的文字（不用即为没有）
title：提示图片信息（不用即为没有）
width：图片宽度（不用即为图片默认）
height：图片高度（不用即为图片默认）
1.7.6 跳转
1.7.6.1 跳转链接
写法：
文本链接：<a href="链接的地址"被设置链接的文本></a>
图片链接：<a href="链接的地址"
<img src="被设置链接的图片的地址">
功能：为文本或图片设置跳转链接，点击可直接跳转至相应网页
写法： <target="_blank或_self">
功能：若选择_blank，则网页在新窗口打开
若选择_self，则网页在当前页打开
若没有选择，则默认为在当前页打开
写法：<base target="_blank或_self">
功能：改变整个html链接的默认行为，一般在整个.hrml文件的<head></head>部分
1.7.6.2 跳转锚点
写法：
id属性：<a href="#设定的id属性">锚点的名字</a>
<hx id="设定的id属性">被设定id属性的文本<hx> （x=1~6，x∈Z）
或
name属性：<a href="#设定的name属性">锚点的名字</a>
<a name="设定的name属性"></a> （注意：这里的name属性加给的是a标签）
<hx>强调的文本</hx> （x=1~6，x∈Z）
功能：设定类似目录的锚点，点击即可跳转
1.7.7 特殊符号
写法：& + 字符 （详情参考：https://www.cnblogs.com/yipianchuyun/p/16278595.html）
功能：输入特殊字符，解决字符使用冲突（如：“<” 和 “>”）
1.7.8 列表
各列表之间可以相互嵌套
1.7.8.1 无序列表
写法：<ul type="type属性">
<li>文本</li>
</ul> （type属性详情参考：https://www.jb51.net/w3school/tags/att_ul_type.htm）
功能：添加部分无法写出的特殊字符，形成无序号的列表
注意：无序列表的<ul><li>和</li></ul>两组标签之间不能添加其他标签，但<li></li>标签之间可以有其他标签
1.7.8.2 有序列表
写法：<ol type="type属性">
<li>文本</li>
</ol> (type属性详情参考：https://www.w3school.com.cn/tags/att_ol_type.asp)
功能：添加部分字符，形成有序号的列表
注意：有序列表用的非常少，常用的是无序列表，无序列表可以代替有序列表
和无序列表一样，有序列表的<ol><li>和</li></ol>两组标签之间不能添加其他标签，但<li></li>标签之间可以有其他标签
1.7.8.3 定义列表
写法<dl>
<dd>列表项需要添加标题</dd>
<dt>对标题进行描述的内容</dt>
</dl>
功能：向列表项需要添加标题，添加对标题进行描述的内容
1.7.9 表格
1.7.9.1 表格标签
写法：<table> (表格的最外层容器)
<caption></caption> （定义表格的标题）
<tHead> （语义化标签）
<tr> （定义表格行）
<th></th> （定义表头）
<th></th>
........
</tr>
</tHead>
<tBody> （语义化标签）
<tr>
<td></td> （定义表格单元）
<td></td>
........
</tr>
<tBody>
<tFood> （语义化标签）
<tr>
<td></td>
<td></td>
........
</tr>
<tFood>
</table>
注意：之前有嵌套关系的，要符合嵌套规范
<tBody>可以多次出现，但是<tHead>和<tFood>只能有一个
（语义化标签虽然在没有在编辑网页中体现效果，但它拥有着利于搜索引擎优化和利于团队协作等作用，
在编辑网页时还是建议尽量写上)
1.7.9.2 表格属性
写法：编辑于<table 属性></table>的“属性”处：
border="粗细" (表格边框)
cellpadding="大小" (单元格内空间)
cellspacing="大小" (单元格之间的空间)
编辑于<th 属性></th> 或 <td 属性></td>的“属性”处：
rowspan="合并行数" (合并行：行数从当前单元格向右数)
colspan="合并列数" (合并列：列数从当前单元格向下数)
编辑于<th 属性></th> 或 <td 属性></td> 或 <tr 属性></tr>的“属性”处：
align="对齐方式" (左右对齐方式：left、center、right)
valign="对齐方式" (上下对齐方式：top、middle、bottom)
功能：更改当前表格的属性，美化表格
1.7.9.3 表单标签
写法：<form action="提交位置的网址">
<文本> （用于说明下方<input>的操作内容，可以不添加）
<input type="type属性">x （<input>是单标签，根据给出的type属性决定控件）
<textarea name="" id="" cols=“行数” rows=“列数”></textarea> （多行文本框）
<select> （下拉菜单）
<option>x</option>
<option>y</option>
......
</select>
</form>
参考：https://www.runoob.com/tags/att-input-type.html
注意：placeceholder=""可以使文本框中出现文字
checked可以使此格被选择，且不可取消
disabled可以使此复选框被禁用
multiple可使其变为多选 （依靠鼠标长按滑动实现）
selected可使该选项被定为默认 （通常下拉菜单的“请选择”便是用此代码）
size=“”可改变选项的显示数量 （按代码从上向下取选项）
<id=“m”><label for=“m”>n</label>可以使点击选项文字时也选择相应选项框
( <id=“m”>常嵌套在<input type="radio">内)
单选框只输入<input type="radio">x
<input type="radio">y
......
会导致单选框全部处于选中状态
将代码改为<input type="radio" name="">x
<input type="radio" name="">y
......
方可解决此类问题
1.7.10 div与span
写法：<div> （可在<div></div>之间嵌套其他标签）
<span>修饰的文字</span>
</div>
功能：<div></div>：用来划分一个区域，相当于一块区域容器，可以容纳段落、表格等多种网页元素，
html的大多数标签都可以嵌套在<div></div>中，<div></div>也可以嵌套多层<div></div>，来实现网页的规划和布局
<span></span>：对文字进行修饰内联
注意：div与span都是没有任何默认样式的，需要配合CSS，
2. 基础CSS
2.1 CSS基础语法
2.1.1 样式及属性
格式：选择器{属性1：值1；属性2：值2}
单位：px（像素 pixel）、%（百分比）
基本样式：width（宽度）、height（高度）、background-color（背景颜色）
写法：<style>
选择器{属性1：值1；属性2：值2}
</style>
2.1.2 选择器
2.1.2.1 CSS选择器
写法：<style>
#elem{ }
</style>
<body>
<标签 id="elem">文本内容</标签>
<body>
注意：在一个页面中，id是唯一的
id命名由字母、下划线、中划线组成（第一位不能是数字）
命名方式：驼峰式、下划线式、短线式
2.1.2.2 CLASS选择器
写法：<style>
.elem{ }
</style>
<body>
<标签 class="elem">文本内容</标签>
<body>
注意：class选择器可以复用
可以添加多个class样式
多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序
标签+类的写法
若使用“标签.elem{ }”的写法，则带有相应标签及元素的会被选中
2.1.3 注释
写法：/*CSS注释内容*/
快捷键：Shift + Alt + a 或Ctrl + /
功能：在浏览器中看不到效果，也不会运行或显示注释的内容，只能在代码中看到
2.1.4 CSS样式
2.1.4.1 内联样式（style属性）
写法：<标签 style=“ ”></标签>
2.1.4.2 内部样式（style标签）
写法：<style>
选择器{属性1：值1；属性2：值2} （选择器的内容为标签）
</style>
<body>
<标签>文本内容</标签>
</body>
注意：内部样式代码可以复用、符合W3C的规范标准，让结构和样式分开处理
2.1.4.3 外部样式
写法：<link rel="属性" href="属性资源的地址">
参考：https://www.w3school.com.cn/tags/att_link_rel.asp （HTML <link> 标签的 rel 属性）
功能：引入一个单独的CSS文件（非CSS文件不适用）
写法：@import url(‘属性资源的地址’)；
注意：这种方法问题很多，不建议使用
2.1.4.4 背景样式
写法：background-color：颜色表示法（2.1.4有所介绍） 背景颜色
background-image：url(背景图片地址)； 背景图片
background-repeat：repeat-x; （x轴平铺）
repeat-y; （y轴平铺）
repeat; （都平铺，默认值）
no-repeat; （都不平铺） 背景图片的平铺方式
background-position：x y;
x∈left、center、right、number(px、%)
y∈top、center、bottom、number(px、%) 背景图片的位置
background-attachment：scroll(默认值，背景位置是按照当前元素偏移的)
fixed（背景位置是按照浏览器进行） 背景图片随滚动条的移动方式
2.1.4.5 边框样式
写法：border-style:solid （实线）
dashed（虚线）
dotted（点线） 边框的样式
border-width:num(px) 边框的大小
border-color: 边框的颜色
注意：针对某一条边进行单独设置
边框也可以对某一边进行单独设置：border-方向-style：
方向：left、right、top、bottom
2.1.4.6 文字样式
写法：font-family:文字样式
功能：更换文字字体
写法：font-size:number(px) 字体大小
font-weight:number
normal（正常）
bold （加粗） 字体粗细
功能：改变文字大小、粗细
写法：text-transform:lowercase （文本小写）
uppercase （文本大写）
capitalize（首字母大写） 针对英文文本
写法：font-style:normal（正常）
italic、oblique（斜体） 字体正斜
功能：设置字体正斜
注意： italic：所有带有倾斜字体的可以设置
oblique：没有带有倾斜字体的也可以设置
2.1.4.7 CSS复合样式
尽量不要混写，如果一定要混写，一定要先写复合样式再写单一样式
写法：复合的写法通过空格来实现
background:color url( ) repeat
border:style width color
font:size family
注意：background和border不需要一定的顺序，font必须按照“size family”的顺序书写。
font:weight style size family（√）
style weight size family（√）
weight style size/line-height family（√）
2.1.4.7.1文本修饰
写法：text-decoration:underline 下划线
overline 上划线
line-through 删除线
none 不添加任何修饰
注意：添加多个文本修饰时，中间用空格隔开而不是用逗号
2.1.4.7.2 文本缩进
写法：text-indent:num(em)
注意：em是相对单位，1em=当前字体大小
2.1.4.7.3 文本对齐方式
写法：text-align:left（左对齐）
right（右对齐）
center（居中对齐）
justofy （两端点对齐）
2.1.4.7.4 文本的行高
写法：line-height:num(px)
比例值（跟文字的比例值）
注意：行高由上边距、字体大小、下边距组成
2.1.4.7.5 文本间距
写法：letter-spacing:num(px) 字之间的间距
word-spacing:num(px) 词之间的间距（针对英文）
word-break/break-all 强烈的折行
word-wrap/break-word 不强烈的折行（会产生一些空白区域）
2.1.5 颜色表示法
单词表示法：red、blue、gold等
16进制表示法：
写法：#000000~~#ffffff（每个16进制均表示一个颜色）
rgb三原色表示法：
写法：rgb(x,y,z) (x、y、z∈【0,255】且x、y、z∈N)
2.1.6 背景实现视觉差效果
写法：<head>
<style>
#div1{width:宽度;height:高度;background:url(图片文件地址);background-attachment:背景图片随滚动条的移动方式 }
#div2{width:宽度;height:高度;background:url(图片文件地址);background-attachment:背景图片随滚动条的移动方式 }
#div3{width:宽度;height:高度;background:url(图片文件地址);background-attachment:背景图片随滚动条的移动方式 }
......
table{background-color：颜色表示法;} （可以设置用以美化网页）
</style>
</head>
<body>
<div id="div1"></div>
（ 此处可以加入其他内容，用以修饰网页）
<div id="div2"></div>
<div id="div3"></div>
......
</body>
2.1.7 标签群组通配等选择器（选择器内容均为标签）
2.1.7.1 标签选择器（TAG选择器）
写法：选择器{ }
<标签></标签>
功能：去除标签的默认样式
2.1.7.2 群组选择器（分组选择器）
写法：选择器1,选择器2{ }
<标签1></标签1>
<标签2></标签2>
功能：通过逗号的方式，给多个不同的选择器添加统一的样式，便于代码的复用
2.1.7.3 通配选择器
写法：*{ }
功能：给所有标签添加样式
2.1.7.4 层次选择器
2.1.7.4.1 后代选择器
写法：选择器1 选择器2{ }
功能：在标签1中选择所有标签2添加样式（防止多个大标签中有相同的小标签）
2.1.7.4.2 父子选择器
写法：选择器1>选择器2{ }
功能：在标签1中选择下一级标签2添加样式（防止下一级标签的下级标签有相同标签）
2.1.7.4.3 兄弟选择器
写法：选择器1~选择器2{ }
功能：选择标签1下方所有与标签1同级的标签2
2.1.7.4.4 相邻选择器
写法：选择器1~选择器2{ }
功能：选择标签1下方相邻的与标签1同级的标签2
2.1.7.5 属性选择器
2.1.7.5.1 完全匹配
写法：选择器[class=x]{ }
<标签 class="x">{ }
功能：选择定义完全符合[x]条件的标签
2.1.7.5.2部分匹配
写法：选择器[class*=x]{ }
<标签 class="x-y">{ }
功能：选择定义带有[x]内容的标签
2.1.7.5.3起始匹配
写法：选择器[class^=x]{ }
<标签 class="x-y">{ }
功能：选择起始部分符合[x]条件的标签
2.1.7.5.4 结束匹配
写法：选择器[class$=x]{ }
<标签 class="y-x">{ }
功能：选择结束部分符合[x]条件的标签
2.1.7.5.5 组合匹配
写法：选择器[ ][ ][ ]{ }
<标签>{ }
功能：选择条件均符合[ ]的标签
2.1.7.6 伪类选择器
2.1.7.6.1 hover等伪类选择器
写法：div{ }
div :伪类{ }
伪类：:link 访问前的样式（只能添加给a标签）
:visited 访问后的样式（只能添加给a标签）
:hover 鼠标移入时的样式（可以添加给所有标签）
:active 鼠标按下时的样式（可以添加给所有标签）
注意：如果4个伪类都生效，编写时要注意顺序 :link :visited :hover :active
一般网站设置： a 伪类{ }
一般网站都只设置： a{ }（包括:link :visited :active）
a:hover{ }
2.1.7.6.2 after等伪类选择器
都是针对表单元素
写法： :伪类{ }
<input type=" " 伪类>
伪类：:before :after 通过伪类的方式给元素前后添加应该文本内容，使用content属性
:checked 点击后变化大小（自定义）
:dissabled 不可操作
:focus 获取光标时变化
2.1.7.6.3 结构伪类选择器
写法：选择器 结构伪类选择器
结构伪类选择器：:nth-of-type( )
选择结构内第x个符合的标签，角标从1开始，1表示第一项，2表示第二项，n表示0到无穷大（不符合的不计数）
:nth-child( )
选择结构内第x个符合的标签，角标从1开始，1表示第一项，2表示第二项，n表示0到无穷大（不符合的也计数）
:first-of-type( ) 选择结构内第一个符合的标签
:last-of-type( ) 选择结构内最后一个符合的标签
:only-of-type( ) 结构内有且只有一个符合标签，且没有其他不符合的标签时，选择那个标签
2.1.8 CSS的继承
写法：选择器{ }
注意：文字相关的样式可以被继承
布局相关的样式不能被继承
（但是可以设置继承属性inherit值，使文字也继承布局相关样式 标签{布局样式:inherit;}）
2.1.9 CSS优先级
后连锁先结算
相同样式优先级：
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况
内部样式与外部样式：
优先级相同，如果都设置相同样式，后写的优先级高
单一样式优先级：
style行间 > id > class > tag > *（通配）> 继承
!important：
提升样式优先级，非规范方式，不建议使用（不能对继承的属性进行优先级提升）
选择器+类与单类
选择器+类 > 单类
群组优先级
群组选择器与单元选择器的优先级相同，靠后写的优先级高
层次优先级
1、权重比较 （权重累加后比较优先级）
2、约分比较 （上下两组选择器互相约去相同权重的选择器后比较优先级）
3、无数个低优先级的选择器权重相加后，依然小于一个高优先级选择器的权重
2.1.10 盒子模型
2.1.10.1 CSS盒子模型
写法：选择器{content padding border margin}
<标签>文本内容</标签>
组成：content：内容区域 （width和height组成）
padding： 内边距（px）
写一个值：(px)上下左右；
写两个值(px px)上下、左右
写四个值：(px px px px)上、右、下、左
padding-left： 内边距（px）左
padding-right： 内边距（px）右
padding-top： 内边距（px）上
padding-bottom： 内边距（px）下
border：外围边框（包装盒）
margin：外边距（外填充）
注意：背景颜色会填充到margin以内的区域，（不包括margin区域）
文字会在content区域
padding不能出现负值，margin是可以出现负值
2.1.10.2 box-sizing改变盒模型
默认值：content-box：width，height->content（只可作用与content）
改变盒子模型：border-box:width,height->content padding border(可作用于content padding border，三者分)
写法：选择器{box-sizing: content-box/border-box}
作用：可以改变盒子模型的展示形态
使用的场景：不用再去计算一些值
解决一些百分比问题
2.1.10.3 盒模型叠加问题
2.1.10.3 margin叠加问题
出现在margin-top和margin-bottom同时存在的时候，会取其中值较大的作为叠加的值
解决方法：BFC规范
想办法只给一个元素添加间距
2.1.10.3 margin传递问题
margin传递问题只出现在嵌套结构中，且只有margin-top会有传递问题，其他三个方向没有传递问题
解决方案：BFC规范
给父容器加边框
margin换成padding
2.1.11 CSS盒模型拓展
写法：#box{margin- left/right :auto;}（auto:自适应）
注意：margin左右自适应是可以的，但是上下自适应是不行的，上下自适应需要在以后学习
width,height不设置，会自动去计算容器的大小，节省代码
2.1.12 标签分类
2.1.12.1 按类型：（可以通过控制台查看类型）
block(块)： div,p,ul,li,h1…
1.块独占一行
2.支持所有样式
3.不写款的时候和父容器相同
4.所占区域是一个矩形区域
inline（内联）：span,a,em,strong,img…
1.挨在一起的
2.有些样式不支持，例如：width,height，margin，padding（某些方向）
3，不写宽的时候宽度由内容决定
4.所占的区域不一定是矩形
5，内联标签之间会有空隙，是由于代码换行产生，大部分情况下不需要解决问题 （解决方式：给父容器加font-size=0）
inline-block（内联块）:input,select…
1.挨在一起，但是支持宽高
2.保持矩形结构
2.1.12.2 按内容
flow：流内容
metadata：元数据
sectioning：分区
heading：标题
phrasing：措辞
embedded：嵌入的
interactive：互动的
对照理解
2.1.12.3 按显示
替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容
img,input…
非替换元素：将内容直接告诉浏览器，将其显示出来
div,h1,p…
2.1.13 显示框类型
写法：选择器{display: block/inline/inline-block/none}
block：块
inline：内联
inline-block：类型
none：隐藏
注意：display:none 不占空间的隐藏
visibility:hidden 占空间的隐藏
2.1.14标签嵌套规范
块标签可以嵌套内联标签：<div>
<span></span>
<a herf="#"></a>
</div>
块标签不一定能嵌套块标签：<p></p>只能嵌套内联
内联是不能嵌套块标签：除了<a href="#">
<div></div>
</a>
块标签嵌套块标签：<div>
<div>
</div>
</div>
2.1.15 overflow溢出隐藏
写法：visible：默认
hidden：隐藏
scroll：显示滚动条
auto：内容多时显示滚动条
2.1.16 透明度与手势
写法：opacity：0（透明）~1（不透明）/0.5（半透明）
注意：即使透明也占空间，透明对所有子内容起作用，包括文字
写法：rgba(red,green,blue,透明度)
注意：可以让指定内容透明，而不影响其他样式
写法：cursor:手势 default：默认箭头
自定义手势：cursor:url(图片地址),auto;
2.1.17 最大、最小宽高
写法：选择器{最大、最小宽高}
min-width：最小宽度 max-width：最大宽度
min-height：最小高度 min-height：最大高度
%单位换算：以父容器的大小进行换算
一个容器适应屏幕的高：容器{height：100%；body：100%；html：100%}
作用：强化对百分比单位的理解
2.1.18 CSS默认样式
有些标签有默认样式，有些则没有（通过控制台可以查看）
没有默认样式：div、span......
有默认样式：body、h1~h6、p、ul......
2.1.19 CSS重置样式
写法：*{margin:0;padding:0;}（也可以将*替换成一个或多个标签）
优点：不用考虑哪些标题有默认的margin和padding
缺点：稍微影响性能
写法：ul{list-style:none;}
写法：a{text-decoration:none;color: ;}
写法：img{display:block}
(图片跟容器底部有一些空袭，内联元素的对齐方式是按照文字基线对齐的，而不是文字底线)
vertical-align: baseline（基线）/bottom（底线）; 对齐方式
推荐解决方式：img{display:block}
注意：写具体页面或一个布局效果的时候
1、写结构
2、CSS重置样式
3、写具体样式
2.1.20 float浮动概念及原理
文档流：文档中可显示对象在排列时所占用的位置
float特性：加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列
float取值：left
right
none（默认）
注意：只会影响后面的元素
内容默认提升半层
默认宽根据内容决定
换行排列
主要给块元素添加，但也可以给内联元素添加
2.1.21 清除float浮动
写法：
上下排列：clear属性，表示清除浮动，可用于三类：left，ight，both
嵌套排列：固定宽高：不推荐，不能把高度固定死，不适合做自适应效果
父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素
overflow：hidden（BFC规范），如果有子元素想溢出，会受到影响
display：hidden-block（BFC规范），不推荐，父容器会影响到后面的元素
设置空标签：不推荐，会多添加一个标签
after伪类：推荐，是空标签的加强版，目前各大公司的做法
2.1.22 position定位
position特性
css position 属性用于指定一个元素在文档中的定位方式。top，right，bottom，left属性则决定了该元素的最终位置
分类：position（取值）
static（默认）
relative
absolute
fixed
sticky
2.1.22.1 relative相对定位
特性：1、如果没有定位偏移量，对元素本身没有任何影响
2、不使元素脱离文档流
3、不影响其他元素布局
4、left，top，right，bottom是相对于当前元素自身进行偏移的（以该元素左上角为参考点）
写法： 选择器{position: relative;left: 100px;top: 100px;}
2.1.22.2 absolute绝对定位
特性：1、使元素完全脱离文档流
脱离文档流,指的是元素脱离正常元素的布局排版规则,其他处于文档流中的盒子在计算布局排版时,
会自动无视已脱离文档流的元素来进行定位。
2、使内联元素支持宽高（使内联具备块特性）
3、使块元素默认宽根据内容决定（让块具备内联的特性）
4、如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对，相对，固定）
写法：选择器{position: absolute;right: 0;bottom: 0;}
2.1.22.3 fixed固定定位
特性：1、使元素完全脱离文档流
2、使内联元素支持宽高（让内联具备块特性）
3、使块元素默认宽根据内容决定（让块具备内联的特性）
4、相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
2.1.22.4 sticky粘性定位
特性：在指定位置，进行粘性操作
2.1.22.5 z-index定位层级
特性：默认层级为0，一样时后写的层级高
寻找相同层级的比较，如果相同层级有嵌套，嵌套里面层级再高也没用，比较的不是他
2.1.22.6 实现下拉菜单
写法：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
ul{list-style: none;}
#menu{width: 100px;height: 30px;margin: 20px;border: 1px black solid;position: relative;left: 600px;}
#menu ul{width: 100px;height: 100px black solid;position: absolute;left: -1px;top: 30px;background: white;
display: none;}
#menu:hover ul{display: block;}
#menu ul li:hover{background: gray;}
p{text-align: center;}
</style>
</head>
<body>
<div id="menu">
卖家中心
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
</div>
<p>测试段落测试段落测试段落测试段落测试段落测试段落测试段落</p>
</body>
</html>
2.1.22 css添加省略号
写法：1、width 必须有一个固定的宽（长度过长自动折行）
2、white-space：nowrap 不让内容折行（重点）
3、overflow：hidden 隐藏溢出的内容
4、text-overflow：ellipsis 添加省略号
2.1.23 CSS Sprite
特性：css雪碧也叫作css精灵，是一种网页图片应用处理方式。
它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载
好处： 可以减少图片的质量，网页的图片加载速度快；减少图片的请求的次数，加快网页的打开
2.1.24 css圆角
写法：border-radius：给标签添加圆角（px值为圆的半径）
注意：给border-radius设置俩个值的时候分别代表左上角右下角，和右上角左下角两个的相切圆半径
给border-radius设置成四个值时，代表的是左上、右上、右下、左下，顺时针赋值
给border-radius设置成“x/y”时，x是横向距离，y是纵向距离，是个椭圆
3 PC端企业类型整页制作
通栏 : 自适应浏览器的宽度
版心 : 固定一个宽度，并且让容器居中
3.1 博文尚美
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>博文尚美</title>
<link rel="stylesheet" href="../css/样式.css">
</head>
<body>
<!-- head -->
<div id="head" class="container">
<div class="logo l">
<a href="#"><img src="../img/logo.png" alt="博文尚美"></a>
</div>
<ul class="menu">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PROTFOLIO</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<!-- book -->
<div id="book">
<ul class="list">
<li style="background-image: url(../img/书.png);">
<a href="#"></a>
</li>
</ul>
<ol class="btn">
<li class="lix"></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<!-- 服务范围 -->
<div id="fuwu" class="wrapper">
<div id="heng" >
<h2>服务范围</h2>
<p>OUR SERVICES</p>
</div>
<div id="tu1">
<img src="../img/电脑.png" alt="">
<h2>1.WEB DESIGN</h2>
<ul>
<li class="li2">企业品牌网站设计/手机网站制作</li>
<li class="li3">动画网站创意设计</li>
</ul>
</div>
<div id="tu2">
<img src="../img/圆圈图片.png" alt="">
<h2>2.GRAPHIC DESIGN</h2>
<ul>
<li class="li2">标志LOGO设计/产品宣传册设计</li>
<li class="li3">企业广告/海报设计</li>
</ul>
</div>
<div id="tu3">
<img src="../img/购物车.png" alt="">
<h2>3.E-BUSINESS PLAN</h2>
<ul>
<li class="li2">淘宝/天猫装修设计及运营推广</li>
<li class="li3">企业微博、微信营销</li>
</ul>
</div>
<div id="tu4">
<img src="../img/信件.png" alt="">
<h2>4.MALBOXAGENTS</h2>
<ul>
<li class="li2">腾讯/网易企业邮箱品牌代理</li>
<li class="li3">个性化邮箱定制开发</li>
</ul>
</div>
</div>
<!-- 客户案例 -->
<div id="anli" class="wrapper">
<div id="heng">
<h2><span>{ 客户案例 }</span></h2>
<p>With the best prolessional technology, to design the best innovative web site</p>
</div>
<div id="kehu">
<ul>
<li><a href="#"><img src="../img/戴墨镜.png" alt=""></a></li>
<li><a href="#"><img src="../img/椅子落日.png" alt=""></a></li>
<li><a href="#"><img src="../img/蓝绿.png" alt=""></a></li>
</ul>
</div>
<button><span>VIEW MORE</span></button>
</div>
<!-- 最新咨询 -->
<div id="zixun" class="container">
<div id="heng" class="xia">
<h2>最新咨询</h2>
<p>TEH LATEST NEWS</p>
</div>
<div id="zixuntu">
<img src="../img/白色.png" alt="">
</div>
<div id="jan">
<div class="yue">
<h2>09</h2>
<p>Jan</p>
</div>
<div class="text">
<h2>
网站排名进入前三的技巧
</h2>
<p>
很多客户经常纳闷为什么自己的网站老是优化不到搜索引擎首页，更不用说进首页前三了。
</p>
</div>
</div>
<div id="jan">
<div class="yue">
<h2>09</h2>
<p>Jan</p>
</div>
<div class="text">
<h2>
网站排名进入前三的技巧
</h2>
<p>
很多客户经常纳闷为什么自己的网站老是优化不到搜索引擎首页，更不用说进首页前三了。
</p>
</div>
</div>
<div id="jan">
<div class="yue">
<h2>09</h2>
<p>Jan</p>
</div>
<div class="text">
<h2>
网站排名进入前三的技巧
</h2>
<p>
很多客户经常纳闷为什么自己的网站老是优化不到搜索引擎首页，更不用说进首页前三了。
</p>
</div>
</div>
</div>
<!-- 底部 -->
<div id="bottom" class="wrapper">
<div id="nei" class="container">
<p>aaaaaaaaaaaaaaaaaaaaaaaaa</p>
<ul>
<li><a href="#" class="wu">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ol,ul,li{
list-style: none;
}
img{display: block;}
a{
text-decoration: none;
}
body{
font-family: Arial;
}
.clear:before,.clear:after{
content: " ";
display: block;
clear: both;
}
.l{float: left;}
.r{float: right;}
/* 版心 */
.container{
width: 1080px;
margin: 0 auto;
position: relative;
}
.wrapper{
width: 1352px;
margin: 0 auto;
}
/* 通栏 */
.fluid{
width: 100%;
}
/* head */
#head{
height: 82px;
line-height: 82px;
}
#head .logo{
margin-top: 19px;
}
#head .menu{
float: right;
font-size: 17px;
}
#head .menu li{
float: right;
margin-left: 50px;
}
#head .menu li a{
color: #646464;
}
/* book */
#book{
position: relative;
}
#book .list{
position: relative;
width: 100%;
height: 469px;
}
#book .list li {
position: absolute;left: 0;top: 0;
height: 100%;
width: 100%;
background:center 0 no-repeat;
}
#book .btn{
width: 100%;
position: absolute;bottom: 19px;
text-align: center;
}
#book .btn li{
display: inline-block;
margin-right: 11px;
width: 12px;
height: 12px;
border: 3px solid white;
border-radius: 50%;
cursor: pointer;
}
#book .btn .lix{
background-color: aliceblue;
}
/* 服务范围 */
#fuwu{
overflow: hidden;/* 不加这个会出现下面 #heng 的 margin-top 传递 */
height: 408px;
/* width: 1352px; */
/* background-color: pink; */
}
#heng{
margin-top: 60px;
text-align: center;
/* background-color: pink; */
}
#heng h2{
height: 20px;
line-height: 20px;
font-size: 20px;
font-weight: normal;
color: #363636;
background: url(../img/两横.png) no-repeat center 5px;
}
#heng p{
font-size: 14px;
margin-top: 10px;
color: #9f9f9f;
}
/* 四张服务范围图片 */
/* (背景的装饰，即可能长期不变的图片使用background-img) */
/* (用于展示的图片，即短期可能发生变动的图片用img) */
#fuwu #tu1{
float: left;
width: 210px;
height: 210px;
/* background-color: pink; */
margin-top: 40px;
margin-right: 70px;
margin-left: 151px;
text-align: center;
}
#fuwu #tu1 img{
margin: 0 auto;
}
#fuwu #tu1 h2{
margin-top: 20px;
font-size: 18px;
font-weight: bold;
line-height: 36px;
}
#fuwu #tu1 .li2{
margin-top: 10px;
font-size: 14px;
color: #6d6d6d;
line-height: 22px;
}
#fuwu #tu1 .li3{
font-size: 14px;
color: #6d6d6d;
line-height: 22px;
}
#fuwu #tu2{
float: left;
width: 210px;
height: 210px;
/* background-color: pink; */
margin-right: 70px;
margin-top: 40px;
text-align: center;
}
#fuwu #tu2 img{
margin: 0 auto;
}
#fuwu #tu2 h2{
margin-top: 20px;
font-size: 18px;
font-weight: bold;
line-height: 36px;
}
#fuwu #tu2 .li2{
margin-top: 10px;
font-size: 14px;
color: #6d6d6d;
line-height: 22px;
}
#fuwu #tu2 .li3{
font-size: 14px;
color: #6d6d6d;
line-height: 22px;
}
#fuwu #tu3{
float: left;
width: 210px;
height: 210px;
/* background-color: pink; */
margin-right: 70px;
margin-top: 40px;
text-align: center;
}
#fuwu #tu3 img{
margin: 0 auto;
}
#fuwu #tu3 h2{
margin-top: 20px;
font-size: 18px;
font-weight: bold;
line-height: 36px;
}
#fuwu #tu3 .li2{
margin-top: 10px;
font-size: 14px;
color: #6d6d6d;
line-height: 22px;
}
#fuwu #tu3 .li3{
font-size: 14px;
color: #6d6d6d;
line-height: 22px;
}
#fuwu #tu4{
float: left;
width: 210px;
height: 210px;
/* background-color: pink; */
margin-top: 40px;
text-align: center;
}
#fuwu #tu4 img{
margin: 0 auto;
}
#fuwu #tu4 h2{
margin-top: 20px;
font-size: 18px;
font-weight: bold;
line-height: 36px;
}
#fuwu #tu4 .li2{
margin-top: 10px;
font-size: 14px;
color: #6d6d6d;
line-height: 22px;
}
#fuwu #tu4 .li3{
font-size: 14px;
color: #6d6d6d;
line-height: 22px;
}
/* 客户案例 */
#anli{
position: relative;
overflow: hidden;
height: 460px;
background: rgb(245, 243, 243);
background-color: #f8f8f8;
}
#anli #heng h2 span{
color: #66c5b4;
}
#anli #kehu ul{
float: left;
margin-top: 38px;
margin-left: 167px;
}
#anli #kehu li{
float: left;
margin-right: 20px;
}
#anli button{
position: absolute;bottom: 50px;left: 590px;
width: 176px;
height: 37px;
border:3px solid #66c5b4;
border-radius: 40px;
background-color: #66c5b4;
cursor: pointer;
}
#anli button span{
color: white;
font-size: 14px;
}
/* 最新咨询 */
#zixun{
overflow: hidden;
height: 450px;
/* background-color: pink; */
}
#zixun .xia{
margin-bottom: 65px;
}
#zixun #zixuntu{
float: left;
}
#zixun #jan{
float: left;
margin-left: 10px;
margin-bottom: 16px;
width: 400px;
height: 90px;
/* background-color: #363636; */
}
#zixun #jan .yue{
float: left;
width: 65px;
height: 100%;
border-right:2px solid rgb(233, 227, 227) ;
/* background-color: green; */
}
#zixun #jan .yue h2{
text-align: center;
line-height: 60px;
font-size: 39px;
font-weight: bold;
color: #66c5b4;
}
#zixun #jan .yue p{
text-align: center;
font-size: 18px;
line-height: 30px;
color:#9f9f9f;
}
#zixun #jan .text{
float: left;
margin-left: 20px;
/* background-color: red; */
}
#zixun #jan .text h2{
font-size: 18px;
}
#zixun #jan .text p{
margin-top: 20px;
width: 300px;
height: 40px;
font-size: 14px;
color: #9f9f9f;
/* white-space: nowrap; */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
/* 底部 */
#bottom{
height: 50px;
/* line-height: 50px; */
background-color: #5FBAB5;
}
#bottom #nei{
height: 50px;
line-height: 50px;
}
#bottom #nei p{
float: left;
font-size: 14px;
color: white;
}
#bottom #nei ul{
float: right;
}
#bottom #nei ul li{
float: right;
text-align: center;
}
#bottom #nei ul li a{
border-right:1px solid white ;
padding: 0 20px;
font-size: 10px;
color: white;
}
#bottom #nei ul li .wu{
border: 0;
}
3.2 QQ飞车
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/官网.css">
<style>
#main{background: url(./img/背景.jpg) no-repeat center 0;min-height: 0px;}
</style>
</head>
<body>
<!-- 腾讯游戏顶部通用 -->
<div id="txtongyong" class="wrapper">
<a href="#"><img src="./img/腾讯游戏.png" alt="" class="txtu1 l"></a>
<a href="#" ><img src="./img/风起云巅.png" alt="" class="txtu2 l"></a>
<a href="#" ><img src="./img/成长守护平台.png" alt="" class="txtu3 l"></a>
</div>
<!-- 大背景 -->
<div id="main">
<!-- 顶部导航 -->
<div id="nav">
<div id="xiugai" class="wrapper">
<div id="nav_logo" class="l"></div>
<ul class="l xiugai2">
<li id="nav_logo_li" class="l"><a href="#">
<h2>游戏资料</h2>
<p>GAME DATA</p>
</a>
</li>
</ul>
<ul class="l">
<li id="nav_logo_li" class="l"><a href="#">
<h2>赛事中心</h2>
<p>RACE</p>
</a>
</li>
</ul>
<ul class="l">
<li id="nav_logo_li" class="l"><a href="#">
<h2>活动中心</h2>
<p>EVETN</p>
</a>
</li>
</ul>
<ul class="l">
<li id="nav_logo_li" class="l"><a href="#">
<h2>商城专区</h2>
<p>ITEM SHOP</p>
</a>
</li>
</ul>
<ul class="l">
<li id="nav_logo_li" class="l"><a href="#">
<h2>视频直播</h2>
<p>VIDEO</p>
</a>
</li>
</ul>
<ul class="l">
<li id="nav_logo_li" class="l">
<h2>玩家互动</h2>
<p>HCOMMUNION</p>
</li>
</ul>
<ul class="l">
<li id="nav_logo_li" class="l">
<h2>客服中心</h2>
<p>SERVICE</p>
</li>
</ul>
</div>
<!-- 导航下的文字 -->
<!-- 游戏资料 -->
<div id="xiugai3" class="wrapper">
<dl class="nav_zl">
<dt></dt>
<dd><a href="#">新手指引</a></dd>
<dd><a href="#">官方漫画</a></dd>
<dd><a href="#" class="aqq">高清壁纸</a></dd>
<dd><a href="#">游戏下载</a></dd>
<dd><a href="#" class="awx">飞车手游</a></dd>
</dl>
<!-- 赛事中心 -->
<dl class="nav_ss">
<dt></dt>
<dd><a href="#">谁是车王</a></dd>
<dd><a href="#" class="awx">SSC</a></dd>
<dd><a href="#" class="aqq">全国公开赛</a></dd>
</dl>
<!-- 活动中心 -->
<dl class="nav_hd">
<dt></dt>
<dd><a href="#" class="aqq">版本专区</a></dd>
<dd><a href="#" class="awx">活动专区</a></dd>
<dd><a href="#">CDK兑换</a></dd>
</dl>
<!-- 商城专区 -->
<dl class="nav_sc">
<dt></dt>
<dd><a href="#" class="aqq">紫钻专区</a></dd>
<dd><a href="#">道聚城</a></dd>
<dd><a href="#" class="awx">点卷充值</a></dd>
</dl>
<!-- 视频直播 -->
<dl class="nav_sp">
<dt></dt>
<dd><a href="#">教学视频</a></dd>
<dd><a href="#" class="aqq">视频中心</a></dd>
</dl>
<!-- 玩家互动 -->
<dl class="nav_wj">
<dt></dt>
<dd><a href="#">官方论坛</a></dd>
<dd><a href="#">掌上飞车</a></dd>
<dd><a href="#" class="awx">官方微信</a></dd>
<dd><a href="#">官方微博</a></dd>
</dl>
<!-- 客服中心 -->
<dl class="nav_kf">
<dt></dt>
<dd><a href="#">在线客服</a></dd>
<dd><a href="#" class="awx">信用星级</a></dd>
<dd><a href="#">封号查询</a></dd>
<dd><a href="#">密码找回</a></dd>
<dd><a href="#" class="awx">家长监控</a></dd>
<dd><a href="#">防沉迷</a></dd>
<dd><a href="#">安全中心</a></dd>
<dd><a href="#">点亮皇族</a></dd>
</dl>
</div>
<!-- 查看详情 -->
<div id="ckxq" class="wrapper">
<a href="#"></a>
</div>
</div>
<!-- 下部分 -->
<div id="xz" class="wrapper">
<div id="hsxz" class="l">
<a href="#"><img src="./img/下载（黄色按钮）.png" alt=""></a>
</div>
<p class="p1"><a href="#">下载游戏</a></p>
<div id="lsxz">
<a href="#"><img src="./img/下载（蓝色）.png" alt=""></a>
</div>
<p class="p2"><a href="#">补丁下载</a></p>
<div id="zsxz">
<a href="#"><img src="./img/紫钻（紫色）.png" alt=""></a>
</div>
<p class="p3"><a href="#">紫钻专区</a></p>
<!-- 登录区域 -->
<div id="dlu" >
<div class="bj">
<!-- 用户头像 -->
<div class="yuan l"><!-- <img src="./img/用户.png" alt="" width="76px" height="76px"> --></div>
<!-- 文字区域 -->
<div class="text l">
<ul id="dlu_ul" class="l">
<li class="ul_hy l">欢迎登录</li>
<li class="l san">
<h3>魅力值</h3>
<p>0</p>
</li>
<li class="l san">
<h3>荣誉值</h3>
<p>0</p>
</li>
<li class="l san">
<h3>点卷</h3>
<p>0</p>
</li>
</ul>
</div>
</div>
<!-- 服务选项 -->
<div class="batu">
<div class="a1 l"><a href="#"></a></div>
<p class="p1">开通紫钻</p>
<div class="a2 l"><a href="#"></a></div>
<p class="p2">视频专区</p>
<div class="a3 l"><a href="#"></a></div>
<p class="p3">官方论坛</p>
<div class="a4 l"><a href="#"></a></div>
<p class="p4">在线客服</p>
<div class="a5 l"><a href="#"></a></div>
<p class="p5">开通紫钻</p>
<div class="a6 l"><a href="#"></a></div>
<p class="p6">视频专区</p>
<div class="a7 l"><a href="#"></a></div>
<p class="p7">官方论坛</p>
<div class="a8 l"><a href="#"></a></div>
<p class="p8">在线客服</p>
</div>
<!-- 两张二维码 -->
<div class="ewm">
<ul>
<li class="tu1 l"><a href="#"><img src="./img/二维码.png" alt=""></a></li>
<li class="text1 l">
<p>掌飞全面升级</p>
<h2>扫码下载</h2>
</li>
<li class="tu2 l"><a href="#"><img src="./img/二维码.png" alt=""></a></li>
<li class="text2 l">
<p>公众号送豪利</p>
<h2>扫码关注</h2>
</li>
</ul>
</div>
</div>
<!-- 右边部分 -->
<div id="right" class="r">
<div class="top l">
<ul class="l ul1">
<li class="l li1"><span>活动</span></li>
<li class="l li2" style="margin-left:22px;"><a href="#">正在进行</a></li>
<li class="l li2"><a href="#">免费福利</a></li>
<li class="l li2"><a href="#">商城特惠</a></li>
<li class="l li2"><a href="#">长期活动</a></li>
<li class="r li3"><a href="#"><span class="r">更多 +</span></a></li>
</ul>
<div class="situ r">
<a href="#" class="az"><img src="./img/正在进行1.jpg" alt=""></a>
<a href="#" class="ay"><img src="./img/正在进行2.jpg" alt=""></a>
<a href="#" class="az"><img src="./img/正在进行3.jpg" alt=""></a>
<a href="#" class="ay"><img src="./img/正在进行4.jpg" alt=""></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ol,ul{
list-style: none;
}
img{display: block;}
a{
text-decoration: none;
}
body{
font-family: Arial;
}
.clear:before,.clear:after{
content: " ";
display: block;
clear: both;
}
.l{
float: left;
}
.r{
float: right;
}
.wrapper{
width: 1500px;
margin: 0 auto;
}
/* 腾讯顶部通栏 */
#txtongyong{
overflow: hidden;
height: 50px;
}
#txtongyong a .txtu1{
margin-left: 250px;
}
#txtongyong a .txtu2{
margin-left: 30px;
}
#txtongyong a .txtu3{
margin-left: 320px;
margin-top: 14px;
}
/* 顶部导航 */
#main #nav{
position: relative;
width: 100%;
min-height: 340px;
/* padding-left:310px ; */
background: url(../img/nav.png) repeat-x;
overflow: hidden;
}
#main #nav #nav_logo{
margin-top: 13px;
width: 102px;
height: 75px;
background: url(../img/logo.png);
}
#main #nav .xiugai2{
margin-left:35px ;
}
#main #nav #nav_logo_li{
margin-top: 32px;
margin-left: 90px;
}
#main #nav #nav_logo_li h2{
font-size: 20px;
color: white;
font-weight: 0;
font-family: '宋体';
}
#main #nav #nav_logo_li p{
font-size: 8px;
width: 80px;
text-align: center;
color: #839481;
}
/* 导航下的文字 */
#main #nav #xiugai3{
position: relative;
}
#main #nav dl{
position: absolute;
width: 84px;
}
#main #nav dl a{
position: relative;
color: #f1ece3;
}
#main #nav dl a:hover{
text-decoration: underline;
color: rgb(255, 64, 0);
}
#main #nav dl .aqq:after{
position: absolute;right: -18px;top: -2px;
content: "";
display: block;
width: 16px;
height: 16px;
background: url(../img/雪碧图.png) no-repeat -282px -73px;
}
#main #nav dd .awx:after{
position: absolute;right: -18px;top: -2px;
content: "";
display: block;
width: 16px;
height: 16px;
background: url(../img/雪碧图.png) no-repeat -261px -73px;
}
#main #nav dt{
height: 90px;
}
#main #nav dd{
line-height: 30px;
text-align: center;
font-size: 14px;
}
#main #nav .nav_zl{
left: 222px;
}
#main #nav .nav_ss{
left: 400px;
}
#main #nav .nav_hd{
left: 575px;
}
#main #nav .nav_sc{
left: 750px;
}
#main #nav .nav_sp{
left: 929px;
}
#main #nav .nav_wj{
left: 1105px;
}
#main #nav .nav_kf{
left: 1280px;
}
/* 查看详情 */
#ckxq{
height: 160px;
/* background-color: pink; */
margin-top: 364px;
}
#ckxq a{
display: block;
width: 100%;
height: 100%;
}
/* 下载区 */
/* #main2{
overflow: hidden;
} */
#xz{
overflow: hidden;
min-height: 500px;
/* background-color: pink; */
position: relative;
}
#xz #hsxz{
margin-bottom: 10px;
}
#xz .p1{
position: absolute;left: 50px;top: 40px;
font-size: 50px;
font-weight: bold;
}
#xz .p1 a{
color: #8d5112;
}
#xz #lsxz img{
display: block;
position: absolute;left: 316px;
}
#xz .p2{
position: absolute;left: 333px;top: 28px;
font-size: 18px;
font-weight: bold;
letter-spacing: 1px;
}
#xz .p2 a{
color: white;
}
#xz #zsxz img{
display: block;
position: absolute;left: 316px;top: 80px;
}
#xz .p3{
position: absolute;left: 333px;top: 105px;
font-size: 18px;
font-weight: bold;
letter-spacing: 1px;
}
#xz .p3 a{
color: white;
}
/* 登录区域 */
#xz #dlu{
margin-top: 160px;
width: 431px;
min-height: 391px;
}
#xz #dlu .bj{
overflow: hidden;
width: 431px;
height: 127px;
background: url(../img/登录背景框框.png) no-repeat;
}
#xz #dlu .bj .yuan{
margin-top: 22px;
margin-left: 30px;
width: 76px;
height: 76px;
border-radius: 50px;
/* background: url(../img/用户.png); */
background-color: white;
}
#xz #dlu .text #dlu_ul{
text-align: center;
}
#xz #dlu .text .ul_hy{
color: rgb(18, 177, 177);
font-size: 20px;
margin-left: 12px;
line-height: 127px;
}
#xz #dlu .text .san{
margin-left: 24px;
margin-top: 22px;
line-height: 40px;
color: #839481;
font-weight: 0;
font-size: 15px;
}
#xz #dlu .batu{
position: relative;
overflow: hidden;
width: 431px;
height: 163px;
/* background-color: pink; */
}
#xz #dlu .batu a{
display: block;
width: 100%;
height: 100%;
text-indent: -9999px;
overflow: hidden;
}
#xz #dlu .batu .a1{
margin-top: 25px;
margin-left: 64px;
width: 34px;
height: 24px;
background:url(../img/1.png) no-repeat -18px -3px ;
}
#xz #dlu .batu .a2{
margin-top: 25px;
margin-left: 64px;
width: 26px;
height: 21px;
background:url(../img/2.png) no-repeat -19px -5px ;
}
#xz #dlu .batu .a3{
margin-top: 25px;
margin-left: 64px;
width: 26px;
height: 24px;
background:url(../img/3.png) no-repeat -20px -3px ;
}
#xz #dlu .batu .a4{
margin-top: 25px;
margin-left: 64px;
width: 25px;
height: 25px;
background:url(../img/4.png) no-repeat -20px -3px ;
}
#xz #dlu .batu .a5{
margin-top: 50px;
margin-left: 64px;
width: 34px;
height: 24px;
background:url(../img/1.png) no-repeat -18px -3px ;
}
#xz #dlu .batu .a6{
margin-top: 50px;
margin-left: 64px;
width: 26px;
height: 21px;
background:url(../img/2.png) no-repeat -19px -5px ;
}
#xz #dlu .batu .a7{
margin-top: 50px;
margin-left: 64px;
width: 26px;
height: 24px;
background:url(../img/3.png) no-repeat -20px -3px ;
}
#xz #dlu .batu .a8{
margin-top: 50px;
margin-left: 64px;
width: 25px;
height: 25px;
background:url(../img/4.png) no-repeat -20px -3px ;
}
#xz #dlu .batu .p1{
position: absolute;left: 52px;top: 60px;
width: 60px;
line-height: 20px;
font-size: 14px;
}
#xz #dlu .batu .p2{
position: absolute;left: 150px;top: 60px;
width: 60px;
line-height: 20px;
font-size: 14px;
}
#xz #dlu .batu .p3{
position: absolute;left: 239px;top: 60px;
width: 60px;
line-height: 20px;
font-size: 14px;
}
#xz #dlu .batu .p4{
position: absolute;left: 328px;top: 60px;
width: 60px;
line-height: 20px;
font-size: 14px;
}
#xz #dlu .batu .p5{
position: absolute;left: 52px;top: 135px;
width: 60px;
line-height: 20px;
font-size: 14px;
}
#xz #dlu .batu .p6{
position: absolute;left: 150px;top: 135px;
width: 60px;
line-height: 20px;
font-size: 14px;
}
#xz #dlu .batu .p7{
position: absolute;left: 239px;top: 135px;
width: 60px;
line-height: 20px;
font-size: 14px;
}
#xz #dlu .batu .p8{
position: absolute;left: 328px;top: 135px;
width: 60px;
line-height: 20px;
font-size: 14px;
}
#xz #dlu .ewm{
width: 431px;
height: 130px;
background-color: #e8eff2;
}
#xz #dlu .ewm .tu1{
margin-top: 23px;
margin-left:10px;
}
#xz #dlu .ewm .text1{
margin-top: 40px;margin-left: 10px;
}
#xz #dlu .ewm .text1 p{
font-size: 16px;
color: #3a94dd;
}
#xz #dlu .ewm .text1 h2{
font-size: 24px;
color: #9da7c5;
}
#xz #dlu .ewm .tu2{
margin-top: 23px;
margin-left:12px;
}
#xz #dlu .ewm .text2{
margin-top: 40px;margin-left: 10px;
}
#xz #dlu .ewm .text2 p{
font-size: 16px;
color: #3a94dd;
}
#xz #dlu .ewm .text2 h2{
font-size: 24px;
color: #9da7c5;
}
/* 右边区域 */
#xz #right{
position: absolute;right: 0;top: 0;
width: 1050px;
height: 581px;
/* background-color: pink; */
overflow: hidden;
}
#xz #right .ul1{
width: 1050px;
margin-bottom: 10px;
}
#xz #right .li1{
margin-left: 30px;
height: 55px;
border-left:3px solid #e98e1f ;
font-size: 30px;
line-height: 55px;
}
#xz #right .li1 span{
margin-left: 10px;
}
#xz #right .li2{
width: 148px;
height: 55px;
font-size: 20px;
/* margin-left: 50px; */
line-height: 55px;
text-align: center;
border-bottom:2px solid #3a94dd;
}
#xz #right .li2 a:hover{
color: #3a94dd;
font-weight: bold;
}
#xz #right .li2 a{
color: gray;
}
#xz #right .li3{
width: 328px;
height: 55px;
font: 16px;
line-height: 55px;
margin-right: 5px;
border-bottom:2px solid #3a94dd;
}
#xz #right .li3 span{
color: gray;
}
#xz #right .situ a{
float: left;
display: block;
margin-bottom: 10px;
}
#xz #right .situ .az{
margin-left: 135px;
}
#xz #right .situ .ay{
margin-left: 15px;
}
#xz #right .situ a img{
}