我已经结束了关于C语言的课程，现在想要在前端有所尝试，一方面是C语言里的算法和内容的逻辑性很强，概念也很抽象，难度是不言而喻的，而且那些C/C++大佬的头发也很稀疏。
现在假期将至，刚好会有些时间可以自学。
在看了一些视频材料后，我也开始进行一些尝试。
1.div块的布局
先不对div进行设计
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<!--告诉浏览器，你的文档以HTML格式遵循W3C标准XHTML1.0协议--!>
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--这个网页的格式是文本的,utf8的编码--！>
<title>div布局</title>
</head><body><div id="banmain"> <!--全局的div块--!><div id="heading">这是头部 <!--定义头部的div块--！></div><div id="menu">这块做一个类似菜单的东西 <!--定义左边的栏目--！></div><div id="main">主体部分 <!--定义留出的主要空间--！></div><div id="weiba">尾部 <!--定义尾部--！></div></div>
</body>
</html>
先运行以下，看一下效果。
可以看到什么效果都没有
如果我们不对它进行样式的规定，是没有什么实际效果的
下面我们进行样式的设计
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div布局</title>
</head>
<style type="text/css"> <!--加入CSS样式--！>
#banmain{ <!--#索引全局元素--！>width:100%; <!--宽度100%--！>height:900px; <!--高度900个像素--！>background-color:#0C2; <!--背景颜色--！>
}
#heading{width:100%;height:15%;background-color:#0F3;
}
#menu{width:30%;height:70%;background-color:#03C;float:left; <!--设置浮动，从左到右--！>
}
#main{width:70%;height:70%;background-color:#C66;float:left; <!--设置浮动，从左到右--！>
}
#weiba{width:100%;height:15%;background-color:#F39;clear:left; <!--清除浮动效果--！>
}</style><body><div id="banmain"><div id="heading">这是头部</div><div id="menu">这块做一个类似菜单的东西</div><div id="main">主体部分</div><div id="weiba">尾部</div></div>
</body>
</html>
下面再看一下效果；
现在刚才的一些文字变成了4块颜色不同的区域，
我门就可以在这些区域中再进行改变，加入图片，链接，表单什么的。
2.table元素的布局
table元素是一种表格元素，就像这个Markdown编辑器中的表格编辑可能是从table元素简化来的
首先我们要知道一些基本的标签如
th 定义表格的表头。
tr 定义表格的行。
td 定义表格单元。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table元素布局</title>
</head><body marginheight="0px" marginwidth="0px">
<table width="100%" height="900px"> <!--设置长和宽--！><tr><td colspan="2" width="100%" height="10%" bgcolor="#00FFFF">这里是头部</td> <!--设置长和宽和背景颜色，同时合并2个单元格--！></tr><tr><td width="30%" height="70%" bgcolor="#FF3333">左边</td><td width="70%" height="70%" bgcolor="#9933CC">tamade</td></tr><tr><td colspan="2" width="100%" height="20%" bgcolor="#00FF33"> 这里是末尾</td></tr>
</table>
</body>
</html>
运行如下
如果要将边框清除，则将body的margin设为0即可。
现在随便加入一个列表并链接样式文件和图片如图所示
也可以在其中设计表单来丰富其中的内容。
对于这两种方法我觉得第1种方法用DIV进行控制更加简单和方便，和样式的结合也更容易。
本文发布于:2024-01-31 19:22:29，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170670014930785.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
