本帖最后由 htb52110 于 2017-11-20 23:38 编辑
第二天
1.[HTML框架标签]
框架标签:<frameset >,标签与body标签是冲突,有frameset就可以没有body.
* 属性:
* rows
* cols
使用<frame>标签，frame代表切分的每个部分.
在frame中可以添加name的属性,可以在链接里进行跳转.
2.常用标签
<div> <span> <a> <i> <ul>
3.<table>标签有缺点:不能轻易的挪动位置,不灵活
4.[HTML的块标签]
块级元素和行内元素
div 块级元素：独占一行，可以修改高度和宽度
span 行内元素：不独占一样，不可以修改高度和宽度
块级元素:<DIV></DIV> 可以修改高度和宽度 块级元素转行内元素添加属性:display:inline;
行内元素<span></span>不可以修改高度和宽度 行内元素转块级元素添加属性:display:block;
行内块级元素:
5.div和table的区别
div比较灵活,解析速度较快
6.CSS
Html相当于网站的骨架!CSS对骨架进行美化!
主要用途:
任何网站都会使用CSS去每美化页面
如何使用CSS:
知道CSS的基本语法
7.[CSS的基本语法]
8.[CSS的引用方式]
行内样式：直接在HTML的元素上使用style属性设置CSS.
<h1 style="color:red;font-size:200px ;">标题</h1>
页面内样式：在HTML的<head>标签中使用<style>标签设置CSS.
<style>
h1{
color:blue;
font-size: 40px;
}
</style>
外部样式:单独定一个.css的文件.在HTML中引入该CSS文件.
<link href="../../css/demo1.css" rel="stylesheet" type="text/css" />
外部引用方式:多个HTML页面引用相同的样式
页面内部引用方式:同一个HTMl中多个标签使用相同的样式
行内样式:只有某个标签自己使用
9.[CSS的选择器]
选择器:能够找到元素的标记
基本的选择器:
元素选择器：
div{
border:1px solid blue;
width:40px;
height:45px;
}
ID选择器:
#d1{
border:2px solid red;
}
类选择器：
.divClass{
border:2px solid yellow;
}
选择器的优先级是: ID选择>类选择器>标签选择器
10.[CSS的浮动]
为了让某些标签(块级元素,div,li)横向显示
如何使用浮动: float:left,right
清除浮动的方式:
1.在浮动的元素后面添加 <div clear:left/rigth/both></div>
2.在浮动的元素的父元素添加一个样式 clearfix
11.CSS中的继承问题:
在CSS中宽度可以继承,高度不可以继承
注意:浮动以后的元素是不会继承宽度的.
12*在CSS中让DIV的位置居中的代码样式`margin:0,auto;`
13*像素的百分比和px的计算
calc(50% - 4px)[注意在减号两边会有空格,不然会出错!]
14.[css中其他的选择器]
属性选择器：
<style>
input[type="text"]{
background-color: red;
}
</style>
后代选择器:
div span 查找的是所有div中的所有的span元素.
h1 strong{
color:red;
}
<h1>
This is <strong>very</strong> <strong>very</strong> important.
</h1>
<h1>This is
<strong>very</strong>
<em>really
<strong>very</strong>
</em>
important.
</h1>
子元素选择器：
div > span找这个div中的第一层级的span元素.
h1 > strong{
color:red;
}
<h1>
This is <strong>very</strong> <strong>very</strong> important.
</h1>
<h1>This is
<strong>very</strong>
<em>really
<strong>very</strong>
</em>
important.
</h1>
并列选择器:
选择器,选择器{
}
15.[css的样式]
背景
文本
16.[css中的盒子模型]
内边距
边框:border
外边距:margin
盒子的宽度计算方式=padding-left+padding-right+border-left+border-right+content;
17.[css中的定位]
position属性设置定位：
* relative:相对定位
* absolute:绝对定位
使用另外两个属性:left,top
使用定位的时候:子绝父相(里边的是绝对定位,外边的是相对定位)[绝对定位:默认是body;相对定位默认是父标签]
fixed制作广告的时候使用
18.伪类
:link; 未访问的链接
:visited; 以访问的链接
:hover; 鼠标移动到链接上
:active; 选定的链接
19.补充
浮动
为什么要使用浮动？为了让某些标签(块级元素，div，li)横着显示
如何使用浮动? float:left
如何清除浮动? 两种
1.在浮动的元素后面添加<div style="clear:both"> 不建议使用
2.给浮动的元素的父元素添加一个样式 clearfix
<div class="clearfix">
<div class="w-500 h-100 bg-red f-left"></div>
<div class="w-500 h-100 bg-gray f-left"></div>
<div class="w-500 h-100 bg-hotpink f-left"></div>
</div>
CSS中的继承问题
在CSS中宽度是可以继承，高度不可以继承
注意：浮动以后的元素是不会继承宽度的 |
|
收藏
淘帖
踩
