HTML 5&CSS快速入门1.计算机中的文件2.网页组成4.HTML基础操作

1.计算机中的文件

  • 二进制文件
  • 文本文件 区别:使用windows记事本打开是否出现乱码

2.网页组成

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

网页一般由下面3部分组成

  • HTML(HyperText Markup Language) —— 网页具体内容和结构
  • CSS(Cascading Style Sheets) —— 网页的样式(网页美化的主要模块)
  • JavaScript —— 网页的交互效果,比如对用户鼠标事件做出响应

1.HTML发展史

HTML发展历史

  • HTML概念版——概念,没有实施
  • IETF组织维护HTML——HTML2.0
  • W3C组织:新的HTML标准
  • HTML4.01标准出现(里程碑)
  • HTML 5标准(移动端的流行)

2.理解

  • 超文本标记语言(标记语言不是编程语言)
  • 超文本——核心:文本文件;扩展:可以间接的表示图片、音频、视频等二进制数据
  • 后缀名称:.html .htm
  • 网页文档:开发网页,让其他人可以通过浏览器来访问我们的数据

HTML 5优势

  • 跨平台 利用HTML 5编写的应用几乎可以在任何浏览器平台运行使用
  • 开发速度快 易用很多功能可以轻易完成
  • 视频和音频支持且移动

当手机浏览器完全支持HTML5那么开发移动项目将会和设计更小的触摸显示一样简单。这里有很多的meta标签允许你优化移动:

  • viewport: 允许你定义viewport宽度和缩放设置;
  • 全屏浏览器: ISO指定的数值允许Apple设备全屏模式显示;
  • Home screen icons: 就像桌面收藏,这些图标可以用来添加收藏到IOS和Android移动设备的首页。

3.HTML语法规则

  • 文档声明:html网页的第一行:<!doctype html>表示声明这是一个网页文档,可以通过浏览器进行展示
  • 网页内容:网页中所有的数据写在一对<html></html>标签中
  • 开始标签 <html>
  • 结束标签 </html>
  • 网页属性:用于设置网页的编码、网页的标题等等内容
  • 写在网页中的<head></head>标签中
  • <meta charset=”utf-8”>声明网页中的字符编码是UTF-8编码
  • <title>网页标题</title>声明网页的显示标题部分的内容
  • 网页展示数据:打开的浏览器网页中,要查看的所有数据
  • 写在网页中的<body></body>标签中
  • 网页内容区域:页头、页面主体、页脚

<header></header> <section></section> <footer></footer>

常见的标签

  • 标题标签:在网页中,通过加大字号,加粗文本来表示的文本 <h1></h1> ~ <h6></h6>
  • 段落标签:网页中标签一段文本数据的标签 <p>段落内容</p>
  • 分隔线标签:是在网页中,增加一个水平的直线,将不同的内容分离 <hr/>
  • 换行标签:用于在网页中,将文本数据或者其他数据添加一个换行 <br />
  • 视频播放标签:用于将指定的视频内容,在网页中进行播放 <video src=”” controls></video> 视频播放标签
  • src属性:指定要播放的视频的路径、目录、文件夹/文件
  • controls属性:用于展示播放器的控制台(播放、暂停、声音、全屏)
  • autoplay属性:是否自动播放 = 音频播放标签:用于将指定的音频内容,在网页中进行播放 <audio src=””></audio> 音频播放标签
  • autoplay属性设置自动播放
  • 图片标签:用于展示指定位置的图片 <img src=””/>展示指定位置的图片,网页中常用的图片后缀名有三个 .jpg .gif .png

扩展标签

  • <b>标签:文本加粗
  • <i>标签:文本斜体显示
  • <em></em>标签:文本斜体显示 效果: 文本斜体显示
  • <u>标签:文本添加下划线
  • <del>标签:文本添加删除线 效果:文本添加删除线

表格标签:用来在网页中,通过表格的形式展示内容的

<table></table>表格 <tr></tr>表格中要展示的标题 <td></td> 表格中要展示的数据

合并单元格

横向合并单元格:colspan[跨列] 纵向合并单元格:rowspan[跨行]

自动换行及顶端对齐

表格自动换行:<table style="word-break:break-all; word-wrap:break-all;"> 表格顶端对齐:valign="top"

<small>标签

<small> 标签将旁注 (side comments) 呈现为小型文本,即让文本缩小20%进行展示。 免责声明、注意事项、法律限制或版权声明的特征通常都是小型文本。小型文本有时也用于新闻来源、许可要求。 对于由 em 元素强调过的或由 strong 元素标记为重要的文本,small 元素不会取消对文本的强调,也不会降低这些文本的重要性。

HTML用各种标签/标记,来标记内容的 标记好内容之后,要对内容进行修饰【尺寸、位置、大小、颜色】

网页一:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>网上转账电子账单</title>

    </head>
    <body>
        <h1>工商银行电子汇款单</h1>
        <table border="1" cellpadding="10" cellspacing="0" >
        <tr>
            <td colspan='2'><b>回单类型</b></td>
            <td>网上转账汇款</td>
            <td colspan="2"><b>指令序号</b></td>
            <td>HQH0000000000000013878172</td>
        </tr>
        <tr>
            <td rowspan="4"><b>收<br/>款<br/>人</b></td>
            <td>户名</td>
            <td>小许</td>
            <td rowspan="4" width="10"><b>付<br/>款<br/>人</b></td>
            <td>户名</td>
            <td>老刘</td>
        </tr>
        <tr>
            <td><b>卡号</b></td>
            <td>000000000001</td>
            <td><b>卡号</b></td>
            <td>000000000002</td>
        </tr>
        <tr>
            <td>地区</td>
            <td>南京</td>
            <td>地区</td>
            <td>杭州</td>
        </tr>
        <tr>
            <td><b>网点</b></td>
            <td>工商江苏南京业务处理中心</td>
            <td><b>网点</b></td>
            <td>江苏徐州业务中心</td>
        </tr>
        <tr>
            <td colspan="2"><b>币种</b></td>
            <td>人民币</td>
            <td colspan="2"><b>钞汇标志</b></td>
            <td>钞票</td>
            </tr>
        <tr>
            <td colspan="2"><b>金额</b></th>
            <td>1.00元</td>
            <td colspan="2"><b>手续费</b></td>
            <td>0.57元</td>
        </tr>
        <tr>
            <td colspan="2"><b>合计</b></td>
            <td colspan="4">人民币(大写):壹圆整</td>
        </tr>
        <tr>
            <td colspan="2"><b>交易时间</b></td>
            <td><i>2017年6月1日</i></td>
            <td colspan="2"><b>时间戳</b></td>
            <td><i>2017-06-01-13.00.00.00000</i></td>
        </tr>

        </table>
        <p>票据打印时间:2017-06-01 15:00:12</p>
        <p><del>票据打印单位:江苏徐州业务中心</del></p>
        <p>操作员:大曾</p>
    </body>

</html>

网上转账电子账单

网页二:

<!DOCTYPE html>
<html>
    <head>
            <meta charset="utf-8">
            <title>豆瓣电影</title>
    </head>
    <body>
        <h2>热门电影板块</h2>
        <hr/>
        <table width="800">
            <tr>
                <td><b>最近热门电影</b></td>
                <td>热门</td>
                <td>最新</td>
                <td>豆瓣评分</td>
                <td>冷门佳片</td>
                <td>华语</td>
                <td>欧美</td>
                <td>韩国</td>
                <td>日本</td>
                <td width="100"></td>
                <td>更多>></td>

            </tr>
        </table>
        <hr/>
        <table >
            <tr>
                <td>![](豆瓣电影/movie1.jpg)</td>
                <td>![](豆瓣电影/movie2.jpg)</td>
                <td>![](豆瓣电影/movie3.jpg)</td>
                <td>![](豆瓣电影/movie4.jpg)</td>


            </tr>
            <tr>
                <td>猜火车4.1</td>
                <td>贝尔科实验6.0</td>
                <td>加州公路巡警6.8</td>
                <td>歌儿不绝6.3</td>

            </tr>
            <tr>
                <td>![](豆瓣电影/movie5.jpg)</td>
                <td>![](豆瓣电影/movie6.jpg)</td>
                <td>![](豆瓣电影/movie7.jpg)</td>
                <td>![](豆瓣电影/movie8.jpg)</td>
            </tr>
            <tr>
                <td>明日的我与昨日的我</td>
                <td>速度与激情8</td>
                <td>激素特工</td>
                <td>金刚狼3:殊死一战</td>
            </tr>

        </table>

    </body>
</html>

4.HTML基础操作

1.常见标签

div标签:块标签 ul标签:无序列表标签 ol标签:有序列表标签 dl标签:图文混排列表标签

简单样式:

list-style:none;去掉列表标签前面的序号 list-style-image:url(“abc.png”);使用指定的图片替换列表的序号

form表单标签:表单标签在页面上没有任何展示,专门用来进行数据提交的

2.表单元素标签

  • 表单标签要配合表单元素标签一起使用
  • 表单元素标签主要用与:文本输入框、密码输入框、单选按钮、复选框、下拉列表框、文件选择框各种框框
label用来写输入框的提示信息,
for属性:表示这是哪个标签的提示信息,for的值是另一个标签的id值

文本输入框:<input type=”text”.. 密码输入框:<input type=”password”.. 提交按钮:<input type=”submit”..

3.API文档

  • API文档:application program interface(应用程序开发接口)
  • API文档:对应用程序开发接口的描述文档——说明书 【编程语言:教程文档,向导文档,操作文档,API文档】

HTML API文档:

  • HTML没有官方的API文档,而是很多开发人员组织起来编写的较为详细API说明文档
  • 通常比较常用的一个文档:DHTML文档(包含了HTML标签描述、CSS样式描述等等)

你可以在编程的过程中,通过API查询自己想要的标签的方法。

通过写一个简单的登录和注册页面来理解具体操作

网页三

<!-- 简单的登录页面 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录页面</title>
</head>
<body>
    <from action = 'http://www.baidu.com' method='post'>
        <label for='username'>账号</label>
        <input type="text" id='username' name="username" placeholder="请输入账号">
        <br>
        <label for='password'>密码</label>
        <input type="password" id="password" name="password" placeholder="请输入密码">
        <br>
        <input type="submit" value="登录">
    </from>

</body>
</html>

login.html

网页四

<!-- 简单的注册页面 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>注册页面</title>
</head>
<body>
    <form action="#">
        <label for="username">账号</label>
        <input type="text" id="username" name="username" placeholder="请输入账号">
        <br>
        <label for="password">密码</label>
        <input type="password" id="password" name="passwo" placeholder="请输入密码">
        <br>
        <label for="gender">性别</label>
        <input type="radio" id="gender1" name="gender">男
        <input type="radio" id="gender2" name="gender">女
        <input type="radio" id="gender3" checked="true" name="gender">待定
        <br>
        <label for="fav">爱好</label>
        <input type="checkbox" value="LOL" checked>英雄联盟
        <input type="checkbox" value="WZRY">王者荣耀
        <input type="checkbox" value="SWXF">守望先锋
        <input type="checkbox" value="DOTA">DOTA2
        <br>
        <label for="headerImg">头像</label>
        <input type="file" id="headerImg">
        <br>
        <label for="address">地址</label>
        <select id="address" name="address">
            <option value="SH">上海</option>
            <option value="BJ">北京</option>
            <option value="SZ">深圳</option>
        </select>
        <br>
        <label for="introduction">自我介绍</label>
        <textarea rows="10" cols="80"></textarea>
        <br>
        <input type="button" value="普通按钮">
        <button>H5 普通按钮</button>
        <input type="reset" value="重置">
        <input type="submit" value="注册">
    </form>
</body>
</html>

regist.html

4.超链接标签

<a href="http://www.baidu.com" style="font-size:32px;">百度</a>

a超链接标签 href属性,表示要打开的网络地址

  • 可以指向一个网络地址
  • 可以指向一个本地文件
<!-- 超链接的打开方式 -->
<a href="http://www.baidu.com" target="_blank">新的打开方式:百度</a>
这里的target属性是_blank,指的是从新的空白页打开一个网页

备注:web项目开发时常见的文件名称 网站首页:index.html / index.htm / main.html / main.htm / default.html / default.htm 登录页面:login.html / login.htm / signin.html / signin.htm 注册页面: regist.html / register.html / signup.html

5.CSS样式操作的三种方法

1.元素内嵌样式

<li style="width:800px;color:orange;font-weight:bold;"> 只要我人生的程序不终止,你的名字一直都是我的心事 </li> 优点:操作方便,易于理解; 缺点:如果样式内容太多,就会让一个简单的标签变得非常的臃肿,不利于代码的维护。

2.文档内嵌样式

样式写在网页中的<style>标签中,将样式代码集中起来进行管理

<head>
  <style>
      #info{color:blue;font-size:18px;font-weight:bold;border:#069 1px     dashed;}
  </style>
</head>
<body>
  <ol>
    <li id="info">
定义一个变量:我们的相爱时间<br>
如若我们之间是真爱<br>
那么从我们相爱的那一秒起,我们将无限循环,执子之手,与子偕老</li>
  </ol>
</body>

优点:将我们的HTML标签和CSS代码进行了分离,方便我们对HTML代码或者CSS样式进行修改; 缺点:HTML代码和CSS代码还是在一个文件中

3.外部引用

外部引用样式

同一文件夹里写一个demo.css文件
#desc{font-size:22px;color:red;font-family:"楷体" }
demo文件中代码
<head>
    <link rel="stylesheet" type="css" href="demo03.css">
</head>
<body>
  <ol>
    <li id="desc">遍历整个世界,只为找到你。<br>当我发现你是我的真爱时,<br>
        那么你就是我要找寻的人。</li>
  </ol>
</body>

三种样式操作:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>样式操作</title>
    <link rel="stylesheet" type="css" href="demo03.css">

    <style >
        #info{color:blue;font-size:18px;font-weight:bold;border: #069 1px dashed}
    </style>

</head>
<body>
    <p style="font-size: 26px">
        <b>程序员的三行情诗</b>
    </p>
    <hr>
    <ol>
        <li style="width:800px;color:orange;font-weight:bold;">只要我人生的程序不终止,你的名字一直都是我的心事</li>
        <br>

        <li id="info">定义一个变量:我们的相爱时间<br>如若我们之间是真爱<br>那么从我们相爱的那一秒起,我们将无限循环,执子之手,与子偕老</li>
        <br>
        
        <li id="desc">遍历整个世界,只为找到你。<br>当我发现你是我的真爱时,<br>
        那么你就是我要找寻的人。</li>


    </ol>
</body>
</html>

三种样式操作

6.CSS标签选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标签选择器</title>
    <style>
        /*通配符选择器*/
        *{padding: 0;margin: 0;color:green;}/*padding表示内边距,margin表示外边距*/
        /*class选择器*/
        .intro{color:blue;font-size: 22px;}
        /*标签选择器*/
        p{color: red;}     
        /*id选择器*/
        #choice{color:orange;font-size: 28px;}
    </style>


</head>
<body>
    <p>使用标签选择器</p>
    <p>标签选择器,可以通过标签名称来选择所有的该名称的标签</p>
    <p>直接在css代码中,写标签的名称,用来修饰网页中一些特殊标签的样式</p>
    <p>请谨慎使用,选择范围太大</p>
    <hr>
    <span id="choice">id选择器</span>
    <span>id选择器通过在CSS代码中,使用符号"#name",name指的就是标签的id属性名</span>
    <span>id选择器,只会选择唯一的一个标签,用来修饰网页中一些标签的样式</span>
    <hr>
    <div class="intro">class选择器</div>
    <span class="intro">class选择器,通过符号".name",name指代的标签class属性值</span>
    <b class="intro">class表示类型的意思</b>
    <hr>
    <div>通配符选择器:*,可以选择页面中所有的标签</div>
    <div>慎重使用,一般情况下,使用*来清除页面中的标签的边距</div>

</body>
</html>

标签选择器

7.其他选择

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>其他选择器</title>
    <style>
        /* 1. 其他选择器*/
        /* 群组选择器:可以将多个基本选择器,使用逗号进行分割,然后添加统一的样式*/
         p,span,div,#choice,.intro{color:red;} 
        /* 子标签选择器:修饰的是当前标签的直接子元素,不会影响孙子元素; */
         #list > li{color:orange;font-weight:bold;} 
        /* 包含选择器:修饰当前标签中指定的所有被包含的元素*/
        /* #list li {color:blue;font-weight:bold;} */

        /* 2. 选择器的优先级 */
        /*标签选择器修饰input,样式也是有优先级,如class选择器的优先级就没有id选择器高*/
         input,#username{border:none;border-bottom:solid 2px #888;}
        .username{border-bottom:solid 2px red;} 
    
        /* 3. 属性选择器 */
        /* 完整属性 */
        /* input[type="password"]{border:solid 1px red;} */
        /* input[type^="pass"]{border:solid 1px blue;} */
        [type^="pass"]{border:solid 1px red;}

        /* 4. 伪类选择器 是在后面添加冒号,然后添加一个关键词,来选择特殊的标签*/
        /* 慎重使用 ,通常情况下,可以通过id/class/标签选择器完全替代*/
        /* #list li:nth-child(2){color:red;} */
        #list li:hover{color:red;} /* 鼠标滑过的时候会高亮*/
    </style>
</head>
<body>
    <p>使用标签选择器</p>
    <p>标签选择器,可以通过标签名称来选择页面中所有的该名称的标签</p>
    <p>直接在css代码中,写标签的名称,然后在后面的大括号中添加样式</p>
    <p>慎重使用,选择范围太大</p>
    <hr/>
    <span id="choice">id选择器</span>
    <span>id选择器通过在CSS代码中,使用符号“#name”,name指的就是标签的id属性值</span>
    <span>id选择器,只会选择唯一的一个标签,用来修饰网页中一些特殊标签的样式</span>
    <hr/>
    <div class="intro">class选择器</div>
    <span class="intro">class选择器,通过符号".name",name指代的是标签的class属性值</span>
    <b class="intro">class表示类型的意思</b>
    <hr/>
    <div>通配符选择器:*,可以选择页面中所有的标签</div>
    <div>慎重使用,一般情况下,使用*来清除页面中的标签的边距</div>

    <ul id="list">
        <li>尚未配妥剑</li>
        <li>转眼便是江湖</li>
        <li>愿历尽风帆</li>
        <li>归来仍少年</li>  
        <ul>
            <li>不要停止奔跑</li>
            <li>不要回顾来路</li>
            <li>来路无可眷恋</li>
            <li>值得期待的只有远方</li>
        </ul>
    </ul>


    <hr/>
    <form action="">
        <input id="username" class="username" type="text" placeholder="请输入账号"><br />
        <input type="password" username="password" placeholder="请输入账号"><br />
    </form>
</body>
</html>

其他的标签显示

8.其他样式

text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。 语法box-shadow: h-shadow v-shadow blur spread color inset; 注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。 box-shadow属性的参数设置取值:

-阴影类型:此参数可选。如不设值,默认投影方式是外阴影;如取其唯一值“inset”,其投影为内阴影;

-X-offset:阴影水平偏移量,其值可以是正负值。如果值为正值,则阴影在对象的右边,其值为负值时,阴影在对象的左边;

  • Y-offset:阴影垂直偏移量,其值也可以是正负值。如果为正值,阴影在对象的底部,其值为负值时,阴影在对象的顶部;
  • 阴影模糊半径:此参数可选,,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;
  • 阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;
  • 阴影颜色:此参数可选。如不设定颜色,浏览器会取默认色

描述

h-shadow

必需。水平阴影的位置。允许负值。

v-shadow

必需。垂直阴影的位置。允许负值。

blur

可选。模糊距离。

spread

可选。阴影的尺寸。

color

可选。阴影的颜色。请参阅 CSS 颜色值。

inset

可选。将外部阴影 (outset) 改为内部阴影。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>常见样式</title>
    <link rel="stylesheet" href="">
    <style>
        *{margin:0;padding:0;}
        #container{
            /*内容样式*/
            color:white;
            font-size:40px;
            font-family:"楷体";
            font-weight:bolder;
            text-align:center;
            line-height:300px;
            text-shadow: 10px -10px 10px red;
            /*尺寸样式*/
            width:1050px;
            height:300px;
            border:solid 2px orange;
            border-bottom:10px solid red;
            border-radius:10px;
            box-shadow:5px 5px 3px #888;

            background:pink;
        }
        #container a{color:white;
            text-decoration:none;
        }
        #th{width:1027px;height:515px;padding:10px;border:solid 10px #888;border-radius:5px;}
        #th img{width:1027px;height:515px;border-radius:5px;}
    </style>
</head>
<body>
    <div id="container">
        听说粉色会令人遐想...<a href="http://jandan.net/ooxx">煎蛋网</a>
    </div>
    <div id="th">
        ![](girl.jpg)
    </div>
</body>
</html>

常见样式的显示

9.block,inline和inline-block概念和区别

1.概念

block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。

大体来说HTML元素各有其自身的布局级别(block元素还是inline元素):

  • 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
  • 常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。

block元素可以包含block元素和inline元素;但inline元素只能包含inline元素。要注意的是这个是个大概的说法,每个特定的元素能包含的元素也是特定的,所以具体到个别元素上,这条规律是不适用的。比如 P 元素,只能包含inline元素,而不能包含block元素。 一般来说,可以通过display:inline和display:block的设置,改变元素的布局级别。

2.block,inline和inlinke-block细节对比

  • display:block block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。 block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。 block元素可以设置marginpadding属性。
  • display:inline inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。 inline元素设置width,height属性无效。 inline元素的marginpadding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
  • display:inline-block 简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

HTML知识复习

HTML5学堂:本篇文章主要是从头到尾串一下HTML4.0的知识点。很多知识在网站各个文章中都已经讲解过了,在这里就不再重复书写了。学习时,知识点固然重要,但是...

3404
来自专栏九彩拼盘的叨叨叨

学习纲要:常见标签和属性

922
来自专栏前端知识分享

第54天:原生js实现轮播图效果

一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏。通过计算偏移量利用定时器实现自动播放,或通过手动点击事件切换图片。

4731
来自专栏web前端

制作H5响应式页面注意事项、微信二次分享

1、H5页面(APP端)      1.1     APP端页面用HTML5制作,头部需要加适配信息:   <meta http-equiv="Content-...

3379
来自专栏web前端

HTML+CSS基础

第一章 一、样式      1、行间样式,代码不可维护,不推荐      2、内联样式,不可重用,不推荐      3、外联样式,可重用,可维护,推荐     ...

7799
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之absolute

1、absolute和float   拥有相同的特性表现:     ①包裹性(容器应用之后,可以包裹里面的内容); 1 <!doctype html> 2 ...

3444
来自专栏web前端

制作H5响应式页面注意事项、微信二次分享

          1.2.1     重要的图片用img标签(例如头部banner等包含特定信息的内容图片),不重要的底板用背景形式显示,例如底部背景

2440
来自专栏企鹅号快讯

Web前端:浅析“HTML+CSS的基本应用”

Hyper Text Markup Language,简称HTML,超文本标记语言,因页面中可以包含图片、链接、音乐、程序等非文本元素,所以称为超文本。 ? H...

23810
来自专栏marsggbo

这是对position讲解最通俗易懂的版本了。

position 为了制作更多复杂的布局,我们需要讨论下 position 属性。它有一大堆的值,名字还都特抽象,别提有多难记了。让我们先一个个的过一遍,不过你...

2626
来自专栏我和未来有约会

CaseStudy(showcase)布局篇-列表的排放与遮罩

做silvelight也有一段时间了,相册、游戏,刚刚完成的showcase这个小程序算是一个阶段了。这里就以showcase这个项目来做一下CaseStudy...

1919

扫码关注云+社区

领取腾讯云代金券