HTML(1)导航栏菜单,商务风格表的设计与实现

最新推荐文章于 2024-05-19 22:44:29 发布

什么都不会…

最新推荐文章于 2024-05-19 22:44:29 发布

阅读量544

点赞数 7

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/qq_52187093/article/details/135501458

版权

前端专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一、实验项目

1.1 导航栏菜单的设计与实现

功能要求：使用CSS样式可以制作较为美观的导航栏效果，试设计一款横向的菜单导航栏用于页面，设计图如图1-1所示。当放大页面时，要求不能出现水平滚动条。

1.2 商务风格表格的设计与实现

功能要求：设计一款商务风格表格，运行效果如下图所示。

（要求：奇偶数行背景色不同，且字体居中）

二、实验源代码

<!DOCTYPE html>
<html>
      <head>
      	    <meta charset="utf-8">
      	     <!--网页名称-->
            <title>导航栏菜单的设计与实现</title> 
             <!--一般style 放在头部
             有层叠性
             浏览器字体大小font-size默认为16px
             font-weight:normal/bold 也可以用400/700
             font-style:normal/italic
             font-family:宋体   font属性可以简写
             font:style weight size family;只能省略前两个有默认值的属性-->
             <!--a标签要转换为行内块-->
             
            <style>
              .box
              {
                   font:normal 700 20px 宋体;
                  

              }
             
             h2{
              	font-weight: 400;
              }
             
             .box a{

               text-decoration: none;/*下划线清除*/
               text-align: center;
               color: #ffffff;/*默认为父级*/
               width: 200px;
               height:40px;
               float:left;/*采用浮动或者模式转换*/
               line-height: 40px;
               background-color: #56abf9;
            


             }

            /*鼠标放置时*/
            a:hover{
            	 background-color:  #0072d4;
            	 
            }

         </style>

            
            
      </head>
      <body>
      	<!--采用二级标题-->
      	   <h2>导航栏菜单的设计与实现</h2>

      	<!--水平线-->
      	<hr>
      	<!--标签选择器直接使用标签-->
      	<!--类选择器（相当于函数）只能由数字 字母 下划线 中划线组成
      	结构：.类名
      	<style>
      	 .类名{
      	 color:red;
      	 }
      	</style> 但要定义如<p class="类名1 类名2 类名3">22222 </p>-->
        
        <!--id选择器（配合JS）只能由数字 字母 下划线 中划线组成
        结构：#id属性值
      	<style>
      	 #id{
      	 color:red;
      	 }
      	</style> 但要定义如<p id=" ">22222 </p> id相当于身份证一个标签只有一个id
      	这里采用类选择器-- >

      	<!--通配符选择器 较少使用-->
      	
      	<div class="box">
             <!--定义菜单栏-->
             <nav>
    
                       <a href="#">头条</a>
                       <a href="#">娱乐</a>
                       <a href="#">热点</a>
                       <a href="#">体育</a>
                       <a href="#">财经</a>
                       <a href="#">科技</a>
                   
             </nav>
       </div>
      
      </body>




</html>

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>商务风格表格的设计与实现</title>
     <style>
          #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;
          }
          #orange{
               background-color: #FFEDDB;
          }
     </style>

</head>
<body>
      <div>商务风格表格的设计与实现</div>
      <hr>
      <table id="recruit" border="1">
          <caption>招聘信息表</caption>
              <th id="recruit th">地点</th>
              <th>招聘职位</th>
              <th>公司</th>
          <tr>
               <td>全国</td>
               <td>产品培训生</td>
               <td>腾讯</td>

          </tr>
          <tr id="orange">
               <td>全国</td>
               <td>前端开发工程师</td>
               <td>阿里巴巴</td>

          </tr>
          <tr>
               <td>上海</td>
               <td>交互设计师</td>
               <td>网易游戏</td>

          </tr>
          <tr id="orange">
               <td>北京</td>
               <td>视觉设计师</td>
               <td>360</td>

          </tr>
          <tr>
               <td>深圳</td>
               <td>数据分析师</td>
               <td>IBM</td>

          </tr>
          <tr id="orange">
               <td>杭州</td>
               <td>数据研发工程师</td>
               <td>微软</td>

          </tr>
</body>
</html>

三、实验结果

1.1