前端_横向导航栏和商务表格

WWWOWhite

已于 2023-03-21 09:47:53 修改

阅读量2.4k

点赞数 2

分类专栏：前端实验文章标签： html5

于 2022-04-14 00:18:45 首次发布

本文链接：https://blog.csdn.net/qq_45915904/article/details/124161555

版权

前端实验专栏收录该内容

2 篇文章 0 订阅

订阅专栏

横向导航栏和商务表格

一、制作横向导航栏

实现效果

在这里插入图片描述

使用标签

<ul>
    <li></li>
</ul>

a:hover

基本布局

<body>
    <h4>导航栏菜单的设计与实现</h4>
    <hr />

    <ul>
        <li>
            <a href="#">头条</a>
        </li>
        <li>
            <a href="#">娱乐</a>
        </li>
        <li>
            <a href="#">热点</a>
        </li>
        <li>
            <a href="#">体育</a>
        </li>
        <li>
            <a href="#">财经</a>
        </li>
        <li>
            <a href="#">科技</a>
        </li>

    </ul>

</body>

问题关键

<ul><li></li><li></li>...</ul>一般显示的都是纵向排列，如何设置成横向？

css中使用

li {
    float: left;
}

float讲解：https://www.runoob.com/css/css-float.html

简单表述，float将元素变成可以浮动的元素，元素默认忘上方浮动，并且从左到右浮动

总代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<style type="text/css">
		ul {
			list-style: none;
			padding: 0;
		}

		li {
			float: left;

		}

		a {
			display: block;
			width: 100px;
			color: white;
			background-color: #5AF;
			text-align: center;
			padding: 5px;
			text-decoration: none;
		}

		li a:hover {
			background-color: #006fdd;
			color: #FFFFFF;
		}
	</style>


	<body>
		<h4>导航栏菜单的设计与实现</h4>
		<hr />

		<ul>
			<li>
				<a href="#">头条</a>
			</li>
			<li>
				<a href="#">娱乐</a>
			</li>
			<li>
				<a href="#">热点</a>
			</li>
			<li>
				<a href="#">体育</a>
			</li>
			<li>
				<a href="#">财经</a>
			</li>
			<li>
				<a href="#">科技</a>
			</li>

		</ul>

	</body>


</html>

二、商务风格表格的设计与实现

实现效果

使用标签

<table>
    <caption></caption>
    <tr>
    	<td></td>
    </tr>
</table>

基本布局

<h1>商务风格表格的设计与实现</h1>
<hr />
<table border="1" id="recruit">
    <caption>招聘信息表</caption>
    <tr>
        <th>地点</th>
        <th>招聘职位</th>
        <th>公司</th>
    </tr>
    <tr>
        <td>全国</td>
        <td>产品培训生</td>
        <td>腾讯</td>
    </tr>
    <tr class="orange">
        <td>全国</td>
        <td>前端开发工程师</td>
        <td>阿里巴巴</td>
    </tr>
    <tr>
        <td>上海</td>
        <td>交互设计师</td>
        <td>网易游戏</td>
    </tr>
    <tr class="orange">
        <td>北京</td>
        <td>视觉设计师</td>
        <td>360</td>
    </tr>
    <tr>
        <td>深圳</td>
        <td>数据分析师</td>
        <td>IBM</td>
    </tr>
    <tr class="orange">
        <td>杭州</td>
        <td>数据研发工程师</td>
        <td>微软</td>
    </tr>
</table>

问题关键

如何将原来丑陋的表格优化？

#tableid{
    /* 表格线 */
    border-collapse: collapse;
}

总代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style type="text/css">
			/* 设置表格整体样式 */
			#recruit {
				/* 与网页同宽 */
				width: 100%;
				/* 表格线 */
				border-collapse: collapse;
				/* 表格中文字的在表格的位置 */
				text-align: left;
			}

			#recruit td,#recruit th{
				border: 1px solid orange;
				padding:7px;
			}
			
			#recruit th{
				background-color: orange;
				/* 文字颜色 */
				color:#FFFFFF;
			}
			
			#recruit tr.orange{
				background-color: #FFEDDB;
			}
			
		</style>
	</head>
	
	<body>
		<h1>商务风格表格的设计与实现</h1>
		<hr />
		<table border="1" id="recruit">
			<caption>招聘信息表</caption>
			<tr>
				<th>地点</th>
				<th>招聘职位</th>
				<th>公司</th>
			</tr>
			<tr>
				<td>全国</td>
				<td>产品培训生</td>
				<td>腾讯</td>
			</tr>
			<tr class="orange">
				<td>全国</td>
				<td>前端开发工程师</td>
				<td>阿里巴巴</td>
			</tr>
			<tr>
				<td>上海</td>
				<td>交互设计师</td>
				<td>网易游戏</td>
			</tr>
			<tr class="orange">
				<td>北京</td>
				<td>视觉设计师</td>
				<td>360</td>
			</tr>
			<tr>
				<td>深圳</td>
				<td>数据分析师</td>
				<td>IBM</td>
			</tr>
			<tr class="orange">
				<td>杭州</td>
				<td>数据研发工程师</td>
				<td>微软</td>
			</tr>
		</table>
	</body>
</html>