黑马程序员技术交流社区

标题: 【石家庄校区】day02-使用DIV+CSS方式重新布局网站的首页 [打印本页]
作者: 奔跑的蜗牛006    时间: 2018-5-3 15:59
标题: 【石家庄校区】day02-使用DIV+CSS方式重新布局网站的首页
本帖最后由 小石姐姐 于 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:在一行显示





欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2