web-day02
案例六< 后台页面 >
使用name属性
HTML的框架标签---<frameset>,与<body>标签冲突,两者只能有一个
属性:rows
cols
使用<frame>标签,frame代表切分的每个部分.
步骤分析
步骤一:创建一个html的页面
步骤二:将整个页面分成上下两个部分
步骤三:将页面的下班部分分成左右两个部分
步骤四:在左侧页面中添加一些链接.
步骤五:点击左侧链接,内容监视在右侧的区域
块标签
<div></div>:默认独占一行
<span></span>:默认在同一行
CSS:层叠样式表
选择器{属性:属性值;属性:属性值;...}
CSS的引入方式
行内样式;在html的元素上使用style属性设置CSS.
页面样式:在HTML的head标签中使用style标签设置CSS
外部样式:单独定一个.css的文件
网页-->F12-->element.style-->调整好样式后copy到html中
<<CSS的选择器>>(重点)
元素选择器:直接写标签名称
ID选择器:通过ID直接找到元素 #加上ID的属性值
注意:(ID最好不要写重)
类选择器: .加上class的属性值
class的属性值可以叠加使用比如 class="aa bb cc "
会有覆盖属性
子元素选择器:div > el(找的是div下的el)
后代选择器:div el
属性选择器:div[type="text"]
分组选择器:div,h1
<<CSS的浮动>>--float属性
float的取值:left,right,none,inherit
clear:清除浮动
clear的属性值:
both两侧浮动
left左侧浮动
right右侧浮动
-----商城首页布局-----
步骤一:创建一个首页的HTML文件
步骤二:创建一个整体的DIV元素
步骤三:创建每个部分的DIV元素
步骤四:
__CSS中的伪类专门用来处理超链接,比如可以去掉下划线__
CSS中的框模型
CSS中的定位
(引入方式 选择器 浮动 清除浮动 盒子模型 定位)
|
|