案例01"/>
前端开发——案例01
-
目录
1.表格使用——简介介绍
2.顶部导航栏的使用
3.侧边导航栏的使用
1.表格使用——简介介绍
HTML 表格由 <table> 标签来定义。
HTML 表格是一种用于展示结构化数据的标记语言元素。
每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。
- tr：tr 是 table row 的缩写，表示表格的一行。
- td：td 是 table data 的缩写，表示表格的数据单元格。
- th：th 是 table header的缩写，表示表格的表头单元格。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
以下是一个简单的表格案例代码展示：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><tableborder="1"cellspacing="0"cellpadding="5"align="center"width="655"><caption><h1>个人简历</h1></caption><tr><tdstyle="background-color: rgb(158, 222, 252)"width="55"align="center"><h5>求职意向</h5></td><td colspan="4">会计</td></tr><tr><td style="background-color: rgb(158, 222, 252)" align="center"><h5>姓名</h5></td><td align="center">小明</td><tdstyle="background-color: rgb(158, 222, 252)"width="55"align="center"><h5>出生年月</h5></td><td align="center">1998.1.24</td><td rowspan="4"><img src="./img/头像.jpg" alt="" width="230" /></td></tr><tr><td style="background-color: rgb(158, 222, 252)" align="center"><h5>性别</h5></td><td align="center">女</td><td style="background-color: rgb(158, 222, 252)" align="center"><h5>政治面貌</h5></td><td align="center">团员</td></tr><tr><td style="background-color: rgb(158, 222, 252)" align="center"><h5>籍贯</h5></td><td align="center">北京</td><td style="background-color: rgb(158, 222, 252)" align="center"><h5>最高学历</h5></td><td align="center">本科</td></tr><tr><td style="background-color: rgb(158, 222, 252)" align="center"><h5>邮箱</h5></td><td>123456@qq</td><td style="background-color: rgb(158, 222, 252)" align="center"><h5>联系电话</h5></td><td>8888888888888</td></tr><tr><td style="background-color: rgb(158, 222, 252)" align="center"><h5>地址</h5></td><td colspan="4"></td></tr><tr><tdrowspan="4"style="background-color: rgb(158, 222, 252)"align="center"><h5>教育经历</h5></td><td colspan="2" align="center">起止日期</td><td align="center">学校或院校</td><td align="center">专业</td></tr><tr><td colspan="2" align="center">2011.09~2016.06</td><td align="center">北京财经大学</td><td align="center">会计</td></tr><tr align="center"><td colspan="2">2009.09~2011.06</td><td>北京中学</td><td></td></tr><tr align="center"><td colspan="2">2003.09~2009.06</td><td>北京小学</td><td></td></tr><tr><td style="background-color: rgb(158, 222, 252)" align="center"><h5>主修课程</h5></td><td colspan="4">会计学原理、财务管理、中级财务会计、审计学、成本会计学、管理会计学、会计电算化、高级财务会计、管理统计学、管理统计学、中级财务会计</td></tr><tr><td style="background-color: rgb(158, 222, 252)" align="center"><h5>实习经历</h5></td><td colspan="4"><table><tr><td><h5>2016.06~2016.07</h5></td><td><h5>代账公司</h5></td><td><h5>实习</h5></td></tr><tr><td colspan="3">负责公司申报,签三方协议,申请发票,购买发票,完成报表。</td></tr></table></td></tr><tr><td style="background-color: rgb(158, 222, 252)" align="center"><h5>荣誉证书</h5></td><td colspan="4">会计从业资格证、珠算四级、全国计算机等级-级证书、书法证二级证书</td></tr><tr><td style="background-color: rgb(158, 222, 252)" align="center"><h5>校园经历</h5></td><td colspan="4"><table><tr><td><h5>2011.12~2013.09</h5></td><td colspan="2"><h5>校学生会文艺部</h5></td></tr><tr><td colspan="3">负责学校文艺演出,多次举办校园歌手大赛,校园舞蹈大赛和校园文化节等活动</td></tr></table></td></tr><tr><td style="background-color: rgb(158, 222, 252)" align="center"><h5>自我评价</h5></td><td colspan="4">我是一名会计专业学生,在校期间刻苦学习,掌握基本理论知识,考取了会计从业证书。勤奋好学,吃苦耐劳,诚实守信。学习能力强,专业成绩突出,曾获得一等奖学金。</td></tr></table></body>
</html>
2.顶部导航栏的使用
HTML网页头部导航栏是网页的核心组成部分之一，它通常包括网站的标志、主要导航链接以及其他重要的信息。导航栏的设计应该简单明了，易于使用，以便让用户快速地找到他们需要的信息。
以下是一个简单的顶部导航栏案例代码展示：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.whole {line-height: 40px;height: 40px;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;}a {font-size: 12px;text-decoration: none;color: #000;}.title {width: 80px;height: 40px;text-align: center;display: inline-block;}.title:hover {background-color: #edeef0;/* 手形 */cursor: pointer;}</style></head><body><div class="whole"><div class="title"><a href="">新浪导航</a></div><div class="title"><a href="">新浪导航</a></div><div class="title"><a href="">新浪导航</a></div><div class="title"><a href="">新浪导航</a></div><div class="title"><a href="">新浪导航</a></div></div></body>
</html>
3.侧边导航栏的使用
HTML侧边导航栏是网页设计中常用的布局元素，它可以起到以下几个作用：
-
导航功能：侧边导航栏可以包括网站中的不同页面或内容的链接，这样用户可以通过点击导航栏中的链接快速导航到不同的页面，方便用户浏览和导航网站。
-
提示页面结构：通过侧边导航栏，用户可以快速了解整个网站的结构和各个页面之间的关系，帮助用户更好地理解网站的组织结构。
-
增强用户体验：一个明确、易于使用的侧边导航栏可以提供良好的用户体验。用户可以直观地找到所需内容，并且不需要浪费时间在页面之间的切换上，提高了用户的效率。
-
美化页面布局：侧边导航栏可以增加网页的美观度和吸引力。通过适当设计和布局，侧边导航栏可以为网页增加一种整体的风格，并帮助页面更好地呈现其内容。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;}/* div */ul {height: 500px;width: 200px;background-color: rgb(25, 59, 73);}a {color: rgb(255, 255, 255);text-decoration: none;}/* .title */li {padding: 0 20px;height: 50px;line-height: 50px;}span {padding: 0 15px;}/* .title:hover */li:hover {background-color: red;}</style></head><body><ul><li><a href="">手机<span>电话卡</span></a></li><li><a href="">电视<span>盒子</span></a></li><li><a href="">笔记本<span>显示器</span></a></li><li><a href="">家电<span>插线板</span></a></li><li><a href="">出行<span>穿戴</span></a></li><li><a href="">智能<span>路由器</span></a></li><li><a href="">电源<span>配件</span></a></li><li><a href="">健康<span>儿童</span></a></li><li><a href="">耳机<span>音箱</span></a></li><li><a href="">生活<span>箱包</span></a></li></ul></body>
</html>
更多推荐
前端开发——案例01
发布评论