HTML5基础：
1：HTML5文件的基本结构包括网页声明，网页基本信息，页面头部和页面主体等。
2：编写HTML文档是遵循w3c标准，w3c是制定和维护统一的国际化web开发标准的组织。
3：网页基本标签包括标题标签<h1>~<h6>、段落标签<p>、水平线标签<hr/>、换行标签<br/>等。
4.插入图像时使用标签<img/>,src和alt是必须的
5. 锚链接：<a name="login">锚链接</a>
<a href="页面名称/#login">点击锚链接</a>
功能性连接：<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>
列表、表格、与媒体元素:
1.无序列表:
没有顺序，每个<li>标签独占一行（块级元素）
默认每一个li标签前有一个实心小圆点
主要用于无序类型信息的展示，如导航栏等
2.有序列表:
有顺序，每个<li>标签独占一行（块级元素）
默认每一个li标签前有顺序标识
一般用于排序类型的列表，如试卷、问卷选项等
3.自定义列表：
没有顺序，每一个dt和dd标签独占一行（块元素）
默认没有标记
一般用于一个标题下有一个或多个列表项的情况
3.表格
组成部分:行
列
单元格
表格优点：结构稳定
简单通用
5.媒体元素：
video:视频
audio:音频
表单：
1.表单的元素:text、password、checkbox、radio、submit、reset、file、hidden、image 和 button。
2.表单验证：
为了减轻服务器的压力
保证数据的可行性和安全性
3.只读
只读:<input type="text" name="name" value="张三" readonly/>
4.禁用
禁用:<input type="submit" name="submits" value="提交" disabled/>
5.placeholder:
input类型的文本框提供一种提示（hint）
可以描述文本框期待用户输入何种内容
提示语默认显示，当文本框中输入内容时提示语消失
适合于input标签：text、search、url、email和password等类型
<input type="text" placeholder="请输入用户名" name="username" value="" size="20" maxlength="16" required/><br/>
6.required:
规定文本框填写内容不能为空，否则不允许用户提交表单
适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型
<input type="text" placeholder="请输入用户名" name="username" value="" size="20" maxlength="16" required/><br/>
7.pattern
用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单
<input type="text" name="phone" required pattern="^1[358]d{9}"/>
初识css：
1.CSS
Cascading Style Sheet 级联样式表
表现HTML或XHTML文件样式的计算机语言
包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
2.css的优势：
内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录
3.三种样式:
行内样式
内部样式表
外部样式表
4.三种选择器:
id class 标签 注意，id不能重复
css美化网页元素:
为什么使用CSS：
有效的传递页面信息
使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户
可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容
具有良好的用户体验
盒子模型:
1.border-color:边框颜色
1.1 border-top-color：上线颜色
1.2 border-bottom-color：下线颜色
1.3 border-color:颜色1 所有边框
1.4 border-color:颜色1 颜色2 上下为颜色1 左右为颜色2
1.5 border-color:颜色1 颜色2 颜色3 上为颜色1 左右为颜色2 下为颜色3
1.6 border-color:颜色1 颜色2 颜色3 颜色4 上右下左
2.border-width：指定的是边框的粗细
2.1 thin细
2.2 medium中等
2.3 thick粗
2.4 像素xxxpx
3.border-style：指定边框风格
3.1 none：默认
3.2 hidden：隐藏
3.3 dotted：圆点
3.4 dashed：虚线
3.5 solid：实线
3.6 double：双实线
4.border: 边框线宽度 颜色 边框风格
4.1 border:1px purple solid;
二.外边距
margin：外边距，盒子与盒子
margin-top：上外边距
margin-right：下外边距
margin-bottom
margin-left
margin:0px auto; 网页居中对齐的必要条件 1.块元素 2.固定宽度
三.内边距
padding：内边距，内容与盒子
padding-left ：左内边距
padding-right
padding-top
padding-bottom
padding：位置1 位置2 上下为位置一 左右为位置二
四.盒子模型尺寸
盒子模型总尺寸=border+padding+margin+内容宽度
box-sizing：content-box | border-box | inherit;
content-box:默认值，盒子的宽度或者高度=border+padding+(margin)+width/height
border-box:盒子的宽度或者高度等于元素内容的宽度或者高度
inherit：元素集成父元素的盒子模型模式
五.圆角
border-radius：圆角
border-radius：20px 10px 50px 30px; 四个属性值按顺时针排列
1.原形：
border-radius: 50%; 宽度和高度相同
2.半圆：
border-radius: 150px 150px 0px 0px; 两个角变，两个角不变，按照顺序，上半圆和下半圆宽度是高度的二倍，左半圆和右半圆高度是宽度的二倍
3.四分之一圆：
border-radius: 0px 0px 150px 0px; 一个角变，按照顺序，宽度和高度相同
六.盒子阴影
box-shadow:10px 10px 30px yellow;
inset：内阴影
浮动：
一.标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式
二.display属性
display:更改块级元素和行内元素的相互转换
block：块级元素的默认值
inline：行内元素的默认值
inline-block:同时具有行内和块级元素的特性
none：隐藏元素内容
三.float浮动
left 元素向左浮动
right 元素向右浮动
none 默认值。元素不浮动，并会显示在其文本中出现的位置
定位网页元素：
1.使用position属性定位网页元素
2.position：static、relative、absolute、fixed
3.使用opacity：x设定网页元素的透明度
css制作网页动画：
CSS3变形
CSS3变形是一些效果的集合
如平移、旋转、缩放、倾斜效果
每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化
一个总练习：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>开兴网</title> <link href="ccs.css" type="text/css" rel="stylesheet"/> </head> <body> <div class="zt"> <div class="to"> <div class="logo"><img src="image/gameLogo.png" class="sytp"> <a href="#"><div class="sybj"><h3>首页</h3></div></a></div> <div class="zc"><span><a href="#" class="zcl">注册</a> | <a href="#" class="zcl">登录</a> | <a href="#" class="zcl">帮助</a> | <a href="#" class="zcl">更多</a></span> </div> </div> <div class="container"> <div class="gameright"> <ul> <li> <img src="image/sub-2.gif"> 征战四方 <img src="image/rightA.png" class="rightA"></li> <li> <img src="image/sub-3.gif"> 龙将 <img src="image/rightA.png"class="rightA"></li> <li> <img src="image/sub-4.gif"> 弹弹堂 <img src="image/rightA.png"class="rightA"></li> <li> <img src="image/sub-5.gif"> 凡人修真2<img src="image/rightA.png"class="rightA"></li> <li> <img src="image/sub-6.gif"> 一骑当先 <img src="image/rightA.png"class="rightA"></li> <li> <img src="image/sub-7.gif"> 宫廷计 <img src="image/rightA.png"class="rightA"></li> <li> <img src="image/sub-8.gif"> 神仙道 <img src="image/rightA.png"class="rightA"></li> </ul> </div> <div class="game"> <img src="image/xdtgg_frxz2_44.jpg"> <div class="sz"><a href="#">1</a></div> <div class="sz"><a href="#">2</a></div> <div class="sz"><a href="#">3</a></div> <div class="sz"><a href="#">4</a></div> </div> <div class="gamelef"> <h4>开兴网用户登录</h4> <p> 账号: <input type="text" size="22" placeholder="字母、数字的六位字符"/><br/><br> 密码: <input type="password" size="22" placeholder="四位数字"/> <br><br> <input type="image" src="image/btnLogin.jpg" /> <p><a href="#" class="dl">立即注册</a> <a href="#" class="dl">忘记密码</a> </p> </p> </div> </div> <div class="container2"> <div class="container2dh"> <h4 class="c2dh">全部游戏</h4> <p class="wz"><a href="#" >战争策略</a>|<a href="#" >体育经营</a>|<a href="#" >社交游戏</a></p> </div> <div class="container2tp"> <div class="yx1"><img src="image/img-4.jpg"> <p class="yx1wz">三国题材横版RPG网游，丰富的武将系统<br/> 类型：角色扮演<br/> 游戏人气：470921<br/> <div class="xf">选服</div> <div class="jryx">进入游戏</div></p> </div> <div class="yx1"><img src="image/img-5.jpg"> <p class="yx1wz"> 一款不建主城不等CD，不占资源，全程战斗 <br/> 类型：战征策略<br/> 游戏人气：8745221<br/> <div class="xf">选服</div> <div class="jryx">进入游戏</div></p> </div> </div> <div class="xw"> <div class="xwgg"> <h4 class="xwwz">新闻公告</h4> </div> <div class="xwnr"> <ul> <li><div class="xwfd"> <img src="image/rightTwo.png"> <a href="#">[征战四方] 开心首服·黄巾之乱</a></div></li> <li>-------------------------------------</li> <li><div class="xwfd"><img src="image/rightTwo.png"> <a href="#">[龙将] 火爆8服·八门金</a></div></li> <li>-------------------------------------</li> <li><div class="xwfd"><img src="image/rightTwo.png"> <a href="#">[弹弹堂] 41服开启·万人竞技</a></div></li> <li>-------------------------------------</li> <li><div class="xwfd"><img src="image/rightTwo.png"> <a href="#">[凡人修真2] 03月08日·四海帝王</a></div></li> <li>-------------------------------------</li> <li><div class="xwfd"><img src="image/rightTwo.png"> <a href="#">[一骑当先] 开心2服上线送黄金</a></div></li> <li>-------------------------------------</li> <li><div class="xwfd"><img src="image/rightTwo.png"> <a href="#">[宫廷计] 03月06日·西施秘史</a></div></li> <li>-------------------------------------</li> <li><div class="xwfd"><img src="image/rightTwo.png"> <a href="#">[凡人修真2] 03月08日·四海帝王</a></div></li> </ul> </div> </div> <br > <div class="container3"> <div class="container2dh"> <h4 class="c2dh">角色扮演</h4> </div> <div class="container3tp"> <div class="jsby"> <img src="image/img-6.jpg"> <p>游戏人气：1765314<br> 游戏状态：22区开启<br> <div class="jsxf">选服</div> <div class="jsjryx">进入游戏</div></p> </div> <div class="jsby"> <img src="image/img-7.jpg"> <p>游戏人气：1765314<br> 游戏状态：22区开启<br> <div class="jsxf">选服</div> <div class="jsjryx">进入游戏</div></p> </div> <div class="jsby"> <img src="image/img-8.jpg"> <p>游戏人气：1765314<br> 游戏状态：22区开启<br> <div class="jsxf">选服</div> <div class="jsjryx">进入游戏</div></p> </div> <div class="jsby"> <img src="image/img-9.jpg"> <p>游戏人气：1765314<br> 游戏状态：22区开启<br> <div class="jsxf">选服</div> <div class="jsjryx">进入游戏</div></p> </div> <br/><br/> <div class="jsby"> <img src="image/img-10.jpg"> <p>游戏人气：1765314<br> 游戏状态：22区开启<br> <div class="jsxf">选服</div> <div class="jsjryx">进入游戏</div></p> </div> <div class="jsby"> <img src="image/img-11.jpg"> <p>游戏人气：1765314<br> 游戏状态：22区开启<br> <div class="jsxf">选服</div> <div class="jsjryx">进入游戏</div></p> </div> <div class="jsby"> <img src="image/img-12.jpg"> <p>游戏人气：1765314<br> 游戏状态：22区开启<br> <div class="jsxf">选服</div> <div class="jsjryx">进入游戏</div></p> </div> <div class="jsby"> <img src="image/img-13.jpg"> <p>游戏人气：1765314<br> 游戏状态：22区开启<br> <div class="jsxf">选服</div> <div class="jsjryx">进入游戏</div></p> </div> </div> </div> </div> <div class="gf"> <img src="image/ad1.jpg"> <br><br> <img src="image/ad2.jpg"> </div> <div class="shiping"> <div class="spdh"> <h4 class="spdhwz">游戏视频</h4> </div> <div class="spnr"> <br> <div class="yxsp1"> <img src="image/img-1.jpg"> <p><a href="#" class="bqwz">《航海之王》麻辣<br>炫酷反穿越，英雄<br>时尚大变身！</a></p> </div> <p> ---------------------------------------</p> <div class="yxsp2"> <img src="image/img-2.jpg"> <p><a href="#" class="bqwz">《弹弹堂》吴克群<br>同名激情主题MV，<br>体验修真乐趣！</a></p> </div> </div> </div> <div class="bq"> <p><a href="#" class="bqwz">关于我们手机版 开放平台 自助广告 招聘 客服 帮助</a> @2017开心网 文网文[2009]157号 京ICP证080482号 京公网安备110000000003号 未成年人家长监护</p> </div> <div class="tp"> <div class="gdgg"> <img src="image/ad3.jpg"/> </div> <div class="x">x </div> </div> </div> </body> </html>
css样式:
.zt{ height: 1000px; } .to{ width: 1100px; height: 70px; background: linear-gradient(to bottom ,#cf2542,#d25a73); border-radius:20px ; position: absolute; left: 200px; } .logo{ display: inline-block; } .sybj{ display: inline-block; width: 100px; height: 50px; background-color: white; border-radius: 10px 10px 0px 0px; position: relative; top: 20px } h3{ text-align: center; position: relative; top: -10px; color: #cf2542; } .sytp{ position: relative; top: 20px; } .zc{ position: relative; left: 450px; text-align: center; display: inline-block; color: white; } a{ text-decoration: none; } .zcl{ color: white; } .zcl:hover{ text-decoration: underline; } .container{ width: 1000px; height: 70px; border-radius:20px ; position: absolute; left: 160px; top:80px; } .gameright{ width: 230px; height: 20px; } .gameright li{ list-style: none; background: linear-gradient(to bottom,#ffffff,#f8f8f8,#e8e8e8,#eaeaea,#d4d4d4); line-height: 30px; border-radius:9px ; } li img{ vertical-align: middle; } .rightA{ position: relative; left: 50px; } li:hover{ background :linear-gradient(to right,#ed9774,#e98b67,#e17b53,#db683c,#d75e31,#d0501f,#cf4916); } .game img{ width: 520px; height: 200px; border-radius:10px ; position: relative; left: 250px; top: -15px; } .sz{ display: inline-block; position: relative; top: -30px; left: 100px; margin: 4px; background: rgba(204,204,204,0.98); padding: 0 6px; border-radius: 50%; } .sz:hover{ background:rgba(123,222,194,0.98) ; } .gamelef{ width: 320px; height: 220px; display: inline-block; border: #d4d4d4 1px solid; border-radius:10px ; position: relative; left: 800px; top: -230px; background:rgba(204,204,204,0.3) ; text-align: center; } .gamelef h4{ color: #85807d; text-align: left; } .dl:hover{ text-decoration: underline; } .container2{ position: relative; top: 355px; left: 160px; } .container2dh{ width:745px ; height: 30px; border-radius: 10px 10px 0px 0px; border: #d4d4d4 1px solid; background:linear-gradient(to bottom,#ffffff,#f8f8f8,#e8e8e8,#eaeaea,#d4d4d4); color: #85807d; position: relative; left: 30px; top: -20px; line-height: 0px; } .c2dh{ color:#77040c; display: inline-block; position: relative; top: -5px; left: 20px; } .wz{ display: inline-block; position: relative; top: -5px; left: 60px; } .wz a{ margin: 5px; color: #85807d; } .container2tp{ width:745px ; height: 250px; border: #d4d4d4 1px solid; position: relative; left: 30px; top: -20px; } .yx1 p{ width: 200px; position: relative; top: 10px; left: 10px; display: inline-block; } .yx1{ width: 350px; height: 180px; border: #85807d 1px solid; position: relative; top: 30px; left: 10px; border-radius: 10px; display: inline-block; } .yx1 img{ width: 130px; height: 100px; position: relative; top: 35px; display: inline-block; transition: all 0.5s; } .yx1 img:hover{ transform: translate(8px,0); } .xf{ width: 50px; height: 30px; display: inline-block; border: #85807d 1px solid ; border-radius:5px ; text-align: center; position: relative; left: 140px; top: 10px; line-height: 30px; } .jryx{ width: 100px; height: 30px; display: inline-block; border: #85807d 1px solid ; border-radius:5px ; text-align: center; position: relative; left: 140px; top: 10px; line-height: 30px; color: #ffffff; background: #3fc1ff; } .container3tp{ width:745px ; height: 550px; border: #d4d4d4 1px solid; position: relative; left: 30px; top: -20px; } .jsby{ display: inline-block; margin: 10px; } .jsxf{ width: 50px; height: 30px; display: inline-block; border: #85807d 1px solid ; border-radius:5px ; text-align: center; position: relative; top: 10px; line-height: 30px; } .jsjryx{ width : 100px; height: 30px; display: inline-block; border: #85807d 1px solid ; border-radius:5px ; text-align: center; position: relative; top: 10px; line-height: 30px; color: #ffffff; background: #3fc1ff; } .jsby img{ position: relative; display: inline-block; transition: all 0.5s; } .jsby img:hover { transform: translate(8px, 0); } .xwnr{ width:320px ; height: 300px; border: #d4d4d4 1px solid; position: relative; left: 30px; top: -20px; list-style-type: none; } .xwgg{ width:320px ; height: 30px; border-radius: 10px 10px 0px 0px; border: #d4d4d4 1px solid; background:linear-gradient(to bottom,#ffffff,#f8f8f8,#e8e8e8,#eaeaea,#d4d4d4); color: #85807d; position: relative; left: 30px; top: -20px; line-height: 0px; } .xwnr li{ list-style: none; background: #ffffff; line-height: 20px; } .xwnr a{ color: #85807d; } .xw{ position: relative; left: 770px; top: -290px; } .xwwz{ color:#77040c; display: inline-block; position: relative; top: -5px; left: 20px; } .xwnr .xwfd:hover{ transform: scale(1.1); } .container3{ position: relative; top: -340px; left: -5px; } .gf{ position: relative; left: 960px; top: -550px; } .yxsp1 p,.yxsp2 p{ display: inline-block; line-height: 30px; } .spdh{ width:300px ; height: 30px; border-radius: 10px 10px 0px 0px; border: #d4d4d4 1px solid; background:linear-gradient(to bottom,#ffffff,#f8f8f8,#e8e8e8,#eaeaea,#d4d4d4); color: #85807d; position: relative; left: 30px; top: -20px; line-height: 0px; } .spdhwz{ color:#77040c; display: inline-block; position: relative; top: -5px; left: 20px; } .spnr{ width:300px ; height: 300px; border: #d4d4d4 1px solid; position: relative; left: 30px; top: -20px; list-style-type: none; } .shiping{ position: relative; left: 950px; top: -520px; } .bq { position: relative; top: -540px; left:185px; } .bqwz{ color: #3fc1ff; } .bqwz:hover{ text-decoration: underline; } .gdgg{ } .x{ position:relative; left: 190px ; top: -190px; width: 20px; text-align: center; background: #85807d; color: #ffffff; } .gdgg img{ width: 200px; height: 180px; } @keyframes spread { 0%{ position: fixed; left: 1000px; top: 10px; } 50%{ position: fixed; left: 600px; top: 470px; } 100%{ position: fixed; left: 1130px; top: 390px; } } .tp{ animation:spread 5s linear ; } .tp{ position: fixed; left: 1130px; top: 390px; }