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

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 厦门校区 于 2018-5-15 19:28 编辑

同学们,以下是今日任务,以案例为主,重点是CSS常用选择器和DIV的使用要求每位同学可以使用DIV+CSS独立完成注册页面的布局,然后以口语化的方式在评论区提交你的每日总结,谈谈你对今日重点知识的理解!
注意:大家不要再做全部知识内容的堆砌,围绕重点知识和重要案例谈谈理解!

  • 了解CSS的概念
  • 了解CSS的引入方式
  • 了解CSS的基本语法和常用的选择器
  • 了解CSS的盒子模型,悬浮和定位.



72 个回复

正序浏览
林文辉 css总结
1.分清一个网页有几个大盒子,可以用画图工具之类的,把最外层的大盒子画出来
2.再细分每个盒子有几个模块,放几个盒子,嵌套div;
3.模块划分后,把内容反到对应的盒子中,就可以编写css了
4.body里面没什么太多问题,不要嵌套错就行了,如果感觉会乱就在嵌套之前注释
4.必要的话,要写个clear:both,养成一个好习惯.当然如果div的长宽设置妥当不写也行
5.如果要对标签修饰,最好是在前面加上对应的id.避免影响到其他盒子.就拿hover,after,before
这些来说,如果不在前面加上对应的id,可能其他盒子就乱套了.
6.如果要对div进行移动或者变形旋转之类的,记得要加position属性
7.有一些比较有意思的属性,如:
transform:rotate, 可以根据角度进行旋转,单位是deg
transform:translateX ,水平向右移动,单位像素
transform:translateY 水平向左移动,单位像素
transtion: all..ease..  过渡动画
box-shadow: 可以给盒子添加阴影效果
z-index:  设置元素的堆叠顺序,属性值越大,该元素层离用户越近
然后最好写的时候再写一遍-webkit-transition,因为有可能有的浏览器不兼容
8.before   after为选择器,一般给选择器加动画背景,设置动画样式
9.一个网页做得好不好,至少你在拖动页面的时候页面元素不能乱套了,
否则这个网页是失败的
10.属性很多,敲几次就熟了,其实也就那么回事了

点评

nice  发表于 2019-7-7 00:27
回复 使用道具 举报
常小天
今天主要学习了用CSS+Div制作静态页面。Div相比于之前学习的表格更加的灵活,div可单独创建,并且有一个特殊功能:浮动。使其能够在页面内灵活地移动。Css被认为是一种美化HTML的工具,即“层叠样式表”。Css是通过对Div块本身的属性,以及Div其中的元素的属性进行设定,来达到美化效果的。也就是说,Css是将各种对象的属性和属性值封装进<Style>或者一个单独的Css文件,再赋予对象的。在赋予的过程中,也就是Css引入过程中,需要通过选择器在大量编码准确找出要赋予属性的对象。选择器主要的搜索原理分三种:一是通过标签名来定位,相当于通过对象名来定位;二是在编码过程中对每个待“美化”的对象(标签)设定一个唯一的Id,通过ID来定位;三是在编码过程中对每个待“美化”的对象(标签)设定一个不唯一的类名,通过类名来定位,这一点与第二种方式相似,不同点在于ID设定时需要人为的保证其不重复,而类名则可以重复,所以类名引入具有更高的复用性。
今天学习的另一个重点:浮动。需要注意的点就是div块浮动后下面的div块会向上补位。所以为了防止div块重叠,需注意及时clear浮动。盒子模型的内边距与外边距注意区分关键字即可,而css的定位中有一点需要注意,就是区分相对移动和绝对移动。并且只有在确定了移动方式后才能进行移动,所以不要忘了position属性的设置。
回复 使用道具 举报
王刘锁
昨天学习了怎么去搭建一个页面,今天学习的是怎么让这个页面更美观!在昨天的学习中主要是利用表格和表单的功能区完成一个注册页面,结构不但复杂,有台多的嵌套而且灵活性太差,做出来的页面不仅丑而且low!今天我们就学习了怎么用DIV和CSS去美化我们的页面 让它可以功能更强大,而且节省内存 提高代码灵活性
首先DIV HTML的块标签<div></div>:默认一个div块就是一行 大小自己定 <span></span>:默认在同一行的块
最有用的CSS美化工具 相当于美颜 css就是一个存储一些表现HTML标签数据的Style的列表 CSS的强大就在它背负着标准化HTML的使命 并且着中层叠式的样式表是被大多数主流浏览器所支持认可的.
那么学习css主要就是学习它的语法,我们需要记住的是选择器和声明  
选择器{声明=(属性:属性值);声明=(属性:属性值}
选择器就是一个药引也是元素的一种特有属性,通过这个药引去选择元素 声明就是括号中的元素的其它需要定义的属性和对应的属性值:
选择器的中类我们需要记住三种
1,元素选择器
根据元素去选择 就是元素标签的标签名做选择器
2,ID选择器
就是给元素标签的id属性定义值 把这个id值当做选择器 但是格式是#id值{声明}
3,类选择器
给元素标签的class属性赋值把class值当做选择器 格式是 .class值{声明}
最重要的要记住的就是css的引入方式:一共有三种需要掌握
1,行内引入:就是在元素标签上直接使用style属性去设置css
<h1 style="color:blue;font-size:100px;">我是标题</h1>
2,页面内引入:是在HTML的头标签<head>内去使用<style>标签定义css
格式是:<style>
        h1{
                color:bule;
        font-size:50px;
        }
        </style>
3,外部引入:就是另外定义一个.css文件 然后在HTML中引入css文件 同级目录下./文件名或文件名即可 上级目录../文件名 上上级目录../../文件名
<link href="../../css/demo1.css" rel="stylesheet" type="text/css" />
还有就是css的浮动功能  利用css的float属性去挪动div
float的取值有
left向左浮动  right 向右浮动 none 默认值不浮动
还要记住清楚浮动效果 clear 取值有
left左边取消 right右面取消   both 两边都取消 none 不取消
重点就先记这么多了!
回复 使用道具 举报
本帖最后由 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
万冕

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

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

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

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

点评

。。。。。  发表于 2019-7-8 00:17
回复 使用道具 举报
Ldddd 初级黑马 2018-5-16 18:58:59
67#
赖镇东
CSS&DIV总结
DIV其实就是比较灵活的板块,不像table表格那样,条条框框,DIV更加灵活,同时与CSS结合的美化,让网页更加灵活,用<style>来描述属性,添加了选择器这元素,有点类似JAVA中的面向对象,或者说方法,更加灵活,比方说网页要更新什么东西的时候或者框架要改变的时候,利用这些选择器改动就能改变整个网页,更加轻松可变。下面是我总结的xmind,有标重点内容是必须掌握的,也是要多看的
回复 使用道具 举报
Ldddd 初级黑马 2018-5-16 18:51:15
66#
今天学习了DIV&CSS,DIV是HTML的块标签,用来分割网页的,CSS是美化网页的一种工具,CSS基本类型是,控制器(属性名:属性值),然后学习了三种引入方式,三种主要的选择器,还有悬浮,定位,自己总结的Xmin'd,有标记重点的Xmind,比较适合我自己的总结方式。

点评

发表于 2019-7-7 00:30
回复 使用道具 举报
Do1 中级黑马 2018-5-16 18:48:41
65#
本帖最后由 Do1 于 2021-6-21 08:17 编辑


今天学习了DIV


DIV在HTML前端页面布局中,非常重要,我们经常遇到的问题是:DIV居中,DIV自适应高度等等,下面就来总结一下。
多个div使用会自动换行,应该使用float属性
  left :  对象浮在左边
  right :  对象浮在右边
例如:
  float: left  和 float: right 是两个div左右排列在同一行
<div style="width: 20%; float: left; height: 100%">图片</div>
<div style="width: 50%; float: right; height: 100%">图片</div>
所以div很好用,摈弃了表格形式布局活动性差 元素板块僵硬的特点,使得可以更灵活的操作页面中的各种控件元素
回复 使用道具 举报

林荣彬
          今天学习WEB的CSS,CSS是层叠样式表它的主要作用就是用来优化HTML页面.使页面变得更加美观.
主要学习了CSS的语法会用:
块标签:
<Div></Div> 独占一行
<span></span> 默认在同一行显示

CSS的引入方式有三种:
行内样式,   :直接在HTML的元素上使用style属性设置CSS
页面内样式,   :在HTML的<head>标签中使用<style>{    }标签使用
外部样式     :单独去定义一个.CSS的文件在HTML的<head>中使用<link hef=””>引入CSS文件

CSS的选择器

CSS中的盒子模型:
内边距:padding
外边距:margin
边框:border

CSS中的定位:
Position 属性设置定位:
relative:相对定位
Absolute:绝对定位

在今晚做注册页面的时候有很多都记不住,思路不够清晰,做的乱七八糟,重新整理再做一遍思路就清晰了很多,在使用的时候也更加熟悉,也加深了印象.
回复 使用道具 举报
邵倩


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

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

回复 使用道具 举报
吴鹏


    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一下

回复 使用道具 举报
林玮
今天学习了,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虽然是美工的,但是我们也要了解。重点是CSS的引入,选择器,盒子,定位这几个地方。
需要重点练习的案例是注册页面的美化,晚上练习完问题不大,就是不懂那个表格大小怎么设置比较好,要调好几次才能比较合适的大小,可能是下午犯困没听到,明天再看看视频。
回复 使用道具 举报
叶凌青
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的浮动
今天很多都没搞懂,明天补视频
回复 使用道具 举报
郑志祥
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的表单元素进行操作
回复 使用道具 举报
张述明
今天学习了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中还有定位属性 包含 绝对定位 和相对定位
回复 使用道具 举报
白有旺
今天学习了DIV+CSS布局 相比之前的表格布局 今天的比较灵活  学习了类选择器 ID选择器 还有其它一些
布局的话先画好整体的结构思路 再慢慢一个一个去完成小的
今天被浮动了跟定位给弄糊涂了 有待加强
回复 使用道具 举报
陈昆明:
今天对层叠样式表CSS(cascading style sheet)进行了学习,并用CSS+DIV对案例的相关内容进行了制作,相比于昨天的表格制作,CSS要更为灵活,它具有3种引入方式;行内引入(使用标签style,各声明间使用分号隔开),页面引入(选择器加声明属性),外部引入(采用link标签)

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

回复 使用道具 举报
康元中
今天学习css+div重新完成页面美化和注册页面美化
<div> 标签一个标签占一行
<span>相反
div相比table表格来说更灵活,

css 重点学习 css的引入方法三种  当前页面引入 要在head标签中间 放<stye>  <stye>
几种选择器  元素/类/id选择器...      
css的浮动float和clear         
还有盒子 模型 padding 和marign
回复 使用道具 举报

黄志彬

学习了 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       设置元素的上边距
回复 使用道具 举报
1234下一页
您需要登录后才可以回帖 登录 | 加入黑马