Web前端从入门到入土
拨云见雾
文章目录
- 拨云见雾
-
-
- 一、什么是HTML,CSS？
- 二、宇宙第一编辑器VS Code
-
- 2.1下载
- 2.2VS Code快捷键
- 三、Chrome浏览器
- 四、深入了解网站开发
- 五、Web三大核心技术
- 六、HTML基础结构与属性
-
- 6.1 结构
- 6.2标签的属性
- 七、HTML初始代码
-
- 7.1如何快速创建html初始代码？
- 7.2初始代码
- 八、HTML中的注释
-
- 8.1 写法
- 8.2快捷键
- 8.3意义
- 九、 HTML语义化
-
- 9.1好处
- 十、标题及段落
- 十一、文本修饰标签
-
- 11.1 标签
- 十二、图片标签与图片属性
- 十三、引入文件的地址路径
- 十四、链接跳转
- 十五、跳转锚点
- 十六、特殊符号
- 十七、列表标签
-
- 17.1无序列表
- 17.2有序列表
- 17.3定义列表
- 十八、嵌套列表
- 十九、表格标签
- 二十、表格属性
- 二十一、表单标签
- 二十二、表格表单组合实例
- 二十三、div和span
- 二十四、CSS基本语法
- 二十五、内联样式和内部样式
- 二十六、外部样式及两种写法
- 二十七、 CSS中颜色表示法
- 二十八、CSS背景样式
-
- 28.1样式
- 二十九、背景实现视觉差效果
- 三十、CSS 边框样式
-
- 30.1边框样式
- 30.2边框实现三角形
- 三十一、CSS文字样式
-
- 31.1字体样式
- 31.2字体大小
- 三十二、CSS段落样式
-
- 32.1样式
- 32.2文本与段落的综合练习
- 三十三、CSS复合样式
- 三十三、CSS选择器
-
- 33.1ID选择器
- 33.2class选择器
- 33.3标签选择器（TAG选择器）
- 33.4群组选择器（分组选择器）
- 33.5通配选择器
- 33.6层次选择器
- 33.7 属性选择器
- 33.8伪类选择器
- 33.9结构性选择器
- 三十四、CSS样式的继承
- 三十五、CSS优先级
- 三十六、css盒子模型
-
- 36.2CSS盒子模型的问题
- 三十七、标签的分类
-
- 37.1按类型
- 37.2按内容
- 37.3 按显示
- 37.4显示框类型
- 三十八、标签的嵌套规范
- 三十九、溢出隐藏
- 四十、透明度与手势
- 四十一、最大、最小宽高
- 四十二、css默认样式
- 四十三、float浮动
- 四十四、CSC位置
- 四十五、CSS精灵
- 四十六、css圆角
- 四十七、pc端的布局
-
一、什么是HTML,CSS？
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。HTML
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS
它们是两种编程语言，一般情况下需要配合使用，是作为网站开发的初始语言。一个网站是由多个网页组成的每一个网页都是一个.html文件。
二、宇宙第一编辑器VS Code
2.1下载
- Visual Studio Code VS Code来自微软，是一个开源的，基于Electron的轻量代码编辑器。
2.2VS Code快捷键
-
ctrl +a：全选
-
shift + end ：从头选中一行
-
shift + home ：从尾部选中一行
-
shift + alt + ⬇️：快速复制一行
-
tab：向后缩进
-
tab + shift ： 向前缩进
-
ctrl + c :复制
-
ctrl + s :保存
-
ctrl + x :剪切
-
ctrl+v：粘贴
-
ctrl + z：撤销
-
ctrl + y : 前进
-
shift + ⬆️或⬇️ ：快速移动一行
-
alt + 鼠标左键 ：多光标
-
ctrl + d :选择相同元素的下一个
-
设置：文件->首选项->设置（大小、是否换行 word wrap)
三、Chrome浏览器
-
下载地址goole chrome
-
百度统计所占份额百度
-
市场常见五大浏览器：IE浏览器（Internet explorer）、火狐浏览器（Firefox）、谷歌浏览器 （Chrome）、 苹果浏览器 （Safari）、欧朋浏览器 （Opera）
四、深入了解网站开发
-
UI设计师：设计稿
-
Web前端开发工程师（H5开发）：
-
设计稿->代码 数据库里的数据->显示到页面 -
Web后端开发设计师 ：负责后台储存数据
五、Web三大核心技术
-
HTML：结构
-
CSS：样式
-
JavaScript :行为
六、HTML基础结构与属性
超文本标记语言（Hyper Text Markup Language)，标准通用标记语言下的一个应用，是网页制作必备的编程语言。
6.1 结构
- 超文本：文本内容+非文本内容（图片、视频、音频等）
- 语言 ：编程语言
- 标记 ：格式：<单词> 标记又叫标签
分类：单标签 - 双标签
- 创建标签的快捷键 ：单词+ tab键-> <单词>
- 标签可以上下排列，也可以组合嵌套。
6.2标签的属性
- 来修饰标签的，设置当前标签的一些功能。
- <标签 属性=‘‘值’’&emsp属性2=“值2”>
- HTML常见标签：
七、HTML初始代码
每一个html文件都需要添加初始代码，初始代码就是无论你写什么样的网页，这些代码都是要有的，这就是初始代码。
7.1如何快速创建html初始代码？
! + tab键
7.2初始代码
DOCTYPE html> 文档声明：告诉浏览器这是一个html文件
<html lang="en">html 文件的最外层标签：包裹着所有html标签代码，lang="en"表示是一个英文网站，lang="zh-CN"表示是一个中文网站
<head>
<meta charest="UTF-8"> 元信息：是编写网页中的一些辅助信息，"UTF-8"国际编码，让网页不出现乱码的情况
<title>Documenttitle> 设置网页的标题
head>
<body>
显示网页内容的区域
body>
html>
八、HTML中的注释
8.1 写法
在浏览器中看不到注释的内容，只能在代码中看到注释的内容。
8.2快捷键
- 快速删除注释：shift + alt + a
- 快速添加注释：ctrl + /
8.3意义
- 1.把暂时不用的代码注释起来，方便以后使用。
- 2.对开发人员进行提示。
九、 HTML语义化
所谓HTML语义化指的是，根据网页中内容的结构，选择适合自己的HTML标签进行编写。
9.1好处
-
1.在没有CSS的情况下，页面也能呈现出很好的内容结构.
-
2.有利于SEO,让搜索引擎爬虫更好的理解网页。
-
3.方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
-
4.便于团队开发和维护。
十、标题及段落
- h标签，p标签
- 标题 双标签
-------从上至下逐级递减在一个网页中h1标题最重要，并且一个.html文件中只能出现一次h1标签，h5,h6标签在网页中不经常使用 - 段落 双标签
十一、文本修饰标签
11.1 标签
-
强调 ->双标签 ：
-
区别：1.写法和展示效果是有区别的，strong是对文本加粗，em是对文本斜体
-
2.strong的强调性更强，em强调性更弱
-
下标：
-
上标：
-
删除文本：
-
插入文本：
-
注：一般情况下，删除文本都是和插入文本配合使用。
十二、图片标签与图片属性
- img -> 单标签
- src :引入图片的地址。
- alt :当图片出现问题的时候，可以显示一段友好的提示文字。
- title :提示信息
- width 、height :显示图片的大小（可要可不要，加上使空间固定，使段落之间位置不会变化，更美观）
十三、引入文件的地址路径
- 1.相对路径 ：. 路径中表示当前路径
- . .在路径中表示上一级路径
- 例：
注：初学者推荐使用相对路径更容易移植代码，找到相关文件 - 2.绝对路径：能够找到文件所在的位置
例： - 注：网络地址只能写斜线/不能写反斜线\。
十四、链接跳转
十五、跳转锚点
-
在页内进行跳转
-
实现一： #号
id属性 -
实现二： #号
name属性
注：name属性加给的是a标签
十六、特殊符号
编写一些文本时经常会遇到无法输入的字符，如®(注册商标）、©(版权符) 等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码。
- 格式：& + 字符
- 作用：解决冲突（左右尖括号添加多个空格的实现）
十七、列表标签
17.1无序列表
- 、
- 注：ul和li必须是组合出现的，要符合嵌套规范，它们中间不允许添加其他标签
- type属性：改变前面标记的样式（一般都是用CSS去控制）
17.2有序列表
- 、
- 注：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表
- type属性：改变前面标记样式（一般都是用CSS去控制）
17.3定义列表
:专业术语或名词:对名词进行解释，描述
十八、嵌套列表
- 列表之间可以相互嵌套，形成多层级的列表
<ul>
<li>
辽宁省
<ul>
<li>沈阳li>
<li>大连li>
<li>丹东li>
ul>
li>
<li>
河南省
<ul>
<li>郑州li>
<li>开封li>
<li>洛阳li>
ul>
li>
ul>
十九、表格标签
- :表格的最外层容器
- :定义表格行
- :定义表头
- :定义表格单元
- :定义表格标题
- 语义化标签：tHead、tBody、tFood
- 注：在一个table中，tBody是可以出现多次的，但tHead、tFoot只能出现一次
<table>
<caption>天气预报caption>
<thead>
<tr>
<th>日期th>
<th>天气情况th>
<th>出行情况th>
tr>
thead>
<tr>
<td>2022年10月22日td>
<td>天气晴朗，适合出行td>
tr>
<tr>
<td>2022年10月23日td>
<td>阴，不适合出行td>
tr>
table>
二十、表格属性
- border：表格边框
- cellpadding：单元格内的空间
- cellspacing：单元格之间的空间
- rowspan:合并行
- colspan:合并列
- align:左右对齐方式（left center right）
- valign:上下对齐方式 （top middle bottom)
二十一、表单标签
- 1.表单input标签
<form>:表单的最外层容器
<input>:标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如：输入框、密码框、复选框等（单标签）
- 2.表单相关标签
<textarea>:多行文本框
<select><option>:下拉菜单
<label>:辅助表单
<form action="http://www.baidu.com">
<h2>输入框:h2>
<input type="text">
<h2>密码框:h2>
<input type="password">
<h2>复选框h2>
<input type="checkbox">苹果
<input type="checkbox">香蕉
<input type="checkbox">葡萄
<h2>单选框h2>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<h2>上传文件h2>
<input type="file">
<h2>提交按钮和重置按钮h2>
<input type="submit">
<input type="reset">
form>
二十二、表格表单组合实例
- 表格表单之间可以相互组合形成数据展示效果
- 注意要符合嵌套规则
<form action="">
<table border="1" cellpadding="30">
<tbody>
<tr align="center">
<td rowspan="4">总体信息td>
<td colspan="2">用户注册td>
tr>
<tr align="right">
<td>用户名td>
<td><input type="text" placeholder="请输入用户名">td>
tr>
<tr align="right">
<td>密码：td>
<td>td>
tr>
<tr align="center">
<td colspan="2">
<input type="submit">
<input type="reset">
td>
tr>
tbody>
table>
form>
二十三、div和span
- div(块）：
- span (内联) ：用来修饰文字的，
<div>
<h2><a href="#">扬州 千锋教育官网<span style="color: greenyellow">htmlspan>-学员们信赖的IT培训机构入口a>h2>
<a href="#"><img src="https://ms.bdimg.com/pacific/0/pic/-2043055832_-580489177.jpg?x=0&y=0&h=150&w=242&vh=150.00&vw=242.00&oh=150.00&ow=242.00" alt="">a>
<p><千锋教育官网 产研学相结合的14大IT课程助推新基建技术驱动新动能千锋教育官网 千锋教育整合互联网核心技术,坚持全程面授的教学模式>p>
<a href="#">http://www.mobiletrain.org/page/it/?nanjing=mopinpaibdtg=pinpaipc=1808163666&jzl_kwd=140505814404&jzl_ctv=51717774389&jzl_mtt=1&jzl_adt=cl1&jzl_ch=11&jzl_act=2770118&jzl_cpg=113048638&jzl_adp=254823117&jzl_sty=50&jzl_dv=1a>
div>
二十四、CSS基本语法
- 格式：选择器{属性1:值1；属性2: 值2}
- 单位：px -> 像素（pixel)、 % -> 百分比
- 基本样式 ：weidth（宽）、background-color(背景色）、height(高）、
- CSS注释：
/*CSS注释的内容*/
<style>
div{width: 25%;height: 100px;background-color: aquamarine;}
span{ background-color: blue;}
style>
<div>这是一个块div>
<div>又是一个块div>
<span>这是一个内联span>
二十五、内联样式和内部样式
- 内联（行内行间）样式：在HTML标签上加上style属性来实现的
- 内部样式：在
- 3.fixed固定定位
使元素完全脱离文档流
使内联元素支持宽高（让内联具备块的特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
<style> body { height: 2000px;} div { position: fixed;bottom: 0; right: 0;} style> <div>这是一个块div>- sticky粘性定位
在指定的位置，进行粘性操作。
<style> body{height: 2000px;} div{ background: red;position: sticky;top: 0;} style> <p>aaaaaaap> <p>aaaaaaap> <p>aaaaaaap> <div>这是一个块div> <p>bbbbbbbp> <p>bbbbbbbp>- z-index定位层级
<style> #parent{ width: 100px;width: 100px;border: 1px black solid;position: absolute;z-index: -2;} #box1{ width: 100px;height: 100px;background: red;position: absolute;z-index: 0;} #box2{ width: 100px; height: 100px;background: blue;position: absolute;left: 50px;top: 50px;z-index: -1;} style> <div id="parent">div> <div id="box1">div> <div id="box2">div>四十五、CSS精灵
特性：css雪碧又叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载
好处：
可以减少图片的质量，网页的图片加载速度快
减少图片的请求次数，加快网页的打开<style> #box1{ width: 20px;height: 21px;background: url(./sprite_icon.png ) no-repeat left --596px;} #box2{ width: 300px;height: 50px;border: 1px black solid;line-height: 50px;padding-left: 30px; background: url(./sprite_icon.png) no-repeat right ;} style> <body> <div id="box1">div> <div id="box2">产品中心div> body>四十六、css圆角
<style> #box1{ width: 200px;height: 200px;background: red ; border-radius: 100px;} #box2{ width: 300px;height: 300px;background: red;border-radius: 10px 20px 30px 40px;} #box3{ width: 300px;height: 150px;background: red;border-radius: 150px 150px 0 0;} style> <div id="box1">div> <div id="box2">div> <div id="box3">div>四十七、pc端的布局
通栏：自适应浏览器的宽度 版心：固定一个宽度，并且让容器居中 common.css
Document*{ margin: 0;padding: 0;} ul,ol{ list-style: none;} img{ display: block;} a{ text-decoration: none;color: #646464;} h1,h2,h3{ font-size: 16px;} body{ font-family: Arial;} .l{ float: left;} .r{ float: right;} .clear:after{ content: "";display: block;clear: both;} .container{width: 1080px;margin: 0 auto;position: relative;} .container-fluid{ width: 100%;} #head{height: 81px;} #head .head_logo{ width: 164px;height: 44px;margin-top: 19px;float: left;} #head .head_menu{font-size: 14px;line-height: 81px;} #head .head_menu li{ float: left;margin-left: 58px;} #foot{ background: #66c5b4;} #foot .container{height: 54px;line-height: 54px;font-size: 12px;color: white;} #foot div a{color: white;margin: 0 10px;} #area_title{margin-top: 60px;min-height: 407px;text-align: center;} #area_title h2{ height: 20px; line-height: 20px;font-size: 20px;color: #363636;background: url(../images/title_bg.png);} #area_title p{color: #9f9f9f;font-size: 14px;line-height: 34px;float: center;}#service{ overflow: hidden;min-height: 407px ;} #service .service_list{ text-align: center; margin-top: -350px;} #service .service_list li{ float: left;width: 250px;margin: 0 10px;} #service .service_list div{ width: 102px;height: 102px;margin: 0 auto;} #service .service_list li:nth-of-type(1) div{ background-image: url(./images/web1.png);} #service .service_list li:nth-of-type(2) div{ background-image: url(./images/mail1.png);} #service .service_list li:nth-of-type(3) div{ background-image: url(./images/graphic1.png);} #service .service_list li:nth-of-type(4) div{ background-image: url(./images/e-bussiness1.png);} #service .service_list h3{ font-size: 18px;color: #434343; line-height: 36px;margin-top: 25px;} #service .service_list p{ font-size: 14px; color: #6d6d6d; line-height: 22px;} #case{background: #f8f8f8;} #case .container{ min-height: 460px; overflow: hidden;} #case .area_title{margin-top: 55px;} #case .area_title h2{ color: #66c5b4;} #case .case_list{margin-top: 28px ;} #case .case_list li{float: left;width: 340px;margin: 0 10px;} #case .case_btn{width: 176px;height: 37px;background: #66c5b4;margin: 0 auto;border-radius: 25px ; line-height: 37px;text-align: center;color: white;font-size: 14px;margin-top: 36px;} #case .case_btn a{display: block;width: 100%;height: 100%;color: white;} #news{ min-height: 450px;overflow: hidden;} #news .area_title{ margin-top: 65px;} #news dl{ margin-top: 48px;} #news dt{ width: 234px;} #news dd{ width: 846px;} #news .news_list{ width: 100%;} #news .news_list li{ width: 50%;float: left;margin-bottom: 48px; } #news .news_date{ width: 71px;height: 70px; border-right: 1px solid #dcdcdc; } #news .news_date i{ color: #66c5b4;font-size: 39px; display: block;} #news .news_date span{ color: #999999;font-size: 20px;line-height: 36px;font-weight: bolder;} #news .news_text{width: 310px;margin-left: 20px; } #news .news_text h3{ font-size: 14px;} #news .news_text h3 a{ color: #3f3f3f;} #news .news_text p{color: #a4a4a4;font-size: 12px;line-height: 21px;margin-top: 17px;} style> <body> <div id="head" class="container"> <div class="head_logo 1"> <a href="#"> <img src="./images/logo.png" alt="博文尚美" title="博文尚美"> a> div> <ul class="head_menu r"> <li> <a href="#">HOMEa> li> <li> <a href="#">ABOUTa> li> <li> <a href="#">PROTFOLILOa> li> <li> <a href="#">SERVICEa> li> <li> <a href="#">NEWSa> li> <li> <a href="#">CONTACTa> li> ul> div> <div id="banner" class="contaner-fluid"> <ul class="banner_list" > <li class="active" style="background-image:url(./images/banner.png)"> <a href="#">a> li> <li style="background-image:url(./images/banner.png) "> <a href="#">a> li> <li style="background-image:url(./images/banner.png) "> <a href="#">a> li> <li style="background-image:url(./images/banner.png) "> <a href="#">a> li> ul> <ol class="banner_btn"> <li class="active">li> <li>li> <li>li> <li>li> ol> div> <div id="service" class="container"> <div class="area_title"> <h2>服务范围h2> <p>OUR SERVICE p> div> div> <ul class="serve_list"> <li> <div> <a href=""> <img src="./images/web1.png" alt=""> a> div> <h3>1.web designh3> <p> 企业品牌网页设计/手机网站制作 <br> 动画网站创意制作 p> li> <li> <div> <a href=""> <img src="./images/graphic1.png" alt=""> a> div> <h3>2.graphic designh3> <p> 标志logo设计/产品宣传册设计 <br> 动画网站创意制作 p> li> <li> <div> <a href=""> <img src="./images/e-bussiness1.png" alt=""> a> div> <h3>3.e-business planh3> <p> 淘宝/天猫装修设计及运营推广 <br> 企业微信、微信营销 p> li> <li> <div> <a href=""> <img src="./images/mail1.png" alt=""> a> div> <h3>4.mailboxagentsh3> <p> 腾讯/网易企业邮箱品牌代理 <br> 个性化邮箱定制开发 p> li> ul> <div id="case" class="container-fluid"> <div class="container"> <div class="area_title"> <h2>{ 客户案例 }h2><img src="./images/title_bg.png" alt=""> <p>with the best professional technology,to design the best innovative web site p> div> <ul class="case_list clear"> <li> <a href="#"><img src="./images/20141121095216750.png" alt="">a> li> <li> <a href="#"><img src="./images/20141121095528549.png" alt="">a> li> <li> <a href="#"><img src="./images/20141121105856226.png" alt="">a> li> ul> <div class="case_btn"> <a href="#">VIEW MOREa> div> div> div> <div id="news" class="container"> <div class="area_title"> <h2>最新资讯h2> <p>THE LATES NEWSp> div> <dt> <img src="./images/xs1.png" alt=""> dt> <dd class="1"> <ul class="news_list"> <li> <div class="news_date 1"> <i>09i> <span>Janspan> div> <div class="news_text 1"> <h3><a href="#">网站排名进入进入前三的技巧说明a>h3> <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎 首页，更不用说进首页前三了。那么网站优...p> div> li> <li> <div class="news_date 1"> <i>09i> <span>Janspan> div> <div class="news_text 1"> <h3><a href="#">网站排名进入进入前三的技巧说明a>h3> <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎 首页，更不用说进首页前三了。那么网站优...p> div> li> <li> <div class="news_date 1"> <i>09i> <span>Janspan> div> <div class="news_text 1"> <h3><a href="#">网站排名进入进入前三的技巧说明a>h3> <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎 首页，更不用说进首页前三了。那么网站优...p> div> li> <li> <div class="news_date 1"> <i>09i> <span>Janspan> div> <div class="news_text 1"> <h3><a href="#">网站排名进入进入前三的技巧说明a>h3> <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎 首页，更不用说进首页前三了。那么网站优...p> div> li> ul> dd> div> <div id="foot" class="container-fluid"> <div class="container"> <p class="1">Copyright 2006-2014 Bowenshangmei Culture A11 Rights Reservedp> <div class="r"> <a href="#">HOMEa> ｜<a href="#"> ABOUTa> | <a href="#">Portfolioa> <a href="#"> Contacta> div> div> div> body> html>
PC端游戏网页
*{ margin: 0;padding: 0;} ul,ol{ list-style: none;} img{display: block;} a{ text-decoration: none; color: #464646;} h1,h2,h3{ font-size: 16px;} body{ font-family: Arial,'宋体';} .l{ float: left;} .r{ float: right;} .clear:after{content: "";display: block;clear: both;} .container{width: 980px;margin: 0 auto;position: relative;} .container-fluid{ width: 100%;} #head{ background-color: aliceblue;} #head .container{height: 41px; } #head .head_logo{float: left; ;width: 220px;height: 41px;background: url(../未命名文件夹/qq飞车/图片/cf1136d4e1cad7caa9a5353815929c6a.jpg) no-repeat 0 -38px;} #head .head_logo a{display: block;width: 100%; height: 100%;text-indent: -9999px;overflow: hidden;} #head .head_ad { margin-left: 8px;float: right;} #head .head_menu{font-size: 12px;} #head .head_menu div{ height: 18px;margin-top: 13px;background: url() no-repeat;} #head .head_menu_czsh{ margin-right: 30px;padding-left: 20px;background-position: left --92px;} #head .head_menu_top{ padding-right: 20px;background-position: right -89px;}DOCTYPE html> <html lang="en"> <head> <meta charest="UTF-8"> <meta name="Viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> <link rel="stylesheet" href="./common.css"> <style> #main{ background: url(./qq飞车/图片/cf1136d4e1cad7caa9a5353815929c6a.jpg) no-repeat center 0;} #nav{ height: 236px;background: url() repeat-x,url() no-repeat center 0;overflow: hidden;position: relative;} #nav .nav_logo{width: 138px;height: 112px;margin: 15px auto;} #nav dl{position: absolute;top: 0;} #nav dt{ height: 66px;} #nav dt a{ width: 100%;height: 100%;display: block;text-indent: -9999px;overflow: hidden;} #nav dd{ line-height: 27px;font-size: 12px;text-align: center;} #nav dd a{color: white; } #nav dd a:hover{ color: red;text-decoration: underline;} #nav dd a.hot:after{content: "";display: block;width: 12px;height: 12px;background: url() no-repeat 0 -12px;position: absolute;right: -15px;top: 0;} #nav dd a.new:after{content: "";display: block;width: 12px;height: 12px;background: url() no-repeat 0 0;position: absolute;right: -15px;top: 0;} #nav .nav_index{ width: 65px;left: 0;} #nav .nav_z1{width: 69px;left: 98px;} #nav .nav_ss{ width: 74px;left: 203px;} #nav .nav_hd{width: 68px; left: 325px;} #link{height: 175px;} #link a{width: 463px; height: 100%;display: block;margin: 0 auto;} #banner{height: 276px;background: url() no-repeat;margin-top: 20px;} #banner .banner_left{width: 240px;height: 310px;background: url() no-repeat;margin: -20px 0 0 7px;} #banner .banner_download p{width: 91px;height: 25px;background: url() no-repeat;margin: 0 auto;text-indent: -9999px;overflow: hidden;} #banner .banner_download p:first-child{background-position: -253px 0;margin-top: 44px;} #banner .banner_download p:last-child{background-position: -253px -25px;} #banner .banner_download:hover p:first-child{animation: 1s upMove;} @keyframes upMove{ 0%{transform: translateY(-40px);opacity: 0;} 100%{transform: translateY(0);opacity: 1;} } #banner .banner_download:hover p:last-child{animation: 1s downMove;} @keyframes downMove{ 0%{transform: translateY(40px);opacity: 0;} 100%{transform: translateY(0);opacity: 1;} } #banner .banner_user div{width:56px;height:56px;border-radius: 50%;margin: 80px auto 0 auto;border: 4px #283257 solid;overflow: hidden;} #banner .banner_user img{width: 100%;height: 100%;} #banner .banner_user p{text-align: center;font-size: 12px;color: white;margin-top: 25px;} #banner .banner_user a{color: #34f1d0;} #banner .banner_list{width: 497px;height: 253px;overflow: hidden;margin: 13px 0 0 4px;position: relative;} #banner .banner_list_ul{width: 2000px;} #banner .banner_list_ul li{width: 497px;height: 253px;float: left;} #banner .banner_bottomline{width:100%;height: 37px;background: rgba(0,0,0,.5);border-top: 1px #514b55 solid;position: absolute;bottom: 0;left: 0;} #banner .banner_bottomline_ul{text-align: center;margin-top: 11px;} #banner .banner_bottomline_ul li{display: inline-block;width: 15px;height: 15px;background: url() no-repeat -603px -299px;cursor: pointer;} #banner .banner_bottomline_ul li.active{background-position: -581px -299px;} #banner .banner_bottomline_leftbtn{width: 12px;height: 22px;position: absolute;left: 5px;top: 5px;background: url() no-repeat -554px -296px;cursor: pointer;} #banner .banner_bottomline_rightbtn{width: 12px;height: 22px;position: absolute;right: 5px;top: 5px;background: url() no-repeat -554px -296px;cursor: pointer;} #banner .banner_bottomline_leftbtn:hover{background-position: -542px -325px;} #banner .banner_bottomline_rightbtn:hover{background-position: -554px -325px;} #banner .banner_list_lt{left: -2px;top: -4px;background-position: -621px -299px;} #banner .banner_list_rt{right: -2px;top: -4px;background-position: -634px -299px;} #banner .banner_list_rb{right: -2px;top: -5px;background-position: -634px -312px;} #banner .banner_list_lb{left: -2px;top: -4px;background-position: -621px -312px;} #banner .banner_right{width: 209px;height: 255px;position: relative;margin: 12px 0 0 12px;} #banner .banner_right_lt,#banner .banner_right_rt,#banner .banner_right_rb,#banner .banner_right_lb{width: 15px;height: 15px;background: url() no-repeat;position: absolute;} #banner .banner_right_lt{left:-4px;top: -4px;background-position: -681px -298px;} #banner .banner_right_rt{right:-4px;top: -4px;background-position: -696313px -298px;} #banner .banner_right_rb{right:-4px;bottom: -6696313px;background-position: -696313px -313px;} #banner .banner_right_lb{left:-4px;bottom: -6696313px;background-position: -681px -313px} style> head> <body> <div id="head" class="container-fluld"> <div class="container"> <div class="head_logo1"> <a href="# ">腾讯游戏a> div> <div class="head_ad 1">div> <a href="#"><img src="./qq飞车/图片/cf1136d4e1cad7caa9a5353815929c6a.jpg" alt="" height="30px" width="300px"> a> <div class="head_menu r"> <div class="head_menu_czsh"> <a href="#">成长守护平台a> div> <div class="head_menu_top 1"> <a href="#">腾讯游戏排行榜a> div> div> div> div> <div id="main" class="container-fluid"> <div id=" nav" class="container-fluid"> <div class="container"> <div class="nav_logo"> <a href="#"> <img src="" alt="QQ飞车" title=" QQ飞车"> a> div> <dl class="nav_index"> <dt> <a href="#">首页a> dt> dl> <dl class="nav_z1"> <dt> <a href="#">新手指南a> <a href="#">新手指南a> <a href="#">新手指南a> <a href="#">新手指南a> <a href="#">新手指南a> dt> dl> <dl class="nav_ss"> <dt> <dd><a href="#">新手指南a>dd> <dd><a href="#">新手指南a>dd> <dd> <a href="#">新手指南a>dd> <dd> <a href="#">新手指南a>dd> <dd>dd><a href="#">新手指南a>dd> dt> dl> <dl class="nav_hd"> <dt> <dd><a href="#">新手指南a>dd> <dd><a class="hot" href="#">新手指南a>dd> <dd> <a class="new" href="#">新手指南a>dd> <dd> <a href="#">新手指南a>dd> <dd> <a href="#">新手指南a>dd> dt> dl> <dl class="nav_zx"> <dt> <dd> <a href="#">新手指南a>dd> <dd> <a href="#">新手指南a>dd> <dd> <a href="#">新手指南a>dd> <dd><a href="#">新手指南a>dd> <dd><a href="#">新手指南a>dd> dt> dl> <div>div> div> <p>1p> <p>1p> <p>1p> <p>1p> <p>1p> <p>1p> <p>1p> <p>1p> <p>1p> <p>1p> <p>1p> <p>1p> <p>1p> <p>1p> <p>1p> <p>1p> div> <div id="link" class="container"> <a href="#">a> div> <div id="banner" class="container"> <div class="banner_left l"> <div class="banner_download"> <p>下载游戏p> <p>DOWNLOADp> div> <div class="banner_user"> <div> <img src="./images" alt=""> div> <p>欢迎<a href="#"登录>a>进入飞车世界p> div> div> <div class="banner_center l"> <div class="banner_list"> <ul class="banner_list_ul"> <li> <a href="#"><img src="." alt="">a> li> <li> <a href="#"><img src="." alt="">a> li> <li> <a href="#"><img src="." alt="">a> li> ul> <div class="banner_bottomline"> <ul class="banner_bottomline_ul"> <li class="active">li> <li>li> <li>li> ul> <div class="banner_bottomline_leftbtn">div> <div class="banner_bottomline_rightbtn">div> div> <i class="banner_list_lt">i> <i class="banner_list_rt">i> <i class="banner_list_rb">i> <i class="banner_list_lb">i> div> div> <div class="banner_right l"> <a href="#"><img src="./images" alt="">a> <i class="banner_right_lt">i> <i class="banner_right_rt">i> <i class="banner_right_rb">i> <i class="banner_right_lb">i> div> div> ———————————————— body> html> - 3.fixed固定定位