前端知识学习学习第二部分之CSS学习。
主要记录了学习CSS的语法和简单的使用，以及跟着学习步骤仿照baidu主页左了一个类似的主页。虽然功能没有加入，不过也是学习的一部分。学习过程”八错”哦。
##CSS声明学习:
1、在head标签中使用style标签声明：
作用：此声明一般声明当前网页的公共样式或者给某个标签的单独样式
2、在标签上使用style属性进行声明：
作用：此声明会将css样式直接作用于当前标签。
3、在head标签中使用link标签引入外部声明好的css文件
作用：此声明相当于调用,解决了不同网页间样式重复使用的问题
一次声明，随处使用
问题：
不同的声明给同一个标签操作了同一个样式，会使用谁的？
如果Css的声明全部在head标签中，则遵循就近原则，谁离标签近，谁就会被显示。##css的选择器学习：
标签选择器：
标签名{样式名1：样式值1;……}
作用：会将当前网页内的所有该标签增加相同的样式
id选择器:
#标签的id属性值{样式名1：样式值1;……}
作用：给某个指定的标签添加指定的样式
类选择器：
.类选择器名{样式名1：样式值1;……}
作用：给不同的标签添加相同的样式
全部选择选择器
*{样式名1：样式值1;……}
作用：选择所有的HTML标签，并添加相同的样式
组合选择器：
选择器1,选择器2,……{样式名1：样式值1;……}
作用：解决不同的选择器之间重复样式的问题
子标签选择器
选择器1 子标签选择器{样式名1：样式值1;……}
属性选择器：
标签名[属性名=属性值]{样式名1：样式值1;……}
作用：选择某标签指定具备某属性并且属性值为某属性值的标签
css的使用过程：
1、声明css代码域
2、使用选择器选择要添加样式的标签
根据需求来。
使用*选择器来给整个页面添加基础样式
使用类选择器给不同的标签添加基础样式
使用标签选择器给某类标签添加基础样式
使用id、属性选择器、style属性声明方式给某个标签添加个性化样式。
3、书写样式单
边框设置
border:solid 1px;
字体设置:
font-size:10px;设置字体大小
font-family:"黑体";(设置字体的格式)
font-weight：bold;设置字体加粗
字体颜色设置
color:颜色;
背景颜色设置
background-color:颜色;
背景图片设置
background-img:url(图片的相对路径);
background-repeate:no-repeate;设置图片不重复
bacground-size:cover;图片平铺整个页面
高和宽设置
浮动设置
float:left|right
行高设置
line-height:10;##css的盒子模型学习：
div标签：
块级标签，主要是用来进行网页布局的，会将其中的子元素内容作为一个独立的整体存在。
特点：
默认宽度是页面的宽度，但是可以设置。
高度默认是没有的，但是可以设置。(可以顶开)
如果子元素设置了百分比的高或者宽，占据的是div的百分比，不是页面的。
盒子模型：
外边距:margin
作用：用来设置元素和元素之间的间隔。
居中设置:margin:0px auto;上下间隔是0px,水平居中。
可以根据需求单独的设置上下左右的外边距。
边框：border
作用：用来设置元素的边框大小
可以单独设置上下左右
内边距：padding
作用：设置内容和边框之间的距离
注意：内边距不会改变内容区域的大小
可以单独的设置上下左右的内边距
内容区域：
作用：改变内容区域的大小。
设置宽和高即可改变内容区域的大小。##css的定位学习：
position
相对定位:relative
作用：相对元素原有位置移动指定的距离(相对的自己的原有位置)
可以使用top,left,right,bottom来进行设置。
注意：
其他元素的位置是不改变的。
绝对定位:absolute
作用：可以使用元素参照界面或者相对父元素来进行移动
注意：
如果父级元素成为参照元素，必须使用相对定位属性
默认情况下是以界面为基准进行移动的。
固定定位:fixed
作用：将元素固定现在页面的指定位置，不会随着滚动条的移动而改变位置。
以上定位都可以使用top,left,right,bottom来进行移动。
z-index:此属性是用来声明元素的显示级别的。##利用百度图标模拟百度页面
###CSS文件声明
/*设置页面的基础样式*/
*{margin: 0px;padding: 0px;}
/*设置header头部分的大小*/
#header{width: 100%;height: 45px;}
/*设置导航栏样式*/
#header_nav{position: absolute;right:92px;top:26px;}
#header_nav li{float: left;list-style-type: none;margin-left: 24px;}
#header_nav li a{color: #333;font-size: 13px;font-weight: 700;line-height: 24px;}
/*设置main主体部分的大小*/
#main{width:100%;height: 384px;text-align: center;}
#img_logo{margin-top: 30px;margin-bottom: 21px;}
/*设置搜索框样式*/
input[type=text]{height: 34px;width: 539px;border: solid 1px #4992FF;background-image: url(../img/inp.png);background-repeat: no-repeat;background-position-x: 500px;background-position-y: 3px;}
input[type=submit]{width: 100px;height: 34px;font-size: 15px;color: #fff;background-color: #2d78f4;border: solid #2d78f4;letter-spacing: 1px;position: relative;right: 5px;top:1px;}
/*设置footer底部部分的大小*/
#footer{width: 100%;height: 206px;text-align: center;}
/*使用伪类给标签添加样式*/
#header_nav li a:hover{color: blue;}###HTML页面声明
<html>
<head>
<title>百度首页模拟</title>
<meta charset="UTF-8"/>
<!--引入外部声明的css文件-->
<link rel="stylesheet" type="text/css" href="css/baidu01.css"/>
<!--引入网页标题图片-->
<link href="img/title.ico" rel="shortcut icon"/>
</head>
<body>
<!--声明头 部分-->
<div id="header">
<!--声明导航栏-->
<ul id="header_nav">
<li><a href="">新闻</a></li>
<li><a href="">hao123</a></li>
<li><a href="">地图</a></li>
<li><a href="">视频</a></li>
<li><a href="">贴吧</a></li>
<li><a href="">学术</a></li>
<li><a href="">登录</a></li>
<li><a href="">设置</a></li>
</ul>
</div>
<!--声明主体-->
<div id="main">
<!--引入百度logo-->
<img id="img_logo" src="img/bd_logo.png" width="270px" height="129px"/>
<br />
<!--声明搜索框和按钮-->
<input type="text" name="" id="" value="" />
<input type="submit" name="" id="" value="百度一下" />
</div>
<!--声明底部-->
<div id="footer">
<!--声明网站声明内容-->
<img src="img/footer.png"/>
</div>
</body>
</html>##成品图展示
