第二课 HTML+CSS

HTML

<marquee> 滚动字幕标签

属性 描述
默认属性 字幕从右到左滚动,循环
hight 高度
direction
滚动的方向,

值:left 向右; up 向上; down 向下;

hspace 滚动的区域 
width 宽度 
behavior 
值:slide 到达目的地后,停止滚动

alternate  字幕来回循环滚动

sctollamount 滚动的速度,值越大,滚动越快
scrolldelay  停顿时间,毫秒

 

<form></form>  表单

表单传值(取值)方式:

get:显性的传值,可在地址看到内容,适合传数据量小,和对安全系数没要求的。

post:安全性相对get要高,无法在地址栏看到内容,可传数据量多,对安全性有要求的。

重点:表单元素

<form>
  <table>
    <tr><td>button 普通按钮控件</td><td><input type="button" value="普通按钮"/></td></tr>
    <tr><td>reser 重围按钮控件</td><td><input type="reset"/></td></tr>
    <tr><td>submit 提交按钮控件</td><td><input type="submit"/></td></tr>
    <tr><td>image 图像按钮控件</td><td><input type="image" src="1.jpg" width="100" height="100" />用图像做成按钮效果,点击可提交表单。一般情况不建议使用此种方式</td></tr>
    <tr><td>checkbox 复选框控件</td><td><input type="checkbox"/>1<input type="checkbox"/>2<input type="checkbox"/>3</td></tr>
    <tr><td>radio 单选框控件</td><td><input type="radio" name="1"/>A<input type="radio" name="1"/>B</td></tr>
    <tr><td></td><td>请注意name用法,相同的name为一组</td></tr>
    <tr><td>text 文本输入控件</td><td><input type="text"/>这是一个单行的文本输入框</td></tr>
    <tr><td>textarea 多行文本输入标签</td><td><textarea <textarea rows="3" cols="20">这是一个标签,多行输入文本框</textarea>></td></tr>
    <tr><td>password 密码输入控件</td><td><input type="password"/>输入的密码,以●●替代</td></tr>
    <tr><td>file 文件上传控件</td><td><input type="file"/></td></tr>
  </table></form>

效果:

CSS

1、CSS是什么?

叠层样式表。通俗的讲,是用来做网页外观的。

2、样式的控制方法

2-1、行内样式:

<div>标签:块级元素

style 属性:规定元素的行内样式,它的值是CSS属性和值,多个css属性和值用分号来分隔。

在标签中,通过style 来规定此标签的样式。

<div style="height:100px; width:100px; border:solid 1px #609;"></div>

2-2、内嵌式:

2-2-1、通过标签式的选择器,来定义整个页面内,此标签的样式。

1.标签选择器:此例题用的标签是:div<head>
<title>无标题文档</title>
<style type="text/css">
div
{
    width:100px;
    height:100px;
    border:solid 1px #F00;
}
</style>
</head>

<body>
<div></div>
</body>
</html>

在body中的div标签,它用的样式通过head中的style来定义,注意写法,它定义的是整个页面的div,都用这个样式。

2-2-2、class 属性

规定规定元素的类名,也可规定指向样式表中的类

<head>
<title>无标题文档</title>
<style type="text/css">
div
{
    width:100px;
    height:100px;
    border:solid 1px #000;
    color:#30F
}
.c1
{
    color:#F00
}
.c2
{
    color:#F0F
}
</style>
</head>

<body>
<div>你你你你你</div>
<div class="c1">你你你你你 C1</div>
<p class="c2">其它标签同样可以调用 C2</p>
<p class="c1 c2">C2的颜色把C1给覆盖,C1 C2</p>
</body>
</html>

效果:

注意:优先级,class要优先于标签选择器。     在定义时,前面要加上符号"."

2-2-3、id 属性

调用方法与CLASS类同,定义时,前面使用符号“#”

注意优先级,ID>CLASS>标签选择器

并且一个页面中,ID只能有一个,不能重复,也不能多次调用。

2-3、链接式:

把HTML与CSS分开不同的文件。

知识点:标签的继承性(请注意),留意视频视频课程。

HTML 文件注意<link>标签通过link来调用css样式文件href : CSS 样式文件的路径
<head>
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="css/demo.css"/>
</head>

<body>
<div>你你你你你</div>
<div class="c1">你你你你你 C1</div>
<p class="c2">其它标签同样可以调用 C2</p>
<p class="c1 c2">C2的颜色把C1给覆盖,C1 C2</p>
</body>
</html>
CSS文件写法与前面相同

div
{
    width:100px;
    height:100px;
    border:solid 1px #000;
    color:#30F
}
.c1
{
    color:#F00
}
.c2
{
    color:#F0F
}

3、字体样式

CSS文字效果

{
    font-size:24px;                /* 字体大小 */
    font-family:"宋体";             /* 字体  留意系统字库*/
    font-weight:500;               /* 加粗 */
    color:"red";                   /* 颜色 */
    decoration:underline;          /* 下划线 */
    decoration:overline;           /* 顶划线 */
    decoration:line-through;       /* 删除线 *}
{
transform:capitalize;              /* 单词首字大写*/
transform:uppercase;               /* 全部大写*/
transform:lowercase;               /* 全部小写*/
letter-spacing:10px;              /* 默认为normal */
text-align:center;                 /* 文本水平居中 */
text-align:Left;                   /* 文本水平居右 */
text-align:right;                  /* 文本居左 */
line-height:100px;                 /* 文本垂直高度 */
}
时间: 2024-10-27 03:20:03

第二课 HTML+CSS的相关文章

Jquery第二课 Javascript基础

基础知识 网页由三个部分组成:HTML.CSS和JavaScript.它们分别完成不同的功能,其中HTML描述页面内容.CSS负责内容的展示.JavaScript添加交互功能和动态效果.三者一起组成一个完整的Web页面. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>长沙戴维营教育jQuery教程 第二课</title> <!-- CS

【Web探索之旅】第二部分第二课:服务器语言

内容简介 1.第二部分第二课:服务器语言 2.第二部分第三课预告:框架和内容管理系统 第二部分第二课:服务器语言 介绍了Web的客户端,我们来谈谈Web的服务器端. 既然客户端有客户端的编程语言(HTML,CSS和JS),那么我们服务器端岂能逊色呢,对吧. 服务器端也有不少种编程语言.这些编程语言写成的程序会在服务器端的电脑上被执行. 如果说客户端的语言编写的程序决定了我们的网页的外观,那么服务器端的语言编写的程序决定了网页的功能和如何与用户交互. 你也许会问:"既然我们可以用HTML,CSS和

javascript第二课练习

<script type="text/javascript">   window.onload=function()   //网页全部加载完后执行   {     var aDiv=document.getElementById('div1');   //获取IDaDiv.onmouseover=zx;   //当鼠标停留在div上执行此函数   };     function zx()    {      alert("测试OK");    } <

JavaFX战旗类游戏开发 第二课 游戏地图绘制

在上一节课中,我们对即将要完成的战旗Demo有了一个大概的了解,本节课当中,我们将会学习绘制游戏地图. 自从在JavaFX 2.2中增加了Canvas相关的功能,我们就可以使用Canvas来实现游戏绘制了. 游戏地图绘制主要用到GraphicsContext.drawImage方法. drawImage(Image image,double sx,double sy,double sw,double sh,double dx,double dy,double dw,double dh); 其中i

【JavaScript从入门到精通】第二课

第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫"尚方宝剑",见到尚方宝剑有如见到皇帝.某种程度来说,变量具有类似于尚方宝剑的特性. 我们对第一课末的代码进行如下修改: function toGreen() { var oDiv=document.getElementById('div1'); //变量 oDiv.style.width='300px'; oDiv.style.he

第二课:IOS(App)UIImage控件与TextField控件学习

作为一名实习生我是1.3.5在办公室工作,2.4.6去另一个地方听课学习IOS(app)课程,为了不落下课程,我准备每天晚上把落下的课程自学一遍,把不懂的记下等去听课的时候问老师,希望自己能跟上学习的步伐,不浪费时间.这一课是前几天听的,今天一起也写上了. 第二课:IOS(App)UIImage控件与TextField控件的学习,代码如下 一:UIImage控件代码:把图片添加到视图中并设置大小,这里没有牵涉到图片背景的颜色设置,我猜想应该是没必要去设置的吧,因为没有按钮功能的话背景颜色也看不到

grails2.3.11第二课

第二课主要介绍grails相关插件的使用,这是敏捷开发所必需的途径. 可以把grails的插件看作是grails正常项目的迷你型,因为看插件的源码,它的目录结构和正常项目相差无几. 官方开源插件地址 https://grails.org/plugins 内部插件地址 http://maven.info.bit.edu.cn 主要介绍了常用的一些插件吧,每个插件的用法不尽相同,但是有一个共同点是要在BuildConfig.groovy这个配置文件里 compile 相关插件. 常用的包括: 前端插

【C语言探索之旅】 第三部分第二课:SDL开发游戏之创建窗口和画布

内容简介 1.第三部分第二课: SDL开发游戏之创建窗口和画布 2.第三部分第三课预告: SDL开发游戏之显示图像 第三部分第二课:SDL开发游戏之创建窗口和画布 在上一课中,我们对SDL这个开源库做了介绍,也带大家配置了SDL的开发环境.请大家按照上一课的步骤创建一个SDL工程,能够初步运行. 如果遇到问题,可以百度,Google相关平台SDL的配置.或者联系小编. 当然了,有些朋友可能会说开发C语言游戏还可以用GTK+这个库,但是个人认为GTK+没有SDL那么适合开发游戏,其创建图形界面的能

【Cocos游戏实战】功夫小子第二课之基础类分析和实现

本节课的视频教程地址是:第二课在此 如果本教程有帮助带您,希望您能点击进去观看一下,而且现在注册成为极客学院的会员,验证手机号码和邮箱号码会赠送三天的会员时间,会员可以无限制的下载和观看所有的视频,谢谢您的支持! 在开始第二节课之前,这里需要声明的是, 首先:本系列课程是为了结合Cocos2d-x 3.x 的基本组件和核心模块的学习而制作的,开发所使用的版本是3.0,但是代码稍加修改就可以运用在3.X的其他版本上. 其次:本游戏项目是一个非商业化项目,游戏资源和代码都会在后续的课程中释放出来,供