2019-02-18web前端
web前端开发用到的语言
1.html--->网页的框架
2.css---->控制网页的样式和布局
3.js ---->控制网页的行为和交互
这周任务：
仿制百度首页，在开发过程中学习html和css知识
开发工具
webstorm，hbilder，chrome（反馈有没有安装）
xml：用于写配置文件或者用于网络数据传输（json） 可扩展标示语言
html：主要用于网页开发 超文本标记语言
<resource>
<string name="app_name">安卓管家</string>
</resource>
<!DOCTYPE html> 表示我们的这个html文件的写法，遵循html5标准
<html> 跟标签
<head> 标签头
<meta charset="utf-8">
<tile>tile<tile>
</head>
<body> 标签体
</body>
</html>
html对于换行和空格不会正常显示
css控制样式，要改变页面上元素的样式，就要去设置css
设置css三种方式：
1.可以使用style属性来设置， 这个叫做行内样式
2.可以使用style标签来设置，一般写在head 标签中，这个叫内部样式表
3.可以创建css 文件，然或在head文件中使用link标签来引用这个文件
css语法：
选择器{
属性1：属性值1；
属性2：属性值2；
}
css选择器：
1.标签选择器----->将页面上所有符号的标签都选中
2.class类选择器------->将页面上所有符合这个类的元素选中，通过“.类名”来使用
3.id选择器------->将页面上符合id 的元素选中，通过“#id名”的形式来使用
4.伪类选择器： hover--->表示鼠标悬浮在元素上时，会变色：
css优先级：
行级元素和块级元素：
行级元素： 跟下一个元素不会换行，没有宽高。
块级元素： 跟其他元素换行显示，有宽高。
文档流： 在网页上，文件会默认放在左上角
标签：div：容器，是一个块级元素，用于组织网页
float（浮动）：左或右 （可以实现块级元素共同显示，浮动会脱离文档，
浮动会让块级元素失去换行的特征）
display:block（块级）
设置文字居中：水平方向text-align，垂直方向：lin-height （行高度）
清除浮动：
clear：[left][right][both]
clear: right--->表示我们的右侧不允许有浮动
所有用于输入的都是表单元素（输入框、单选框、复选框、下拉列表）
form，表单里面的元素，基本上都是 input 标签，使用 type 属性来区分
span标签：没有特殊的样式，行级标签，组织行内的内容
position 定位
1.absolute 绝对定位 参照物：参照附近的父元素 如果没有，那么相对于body定位
---会脱离文档
2.relative 相对定位 参照物：自身该处的位置 ---不会脱离文档
3.fixed 固定位置 参照物：浏览器窗口 ---会脱离文档
z-index
只能给有定位的元素设置
锚链接
可以让a 标签跳转本页面的指定位置
9:38 2016/12/2
javascript
jquery:框架，封装了 javacript，让我们使用js 的时候更加方便
css3：css第三版本标准
网盘路径
https://pan.baidu.com/s/1misaHV6 提取密码： jhux
10:02 2016/12/5
任务：ul，li，a来仿制京东的导航条
14:09 2016/12/7
鼠标放上去大图显示，鼠标移动大图移动，鼠标移开大图消失。
用到的事件
1.鼠标划入事件 mouseover
打图显示
2.跟随鼠标滑动 mouvemove
大图位置跟随鼠标位置变化
3.鼠标划出事件 mouseout
大图消失
9:45 2016/12/13
边框圆角：
border-radius:50%; //正方形-->圆
border-radius:25px 50px 100px 150px; //左上角 右上角 右下角 左下角
broder-radius:25px 100px; //对角相等
border-radius:25px 100px 150px; //顺时针
border-radius:50px/100px; //一组值 分别是水平半径和垂直半径
eg:
.egg{
width: 200px;
height: 260px;
background:#f00;
margin: 0 auto;
border: 1px solid black;
border-radius:50%/65% 65% 35% 35%; //鸡蛋图形
}
/*背景阴影*/
box-shadow:20px 20px 5px 5px green inset;
/*水平阴影位置 垂直阴影位置 模糊距离 阴影尺寸 阴影颜色 */
/*文本阴影*/
text-shadow:5px 5px 2px red;
/*水平阴影位置 垂直阴影位置 模糊距离 阴影颜色 */
