search

博客列表 >前端简单页面

前端简单页面

xiaosheng
xiaosheng原创
2019年12月21日 02:01:291401浏览

前端简单基础页面

  • 效果如下
  • 代码如下:

    本篇着重于实现效果,不讨论代码的质量
    字体图标选自阿里矢量图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Homework</title>
  6.     <link rel="stylesheet" href="./font_1575331_l1xjfvqanw/iconfont.css">
  7.     <style>
  8.         @font-face {
  9.             font-family: 'iconfont';
  10.             src: url('iconfont.eot');
  11.             src: url('iconfont.eot?#iefix') format('embedded-opentype'),
  12.             url('iconfont.woff2') format('woff2'),
  13.             url('iconfont.woff') format('woff'),
  14.             url('iconfont.ttf') format('truetype'),
  15.             url('iconfont.svg#iconfont') format('svg');
  16.         }
  17.         .iconfont {
  18.             font-family: "iconfont" !important;
  19.             font-size: 16px;
  20.             font-style: normal;
  21.             -webkit-font-smoothing: antialiased;
  22.             -moz-osx-font-smoothing: grayscale;
  23.         }
  24.         * {
  25.             padding: 0;
  26.             margin: 0;
  27.         }
  28.         a {
  29.             text-decoration: none;
  30.             color: #414141;
  31.         }
  32.         .all {
  33.             width: 1200px;
  34.             height: 1000px;
  35.             /*background-color: #abcdef;*/
  36.             margin: 0 auto;
  37.         }
  38.         .logo {
  39.             width: 312px;
  40.             height: 65px;
  41.             float: left;
  42.         }
  43.         .search {
  44.             float: left;
  45.             margin-left: 300px;
  46.             width: 300px;
  47.             height: 65px;
  48.             line-height: 65px;
  49.             margin-top: 10px;
  50.             position: relative;
  51.         }
  52.         .search span{
  53.             display: inline-block;
  54.             width: 300px;
  55.             height: 45px;
  56.             vertical-align: middle;
  57.             border: 1px solid gray;
  58.             -webkit-border-radius: 13px;
  59.             -moz-border-radius: 13px;
  60.             border-radius: 13px;
  62.         }
  63.         .search i{
  64.             position: absolute;
  65.             font-size: 25px;
  66.             right: 15px;
  67.             top: 0px;
  68.         }
  69.         .option {
  70.             float: right;
  71.             width: 250px;
  72.             height: 65px;
  73.             line-height: 65px;
  74.             margin-top: 10px;
  75.             text-align: left;
  76.         }
  77.         .option i {
  78.             font-size: 30px;
  79.             margin-right: 10px;
  80.         }
  81.         .option i.last {
  82.             margin-right: 0;
  83.         }
  84.         .nav {
  85.             height: 75px;
  86.             float: left;
  87.             overflow: hidden;
  88.             position: relative;
  89.             /*background-color: blue;*/
  90.         }
  91.         .nav .nav1 {
  92.             margin-left: 0;
  93.         }
  95.         .nav1,.nav2,.nav3,.nav4 {
  96.             width: 250px;
  97.             margin-top: 15px;
  98.             margin-left: 65px;
  99.             /*line-height: 75px;*/
  100.             float: left;
  101.         }
  102.         .nav1 span {
  103.             float: left;
  104.         }
  106.         .nav1 i {
  107.             font-size: 45px;
  108.             color: #ff2017;
  109.         }
  110.         .nav1 table {
  111.             float: left;
  112.             margin-left: 15px;
  113.         }
  114.         .nav1 tr {
  115.             height: 21px;
  116.             color: #404040;
  117.         }
  118.         .nav1 td {
  119.             padding-left: 7px;
  120.         }
  121.         .nav1 td:first-of-type {
  122.             padding-right: 15px;
  123.         }
  125.         .nav2 span{
  126.             float: left;
  127.         }
  128.         .nav2 i {
  129.             font-size: 45px;
  130.             color: #ff2017;
  131.         }
  132.         .nav2 table {
  133.             float: left;
  134.             margin-left: 15px;
  135.         }
  136.         .nav2 tr{
  137.             height: 21px;
  138.             color: #404040;
  139.         }
  140.         .nav2 td {
  141.             padding-left: 7px;
  142.         }
  143.         .nav2 td:first-of-type {
  144.             padding-right: 15px;
  145.         }
  147.         .nav3 span{
  148.             float: left;
  149.         }
  150.         .nav3 i {
  151.             font-size: 45px;
  152.             color: #ff2017;
  153.         }
  154.         .nav3 table {
  155.             float: left;
  156.             margin-left: 15px;
  157.         }
  158.         .nav3 tr{
  159.             height: 21px;
  160.             color: #404040;
  161.         }
  162.         .nav3 td {
  163.             padding-left: 7px;
  164.         }
  165.         .nav3 td:first-of-type {
  166.             padding-right: 15px;
  167.         }
  169.         .nav4 span{
  170.             float: left;
  171.         }
  172.         .nav4 i {
  173.             font-size: 45px;
  174.             color: #ff2017;
  175.         }
  176.         .nav4 table {
  177.             float: left;
  178.             margin-left: 15px;
  179.         }
  180.         .nav4 tr{
  181.             height: 21px;
  182.             color: #404040;
  183.         }
  184.         .nav4 td {
  185.             padding-left: 7px;
  186.         }
  187.         .nav4 td:first-of-type {
  188.             padding-right: 15px;
  189.         }
  191.         .img {
  192.             overflow: hidden;
  193.             width: 1200px;
  194.             margin-top: 150px;
  195.         }
  196.         .line1,.line2,.line3,.line4{
  197.             position: absolute;
  198.             float: left;
  199.             width: 0;
  200.             height: 44px;
  201.             top: 16px;
  202.             border: 1px solid #cccccc;
  203.         }
  204.         .line1 {
  205.             left: 103px;
  206.         }
  207.         .line2 {
  208.             left: 418px;
  209.         }
  210.         .line3 {
  211.             left: 732px;
  212.         }
  213.         .line4 {
  214.             left: 1048px;
  215.         }
  216.     </style>
  217. </head>
  218. <body>
  219.     <div class="all">
  220.         <header class="header">
  221.             <div class="logo">
  222.                 <img src="images/logo.png" alt="">
  223.             </div>
  224.             <div class="search">
  225.                 <span></span>
  226.                 <i class="iconfont">&#xe66a;</i>
  227.             </div>
  228.             <div class="option">
  229.                 <a href=""><i class="iconfont">&#xe63d;</i></a>
  230.                 <a href=""><i class="iconfont">&#xe626;</i></a>
  231.                 <a href=""><i class="iconfont">&#xe620;</i></a>
  232.                 <a href=""><i class="iconfont">&#xec32;</i></a>
  233.                 <a href=""><i class="iconfont">&#xe610;</i></a>
  234.                 <a href=""><i class="iconfont last">&#xe680;</i></a>
  235.             </div>
  236.         </header>
  237.         <div class="nav">
  238.             <div class="nav1">
  239.                 <span><i class="iconfont">&#xe60d;</i></span>
  240.                 <table>
  241.                     <tr>
  242.                         <td><a href="">资讯</a></td>
  243.                         <td><a href="">器材</a></td>
  244.                         <td><a href="">大师</a></td>
  245.                         <td><a href="">学院</a></td>
  246.                         <td><a href="">实战</a></td>
  247.                     </tr>
  248.                     <tr>
  249.                         <td><a href="">资讯</a></td>
  250.                         <td><a href="">器材</a></td>
  251.                         <td><a href="">大师</a></td>
  252.                         <td><a href="">学院</a></td>
  253.                         <td><a href="">实战</a></td>
  254.                     </tr>
  255.                 </table>
  256.             </div>
  257.             <div class="line1"></div>
  258.             <div class="nav2">
  259.                 <span><i class="iconfont">&#xe627;</i></span>
  260.                 <table>
  261.                     <tr>
  262.                         <td><a href="">资讯</a></td>
  263.                         <td><a href="">器材</a></td>
  264.                         <td><a href="">大师</a></td>
  265.                         <td><a href="">学院</a></td>
  266.                         <td><a href="">实战</a></td>
  267.                     </tr>
  268.                     <tr>
  269.                         <td><a href="">资讯</a></td>
  270.                         <td><a href="">器材</a></td>
  271.                         <td><a href="">大师</a></td>
  272.                         <td><a href="">学院</a></td>
  273.                         <td><a href="">实战</a></td>
  274.                     </tr>
  275.                 </table>
  276.             </div>
  277.             <div class="line2"></div>
  278.             <div class="nav3">
  279.                 <span><i class="iconfont">&#xe617;</i></span>
  280.                 <table>
  281.                     <tr>
  282.                         <td><a href="">资讯</a></td>
  283.                         <td><a href="">器材</a></td>
  284.                         <td><a href="">大师</a></td>
  285.                         <td><a href="">学院</a></td>
  286.                         <td><a href="">实战</a></td>
  287.                     </tr>
  288.                     <tr>
  289.                         <td><a href="">资讯</a></td>
  290.                         <td><a href="">器材</a></td>
  291.                         <td><a href="">大师</a></td>
  292.                         <td><a href="">学院</a></td>
  293.                         <td><a href="">实战</a></td>
  294.                     </tr>
  295.                 </table>
  296.             </div>
  297.             <div class="line3"></div>
  298.             <div class="nav4">
  299.                 <span><i class="iconfont">&#xe611;</i></span>
  300.                 <table>
  301.                     <tr>
  302.                         <td><a href="">资讯</a></td>
  303.                         <td><a href="">器材</a></td>
  304.                         <td><a href="">大师</a></td>
  305.                         <td><a href="">学院</a></td>
  306.                         <td><a href="">实战</a></td>
  307.                     </tr>
  308.                     <tr>
  309.                         <td><a href="">资讯</a></td>
  310.                         <td><a href="">器材</a></td>
  311.                         <td><a href="">大师</a></td>
  312.                         <td><a href="">学院</a></td>
  313.                         <td><a href="">实战</a></td>
  314.                     </tr>
  315.                 </table>
  316.             </div>
  317.             <div class="line4"></div>
  318.         </div>
  319.         <div class="img">
  320.             <img src="./images/2.jpg" alt="">
  321.             <img src="./images/banner-right.jpg" alt="">
  322.         </div>
  323.     </div>
  324. </body>
  325. </html>
上一条：屏蔽隐藏微信网页投诉举报按钮的实现方案下一条：PHP运行环境搭建
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多