阅读是最好的习惯

代码入门教程(7)

代码入门教程(7)

会议专用,做ppt最常用的20个技巧,快收藏

办公室那些事儿复制幻灯片,将幻灯片发到word幻灯片自动播放、自动缩略图效果快速改变图片颜色,添加logo保存特殊字体,图片随时更新快速调用其它ppt,定位幻灯片制作滚动文本,利用笔画来做标记将图片文件用作项目符号快速选择多个对象灵活设置背景

现代美女免抠PNG透明图片(第三集)

现代美女免抠PNG透明图片(第三集) 点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览

 

第一章 代码基础知识

第十二节 其它标签

  

        本节讲解几种常用标签:块区标签、段落标签、定位标签、强调标签、换行标签等8种标签。

        1、<div>是块区标签,又叫区隔标签。

        DIV元素是用来为HTML文档内大块的内容提供结构和背景的元素。DIV的起始标签(首标签)和结束标签(尾标签)之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。DIV标签称为区隔标记。它可以包含段落,表格、图片等不同的内容。它的作用是设定字、画、表格等的摆放位置。

        DIV元素最大的特点是默认没有对元素内的对象进行任何格式化渲染,主要用于应用样式表。

        块区标签语法: <div>内容</div>

        <div> 标签是制作网页常用的一个标签,它的用途是用于网页布局。<div>与</div>之间的“内容”,可以是文字,也可以是图片等内容。在使用块区标签的地方,浏览器会自动地给下面的内容空出一行的空格。

        DIV标签应用于 Style Sheet(式样表)会更显威力,它最终目的是给设计者另一种组织 能力,有 Class ; Style ; title ; ID 等属性。
        在<div>标签 中,可以添加许多属性。添加属性的方式,大部分是以“样式”(style)的方式添加的。现举例如下:

        (1)设置对齐方式:

<div align=”center”>

        (2)设置宽度、高度和背景颜色:

<div style=width:200px;height:200px;background-color:Black;>

        (3)设置外边距、宽度、高度和背景颜色:

<div style=margin:5px 10px 20px 30px;width:200px; height:200px;background-color:White;>

        (4)设置定位方式:position:relative(定位方式:相对定位)

<div style=position:relative; top:10px;left:10px; width:140px; height:140px;backgroundcolor:White;>

        2、<p>是段落标签

        段落标签语法:<p>内容</p>

        <p>是一个有特定语义的标签,表示段落,是用来区分段落的。在大部分的浏览器中对P基本上都有一个上下的边距。但是没有行首缩进,因为行首缩进只是表示段落的方式,并不是一定的或必需的方式。所以在用<P>标签的时候,如果需要可以针对P设定一下行首缩进。

        段落标签常用的属性是对齐方式。即:<p align=”center”>、<p align=”right”>或者<p align=”Left”>

        在使用段落标签的地方,浏览器会自动地给下面的文章空出两行的空格。因此,我们在编撰文字或者图片的时候,如果想让两部分内容之间空出两行空格,就用<p>标签;如果想让两部分内容之间空出一行空格,就用<div>标签。

        3、<span>标签

        <span>语法:<span> 内容</span>_

        <span> 标签被用来组合文档中的行内元素。

        span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。

可以为 span 应用 id 或 class 属性,这样既可以增加适当的语义,又便于对 span 应用样式。

        <span>在行内定义一个区域,也就是一行内可以被<span>划分成好几个区域,从而实现某种特定效果。<span>本身没有任何属性。

        <span>在CSS定义中属于一个行内元素,而<div>是块级元素。所谓“块元素”,是以另起一行开始渲染的元素,“行内元素”(又叫做“内嵌元素”),在它后边的内容不会换行。我们可以通俗地理解为<div>为大容器,<span>就是小容器。

        4、定位标签与代码

        在制作网页时,我们常常需要给网页中的元素进行定位。定位有水平对齐、垂直对齐、居中标签、绝对定位、相对定位等几种方式。

      (1)水平对齐方式:align=left(左对齐) align=center(居中对齐)align=right(右对齐)

        水平对齐方式常常作为其它标签(例如:表格、段落、块区等标签)的属性使用。

      (2)垂直对齐方式:valign=top(顶部对齐)valign=bottom(底部对齐)middle(中部对齐)

        垂直对齐方式也常常作为其它标签(例如:表格、段落、块区等标签)的属性使用,垂直对齐方式还常常和水平对齐方式配合使用。

      (3)居中标签:居中标签一般是单独使用的,居中标签有尾标签。标签语法:<center>内容</center>

      (4)绝对定位语法:POSITION: absolute(定位:绝对定位)。

        绝对定位是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。

        绝对定位举例:style=”LEFT: 0px; WIDTH: 940px; POSITION: absolute; TOP: 20px”
      (5)相对定位语法:POSITION: relative(定位:相对定位)。
相对定位是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。
相对定位举例:style=”LEFT: 0px; WIDTH: 940px; POSITION: relative; TOP: 20px”

        5、<strong>强调标签

        标签语法:< strong>内容< /strong>
 strong 意思是着重,这是有语义的,作用也很简单。至于样式,是加粗着重,还是用色彩表明着重,都由你自行选择。

        6、<em>标签

        标签语法:< em>内容< /em>

        < em >标签是表示强调,一般浏览器的默认值是斜体。

        <strong>标签与< em>标签都有强调的意思,但是强调的力度有所不同。strong要比em力度更大一点。如果说em是汉语中的“强调”、“注意”,那么strong就是“再三强调”、“特别注意”。

        7、<br>标签与<wbr>标签

        <br>换行标签。在<br>后面的内容,会显示在下一行。<br>标签是空标签,它没有尾标签。

        wbr 是 Word BReak 的缩写,用来指定软换行(或单词换行)。即使用 <nobr>禁止了换行,使用 <wbr> 仍然可以换行,但是又不是强制换行,这点和 <br> 不一样。换不换行要看浏览器的横幅。

        8、<nobr>标签

        <nobr>:不换行标签。标签语法:<nobr>内容</nobr>

        在一段文字或者几个图片代码的前面输入<nobr>标签,后面输入它的尾标签</nobr>,这些文字和图片就不会换行了。

        作业:

        1、认识上面讲解的这8种标签,理解这些标签各自表示的意义。

        2、熟悉这些标签的表达语法。

        3、自己找一些网页代码,认识这些标签并体会它们的用法。把你认为精彩的标签,设置一个文件夹保存起来。

 
2012年10月19 日于北京


“春天没来”欢迎您“春天没来”欢迎您“春天没来”欢迎您“春天没来”欢迎您“春天没来”欢迎您“春天没来”欢迎您
第一章 代码基础知识

第十三节 CSS样式

 

        本节讲解有关CSS样式的内容。

        CSS是什么?

        CSS是英语Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现HTML或 XML 等文件样式的计算机语言。 CSS目前最新版本为CSS3,能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象盒模型的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。

        CSS样式表能为我们做什么?

        CSS样式表的作用是定义网页的外观(例如字体,颜色等等),它也可以和javascript等浏览器端脚本语言合作做出许多动态的效果。
        这是一个没有添加css的普通网页: “
没有添加CSS的HTML网页” ,我们不改动网页的HTML代码,只是添加了一些CSS规则,就得到了一个非常美观的网页:“添加了css的网页”。

        这不是CSS作用的全部,CSS可以将格式和结构分离。可以以前所未有的能力控制页面布局。可以制作体积更小下载更快的网页。可以将许多网页同时更新,比以前更快更容易。浏览器将成为你更友好的界面 。

        css的内容
        css的内容是对“层叠样式表”使用方法的讲解。它包括:样式表的基本语法、把样式表加入网页的方式、文字属性的设置、文本属性的设置、背景属性的设置、列表项目的应用、div和span标签、盒子、定位方法、链接方法等内容。

应用css样式标签举例:

        代码1:

<IMG style=”BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; WIDTH: 1000px; BORDER-TOP-WIDTH: 0px;

BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 305px; BORDER-LEFT-WIDTH: 0px”

src=”http://image52.360doc.com/DownloadImg/2012/06/1523/24884561_1.jpg”>

        注释:

        1、上面的图片标签解析:

<图片标签 样式=“图片右边框宽度:0px;图片外边距宽度:0px;图片宽度:1000px;图片上边框宽度:0px;图片下边框宽度:0px;图片高度:305px;图片右边框宽度:0px” 图片地址=”http://image52.360doc.com/DownloadImg/2012/06/1523/24884561_1.jpg”>

        2、说明:

        上面的图片标签中使用了css样式,定义了图片的四个边框的宽度、图片外边距的宽度、图片高度和图片宽度。

        代码2:

<marquee style=”width: 621px; height: 66px; color: rgb(255, 0, 255); font-size: 24pt; font-weight: bold;”

id=”class=” direction=”right” behavior=”alternate” scrollAmount=”1″>

        注释:

        1、上面的移动标签解析:

<移动标签 样式=屏幕宽度:621px;高度=66px;颜色:十进制颜色(红色值255,绿色值0,蓝色值255);文字字号:24px;文本粗细:粗体;序号=“选择器”=“移动方向”=“向右” 移动方式=“来回走” 移动速度=“1”>

        2、说明:

        上面的移动标签中使用了css样式,定义了移动屏幕的宽度和高度、文字颜色、文字字号、文本粗细、标签序号(包括移动方向、移动方式和移动速度)

        代码3:

<div style=position:fixed; top:210px;left:210px; background-color:Navy;width:100px;height:100px;>
        注释:

        1、上面的块区标签解析:

<块区标签 样式=定位类型:绝对定位;居顶:210px;居左:210px;背景颜色(设置纯色):海军蓝;宽度:100px;高度:100px;>

        2、说明:

       上面的块区标签中使用了css样式,定义了定位类型(绝对定位)、居顶距离、居左距离、背景颜色、宽度和高度

        编者声明:

        我对CSS不是非常熟悉,在这里只向您介绍这些内容,css的具体内容以及使用方法,请您参阅我收藏的这些文章:

        作业:

        1、认识CSS的作用,初步了解CSS的内容。

        2、阅读有关CSS的文章,学习CSS语法。

        3、应用CSS样式,试着制作几篇文章。
 

 

 
2012年10月19 日于北京

body{CURSOR:url(‘http://pic.51.com/shop/product/sbys/ani/1000400047.ani’);}

会议专用,做ppt最常用的20个技巧,快收藏

办公室那些事儿复制幻灯片,将幻灯片发到word幻灯片自动播放、自动缩略图效果快速改变图片颜色,添加logo保存特殊字体,图片随时更新快速调用其它ppt,定位幻灯片制作滚动文本,利用笔画来做标记将图片文件用作项目符号快速选择多个对象灵活设置背景

现代美女免抠PNG透明图片(第三集)

现代美女免抠PNG透明图片(第三集) 点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览点击预览

赞(0) 打赏
未经允许不得转载:微精选 » 代码入门教程(7)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏