*html的框架标签
*框架标签:
<frameset>,标签与body标签是冲突,有frameset就没有body.
*属性:
rows
cols
*使用<frame>标签,frame代表切分的每个部分.
*特殊字符的标签
*空格: 
*大于:>
*小于:<
*常用标签
<div><span><a><ul><i>
*div 是html的块标签
块级元素:独占一行,可以修改高度和宽度 div
块级元素转行内元素添加属性display:inline;
行内元素:不独占一行,不可以修改高度和宽度 span i u
行内元素转块级元素添加属性display:block;
<div></ div>:默认一个div独占一行
<span></span>:默认在同一行
*table和div布局的区别
div更加灵活,并且解析加载速度快
*css概述
*html相当于网站的骨架!css对骨架进行美化!
*什么是css:
层叠样式表(Cascading Style Sheets)
样式定义如何显示html元素
*css的使用地方
任何网站都会使用css去美化页面
*如何使用css
*css 的基本语法:
一个选择器,一个声明
选择器:(属性:属性值,属性:属性值,)
*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" />
*css的选择器
*元素选择器(标签选择器):
*ID选择器
*类选择器
*选择器的优先级:
ID选择器>类选择器>标签选择器
*css的浮动
为了让某些标签(块级元素,div,li)横着显示,所以使用浮动
*使用float属性完成div的浮动
*常用left,right
*清除浮动 clear:both
1.在浮动的元素后面添加<div style = "clear:both"> 不建议使用
2.给浮动元素的父元素添加一个样式:clearfix
*CSS中的继承问题
在css中,宽度可以继承,高度不可以
浮动以后的元素是不会继承宽度的
*居中
margin:0 auto;
*函数(百分数和px之间运算关系)
calc(70% - 2px) -号两端要有空格
<div style="width: 100%;height: 300px;background-color: aqua;">
<div class="f-left" style="width: 30%-2px;border: 1px solid black;
background-color: red;height: 100%;"></div>
<div class="f-left" style="width: 70%-2px;border: 1px solid black;
background-color: hotpink;height: 100%;"></div>
</div>
*选择器
*属性选择器
*后代选择器(子孙元素选择器)
div span 查找所有div中所有的span元素
*子代选择器
div>span(选择第一个span)
*并列选择器
选择器，选择器{}
*盒子模型
内边距:padding (顺时针)
外边距:margin
宽度计算方式:padding-left+padding-right+border-left+border-right+content
*定位
*position属性设置定位
relative:相对定位,性低于父标签
absolute:绝对定位,是相对于body
使用的时候:子绝父相(里面是绝对定位)
使用另外两个属性:left,top
*fixed:广告制作,滚动时其他滚动,这个固定.
*伪类
*link visited hover active 顺序不能乱,href必须有值
*样式总结
背景
背景颜色 background-color:red;
背景图片 background-image:url(xx.png);
背景重复 background-repeat:no-repeat;
背景位置 background-position: center center;
背景缩写 background : red url(x.png) no-repeat center center;
背景大小 background-size:
边框
border : 1px solid black;
文本/字体
大小 font-size : 12px;
颜色 color : red;
去除超链接下划线 text-decoration : none;
文本上下居中 line-height:100px;height:100px;//height==line-height
文本左右居中 text-align:center;
无序列表:去除小圆点
<ul style="list-style:none"></ul>
外边距:margin
内边距:paddding
|
收藏
淘帖
踩
