web实训总结___0319

最新推荐文章于 2021-02-16 00:29:19 发布

年少轻狂也懂胜者为王

最新推荐文章于 2021-02-16 00:29:19 发布

阅读量3k

点赞数 1

分类专栏： web实训总结___0319 文章标签： LZM web实训总结___0319

本文链接：https://blog.csdn.net/NSQKYDSZWW/article/details/89149031

版权

web实训总结___0319 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

练习：导航栏

方法一：div实现

 1. <!DOCTYPE html>
 2. <html lang="en">
 3. <head>
 4.     <meta charset="UTF-8">
 5.     <title>Title</title>
 6.     <style type="text/css">
 7.         a{
 8.             color: #FFFF99;
 9.             text-decoration: none;
 10.         }
 11.         a:hover{
 12.             color: #FFFFFF;
 13.             text-decoration: underline;
 14.         }
 15.         #top{
 16.             padding: 10px 10px 0;
 17.             font-size: 12px;
 18.             font-weight: bold;
 19.             margin: 1px 0 0;
 20.             list-style: none;
 21.             border-bottom: 8px solid #dc4e18;
 22.             overflow: hidden;
 23.             background-color: #33b5e5;
 24.         }
 25.         .top_nav{
 26.             float: left;
 27.             margin-right: 1px;
 28.             background-color: #333333;
 29.             position: relative;
 30.             width: 80px;
 31.             height: 20px;
 32.             text-align: center;
 33.             line-height: 20px;
 34.         }
 35.         .top_nav span{
 36.             position: absolute;
 37.             visibility: hidden;
 38.         }
 39.         .top_nav:hours span{
 40.             line-height: 20px;
 41.             background: #DDDDDD;
 42.             color: #666666;
 43.             display: block;
 44.             width: 80px;
 45.             text-align: center;
 46.             height: 20px;
 47.             padding-top: 2px;
 48.             visibility: visible;
 49.             top: 0;
 50.             left: 0;
 51.             color: #FFFFFF;
 52.             background: #DC4E1B;
 53.         }
 54.     </style>
 55.     </head>
 56. <body>
 57.  <div id="top">
 58.      <div class="top_nav">< a href=" ">首页</ a><span>Home</span></div>
 59.      <div class="top_nav">< a href="#">课堂大厅</ a><span>Course</span></div>
 60.      <div class="top_nav">< a href="#">学习中心</ a><span>Learn</span></div>
 61.      <div class="top_nav">< a href="#">关于我们</ a><span>About</span></div>
 62.  </div>
 63.  </body>
 64. </html>

*知识点（同下）

方法二：ul li实现

 1. <!DOCTYPE html>
 2. <html lang="en">
 3. <head>
 4.     <meta charset="UTF-8">
 5.     <title>Title</title>
 6.      <style type="text/css">
 7.         a{
 8.             color: #ffff99;
 9.             text-decoration: none;
 10.         }
 11.         a:hover{
 12.             color: #ffffff;
 13.             text-decoration: underline;
 14.         }
 15.         .top-nav{
 16.             padding: 10px 10px 0;
 17.             font-size: 12px;
 18.             font-weight: bold;
 19.             margin: 1px 0 0 0;
 20.             list-style: none;
 21.             border-bottom: 8px solid #DC4E1B;
 22.             overflow: hidden;
 23.             background-color: #33b5e5;
 24.         }
 25.         .top-nav li{
 26.             float: left;
 27.             margin-right: 1px;
 28.         }
 29.         .top-nav li a{
 30.             position: relative;
 31.             z-index: 0;
 32.             line-height: 20px;text-decoration: none;
 33.             background: #DDDDDD;
 34.             color: #666666;
 35.             display: block;
 36.             width: 80px;
 37.             text-align: center;
 38.         }
 39.         .top-nav li a span{
 40.             position: absolute;
 41.             visibility: hidden;
 42.         }
 43.         .top-nav li a:hover span{
 44.             line-height: 20px;
 45.             text-decoration: none;
 46.             background-color: #DDDDDD;
 47.             color: #666666;
 48.             display: block;
 49.             width: 80px;
 50.             text-align: center;
 51.             padding: 2px;
 52.             visibility: visible;
 53.             top: 0;
 54.             left: 0;
 55.             color: #FFFFFF;
 56.             background: #DC4E1B;
 57.         }
 58.     </style>
 59. </head>
 60. <body>
 61. <div id="top">
 62.      <ul class="top-nav">
 63.      <li>< a href=" ">首页<span>Home</span></ a></li>
 64.      <li>< a href="#">课堂大厅<span>Course</span></ a></li>
 65.      <li>< a href="#">学习中心<span>Learn</span></ a></li>
 66.      <li>< a href="#">关于我们<span>About</span></ a></li>
 67.  </div>
 68. </body>
 69. </html>

代码实现：

在这里插入图片描述

知识点：

float属性:

1.float属性定义DIV的浮动方式，有三种取值方式：none，left，right
2.当float属性值取为left时，div会向左浮动，其他的div显示方式和浏览器相关。
3.当float属性值取为right时，div会向右浮动。

CSS页面布局：

属性	描述
display	设置元素显示类型
float	规定元素是否应该浮动

clear	规定元素的哪一端、侧不允许其他浮动元素
visibility	规定元素是否可见，与display不同，此属性为隐藏的对象保留其占据的空间

overflow	设置当元素的内容溢出时处理方式
overflow-x	设置当元素的内容横向溢出时处理方式
overflow-y	设置当元素的内容纵向溢出时处理方式

备注：页面布局常见相关属性：

1.float（left，right，auto）
2.display（block，inline，inline-block，listitem）
3.display（block，inline，inline-block，listitem）

overflow 的值描述：
1.visible — 默认值。内容不会被修剪，会呈现在元素框之外。
2.hidden —内容会被修剪，并且其余内容是不可见的。
3.scroll — 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4.auto — 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5.inherit —规定应该从父元素继承 overflow 属性的值。