zoukankan      html  css  js  c++  java

  • 2.2学习

    1.列表标签

    有序列表：

    <ol type="I" start="" reversed="reversed">

    <li></li>

    </ol>

    https://www.runoob.com/tags/tag-ol.html

                    无序列表：

    <ul type="">

    <li></li>

    </ul>

    https://www.runoob.com/tags/tag-ul.html

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>无序列表</title>
	</head>
	<body>
		<ul type="square">
			<li>CSDN</li>
			<li>百度</li>
			<li>京东</li>
		</ul>
	</body>
</html>

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>有序列表</title>
	</head>
	<body>
		<ol start="4" reversed="reversed" type="a">
			<li>CSDN</li>
			<li>百度</li>
			<li>京东</li>
		</ol>
	</body>
</html>

    2.超链接标签

    <a href="" target=""></a>

    href:指定跳转的位置   

                                           =“#”为不跳转

    target：指定跳转页面显示的位置(取值：_self：当前界面转化

                                                                                              _blank：新界面生成)

    3.表格标签

    <table border="" width="" height="" align="" bgcolor="" cellpadding="" cellspacing="">

    <tr>

    <td></td>

    <td></td>

    <td></td>

    </tr>

    <tr>

    <td></td>

    </tr>

    <tr>

    <td></td>

    </tr>

    </table>

                                     <table></table>表格建立

                                     <tr></tr>行

                                     <td></td>列

                                     边框：border

                                     宽度：width

                                      高度：height

                                      背景颜色：bgcolor

                                      边框与边框的间距：cellspacing

                                      边框与内容的间距：cellpadding

                                      居中显示：align

                              跨行跨列操作

                             跨行：rowspan

                             跨列：colspan

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商城首页</title>
	</head>
	<body>
		<!--1.创建一个八行一列的biaoge-->
		<table border="1px" width="1300px" align="center" cellspacing="0px" cellpadding="0px">
			<!--2.logo部分-->
			<tr>
				<td>
					<!--嵌套一个一行三列的表格-->
					<table border="1px" width="100%">
						<tr height="50px">
							<td width="33.3%">
								<img src="../img/logo2.png" height="47px" />
							</td>
							<td width="33.3%">
								<img src="../img/header.png" height="47px" />
							</td>
							<td width="33.3%">
								<a href="#">登录</a>
								<a href="#">注册</a>
								<a href="#">购物车</a>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!--3.导航栏-->
			<tr height="50px">
				<td bgcolor="black">
					    
					<a href="#"><font size="5" color="white">首页</font></a>    
					<a href="#"><font color="white">手机数码</font></a>    
					<a href="#"><font color="white">电脑办公</font></a>    
					<a href="#"><font color="white">鞋靴箱包</font></a>    
					<a href="#"><font color="white">家用电器</font></a>    
				</td>
			</tr>
			<!--4.轮播图-->
			<tr>
				<td>
					<img src="../img/1.jpg" width="100%" />
				</td>
			</tr>
			<!--5.最新商品-->
			<tr>
				<td>
					<!--嵌套一个三行七列的表格-->
					<table border="1px" width="100%">
						<tr height="50px">
							<td colspan="7">
								  
								<font size="5">最新商品</font>  
								<img src="../img/title2.jpg" />
							</td>
						</tr>
						<tr>
							<td rowspan="2" width="190px" height="500px">
								<img src="../img/big01.jpg" width="100%" height="100%" />
							</td>
							<td colspan="3" width="555px" height="250px">
								<a href="#"><img src="../img/middle01.jpg" width="100%" height="100%" /></a>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">￥299.00</font>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">￥299.00</font>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">￥299.00</font>
							</td>
						</tr>
						<tr>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">￥299.00</font>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">￥299.00</font>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">￥299.00</font>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">￥299.00</font>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">￥299.00</font>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">￥299.00</font>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!--6.广告图片-->
			<tr>
				<td>
					<img src="../img/ad.jpg" width="100%" />
				</td>
			</tr>
			<!--7.热门商品-->
			<tr>
				<td>
					<!--嵌套一个三行七列的表格-->
					<table border="1px" width="100%">
						<tr height="50px">
							<td colspan="7">
								  
								<font size="5">热门商品</font>  
								<img src="../img/title2.jpg" />
							</td>
						</tr>
						<tr>
							<td rowspan="2" width="190px" height="500px">
								<img src="../img/big01.jpg" width="100%" height="100%" />
							</td>
							<td colspan="3" width="555px" height="250px">
								<a href="#"><img src="../img/middle01.jpg" width="100%" height="100%" /></a>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">￥299.00</font>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">￥299.00</font>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">￥299.00</font>
							</td>
						</tr>
						<tr>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">￥299.00</font>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">￥299.00</font>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">￥299.00</font>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">￥299.00</font>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">￥299.00</font>
							</td>
							<td width="185px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" /></a><br />
								<a href="#"><font color="gray">电炖锅</font></a><br /><br />
								<font color="red">￥299.00</font>
							</td>
						</tr>
					</table>
				</td>
			</tr>3
			<!--8.广告图片-->
			<tr>
				<td>
					<img src="../img/footer.jpg" width="100%" />
				</td>
			</tr>
			<!--9.友情链接和版权信息-->
			<tr>
				<td align="center">
					<a href="#">1234</a>
					<a href="#">2234</a>
					<a href="#">3234</a>
					<a href="#">4234</a>
					<a href="#">5234</a>
					<a href="#">6234</a>
					<a href="#">7234</a>
					<a href="#">8234</a>
					<p>
						123456789
					</p>
				</td>
			</tr>
		</table>
	</body>
</html>

    4.框架集标签：

    <frameset rows="" cols="">

    <frame src=""/>

    <frame name=""/>

    </frameset>

                          </frameset>

                                    属性：

                                           cols:进行垂直切割划分，可以切割为任一块。(参数的值相加=100%，其中有一块可以使用*表示)

                                           rows: 进行水平切割划分，可以切割为任一块。(参数的值相加=100%，其中有一块可以使用*表示)

                                    一 旦 划 分 区 域 之 后 ， 我 们 需 要 对 具 体 的 区 域 进 行 内 容 的 填 充 ， 此 时 需 要 使 用<frame></frame>标签

                                    src:指定该区域显示的文件(路径)

                                    name:它通常会结合超链接的 target 属性使用，来定义最终的显示位置。

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网站后台系统显示界面</title>
	</head>
	<frameset rows="20%,*">
		<frame src="top.html" />
		<frameset cols="20%,*">
			<frame src="left.html" />
			<frame name="right" />
		</frameset>
	</frameset>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<font size="7">欢迎XXX进入后台管理系统</font>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="right.html" target="right">会员管理</a><br /><br />
		<a href="#">品牌管理</a><br /><br />
		<a href="#">商品管理</a><br /><br />
		<a href="#">分类管理</a>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		所有用户信息
	</body>
</html>
  • 相关阅读:
    hdu 1427 速算24点
    HDFS Safemode问题
    surfaceDestroyed什么时候被调用
    C# DataTable的詳細使用方法
    HDU 2460 Network（双连通+树链剖分+线段树）
    撰写架构设计文档的心得体会
    win7下jdk安装环境变量配置
    Android提高第二篇之SurfaceView的基本使用
    UVa 490
    bnu 34982 Beautiful Garden(暴力)
  • 原文地址：https://www.cnblogs.com/zql-42/p/12260489.html
Copyright © 2011-2022 走看看