精华内容
下载资源
问答
  • 无序列表:ul 嵌套 li ;Practice:编写下图的一个网页:代码如下:<!doctype html> <html> <head> <meta charset="utf-8"> <title&...

    Topic 1: 列表

    1.无序列表:

    ul 嵌套 li  ;

    Practice:

    编写下图的一个网页:

    代码如下:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无序列表练习</title>
    </head>
    
    <body>
    	<h1><font face="宋体">热点新闻</font></h1>
    	<!----注意:hr的宽度设置 如果你的hr宽度跟随页面的缩放而缩放  那么它的宽度设置就是以百分比设置  反之则是像素设置----->
    	<hr width = "500" align = "left" color = "orange" size ="4"/>
    	<ul type = "circle">
    		<li>程序员应该涨工资了,因为太辛苦</li>
    		<li>怎么样才能遇见更好的自己!!!</li>
    		<li>我们都在为自己的梦想而奋斗着</li>
    		<li type = "disc">程序员应该涨工资了,因为太辛苦</li>
    		<li type = "square">程序员应该涨工资了,因为太辛苦</li>
    		<li>程序员应该涨工资了,因为太辛苦</li>
    	</ul>
    </body>
    </html>
    

    2. 有序列表:

    编写如下网页:

    代码如下:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>有序列表</title>
    </head>
    
    <body>
    	<h1><font face="宋体">热点新闻</font></h1>
    	<!----注意:hr的宽度设置 如果你的hr宽度跟随页面的缩放而缩放  那么它的宽度设置就是以百分比设置  反之则是像素设置----->
    	<hr width = "500" align = "left" color = "orange" size ="4"/>
    	<!----注意有序列表的排序方式有1,2,3;a,b,c;A,B,C;还有下面的那个I;对应的都是type的取值------->
    	<ul type = "I">
    		<li>程序员应该涨工资了,因为太辛苦</li>
    		<li>怎么样才能遇见更好的自己!!!</li>
    		<li>我们都在为自己的梦想而奋斗着</li>
    		<li>程序员应该涨工资了,因为太辛苦</li>
    		<li>程序员应该涨工资了,因为太辛苦</li>
    		<li>程序员应该涨工资了,因为太辛苦</li>
    	</ul>
    </body>
    </html>
    

    3. 项目列表:

    编写一个下图的网页:

    代码如下:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>项目列表</title>
    </head>
    
    <body>
    	<!-----我们注意到dl标签是会空一行的  也就相当于有两个换行了------->
    	<dl>
    		<dt>我是标题</dt>
    		<dd>我是描述</dd>
    	</dl>
    	
    	<dl>
    		<dt>在线调查系统</dt>
    		<dd>这个系统可以实现我们在线的考勤,很方便的一个系统</dd>
    	</dl>
    	
    	<dl>
    		<dt>成龙</dt>
    		<dd>他是一个演员也是一个导演</dd>
    		<dt>房祖名</dt>
    		<dd>他是成龙的儿子</dd>
    	</dl>
    	
    	<dl>
    		<dt>夏季热销水果</dt>
    		<dd>西瓜</dd>
    		<dd>香蕉</dd>
    		<dd>苹果</dd>
    	</dl>
    </body>
    </html>
    

    Topic 2: 超链接

    a,配合一个原则性属性href,代表的含义是跳转的页面的路径(相对路径查找)

    <!----定义超链接用a标签----->
     <!----你在连接百度的时候一定要加http://或者是https://   否则的话他会默认以相对路径查找你的本地文件---->

     <!----又犯了同样的错误就是你的href单词写错了  然后你又找了大半天---->

    超链接有:

    链接到线上网址;链接到本地地址;图片超链接;假链接;新窗口打开超链接;

    代码如下:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>超链接</title>
    </head>
    
    <body>
        <!----定义超链接用a标签----->
        <!----你在连接百度的时候一定要加http://或者是https://   否则的话他会默认以相对路径查找你的本地文件---->
        <!----又犯了同样的错误就是你的href单词写错了  然后你又找了大半天---->
        <a href="https://www.baidu.com">链接网上地址--百度</a><br>
        
        <a href="2.2有序列表.html">链接到本地</a><br>
    
        <!----图片使用超链接----->
        <a href="https://www.baidu.com"><image src="hashiqi.jpg"/></a><br>
        
        <!----假链接  注意“#”(跳转到当前页面)对js有影响------>
        <a href="#">假链接#</a><br>
        <!----假链接  这两就是什么都不做------>
        <a href="javascript:;">假链接js1</a><br>
        <a href="javascript:void(0);">假链接js2</a><br>
        
        <!----新窗口打开超链接   增强用户体验--------->
        <a href="http://www.baidu.com" target="_blank">新窗口打开超链接 保留原有页面</a>
    </body>
    </html>
    
    

    Topic 3: 表格

    说明:

    对于HTML中的表格我们不要求你记住代码了;

    我们只要求你会使用就好了;

    我们在使用的时候,你需要把视图切换为设计会显示一个白色的页面---插入table---选择几行几列---选中表格右击属性;

    我们操作的时候想要操作什么就选中什么(选中之后我们在属性观察就好了);

    比如align是对齐方式;

    我们在这里操作完切换为代码视图相应的代码就生成了;


    注意:

    表格的格式是:

    table嵌套tr,tr嵌套td,table代表整个表格,tr代表行,td代表单元格;

    填充:拉开内容和单元格边缘的距离

    间距:拉开两个单元格之间的距离

    截图填充和间距(直接选中整个表格的时候出的那个属性):



    Topic 3: 制作细线表格

    完成上面这个网页的设计:

    这个表格的关键就是细线表格的制作:

    注意:背景颜色是bgcolor

    细线表格的制作步骤为:

    设置table背景色为想要的细线颜色,配合间距(单元格之间的距离)设置为1px,在这1px的位置透出底部table的背景色,再设置单元格的不同背景色



    展开全文
  • 无序列表,设置菜单列表,设置目录列表 有序列表无序有序列表嵌套 网页中使用图像
  • 列表代码编写 一、题目 编写代码实现“第四届中国大学出版社图书奖公示”页面,如下图所示。 (1)页面标题为:“第四届...嵌套列表一般是将无序列表有序列表进行嵌套无序列表: (1)使用ul标记(双标记)。在

    列表代码编写

    一、题目
    编写代码实现“第四届中国大学出版社图书奖公示”页面,如下图所示。
    (1)页面标题为:“第四届中国大学出版社图书奖公示”;
    (2)页面内容:2号标题标记显示“第四届中国大学出版社图书奖公示”,页面背景色为“#ccffcc”,按图效果完成页面设计。
    (3)为列表项设置超链接(链接地址自由设置)【自加要求】
    在这里插入图片描述二、题目分析
    1、列表类型有3种:无序列表、有序列表、定义列表;还有一种特殊的列表是嵌套列表。嵌套列表一般是将无序列表和有序列表进行嵌套。
    无序列表:
    (1)使用ul标记(双标记)。在开始标记(ul)和结束标记(/ul)之间插入li标记(双标记)书写列表项内容。
    (2)type属性:disc——实心圆形;circle——空心圆形;square——实心正方形
    在ul标记中定义的type属性,适用于无序列表中的所有列表项;
    在li标记中定义的type属性,只适用于定义了type属性的li一项;
    若同时定义,优先使用li中的风格
    【具体代码编写形式参照下方“代码编写”模块图片】

    有序列表:
    (1)使用ol标记(双标记)。在开始标记(ol)和结束标记(/ol)之间插入li标记(双标记)书写列表项内容。
    (2)type属性:1——数字列表;A——大写字母列表;a——小写字母列表;I大写罗马字母列表;i——小写罗马字母列表
    (3)start属性:改变当前列表项前编号的值,如

    <ol type="a">
    	<li type="A" value="5">计算机科学与技术专业</li>
    	<li>软件工程专业</li>
    	<li>电子信息工程专业</li>
    	<li>物联网工程专业</li>
    </ol>
    

    结果如下:
    E. 计算机科学与技术专业
    f. 软件工程学院
    g. 电子信息工程专业
    h. 物联网工程专业
    说明:改变列表项的类型类型和编号属性值会影响本身的编号类型和后面列表项编号的顺序。

    定义列表:
    (1)使用dl标记(双标记)。在开始标记(dl)和结束标记(/dl)之间插入dt标记(双标记)定义列表中每个元素的标题;dd标记(双标记)书写列表中的元素内容。
    (2)定义列表中每个列表项前既没有符号也没有编号。
    例如:

    <body>
    	<dl>
    		<dt>联系人:</dt>
    			<dd>张有为之</dd>
    			<dd>电话:010-12345678</dd>
    			<dd>E-mail:xyz@sina.com</dd>
    		<dt>联系地址:</dt>
    			<dd>上海市复旦大学计算机系10计算机班</dd>
    		<dt>邮政编码:</dt>
    			<dd>200433</dd>
    </body>
    

    结果如下:
    在这里插入图片描述2、题目要求的格式从图片中可以看出是有序列表,其中标题字“优秀教材一等奖”等不是<h5>或是其他的标题样式,可以将这些标题写在<p></p>段落标记中
    3、超链接用<a></a>标记,此处链接的是网站,属于绝对路径

    三、代码编写
    在这里插入图片描述

    四、结果展示
    在这里插入图片描述

    展开全文
  • 无序列表:ul(unordered list ),内部嵌套多个li(列表项)标签; ul与li都拥有type属性:disc、circle、square; ul中只能嵌套li,不能直接在ul标签中输入文字; 有序列表:ol(ordered list),ol标签内部可以...

    1.列表标签:
    无序列表:ul(unordered list ),内部嵌套多个li(列表项)标签;
    ul与li都拥有type属性:disc、circle、square;
    ul中只能嵌套li,不能直接在ul标签中输入文字;

    有序列表:ol(ordered list),ol标签内部可以嵌套多个li标签;
    type:1(默认)、a或A、i或I;
    start:数字,规定项目符号的起始值;
    value(li):数字,规定项目符号的数字;
    使用ol/li的type、start、value属性,最好通过CSS样式属性替代;

    定义列表:dl(definition list):dl、dt:指定术语名词、dd:对名词进行解释和描述;一对dt标签可以对应多对dd;
    dl、dt、dd三个标签不允许出现其他标签;
    dl标签必须与dt标签相邻;

    2.CSS控制列表样式:
    list-style-type:用于控制列表显示符号的类型;
    由于各个浏览器对list-style-type属性的解析不同,因此实际网页制作过程中不推荐使用;

    list-style-image:引用项目图像;
    列表项目图像和列表项难以对齐,不推荐使用;

    list-style-position属性:inside:列表项目符号位于列表文本以内;
    outside:列表项目符号位于列表文本以外(默认);

    life-style:语法:life-style:列表项目符号 列表项目符号的位置 列表项目符号图像(不需要的项目可以省略);

    3.超链接标签:
    <a href=“跳转目标” target=“目标窗口的弹出方式”~ 文本或图像</a~ ;
    terget:用于连接页面的打开方式,_self:默认值;
    _blank:在新窗口中打开;
    暂时没有确定链接目标时,通常将a标签属性定义为“#”,表示该链接为空链接;
    不仅可以创建文本超链接,在网页中各种网页元素(图片、表格、音频等)都可以添加超链接;
    去除链接图像自动添加的边框效果:<a href="#"~ <img src=“图像URL” border=“0” /~ <a/~;

    锚点链接:直接跳转到指定位置的内容;

    4.链接伪类控制超链接:
    a:link{CSS样式规则 } :超链接的默认样式;
    a:visited{CSS样式规则}:超链接被访问过后的样式;
    a:hover{CSS样式规则}:悬停时的样式;
    a:active{CSS样式规则}:鼠标单击不动时的样式;
    使用4种伪类时,对排列顺序通常按照a:link、a:visited、a:hover、a:active的顺序书写;
    伪链接常常用于控制超链接的背景、边框等样式;

    展开全文
  • 列表

    2020-12-19 12:27:00
    HTML负责网页的结构 CSS CSS负责页面中的表现 有序列表(ol)和无序...列表之间可以互相嵌套,可以在一个有序列表中放一个无序列表,也可以在无序列表中放有序列表。 有序列表嵌套无序列表 123456 12 ...
    
    
    HTML
    HTML负责网页的结构
    CSS
    CSS负责页面中的表现

    有序列表(ol)和无序列表(ul),使用 li 标签来表示列表中的一个项。
    有序列表

    1. 结构
    2. 表现
    3. 行为

    无序列表

    • 结构
    • 表现
    • 行为

    列表之间可以互相嵌套,可以在一个有序列表中放一个无序列表,也可以在无序列表中放有序列表。
    有序列表嵌套无序列表

    1. 123456
      • 12
      • 34
      • 56
    2. <li>123456</li>
      
    无序列表嵌套有序列表
    • 123456
      1. 12
      2. 34
      3. 56
    • 123456

    网页导航栏形式展现

    展开全文
  • 列表分为有序列表无序列表和定义列表,同时列表之中还能嵌套列表,和表格非常相似。 首先介绍有序列表 要用<ol></ol>标签告诉浏览器这里是列表。 然后在里面添加<li></li
  • 有序列表经过之前关于表格、表单的学习后,再来学习列表,就显得非常的简单和容易...列表分为有序列表无序列表和定义列表,同时列表之中还能嵌套列表,和表格非常相似。首先介绍有序列表要用标签告诉浏览器这里...
  • 文章目录列表无序列表有序列表列表嵌套定义列表单位长度单位像素 px百分比em颜色单位颜色名为单位RGB值字体样式字体分类衬线字体非衬线字体(无衬线字体)字体的其他样式font-style属性font-weight属性(粗细)font-...
  • 使用无序有序及定义列表设计Web网页 使用嵌套列表设计小型网站首页 列表的简介 列表能对网页中的相关信息进行合理的布局,将项目有序无序地罗列在一起,从而方便用户浏览和操作。 HTML中列表一共有5种,...
  • DIV CSS网页布局中常用的列表元素ul ol li dl dt dd释义,块级元素div尽量少用,和table一样,嵌套越少越好  ol 有序列表。 Example Source Code …… …… ……  表现为: Example ...
  • HTML学习----列表

    2021-01-20 09:27:23
    列表分为两种,一种是有序列表,一种是无序列表有序列表使用编号来记录项目的顺序,无序列表使用项目符号记录无序的项目。 列表的主要标签有以下几种: |标签|描述 | 项目 Value <“ul”> 无序列表i...
  • DIV CSS网页布局中常用的列表元素ul ol li dl dt dd释义,块级元素div尽量少用,和table一样,嵌套越少越好  ol 有序列表。 …… …… ……  表现为: 1…… 2…… 3……  ul 无序列表,...
  • 2. 网页基本排版

    2021-03-20 22:15:39
    文章目录网页基本排版2.1 文字与段落排版2.1.1 段落标签2.1.1 标题标签2.1.3 换行标签2.1.4 水平标签2.1.5 预...网页背景图片2.3.5 图文混排2.4 列表2.4.1 无序列表2.4.2 有序列表2.4.3 定义列表2.4.4 嵌套列表2.5 实训...
  • 网页列表是很常见的标签,主要分为有序标签、无序标签、列表嵌套、定义标签 有序标签:<ol><li></li><ol> 无序标签:<ul><li></li></ul> 列表嵌套:<ul&...
  • 列表标签、表格标签、块级标签、表单标签一、列表1、无序列表2、有序列表3、定义列表(项目列表)4、列表嵌套二、表格标签三、块级标签四、网页的布局 一、列表 1、无序列表 列表项没有先后顺序 <ul type="disc...
  • 有序列表经过之前关于表格、表单的学习后,再来学习列表,就显得非常的简单和容易...列表分为有序列表无序列表和定义列表,同时列表之中还能嵌套列表,和表格非常相似。首先介绍有序列表要用标签告诉浏览器这里...
  • DIV +CSS网页布局中常用的列表元素ul ol li dl dt dd用法解释,块级元素div尽量少用,和table一样,嵌套越少越好ol 有序列表。 …… …… …… 表现为:1……2……3……ul 无序列表,表现为li前面是大圆点而不是123 ...
  • DIV CSS网页布局中常用的列表元素ul ol li dl dt dd释义,块级元素div尽量少用,和table一样,嵌套越少越好 ol 有序列表。……………… 表现为:1……2……3…… ul 无序列表,表现为li前面是大圆点而...
  • 列表元素ul ol li dl dt dd释义

    千次阅读 2007-06-15 23:39:00
    DIV CSS网页布局中常用的列表元素ul ol li dl dt dd释义,块级元素div尽量少用,和table一样,嵌套越少越好 ol 有序列表。……………… 表现为:1……2……3…… ul 无序列表,表现为li前面是大圆点而...
  • html总结

    2020-12-01 20:39:46
    有序列表无序列表 无序列表 ul 表示无序列表,表示出是带有项目符号列表 ul元素前边的符号可以是任何的形式 ,我们可以通过css的list-style-type属性控制 没有规定ul和li嵌套的深度 有序列表 ol 表示有序列表...
  • HTML入门速成

    2021-05-05 21:06:06
    列表(有序列表/无序列表/嵌套列表)(1)有序列表(2)无序列表(3)嵌套列表3. < style >和 < script > 前言 在学习或者工作之中,经常需要自己写一些简单的网页,那么,就需要有一定的前端代码能力。...
  • 文章目录HTML、CSS、JavaScript的关系HTML标签标签的结构标签的类型常用标签标题标签段落标签换行标签水平分割线标签字体标签文本格式化标签图像...标签列表标签无序列表有序列表项目列表(自定义列表)列表标签的嵌套...

空空如也

空空如也

1 2 3 4
收藏数 64
精华内容 25
关键字:

网页列表有序无序嵌套