前端学习摘要

7月8号开始学习前端的第一天
day1：做了两个实例。1：英雄联盟；2：垃圾分类的相关新闻
这两个实例主要是为了熟练运用各类标签，其中有(标题标签)；

(文本标签);(超链接)；(文本加粗)；(下划线);

• 1. (无序，有序列表);

     	(表格，列和行)。以下是英雄联盟实例的代码：

			<h1>英雄联盟</h1>
			<p>
				&nbsp;&nbsp;&nbsp;《英雄联盟》（简称lol）是由美国
				<u> Riot Games </u> 
				 开发，
				 <b> 腾讯 </b>
				  游戏运营的英雄对战网游。《英雄联盟》除了即时战略、团队作战外，还拥有特色的英雄、自动匹配的战网平台，包括天赋树、召唤师系统、符文等元素。
			</p>
			<table border="1px" cellspacing="0" cellpadding="20px">
			<tr>
					<th width="192px" align="left">中文名</th>
					<td width="288px">英雄联盟</td>
					<th width="192px" align="left">发行商</th>
					<td width="288px">
						<b>腾讯</b>
						游戏
					</td>
				</tr>
			<tr>
				<td>中文名</td>
				<td>英雄联盟</td>
				<td>发行商</td>
				<td>
					<b>腾讯</b>
					游戏
				</td>
			</tr>	
			<tr>
				<td>中文名</td>
				<td>英雄联盟</td>
				<td>发行商</td>
		 		<td>
					<b>腾讯</b>
					游戏
				</td>
			</tr>	
			<tr>
				<td>中文名</td>
				<td>英雄联盟</td>
				<td>发行商</td>
				<td>
					<b>腾讯</b>
					游戏
				</td>
			</tr>	
			</table>
			<h1>目录</h1>
			<ol>
				<li><a href="#yxbj">游戏背景</a>
					<ul>
						<li>战争学院</li>
						<li>德玛西亚</li>
					</ul>
				</li>
				<li><a href="#yxxt">游戏系统</a>
					<ul>
						<li>战争学院</li>
						<li>德玛西亚</li>
					</ul>
				</li>
			</ol>
			<h2 id="yxbj">1、游戏背景</h2>
			<h3>战争学院</h3>
			<p>
				战争学院是英雄联盟裁决瓦洛兰政治纠纷之地。这里是绝对中立的领土，严禁任何纷争。违反者将面对学院的士兵和魔法。学院坐落于一座巨型水晶枢纽之上，由黑曜石、贵金属和魔法塑形而成。它位于莫格罗恩关隘的北方入口，刚好位于相互敌对的城邦德玛西亚和诺克萨斯之间。
			</p>
			<p>
				除了作为英雄联盟所在地，战争学院还是瓦洛兰最权威的军事培训机构。很多图书馆都致力于收录战争学院的英雄信息，并向所有研究者开放。
			</p>
     		<h3>德玛西亚</h3>
     		<p>
     			人类城邦德玛西亚坐落在瓦洛兰的西部海岸。德玛西亚人民的共同目标是通过善良和正义让所有人都过得更好。他们认为恶毒自私如同疾病，应当从人类灵魂中根除。来到德玛西亚并定居于此的人们，具有和本地居民一样的理想和美德。
     		</p>
     		<h2 id="yxxt">2、游戏系统</h2>
     		<p>
     			天赋系统 天赋技能分为三类：攻击类、防御类、通用类，天赋技能点总共为30点。 攻击类：提高物理、法术攻击强化偏重攻击的召唤师技能。 防御类：提高物理、法术防御及抗打击回复能力，强化偏重防御和回复的召唤师技能。 通用类：提高召唤师其他能力，强化多用途召唤师技能，减少技能冷却时间。 符文系统 符文有四种颜色，分别是印记（红色）、符印（黄色）、雕文（蓝色）和精华（紫色），不同的符文类型在镶嵌时也要镶嵌到对应的符文槽里，在符文书每一页都有9个蓝槽、9个红槽、9个黄槽和3个紫槽供你镶嵌符文。 在游戏中，只是购买了符文是不能对召唤师所选择的英雄有任何帮助的，你需要将符文镶嵌在符文页当中，才能使符文在游戏中产生作用。
     		</p>
		</div>
		<p align="center">
			&copy; 2019 Bailiban 使用百里半百科前必读 | 百科协议 | 百里半平台
		</p>
	</div>
</body>


7月9号开始学习前端的第二天
day2：做了两个实例。1：京东登录界面:2：京东注册界面
本人用外联样式做的，其中运用到了id选择器，，下次自动登录（单选按钮），

登录按钮
以下是其中一个实例代码：

返回首页                                          没有账户？去注册

           账号密码登录            手机动态码登录

           下次自动登录             忘记密码

css文件：*{margin: 0;padding: 0;}

body{
background: url(…/img/58bg.jpg);
}

#login{
width: 400px;
height: 500px;
background: white;
margin: 0 auto;
}

#login #login_top{
background-color: rgb(30,59,117);
}
#login #login_top a{
text-decoration: none;
color: white;
}

#login #login_logo{
height: 110px;
position: relative;
}
#login #login_logo #img1{
margin: 30px 100px;
}
#login #login_logo #img2{
width: 50px;
height: 50px;
margin: 0 0 60px 9px;
position: absolute;
}

#login #login_tab{
height: 50px;
}
#login #login_tab a{
text-decoration: none;
color: rgb(255,40,40);
}

#login .input{
display: block;
width: 280px;
height: 35px;
margin-left: 50px;
}

7月10号开始了前端第三天的学习
day3：做了几个实例。古诗词
其中有一个李白的图，但是想让他靠盒子的左侧，这样就要用到其中的align="left"就可以令这个图居左。这几个实例用到了盒子模型还结合了前两天的一些基础知识
以下是其中一个实例的代码：


7月11号开始了前端第四天的学习
day4：今天用到了浮动float：left float:right<!–定位的分类
普通流定位 ->文档流
块级元素 从上到下
行内元素 从左到右 当前一行显示不下的是，会自动换行
如何让多个块级元素在一行显示？

		浮动定位
			脱离文档流  不在占据页面的空间，其他未浮动的元素会自动补齐
			父元素的高度会受到影响  父元素未设定高度的时候  
			浮动的元素会停靠在父元素的左边或右边或者停靠在其他已经浮动的元素的边缘上
			浮动元素高度不受父元素的管控，但是宽度仍然在父元素的管辖中
			浮动了的元素会变成行内块元素      
			左浮动   元素整序排列
			右浮动 元素倒序排列
		浮动引发的一些特殊的效果
			清除浮动带来的影响
				1、使用clear属性  none 默认值 left right both
				2、对于父元素的影响
					2.1 直接设置父元素的高度  弊端必须要知道父元素的准确高度
					2.2 父元素也浮动 弊端 后续元素任然有影响
					2.3 设置父元素的overflow  取值为hidden或auto  弊端 如果有子级内容要是溢出显示的话，也被一同隐藏了
					2.4 在父元素中追加子元素 并且设置其clear的属性为both  
					2.5 使用after伪类选择器追加内容
				当受影响的是文本、行内元素，行内块元素时采用环绕式的方式排列   不会被浮动元素压在底下，会巧妙的避开浮动元素
				外边距
			 	兄弟元素之间的间距
			 	子元素和父元素之间的间距

 7月12号开始了前端第五天的学习 今天学习了相对定位，绝对定位和固定定位，其中有一个实例里有例子： /*文本水平居中*/ text-align: center; /*文本垂直居中*/ line-height: 30px; border: 1px solid #333; /*设置相对定位 为了配合 my_pric 的绝对定位*/ position: relative; /*取消元素的下边框*/ border-bottom:none; /*隐藏该元素，并且不占据页面的位置*/ display: none; /*相对定位， 配合 my_pric的绝对定位*/ 相对定位：position: relative; 绝对定位：position：absolute 实例代码：

湖北

各个城市的名称（模拟）

</body>