web前端技术-表格和导航栏（基本标签及CSS样式的应用）

最新推荐文章于 2022-11-23 09:38:15 发布

喜欢星星的田螺姑娘

最新推荐文章于 2022-11-23 09:38:15 发布

阅读量924

点赞数

分类专栏： web前端技术文章标签： web css

本文链接：https://blog.csdn.net/qq_43536231/article/details/105627529

版权

web前端技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、网页表格制作：学习制作的表格的宽高、颜色、内容等各种格式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>商务风格表格的设计与实现</title>
</head>
	<style>
	#tab01 caption {
		font-size: 18px;}#表格标题字体大小
	#tab01{
		text-align: left;#字体左对齐
		border-collapse:collapse;}#使格式一致
	td{
		border:1px solid #09C;#单元格边框为1像素宽，实心，蓝色
		color: #000;#单元格字体颜色
		font-size:18px;#单元格字体大小}
	th{
		color:#3FF;#表头（第一行表格）字体颜色
		border:1px solid #09C;}
    </style>
<body>
<h2>商务风格表格的设计与实现</h2>
<hr size="3" color="#FF0000"/>
<table width="1400" height="310" id="tab01">#表格的总体长度和宽度
	<caption>招聘信息表</caption>
	<tr bgcolor="#09C">#背景颜色设置
    	<th>地点</th>
        <th>招聘单位</th>
        <th>公司</th>
  </tr>
    <tr bgcolor="#00FFFF">
    	<td>全国</td>
        <td>产品培训生</td>
        <td>腾讯</td>
    </tr>
    <tr bgcolor="#00CCFF">
        <td>全国</td>
        <td>前端开发工程师</td>
        <td>阿里巴巴</td>
    </tr>
    <tr bgcolor="#00FFFF">
        <td>上海</td>
        <td>交互设计师</td>
        <td>网易游戏</td>
    </tr>
    <tr bgcolor="#00CCFF">
        <td>北京</td>
        <td>视觉设计师</td>
        <td>360</td>
    </tr>
    <tr bgcolor="#00FFFF">
        <td>深圳</td>
        <td>数据分析师</td>
        <td>IBM</td>
    </tr>
    <tr bgcolor="#00CCFF">
        <td>杭州</td>
        <td>数据研发工程师</td>
        <td>微软</td>
    </tr>
</table>
</body>
</html>

运行结果：
在这里插入图片描述

2、制作的导航栏菜单，要实现当鼠标放在每一个菜单上时鼠标会变成小手状。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航栏菜单</title>
<meta charset="UTF-8">
<style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style-type:none;/*去除黑圆点样式*/
            margin:10px 50px;/*改变导航栏的位置*//*margin:100px auto无效,不能使ul左右居中*/
            text-align:center;/*使菜单里的字体居中*/
            font-size:15px;/*字体大小*/
        }
        li{
            float:left;/*改动的地方*/
            width:100px;
			/*height:30px;*/
            padding:10px;/*字体内边距*//*相对于margin外边距*/
            background-color:#06F;
        }
        a:link,a:visited,a:hover,a:active{/*分别对应正常状态，链接访问过的状态，鼠标经过的状态，按下鼠标时的状态*/
            color:#FFF;/*字体颜色*/
            text-decoration:none;/*对字体消除下划线的格式*/
        }

        a{
            display:block;/*整体变为可点击区域，而不只是字*/
		}
</style>
</head>
<body>
<h4>导航栏菜单的设计与实现</h4>
<br/>
<hr/>
<nav>
	<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>
</nav>
</body>
</html>

运行结果：
在这里插入图片描述
ps:第二次web作业记录