本帖最后由 小石姐姐 于 2018-5-4 09:53 编辑
day02-使用DIV+CSS方式重新布局网站的首页 后台页面显示: < frameset rows=> < frame name="right"> < /frameset> < h3>< a href="date.html" target="right">分类管理< /a></ h3> 把name放到超链接target里 HTML的框架标签:框架标签:< frameset>,标签与body标签是冲突,有frameset就可以没有body. 属性: rows:横着切 cols:竖着切 使用< frame>标签,frame代表切分的每个部分. < frameset>与< body>标签不可同时存在. < frame>:切分的每个部分. < frame>有name属性,src属性 使用DIV+CSS方式重新布局网站的首页HTML的块标签:< div>< /div> 默认一个div独占一行,有ID,class属性 < span>< /span> 默认在同一行 CSS概述: 层叠样式表HTML相当于网站的骨架,CSS是对骨架进行美化. 任何网站都会使用CSS去美化页面. CSS的使用:CSS基本语法: 1.选择器 2.声明 选择器{属性: 属性值; 属性: 属性值...} 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的选择器:元素选择器: div{//找到元素(标签名称) border:1px solid blue;实线 width:40px; height:45px; } ID选择器: #d1{//找到ID名,找到一个元素 border:2px solid red; } 类选择器: .divClass{//找到类,class,找到一类元素,元素可以空格叠加 border: 2px solid yellow; }// . + 类名来定义 后代选择器: 空格隔开 div #id1{} CSS的浮动:使用float属性可以完成DIV的浮动. 值: left,right,向左向右浮动 none 默认值,语速不浮动,并显示在文本中出现的位置 inherit 规定应该从父元素继承float属性的值 清除浮动效果: clear属性 值: left,right 在左,右不允许浮动元素 both 两侧均不许浮动元素 none 默认值,允许浮动元素出现在两侧 inherit 规定从父元素继承clear属性的值 CSS的样式:背景 文本 字体 列表 伪类: 有顺序的 a:link{color:#FF0000}未访问的链接a:visited{color:#00FF00}已访问的链接a:hover{color:#FF00FF}鼠标移动到链接上a:active{color:#0000FF}选定的链接 盒子模型和定位: 内外边距 定位: position absolute 固定不随滚动条动 fixed随着滚动条动 显示和隐藏: display: block:显示 none:隐藏 inline:在一行显示
|