search

博客列表 >12月21日到22日作业 用传统HTML+CSS, 完成一个首页头部的布局-PHP培训十期线上班

12月21日到22日作业 用传统HTML+CSS, 完成一个首页头部的布局-PHP培训十期线上班

洋
洋原创
2019年12月30日 01:33:47423浏览

最近事情比较多，作业是跟着老师的视频打的，等有时间了在尝试自己独立完成
代码段：

  1. <!DOCTYPE html>
  2. <html lang='en'>
  3.     <head>
  4.         <meta charset = "UTF-8">
  5.         <link rel = "stylesheet" href = "font/iconfont.css">
  6.         <title>12月20号作业</title>
  7.         <style>
  8.             *{  /*初始化所有元素的内外边距，字体大小*/
  9.                 margin : 0px;
  10.                 padding : 0px;
  11.                 font-size : 13px;
  12.                 /*outline : 1px dashed red;*/
  13.             }
  15.             a{
  16.                 color : #555555;
  17.                 font-size : 13px;
  18.                 text-decoration : none;
  19.             }
  21.             .index-header {
  22.                 width : 1200px;
  23.                 min-height : 300px;
  24.                 margin : 30px auto;
  26.             }
  28.             .index-header > .top {
  29.                 height : 70px;
  30.                 position : relative;
  31.                 line-height : 70px;
  32.                 /*background-color : yellow;*/
  33.             }
  35.             .index-header > .top *{
  36.                 height : inherit;
  37.                 /*line-height : 70px;*/
  38.             }
  40.             .index-header > .top > .logo {
  41.                 width : 176px;
  42.                 position : absolute;
  43.                 top : 0;
  44.                 left : 0;
  45.             }
  47.             .index-header > .top > .search {
  48.                 width : 330px;
  49.                 position : absolute;
  50.                 top : 0;
  51.                 right : 350px;
  52.             }
  54.             .index-header > .top > .quick-start {
  55.                 width : 300px;
  56.                 position : absolute;
  57.                 top : 0;
  58.                 right : 0;
  59.             }
  61.             .index-header > .top > .logo img {
  62.                 height : 100%;
  63.                 display : block;
  64.             }
  66.             .index-header > .top > .search > input[type="search"] {
  67.                 width : 330px;
  68.                 height : 36px;
  69.                 border-radius : 10px;
  70.                 padding : 10px;
  71.             }
  73.             .index-header > .top > .search > input[type="search"]:hover {
  74.                 box-shadow : 0 0 5px #888888;
  75.             }
  77.             .index-header > .top > .search > input[type="search"] + label {
  78.                 font-size : 23px;
  79.                 margin-left : -30px;
  80.                 position : relative;
  81.                 top : 5px;
  82.             }
  84.             .index-header > .top > .quick-start > span {
  85.                 font-size : 33px;
  86.                 margin-right : 6px;
  87.             }
  89.             .index-header > .top > .quick-start > span:hover {
  90.                 color : red;
  91.                 cursor : pointer;
  92.             }
  94.             .index-header > .nav {
  95.                 height : 44px;
  96.                 /*background-color : red;*/
  97.             }
  99.             .index-header > .nav > .nav-item {
  100.                 width : 300px;
  101.                 height : inherit;
  102.                 position : relative;
  103.                 float : left;
  104.             }
  106.             .index-header > .nav > .nav-item > .iconfont {
  107.                 font-size : 40px;
  108.                 color : red;
  109.                 position : absolute;
  110.             }
  112.             .index-header > .nav > .nav-item > .tag {
  113.                 width : 40px;
  114.                 position : absolute;
  115.                 left : 45px;
  116.                 border-right : 1px solid #cccccc;
  117.             }
  119.             .index-header > .nav > .nav-item > .links {
  120.                 width : 160px;
  121.                 position : absolute;
  122.                 left : 95px;
  123.             }
  125.             .index-header > .nav > .nav-item > .links > a:hover{
  126.                 color : red;
  127.             }
  129.             .index-header > .slider-ads {
  130.                 height : 320px;
  131.                 position : relative;
  132.             }
  134.             .index-header > .slider-ads > .slider {
  135.                 width : 900px;
  136.                 position : absolute;
  138.             }
  140.             .index-header > .slider-ads > .ads {
  141.                 width : 295px;
  142.                 position : absolute;
  143.                 right : 0;
  144.             }
  146.             .index-header > .slider-ads  img {
  147.                 height : 100%;
  148.                 display : block;
  149.             }
  151.             .index-header * {
  152.                 margin : 10px 0px;
  153.             }
  154.         </style>
  155.     </head>
  156.     <body>
  157.         <div class="index-header">  <!-- 页面整体容器开始 -->
  159.             <div class="top">  <!-- 页面上部容器开始 -->
  161.                 <div class="logo">  <!-- 页面上部logo图标开始 -->
  162.                     <a href=""><img src="static/images/logo.png" alt = ""></a>
  163.                 </div>   <!-- 页面上部logo图标结束 -->
  165.                 <div class="search">  <!-- 页面上部搜索开始 -->
  166.                     <input type="search" id="search"><label for = "search" class = "iconfont icon-search"></label>
  167.                 </div>  <!-- 页面上部搜索结束 -->
  169.                 <div class = "quick-start">  <!-- 页面上部小图标开始 -->
  170.                     <span class="iconfont icon-tongxunlu"></span> 
  171.                     <span class="iconfont icon-liaotian"></span>
  172.                     <span class="iconfont icon-shangchuan"></span>
  173.                     <span class="iconfont icon-fangda"></span>
  174.                     <span class="iconfont icon-wode"></span>
  175.                     <span class="iconfont icon-dianzan"></span>
  176.                 </div>   <!-- 页面上部小图标结束 -->
  178.             </div>  <!-- 页面上部容器结束 --> 
  180.             <div class="nav">  <!-- 中部导航容器开始 -->
  182.                 <div class="nav-item">  <!-- 中部导航子模块开始 -->
  183.                     <span class="iconfont icon-liebiaodaohang_dongman"></span>    <!-- 导航图标 -->
  184.                     <div class="tag">  <!-- 导航名称 -->
  185.                         <span>资讯</span>
  186.                         <span>学习</span>
  187.                     </div>
  188.                     <div class="links">   <!-- 导航链接 -->
  189.                         <a href="">器材</a>
  190.                         <a href="">大师</a>
  191.                         <a href="">学院</a>
  192.                         <a href="">实战</a>
  193.                         <a href="">大赛</a>
  194.                         <a href="">裤子</a>
  195.                         <a href="">影视</a>
  196.                         <a href="">其他</a>
  197.                     </div>
  198.                 </div>   <!-- 中部导航子模块结束 -->
  200.                 <div class="nav-item">  <!-- 中部导航子模块开始 -->
  201.                     <span class="iconfont icon-liebiaodaohang_dongman"></span>    <!-- 导航图标 -->
  202.                     <div class="tag">  <!-- 导航名称 -->
  203.                         <span>资讯</span>
  204.                         <span>学习</span>
  205.                     </div>
  206.                     <div class="links">   <!-- 导航链接 -->
  207.                         <a href="">器材</a>
  208.                         <a href="">大师</a>
  209.                         <a href="">学院</a>
  210.                         <a href="">实战</a>
  211.                         <a href="">大赛</a>
  212.                         <a href="">裤子</a>
  213.                         <a href="">影视</a>
  214.                         <a href="">其他</a>
  215.                     </div>
  216.                 </div>   <!-- 中部导航子模块结束 -->
  218.                 <div class="nav-item">  <!-- 中部导航子模块开始 -->
  219.                     <span class="iconfont icon-liebiaodaohang_dongman"></span>    <!-- 导航图标 -->
  220.                     <div class="tag">  <!-- 导航名称 -->
  221.                         <span>资讯</span>
  222.                         <span>学习</span>
  223.                     </div>
  224.                     <div class="links">   <!-- 导航链接 -->
  225.                         <a href="">器材</a>
  226.                         <a href="">大师</a>
  227.                         <a href="">学院</a>
  228.                         <a href="">实战</a>
  229.                         <a href="">大赛</a>
  230.                         <a href="">裤子</a>
  231.                         <a href="">影视</a>
  232.                         <a href="">其他</a>
  233.                     </div>
  234.                 </div>   <!-- 中部导航子模块结束 -->
  236.                 <div class="nav-item">  <!-- 中部导航子模块开始 -->
  237.                     <span class="iconfont icon-liebiaodaohang_dongman"></span>    <!-- 导航图标 -->
  238.                     <div class="tag">  <!-- 导航名称 -->
  239.                         <span>资讯</span>
  240.                         <span>学习</span>
  241.                     </div>
  242.                     <div class="links">   <!-- 导航链接 -->
  243.                         <a href="">器材</a>
  244.                         <a href="">大师</a>
  245.                         <a href="">学院</a>
  246.                         <a href="">实战</a>
  247.                         <a href="">大赛</a>
  248.                         <a href="">裤子</a>
  249.                         <a href="">影视</a>
  250.                         <a href="">其他</a>
  251.                     </div>
  252.                 </div>   <!-- 中部导航子模块结束 -->
  254.             </div>  <!-- 中部导航容器结束 -->
  256.             <div class="slider-ads">   <!-- 底部图片区域 -->
  257.                 <div class="slider">  
  258.                     <a href=""><img src="static/images/2.jpg" alt="aa"></a>
  259.                 </div>
  260.                 <div class="ads">
  261.                     <a href=""><img src="static/images/banner-right.jpg" alt=""></a>
  262.                 </div>
  263.             </div>
  265.         </div>  <!-- 页面整体容器结束 -->
  266.     </body>
  267. </html>

效果图：

上一条：12月23日作业 flex容器的六个属性与功能 -php线上培训班十期下一条：1229作业之grid布局完成二手交易
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多