首页 > 代码库 > Web前端开发 学习笔记
Web前端开发 学习笔记
HTML开始:
HTML:超文本标记语言;用来做页面;通过浏览器来查看效果；
结构：
<html >--页面
<head>--网页头部
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>云商城</title>
</head>
<body>--身体
今天再次来到东华，大家非常高兴！
</body>
</html>
<h1></h1>---标题标签
...
<h6></h6>
<p></p>段落标签
div:页面布局一块区域，容器，盒子;
<div>区域1</div>
<div>区域2</div>
区域1就会在区域2的上方;区域与区域默认是上下排列；
如果要让区域并列排列，加上float:left;浮动：向左;
text-align:center;区域中文本的位置：对齐方式：居中
<div>
<div>小区域1</div>
<div>小区域2</div>
</div>
区域可以分很多小区域，但是区域的划分不能比大区域大;
按照开发标准：
1 先做大区域；
2 如果有区域与区域并列加上float:left;浮动的区域用区域包含起来；
3 最后做小区域;
<div style=" width:800px; height:120px; background:#0F6;
text-align:center;">
标签 div
属性 宽，高，背景，对齐方式，。。。。。
属性值 修饰属性的值;800px;
CSS:级联样式表;用来设置页面的样式，让页面更美观;
使用方式：
1 内联样式；写在标签后面，直接通过style来定义本标签的样式，不会影响带其他元素的样式;
2 内部样式；
统一把样式写在
<head>
<style>
//样式
</style>
</head>
需要样式选择器来实现；
六种选择器：
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 派生选择器：定义区域下的区域的样式;
<div>
<p></p>
</div>
div p{}---定义到的是div区域下的p元素的样式;
6 伪类选择器：只针对效果去定义样式；
hover:当鼠标移动到目标上方的时候；发生效果;
无序列表
<ul>
<li>内容写在这里</li>
<li></li>
<li></li>
</ul>
ul无序列表，li是里面的一列，内容写在li里面
<a href="http://www.mamicode.com/F1.html" target="_blank">思诚的万老师来东华理工带同学们敲代码！</a>
a 超级链接；target="_blank" 新建一个页面跳转；href="http://www.mamicode.com/F1.html" 目标页面地址;
3 外部样式；
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/中国电信_1.css"/>
盒子模型：内边距和外边距;
内边距：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;设置字体的粗细;
Web前端开发 学习笔记