A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 厦门校区   /  2018-5-15 19:22  /  7760 人查看  /  72 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

何平波
今天学了web中的css和div.
什么是css呢?
Css就是层叠样式表,可以在任何html页面使用
他的作用是 : 美化Html
在今天的学习中重点要掌握的是用css来设计注册界面.因为注册界面涉及了很多的数据传送,而身为后台的开发人员需要与这些数据进行接触.所以今天的重点要掌握,其他的作为理解和看得懂代码就可以.
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。与<diy><diy>一起使用
今天需要重点掌握css的类选择器, id选择器,元素选择器(这三种选择器都在<style></style>之间)
类选择器的格式为
.divClass{
属性:值px((属性和值中间用:隔开)      px代表:元素占多少像素

}
使用方式<diy calss=”divclass”> 内容</diy>

id选择器的格式为
#数字{
属性:值px(属性和值中间用:隔开
}
使用方式<diy id=”数字”> 内容</diy>

元素选择器的格式为
diy{
属性:值px((属性和值中间用:隔开
}
使用方式<diy> 内容</diy>

第二个重点是css的浮动
我们需要掌握
float属性的取值:left,right  (向右,左浮动)
clear属性的取值:left,right,both(清空,停止浮动)
Css的盒子模型在网页设计中常常与表格或者表单一起使用
在cssd的盒子模型中
内边距:padding
外边距:margin
边框: border  这边可以在每一个选择器上加上一个border 像素为1px,这样才能给更清晰的设计网页布局
margin-top: 0px;padding-top: 15px
象这段代码的意思是外边距离表格参照物为0;内边距表格参照物顶端为15像
Css的定位
position属性设置定位:
* relative:相对定位
* absolute:绝对定位
使用另外两个属性:left,top
<Diy style="position: absolute;left: 500px;top: 150px;width: 500px;">
这段代码的意思是单元格样式为绝对定位的位置为里离表格参照物左边距离500像素,距离表格参照物顶端150像素,表格整体宽度为500像素.
每一个<diy></diy>都为一个单元格,我们所做的就是要定义好它的样式和属性.
回复 使用道具 举报
侯玉林

今天讲了css.
网页好是比人,html是网页的骨架,而css是网页的血肉,js是网页的灵魂它能够让网页动起来.
回复 使用道具 举报
许煜
  今天主要学习的是<div>布局和css对页面进行美化
Div布局对比table布局的优点 div比table更加灵活 单元格可移动
Css主要用来对页面进行优化 语法通常由选择器和声明组成
常用选择器 元素选择器(按标签元素名匹配)
            Id选择器(根据标签的id属性匹配)
            类选择器(根器标签的class属性匹配)
            后代选择器 (父级标签中的所有子级标签成员 )
子元素选择器(父级标签中的所有一代子级标签成员)
Div主要通过float 进行排版 left right none
<frameset>框架标签 横切 rows 纵切 cols 用于做网页后台页面
Div+css完成网页主体思路
1分析网页需求 将网页合理切割
2用div完成对各个区域的布局
3将各个div区域实现需要的功能
Div比起table能够将布局进行的更加精确 通过内边距padding 外边距margin
以及position(relative相对位置)(absolute绝对位置).所有div块能够精确地布置在指定的位置
回复 使用道具 举报 1 0
郑学馨
CSS:用来美化页面的
重点有:css的三种引入方式,(格式),暂时只记住一个定义在页面

内<head>标签中的<stytle></stytle>格式!(理解:引入方式就跟

面对对象编程一样,要运用类中的方法,我们要通过创建它的对象

才能使用,而我们要将css内的格式运用到body中,需要弄出一个

接口来连接,)
css选择器;(理解:就是一种格式的匹配,什么钥匙开什么锁是一

样的道理,我们先定义好css内的格式(相当于锁),body中要用到

css里面的东西,就要创建对应的识别格式,(相当于钥匙)三种常

见格式分别是:1:p{}---对应---P;2#id---对应---id;3:.类

名---对应---class="类名")
css盒子:(理解:一个盒子里在放一个盒子,移动里面的盒子的话,

两个盒子的边距(内外边距)就会不一样,反过来,我们通过改变他

们的边距,就可以调整里面盒子的位子!)
css悬浮:(算是下象棋吧,没开局时,每个棋子位置在棋盘上是固

定的,开局之后棋子可以任意在棋盘上移动,不过css悬浮的特点

是,第一个位置悬浮移动后,排后面的会跑到第一个位置上,悬浮

移动完毕后记得把悬浮关掉<clear>)
回复 使用道具 举报
李志勇
css+div:
css+div用于美化HTML;
主要学了css的引入方法:       
                        行内样式       
                        页面样式       
                        外部样式
选择器:       
                元素选择器   
                id选择器
                类选择器

内边距padding  外边距margin           
定位position  必须给 relative或absolute中一个值才会生效  
两个常用属性 left top
通过今天学能更加灵活的操作页面

回复 使用道具 举报

黄志彬

学习了 DIV+CSS  看W3school 方法的使用简单易懂
使用float的浮动突破了昨天表单标签的局限性
框架标签跟body有冲突 CSS对骨架进行美化!

CSS的引入方法有三种
1行内样式  直接在HTML元素上使用style属性设置css   缺点:设置局限性,只针对一个元素设置
2页面内样式在HTML 的head  标签中使用style标签设置CSS
3外部样式  单class独定义一个.css的文件.在HTML中引入该CSS文件

选择器:找到标签要用到的功能
元素选择器
id选择器
类选择器

CSS盒子
margin           简写属性。在一个声明中设置边距属性
margin-bottom    设置元素的下边距
margin-left      设置元素的左边距
margin-right     设置元素的右边距
margin-top       设置元素的上边距
回复 使用道具 举报
康元中
今天学习css+div重新完成页面美化和注册页面美化
<div> 标签一个标签占一行
<span>相反
div相比table表格来说更灵活,

css 重点学习 css的引入方法三种  当前页面引入 要在head标签中间 放<stye>  <stye>
几种选择器  元素/类/id选择器...      
css的浮动float和clear         
还有盒子 模型 padding 和marign
回复 使用道具 举报
陈昆明:
今天对层叠样式表CSS(cascading style sheet)进行了学习,并用CSS+DIV对案例的相关内容进行了制作,相比于昨天的表格制作,CSS要更为灵活,它具有3种引入方式;行内引入(使用标签style,各声明间使用分号隔开),页面引入(选择器加声明属性),外部引入(采用link标签)

其实CSS的出现有点类似java的继承,本质和抽取差不多,CSS对文本,列表,字体,链接,表格等都有相应的操作标签,具体可参照API进行学习

回复 使用道具 举报
白有旺
今天学习了DIV+CSS布局 相比之前的表格布局 今天的比较灵活  学习了类选择器 ID选择器 还有其它一些
布局的话先画好整体的结构思路 再慢慢一个一个去完成小的
今天被浮动了跟定位给弄糊涂了 有待加强
回复 使用道具 举报
张述明
今天学习了Div+css,主要功能是对table制作的界面进行改进,是界面更灵活更美观
今天学习的内容大致可以分成两块第一块是HTML 的块标签第二部分Css 的选择器和盒子模型.
块标签有<div><sapn> 二者的主要区别是div独占一行,span默认在同一行
然后css的引入方式也是我们学习的一个重点 分成三种第一种是行内样式,就是要在<Style后面制定属性>第二种是页面内部要在head中Style里面进行设置,外部样式则需要单独定制一个.css文件,然后在使用.
接下来是选择器的部分
Css的选择器有很多 比如类选择器,元素选择器,Id选择器,后代选择器和子元素选择器
选择器的作用是为了找到要设置的标签
其中元素选择器是通过元素来定位要设置的元素
Id选择器 要在div里定一个id 例如<div id=”d1”> 然后在head下的style里用#d1来对相应的元素进行设置
类选择器是定一个类.xxxclass{},然后可以在块标签里通过class=xxxclass来调用类中设置的属性

另外一个内容就是块标签浮动,是用来满足我们所需要的页面的样式 通过float实行来操作
主要是左和向右 然后可通过clear来清除浮动 通常用clear both

盒子模型 所涉及的属性 包含padding 内边距  margin 外边距 这也是今天的一个难点
可以通过边距来调整DIV中的文字位置或者嵌套的div的位置
CSS中还有定位属性 包含 绝对定位 和相对定位
回复 使用道具 举报
本帖最后由 AsusCoder 于 2018-5-17 23:51 编辑

   
姓名:曾耀峰
   学java太累了,学完今天的课,去财务处结账出去写前端吧。贴一个标签就能马上看到效果。java代码写了一天就得出1+1=2。
总结一下今天的知识。
重点:
1.使用framest标签制作简单的网站后台管理页面
2.掌握CSS链接的三种方式
难点(纯属了解):css盒子模型,css浮动,css定位

一,使用frameset标签制作后台管理页面。
     在今天的案例中,用了frameset标签嵌套子标签frame和frameset标签来制作,以下是我理解的详细步骤。
    1.新建立一个html页面,把里面的body标签删除掉。加入frameset标签(body标签和frameset标签不能共存)。
    2.重点来了。开始切割页面。需要掌握frameset属性rows和cols,和链接属性src。rows表示横着切。cols表示竖着切。根据需求,我们要先将页面切割成上下两部分,使用rows="15%,*"这个属性。里面再套一个frame标签,属性值src设为top.html。指向写有管理员个人信息和欢迎语的页面top.html
     3.对于下面的部分,要切割成左右两部分,左边是管理员操作选项的页面,设网页为left.html,右边为显示相应操作结果所得数据的页面,设为data.html。完成上述操作要再套用<frameset cols=""15%,*>这个属性。贴一下这个核心代码比较好理解。
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
        </head>
        <frameset rows="15%,*">
                <frame src="top.html"  name="top"/>
                <frameset cols="15%,*">
                        <frame src="left.html" name="left"/>
                        <frame src="right.html" name="right"/>
                </frameset>
        </frameset>
</html>

这段代码可以背下来。

二,css的三种引用方式
1.使用所有标签共有的属性style。里面按照“属性:值;”的形式写css代码。这种方式称为行内引用
2.在head标签里面使用<style>标签,写css样式,称为页面引用
3.在head标签使用link标签,属性值src填写css页面的位置,rel填写”stylesheet”,这两个属性必须要填写,不然不能引用。这种方式使css代码和html代码分离,并且其他页面也可以使用。称为外部链接。
    到这里总结可以结束了。冲着轩哥学了也用不到,都是美工的事。

    但是还是忍不住研究了css的盒子模型还有定位类型,和float浮动机制。
     当你理解div+css布局的精髓是几个盒子模型在网页上分布时,就可以做任意网站页面的布局了。
     前面html的总结有提过标签分为块状标签(div,p,table,ul这些是块状标签)和内联标签(a,img,font这些是内联标签,)。这个意思是块状标签可以直接做成一个盒子模型,每个盒子模型在正常情况下都有个看不见的框子,每个标签不相重合。可以直接设置宽高,加边框来看出这个盒子。盒子模型还有外边距属性margin,用来设置与其他盒子的距离。内边距padding。用来设置盒子里面各个标签与盒子边缘的距离。我们在使用a标签,img标签的时候,总是发现不能给它们设置宽高,加了边框border属性也看不出来。是因为这些标签不是块级标签。要想变成块级标签,在外面套一个div标签即可。
     理解完上面的盒子模型,再学float浮动就很简单了。当第一个标签贴上float属性,left就是从当前位置,浮动到父级标签的左上角。其他后面贴上float:left的标签,会跟着浮动上来。遇到前面的盒子时候,不能重合,而是紧跟在它后面。当盒子不想有其他盒子跟着,就设置一个clear属性,这样就能独占一行,其他盒子就排在下一行。
     另外,在做div模型布局的时候,要特别注意宽高方面的设置,当几个盒子排在一起,宽高超过预先设置的宽高时,会导致盒子排列和自己想的不一样。实际开发工作中是用像素级别为单位来设置宽高,要是平时做着玩,还是建议用百分比设置宽高比较方便。
     做页面的布局。个人习惯先用盒子把各个大模块利用float布局起来。不建议用border边框显示盒子的形状,因为border的粗细会占用像素,后期也要去掉,但是你已经预先设置完了各个盒子的宽高了。去掉后的几个像素会干扰布局。推荐的做法是给各个盒子加背景颜色来显示它们。
     大模块整体搭建好以后,再往各个模块添加小模块,这样做起来就比较有规划。
     最后提一下定位。定位的属性值是position,它的值分为相对定位relative,绝对定位absolute,固定定位fixed。使用相对定位可以使盒子往原来的位置上下左右直接位移。比较适合布局时候移动。使用绝对定位,要先找对一个父级元素,给父级元素设置属性pisition:relative。这样再来使用绝对定位就能相对这个父级元素移动。
     绝对定位和相对定位的区别是。绝对定位移动以后,它原来所占的位置,会被其他元素自动占领。相对定位移动以后,原来的位置还存在。其他盒子不会去占领它。
     固定定位就是,经常我们在进入一个广告网站,不论怎么滚动,都有qq客服交谈存在。这个是用固定定位来做的。
     个人觉得,前端非常无聊。
     手机打字,有错别字请忽略
     

点评

nice  发表于 2019-7-7 00:28
回复 使用道具 举报 1 0
郑志祥
Day02  CSS&Div  
   今天学了css层叠样式表,用于页面布局比之前学的表格布置更便捷,更自由,   
id 用#      class 用.name=”名字”
css有三种引入方法,
1.行内引入(直接在行内引入属性),
2.页面内样式
3.外部页面
学习了一些选择器
1.元素选择器 :
2.  id选择器:
3.类选择器:
4.属性选择器:
5.后代选择器:
6.子元素选择器:

创建DIV是上下排列的,我们可以通过浮动Float进行左右排列,
盒子(注册页面)
<div  style="position:absolute ; left:400px; top: 160px;  width: 600px;">

用DIV+CSS来实现注册页面
解题思路;
1.先创建一个五行的DIV
2.在第一行的DIV ,添加3个DIV,利用浮动float,将3个DIV拼接在一起,
添加图片<img src        添加图片        添加超链接<a></a> 利用盒子
注意 距离外层padding-top: 10需要重置DIV的整体高度(跟图片一样高)
3.第二行 添加背景颜色 background: black; color: white;size: 20px;">
ul li  {   display: inline; }   
这是个将 首页 ,手机购物 ... 一行显示的意思 直接引入  让下面的 首页 ,手机购物 ...  ui 为无序列表
4.第三行  插入<table>   运用Html的表单元素进行操作
回复 使用道具 举报
叶凌青
css
主要给HTML页面美化的,就相当于给HTML化妆
语法 : 选择器{属性:属性值;属性:属性值....}
引入方式主要有3种
1.行内样式  就是可以直接在标签定义
举例: <h1 style="color:red;font-size:200px ;">标题</h1>
2.页面内样式 :
style{
        h1{
          color:blue;
          font-size: 40px;
        }
}
3.外部样式:
1,定义一个.css文件
2,然后使用<link  href="css文件路径" rel="stylesheet" type="text/css"/>标签引入

还学习了几种选择器
元素选择器
元素名{
}
id选择器
#id名{
}

类名选择器
.类名{
}
CSS的浮动,使用float属性可以完成DIV的浮动
今天很多都没搞懂,明天补视频
回复 使用道具 举报
万冕

今天学了div和css,今天学的主要是对昨天学的html进行一个美化,但是代码更复杂了

引入方式style{}类似于工具类,里面放着许多各种的选择器,然后在选择器里写需要设置的格式,类选择器是在标签内class="名字",取名字后在里面.名字
就可以将标签内的东西改成想要的格式,id选择器和类选择器很相似,也是在标签内id="名字",然后#名字,元素选择器则是找匹配的标签来进行修改,例如div{}
就会把所有的div标签改成对应的格式.

定位:相对定位是对于自己原来的所在位置,向上下左右移动. 绝对定位是相对于整个页面,上下左右移动

盒子模型比较难理解,首先需要顶一个参照物,然后在进行对比,比如一个大正方形里面嵌着一个小正方形,然后用大正方形来作为参照物,对于小正方形来说,
A就是外边距,对于大正方形来说内间距.如下图↓↓↓↓

点评

。。。。。  发表于 2019-7-8 00:17
回复 使用道具 举报
施炎生
CSS虽然是美工的,但是我们也要了解。重点是CSS的引入,选择器,盒子,定位这几个地方。
需要重点练习的案例是注册页面的美化,晚上练习完问题不大,就是不懂那个表格大小怎么设置比较好,要调好几次才能比较合适的大小,可能是下午犯困没听到,明天再看看视频。
回复 使用道具 举报
林玮
今天学习了,div和CSS层叠样式表;

div是html的一个块元素,主要作用是在里面添加内容把内容进行组合,添加的元素可以是:文本,图片,
表格..... div可以进行嵌套使用(类似与表格又与表格不同,比表格更加灵活)
div的基本属性<div></div>
注:div属性的使用是通过style来进行操作的,所以div本身能使用的属性只有style,然后通过style来调用其他属性;
        div通过style运用的属性<style></style>
        注:因为div下style的常用属性都是一些通用属性,所以我就不多说了;
还有就是CSS,CSS呢主要用于美化html页面的;
        CSS的常用选择器有三个:
                元素选择器 : 通常以div开头{}结尾,给所有div添加属性;
                属性选择器 : 而类选择器就不同了他是以#加一个名称开头{}结尾
                         应用的时候在<div id="*"> *:这里面添加名称即可
                类选择器:这个就是.名称{}结尾,应用:<div class="名称">
而他们都是给div添加属性的,不同的是元素选择器是给所有的div添加属性,而类选择器与属性选择器
是给指定名称的div添加属性;
回复 使用道具 举报
吴鹏


    CSS翻译过来就是层叠样式表(Cascading Style Sheets),查了下资料,是用来简化HTML的,减少了代码量,因为HTML越来越臃肿
    -----------------------------------------------
    引入方式有三种,
    第一种叫行内样式,直接在HTML的元素上使用style属性设置CSS样式,比如:
    <h1 style="color:red;font-size:100px;">标题</h1>
    内容使用双引号,属性之间用分号隔开,
    这个方法的缺点就是只能对单个标签修饰,要是标签很多,工作量大而且修改也麻烦

    第二种叫页面内引用,在<head></head>头里面用<style></style>,内容放在两个style之间,用CSS的语法(有就近原则,如果标签有style了,优先标签里面的);使用方法如:
    <style>
        h1 {
                 color:red;
                 font-size:100px;
        }
    </style>
    h1就是要引用的标签目标,花括号里面是具体声明(属性+属性值),这个形式是CSS的语法;

    第三种叫做外部引用,建立.CSS文件,文件内部写入CSS语法,然后在<head></head>头里面使用link调用这个.CSS,
    调用格式如:<link rel="stylesheet" href="css/demo1.css" />;

    --------------------------------------------------------

    常用的选择器就是id选择器,元素选择器,类选择器,格式如下:

    元素选择器:
标签名  { 属性:属性值;    //CSS样式,同样注意分号“;” }
h1 {font-size: 20px; }

类选择器:
.类名  { 属性:属性值;    //CSS样式,同样注意分号“;” }
.name {color:red; }

上面是声明方式;
调用的方式是在标签里面使用class=
比如:<p class=类名>

id选择器:
#id名  { 属性:属性值;    //CSS样式,同样注意分号“;” }
#name {color:red; }
上面是在<head></head>里面的声明方式,

调用方式是在标签里面用id=声明具体的id名,比如:
<p id= "name">His name is Ray.</p>

---------------------------------------------------------

使用浮动记得要clear一下

回复 使用道具 举报
任佳锋
CSS  层叠样式表   简单来说就是用来美化html
引入方式分为三种   分别是行内样式   页面样式   还有外部样式
行内的话直接在元素中使用style属性    页面则需要在头部<style></style>中定义    外部样式则是在外新建一个css文件,然后引入来使用
CSS的常用选择器的话目前只介绍了五个
元素选择器   通过标签名调用
id选择器  #id{}   通过将元素的id设置与id选择器同名调用
类选择器   .类名{}       通过将元素的class设置为该选择器类名调用
p span后代选择器的话是直接对p后面的所有Span对象进行全选操作
而子元素选择器:p > span则是只对第一个Spand操作

这之后还学了CSS的盒子模型和悬浮与定位,  悬浮与定位这一块的话感觉不是很理解
特别是清除悬浮   明天再把这部分捋一捋吧

回复 使用道具 举报
柯建程
frameset  与body有冲突  只能有其一
属性
rows 上下行  
cols   左右
使用<frame>标签,frame代表切分每个部分
<frameset rows="15%,*">  上下行 分2个
        <frame src=" " /> src接收引入的页面
frame可以取名字   frameset里面不可以
跳转可以在用frame的名字进行跳转到指定位置
CSS概述  层叠样式表
HTML相当于网站的骨架,css对骨架进行美化,
css在那些地方使用
任何网站都会使用css取美化页面
要求掌握三种选择器:
   元素选择器(页面内要使用<style>)
  ID选择器
#d1{}
要加#
获取时  id=:"d1"
类选择器
.divClass
要加.
获取时 class="divClass"
css浮动
float   数一种属性  定义在选择器中
用id选择器
#id{
float:left
float:right
}
清除浮动效果:clear   both

盒子模型(注册页面的注册表制作  用绝对定位去做 )
padding ;10    先距离上左
padding :10px,0,5px,10px   上右下左
margin 外边距
css定位
position
relative 相对定位
absolute绝对定位
使用left top
回复 使用道具 举报
邵倩


框架标签<frameset> 按行rows或列cols对页面进行切割布局,不能与body共存

HTML的块标签:
<div> </div> 独占一行 特有的浮动功能使其能够灵活移动,区别于table
<span> </span>默认在同一行


CSS 即层叠样式表/级联样式表  用于美化HTML,实现样式和页面分离

CSS的部分语法:

引入方式:
1.行内样式:在标签上定义一个<style> </style>
2.页面内样式 :在<head> </head>间定义一个<style> </style>
3.外部样式:定义一个.css文件,使用<link />引入
注意:当3种方式发生冲突 遵循就近原则

选择器:1.元素选择器 2.id选择器 3.(常用)类选择器

样式:1.字体 2.背景 3.文本 4.列表

盒子模型:1.内边距padding 2.外边距margin 3.边框border

悬浮:1.悬浮float:left,right 2.清除悬浮clear:left,right,(常用)both

定位position:先设置定位方式 1.相对定位relative  2.绝对定位:absolute  
                     再使用另外两个属性:left,top
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马