html开始:
HTML:超文本标记语言;用来做页面;通过浏览器来查看效果;
结构:
--页面
--网页头部
--身体
今天再次来到东华,大家非常高兴!
div:页面布局一块区域,容器,盒子;
区域1
区域2
区域1就会在区域2的上方;区域与区域默认是上下排列;
如果要让区域并列排列,加上float:left;浮动:向左;
text-align:center;区域中文本的位置:对齐方式:居中
小区域1
小区域2
区域可以分很多小区域,但是区域的划分不能比大区域大;
按照开发标准:
1 先做大区域;
2 如果有区域与区域并列加上float:left;浮动的区域用区域包含起来;
3 最后做小区域;
text-align:center;">
需要样式选择器来实现;
六种选择器:
1 元素选择器:通过元素名来定义区域的样式;
div{属性:属性值} --定义的是页面中所有div元素的样式;
2 ID选择器;在元素后面加上id="d1";
取名规则:字母或者数字,下划线的组合;数字不能排第一位;比如 d3 d_3 3_d(不可)
#d1{属性:属性值} --定义的是页面中id名字为d1的元素的样式;
3 类选择器;在元素后面加上class="c1";
.c1{}--定义页面中类名叫c1的元素的样式;
id与class选择器的区别:
id选择器是定义单个的元素;
类选择器是可以定义一类,也可以定义单个元素;
4 分组选择器:可以同时定义多个元素的样式;
div,h1,h2,h3,h4{...} 定义的是页面中所有的div,h1,h2,h3,h4元素的样式;
color:#FF0;设置字体的颜色:颜色;
5 派生选择器:定义区域下的区域的样式;
6 伪类选择器:只针对效果去定义样式;
hover:当鼠标移动到目标上方的时候;发生效果;
无序列表
3 外部样式;
盒子模型:内边距和外边距;
内边距:padding: 在本区域中,内容离本区域的上下左右的距离;
padding-left:10px;内容离左边框的距离是10px;
padding-right:20px;离右;
padding-top:30px;离上边框
padding-bottom:40px;离下边框;
padding:10px; 内容离上下左右的距离都是10px;
padding:10px 20px;内容离上下10px 左右是20px;
padding:10px 20px 30px 40px;内容离上是10px 右20px 下30px 左40px;(顺时针方向)
注意:使用内边距的时候区域范围会变大!
border:1px solid;边框:1px粗细,solid 实线
外边距:margin:本区域离其他区域的距离;
margin-top/-bottom/-left/-right:本区域离其他区域的上下左右的距离;
margin:10 20 30 40px;本区域离上 右 下 左的距离;
margin:0 auto;上下的距离是0,左右的距离自动相等;位置就居中了;
Iphone6页面的布局:
大区域里面分为 上 区域(无序列表,每一列都浮动),下区域(图片);
list-style:none;清除无序列表前面的点;
*{ margin:0; padding:0;}设置所有元素的内边距和外边距都为0;
text-decoration:none;清除下划线;
font-size:22px; 设置字体大小
font-weight:bold;设置字体的粗细;
来源: http://www.bubuko.com/infodetail-1953508.html