网页表格下划线网页表格下划线
篇一:用代码实现网页中表格的虚下划线效果
如图这种虚下划线效果可用以下代码实现
这里通过边框属性的虚线边框border控制虚线。以下设
置的css 高度(css height)和css 宽度(css width)为350像
素是为了便于观看演示 其它意思。
一、四边为虚线边框
border:1px dashed #000; 黑色虚线边框
实例:
CSS代码: .divcss5{border:1px dashed #000;
height:50px;width:350px} Html代码: <...
网页表格下划线
篇一:用代码实现网页中表格的虚下划线效果
如图这种虚下划线效果可用以下代码实现
这里通过边框属性的虚线边框border控制虚线。以下设
置的css 高度(css height)和css 宽度(css width)为350像
素是为了便于观看演示 其它意思。
一、四边为虚线边框
border:1px dashed #000; 黑色虚线边框
实例:
CSS代码: .divcss5{border:1px dashed #000;
height:50px;width:350px} Html代码: <div class=divcss5我的四边为黑色虚线边框</div
这里设置边框缩写方式定义divcss5选择器四边边框为
1px的黑色虚线边框
二、左边为虚线:
CSS代码: .divcss5-1{border-left:1px dashed #000;
height:50px;width:350px} Html代码: <div class=divcss5-1我的左边为黑色虚线边框</div
这里设置了左边一边为黑色虚线边框
1
三、右边为虚线:
CSS代码: .divcss5-2{border-right:1px dashed #000;
height:50px;width:350px} Html代码: <div class=divcss5-2我的右边为黑色虚线边框</div
这里设置了右边一边为黑色虚线边框
四、顶部边(上边)为虚线:
CSS代码: .divcss5-3{border-top:1px dashed #000;
height:50px;width:350px} Html代码: <div class=divcss5-3我的上边为黑色虚线边框</div
这里设置了顶边(上边线)一边为黑色虚线边框
五、底部边(下边)为虚线:
CSS代码: .divcss5-4{border-bottom:1px dashed #000;
height:50px;width:350px}
Html代码: <div class=divcss5-4我的下边为黑色虚线
边框</div 这里设置了底边(下边线)一边为黑色虚线边
框
六、任意一边不为虚线,其它三边为虚线情况
加入右边边框不为虚线而没有边线,其它三边为黑色虚线
边框
CSS代码: .divcss5-5{border:1px dashed #000;border-right:0;
height:50px;width:350px}
2
Html代码: <div class=divcss5-5我的右边边框无边线而其它三边为黑色虚线边框实例</div
这里通过先设置了该对象四边为黑色1px虚线边框,紧接着又设置一边边线为0的设置,这样相当于设置了3边的边框虚线属性,但是这里注意边框属性设置前后顺序。
篇二:网页表格表单
网页设计上机实验报告
学院名称
专 业 (班 级)
姓 名 (学 号)
指 导 教 师倪丽萍
实验一
1.实验要求:设计一张表格,并在表格当中填充文本,要求样式如下图所示:
2.设计
及思路:利用Dreamweaver cc2014软件进行代码的设计。在<body</body主体中添加表格代码,用<table</table标记表格,设定表格边框线厚度border为1,表格内字体距单元格边框cellpadding为20,单元格之间的间隔为0。开始先设计一个三行三列的表格,用<tr</tr标记表格的行,用<td</td标记表格的列。然后用colspan合并第一行的第一、第二个单元格,并删除一行列标记代码。得到一个合并单元格,如上图所示的第1
3
个单元格,用rowspan合并第一行的第二个单元格和第二行的第三个单元格,删除一行列标记。得到一个合并的单元格,如上图所示的第2个单元格。再用colspan 合并第三行的第二个和第三个单元格,删除一行列标记,得到如图所示的第6个单元格。再根据属性要求,设置字体(font face标记),字体大小(font size标记),字体颜色(font color),对其方式(align)。这样的话就可以得到一个经过处理后的表格。
附实验一代码:
<!doctype html
<html
<head
<meta charset=utf-8
<title表格设计</title
</head
<body
<table border=1 width=800 cellpadding=20
cellspacing=0 <tr
<td colspan=2 align=center第一个单元格</td
<td rowspan=2 align=center第二个单元格</td
</tr
<tr
<td align=center第三个单元格</td
4
<td align=center第四(来自:WwW.xltkwJ.cOm 小龙 文档 网:网页表格下划线)个单元格</td
</tr
<tr
<td align=center第五个单元格</td
<td colspan=2 align=center第六个单元格</td
</tr
</table
</body
</html
实验结果截图:
实验二
1.实验要求:设计一个会员注册表单,如下图所示:
2.实验思路:一开始设计的时候,仅仅只是一行一行的设计下来,这样会导致“用户名”、“密码”这些文本,没有如上图所示的对齐,一开始设计的思路是在这些文本前面加 ,空格标记来使这些文本对齐,但是不方便,而且不美观,因此后来采用表格的设计思路,设计一个8行2列的表格,然后将需要填充的文本或者输入域放置到单元格中,再在单元格中设计对齐方式,这样的可以很方便的设计对齐方式。
3.设计步骤:在body中添加一个<form</form表单
5
标记,目的是将表单中的内容看做一个整体。然后设置一下
背景颜色,我加了一条长度为800的水平分割线,用<hr
标记。再添加一个表格标记,设置表格的总体属性width=680
height=302 border=1 cellspacing=0 align=center 。接下来就
在单元格中添加需要的文本,或者输入域即可,本实验中需
要的输入域有文本域,文本框,密码域,单选域,复选框,
以及提交与确认按钮。设置第一列1~6行为右对齐,即可得
到上图的效果。在第二列中添加输入域,添加输入域的方法,
可以在插入-表单选项中选择相应的输入域,或者直接输入代
码。设置输入域的属性,比如输入域的名字,值,以及初始
的值。
附实验二代码:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
<html xmlns=
<head
<meta http-equiv=Content-Type content=text/html;
charset=gb2312 / <title我的网页</title
</head
<body<body bgcolor=lavender
<h1 align=center填写注册信息</h1
6
<hr/<font align=left
<form action=:8080/jsp method=post
<table align=center width=800 border=0 cellpadding=3
cellspacing=0
<tr<td align=right用户名:</td<td*<input type=text name=user用户名由字母开头,后跟字母,数字或
者下划线</td</tr
<tr<td align=right密码:</td<td*<input type=password name=password 设置登陆密码,最少六位~
</td</tr
<tr<td align=right确认密码:
</td<td*<input type=password name=password 请
再输入你的密码</td</tr
<tr<td align=right性别:</td<td*<input type=radio name=sex value=Male 男
<input type=radio name=sex value=female 女
请选择你的性别</td</tr
<tr<td align=right邮箱地址:
</td<td*<input type= text name= mailaddress
MAXLENGTH = 20请输入你的常用邮箱,可以用此用邮箱
找回密码!</td</tr
<tr<td align=right valign=top 基本情
7
况:</td<td<textarea name = 个人说明 rows = 8
COLS = 50 [READONLY] </textarea</td</tr
<tr<td</td<td align=left <input type=submit
value=提交 align=middle
篇三:下划线怎么打 word下划线打出方法大全
下划线怎么打 word下划线打出方法大全 发布时间:2011-11-10 22:48 作者:电脑百事网原创 来源:
2144 次阅读 今天一网络朋友问了笔者一个这样的问题:“下划线怎么打,”。其实下划线使用键盘即可轻松快速的打不来,可是很多新手朋友还会问同样的问题,因为记得在去年也有身边的朋友问过,下面编辑为大家汇总出几种下划线怎么打的方法,希望电脑爱好者新手朋友可以学以致用。
下划线怎么打,最简单的方法使用电脑组合键实现,我们需要同时按住辅助键(shift)+减号键(-)即可打出下划线(_)。如下图键盘示意图所示:
下划线怎么打_下划线输入键盘示意图
如上图键盘示意图所示,只要同时按住shift + -键即可轻松打出下划线。这里需要注意的是,输入法必须为系统默认的输入字母(也就是英文状态下),按以上组合键才有效,若在智能ABC或其它输入法下,可能会打不出下划线。如何屏蔽网站, 屏蔽网站方法汇总
以上为大家介绍的是最常用的下划线打出来的方法,下面
8
为大家介绍下在办公软件中如何打出下划线。很多办公朋友其实对电脑也多数不怎么精通,导致不少办公朋友遇到需要打划线一时不知道方法,下面介几种word 下划线方法供大家参考。
word 下划线打出方法一:选中需要添加下划线的文字段落,然后点击word工具栏中的“下划线”按钮即可,如下图:
word 下划线打出方法
word 下划线打出方法二:选中需要添加下划线的文字段落后,点击鼠标右键,弹出菜单中选择“字体(F)”,然后弹出窗口中间部位,找到“下划线类型”选项,将下划线设置为您需要的样式后,点击“确定”即可打出下划线,如下图所示:
word 下划线打出方法2
下划线怎么打,其实问这个问题的朋友多数是电脑入门级别朋友,希望阅读完本文之后,希望所有的新手朋友都可以在任何文字输入场合都可以轻松的打出下划线,其实方法很简单,多注意观察与了解即可轻松解决下划线打出问题。
9
本文档为【网页表格下划线】,请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑,
图片更改请在作品中右键图片并更换,文字修改请直接点击文字进行修改,也可以新增和删除文档中的内容。
[版权声明] 本站所有资料为用户分享产生,若发现您的权利被侵害,请联系客服邮件isharekefu@iask.cn,我们尽快处理。
本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用。
网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。