博主信息
饮雪煮茶
饮雪煮茶
博文
11
粉丝
0
评论
0
访问量
7166
积分：0
P豆：22
最新更新
利用媒体查询实现自适应导航2020-04-06
php会话流程控制cookie和session的应用作业2020-01-20
PHP filter 过滤器知识2020-01-14
php作业训练用数组模拟数据库做动态网页网站博客2020-01-12
HTML制作静态商品购物车结算页面2020-01-01
用grid放二手商品交易列表2019-12-30
利用Flex弹性盒子仿 m.php.cn首页模板2019-12-28
Flex弹性盒子仿二手商品交易与评论回复页面2019-12-27
博文分类
前端学习8篇
PHP基础3篇
热门文章
HTML制作静态商品购物车结算页面3728
利用Flex弹性盒子仿 m.php.cn首页模板413
前端Flex弹性盒子作业，容器的六个属性及其使用403
Flex弹性盒子仿二手商品交易与评论回复页面380
前端Flex弹性盒子作业，弹性盒子元素的六个属性及其使用377
php作业训练用数组模拟数据库做动态网页网站博客377
PHP filter 过滤器知识375
php会话流程控制cookie和session的应用作业295

第二节课堂作业，利用现有知识防网页头部

2019年12月23日 10:51:09阅读数：276博客 / 饮雪煮茶/ 前端学习

利用刚学习的html，css知识防网页头部。

下边是html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>php中文网</title>
  6.     <link rel="stylesheet" href="./static/font/iconfont.css">
  7.     <link rel="stylesheet" href="./static/css/index.css">
  8. </head>
  9. <body>
  10.     <header id="header">
  11.             <div class="logo">
  12.                 <img src="./static/images/logo.png" alt="">
  13.             </div>
  14.             <div class="header-right">
  15.                 <div class="searcher">
  16.                     <input type="text" id="searcher">
  17.                     <span class="icon iconfont icon-sousuo2"></span>
  18.                 </div>
  19.                 <div class="list">
  20.                     <span class="icon iconfont icon-huiyuan1"></span>
  21.                     <span class="icon iconfont icon-danmu1"></span>
  22.                     <span class="icon iconfont icon-fabu"></span>
  23.                     <span class="icon iconfont icon-fangda"></span>
  24.                     <span class="icon iconfont icon-huiyuan2"></span>
  25.                     <span class="icon iconfont icon-dianzan"></span>
  26.                 </div>
  27.             </div>
  28.     </header>
  29.     <nav id="nav">
  30.         <div class="nav-item">
  31.             <div class="nav-ico">
  32.                 <span class="icon iconfont icon-gongdan"></span>
  33.                 <p nav-title>资讯<br>学习</p>
  34.             </div>
  35.             <div class="nav-list">
  36.                 <ul>
  37.                     <li><a href="#">器材</a></li>
  38.                     <li><a href="#">器材</a></li>
  39.                     <li><a href="#">器材</a></li>
  40.                     <li><a href="#">器材</a></li>
  41.                     <li><a href="#">器材</a></li>
  42.                     <li><a href="#">器材</a></li>
  43.                     <li><a href="#">器材</a></li>
  44.                     <li><a href="#">器材</a></li>
  45.                 </ul>
  46.             </div>
  47.         </div>
  48.         <div class="nav-item">
  49.             <div class="nav-ico">
  50.                 <span class="icon iconfont icon-gongdan"></span>
  51.                 <p nav-title>资讯<br>学习</p>
  52.             </div>
  53.             <div class="nav-list">
  54.                 <ul>
  55.                     <li><a href="#">器材</a></li>
  56.                     <li><a href="#">器材</a></li>
  57.                     <li><a href="#">器材</a></li>
  58.                     <li><a href="#">器材</a></li>
  59.                     <li><a href="#">器材</a></li>
  60.                     <li><a href="#">器材</a></li>
  61.                     <li><a href="#">器材</a></li>
  62.                     <li><a href="#">器材</a></li>
  63.                 </ul>
  64.             </div>
  65.         </div>
  66.         <div class="nav-item">
  67.         <div class="nav-ico">
  68.             <span class="icon iconfont icon-gongdan"></span>
  69.             <p nav-title>资讯<br>学习</p>
  70.         </div>
  71.         <div class="nav-list">
  72.             <ul>
  73.                 <li><a href="#">器材</a></li>
  74.                 <li><a href="#">器材</a></li>
  75.                 <li><a href="#">器材</a></li>
  76.                 <li><a href="#">器材</a></li>
  77.                 <li><a href="#">器材</a></li>
  78.                 <li><a href="#">器材</a></li>
  79.                 <li><a href="#">器材</a></li>
  80.                 <li><a href="#">器材</a></li>
  81.             </ul>
  82.         </div>
  83.     </div>
  84.         <div class="nav-item">
  85.         <div class="nav-ico">
  86.             <span class="icon iconfont icon-gongdan"></span>
  87.             <p nav-title>资讯<br>学习</p>
  88.         </div>
  89.         <div class="nav-list">
  90.             <ul>
  91.                 <li><a href="#">器材</a></li>
  92.                 <li><a href="#">器材</a></li>
  93.                 <li><a href="#">器材</a></li>
  94.                 <li><a href="#">器材</a></li>
  95.                 <li><a href="#">器材</a></li>
  96.                 <li><a href="#">器材</a></li>
  97.                 <li><a href="#">器材</a></li>
  98.                 <li><a href="#">器材</a></li>
  99.             </ul>
  100.         </div>
  101.     </div>
  102.     </nav>
  103. <div id="banner">
  104.     <img src="./static/images/2.jpg" alt="" width="1200px" height="430">
  105.     <img src="./static/images/banner-right.jpg" alt="" width="390" height="430">
  106. </div>
  107. </body>
  108. </html>

下边是css代码：

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5.     font-family: "Microsoft YaHei UI";
  6. }
  7. #header{
  8.     width: 1600px;
  9.     margin: 0 auto;
  10.     height: 160px;
  11. }
  12. #header .logo{
  13.     height:160px;
  14.     float: left;
  15. }
  16. #header .logo img{
  17.     height: 70px;
  18.     width: 200px;
  19.     margin-top: 40px;
  20. }
  21. #header .header-right{
  22.     width:850px;
  23.     height:160px;
  24.     line-height: 160px;
  25.     float:right;
  26. }
  27. #header .header-right .searcher{
  28.     float:left;
  29.     position: relative;
  30. }
  31. #header .header-right span{
  32.     width: 30px;
  33. }
  34. #header .header-right #searcher{
  35.     width: 440px;
  36.     height:50px;
  37.     border-radius: 10px;
  38.     box-shadow: none;
  39.     border: 1px solid #ccc;
  40. }
  41. #header .header-right .searcher .iconfont{
  42.     font-size: 35px;
  43.     position: absolute;
  44.     left: 390px;
  45.     color: #ccc;
  46. }
  47. #header .header-right .list{
  48.     float:right;
  49. }
  50. #header .list .iconfont{
  51.     font-size:40px;
  52.     margin-left: 15px;
  53. }
  54. /*导航开始*/
  55. #nav{
  56.     width: 1600px;
  57.     height: 100px;
  58.     margin: 0 auto;
  59.     color: #333;
  60.     font-size: 16px;
  61.     font-weight: bold;
  62. }
  64. #nav .nav-ico{
  65.     width: 120px;
  66.     border-right: 1px solid #ccc;
  67.     float: left;
  68. }
  69. #nav .nav-ico .iconfont{
  70.     font-size: 50px;
  71.     color: red;
  72.     display: inline-block;
  73.     float: left;
  74.     margin-right: 10px;
  75. }
  76. #nav .nav-ico p{
  77.     line-height: 30px;
  78.     margin-left: 15px;
  79. }
  80. #nav .nav-list{
  81.     width: 220px;
  82.     float: left;
  83.     margin-right: 40px;
  84. }
  85. #nav ul li{
  86.     list-style: none;
  87.     display: block;
  88.     float: left;
  89.     margin: 5px 10px;
  90.     white-space: nowrap;
  91. }
  92. #nav ul li a{
  93.     color: #555;
  94.     text-decoration: none;
  95. }
  97. /*banner开始*/
  98. #banner{
  99.     width: 1600px;
  100.     margin: 0 auto;
  101. }

效果图

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：写真规范, 代码看上去真舒服

版权申明：本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论

文明上网理性发言，请遵守新闻评论服务协议

0 条评论
  • 提交
    首页视频教程原生手册编程词典工具下载免责声明赞助与捐赠

    Copyright 2014-2021 //m.sbmmt.com/ All Rights Reserved PHP中文网 版权所有

    php中文网：公益在线php培训，帮助PHP学习者快速成长！

    苏ICP备2020058653号-1

    关注公众号QQ交流群