search

博客列表 >1220作业

1220作业

玩泥巴白头少年
玩泥巴白头少年原创
2019年12月23日 02:01:56697浏览

简单页面

  1. 效果如下

  2. 源码

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.  <meta charset="UTF-8">
    5.  <link rel="stylesheet" href="iconfont.css">
    6.  <title>1220homework</title>
    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.      }
    18.      .iconfont {
    19.          font-family: "iconfont" !important;
    20.          font-size: 35px;
    21.          font-style: normal;
    22.          -webkit-font-smoothing: antialiased;
    23.          -moz-osx-font-smoothing: grayscale;
    24.      }
    26.      * {
    27.          padding: 0;
    28.          margin: 0;
    29.      }
    31.      a {
    32.          text-decoration: none;
    33.          color: #414141;
    34.      }
    36.      .main {
    37.          width: 1200px;
    38.          hight: 1000px;
    39.          margin: 0 auto;
    40.          /*background-color: lightpink;*/
    41.      }
    43.      .img1 {
    44.          width: 280px;
    45.          height: 65px;
    46.          float: left;
    47.      }
    49.      .search {
    50.          float: left;
    51.          margin-left: 300px;
    52.          width: 300px;
    53.          height: 65px;
    54.          line-height: 65px;
    55.          margin-top: 10px;
    56.          position: relative;
    57.      }
    59.      .search span {
    60.          display: inline-block;
    61.          width: 300px;
    62.          height: 45px;
    63.          vertical-align: middle;
    64.          border: 1px solid;
    65.          -webkit-border-radius: 13px;
    66.          -moz-border-radius: 13px;
    67.          border-radius: 13px;
    68.      }
    70.      .search p {
    71.          position: absolute;
    72.          font-size: 25px;
    73.          right: 15px;
    74.          top: 0px;
    75.      }
    77.      .img2 {
    78.          float: right;
    79.          width: 280px;
    80.          height: 65px;
    81.          line-height: 65px;
    82.          margin-top: 10px;
    83.      }
    85.      .daohang {
    86.          height: 75px;
    87.          float: left;
    88.          overflow: hidden;
    89.          margin-top: 15px;
    90.          font-size: 15px;
    91.          /*background-color: blue;*/
    92.      }
    94.      .pic {
    95.          overflow: hidden;
    96.          float: left;
    97.          margin-right: 10px;
    98.          border-right: 1px rgba(68, 83, 70, 0.67) solid;
    99.      }
    101.      span.s {
    102.          color: red;
    103.          width: 45px;
    104.          float: left;
    105.          margin-right: 5px;
    106.      }
    108.      .nav1,.nav2,.nav3,.nav4 {
    109.          width: 40px;
    110.          float: left;
    111.          margin-left: 0;
    112.      }
    114.      .links {
    115.          width: 150px;
    116.          float: left;
    117.          margin-right: 55px;
    118.      }
    119.      .links4 {
    120.          width: 150px;
    121.          float: left;
    122.      }
    124.  </style>
    125. </head>
    126. <body>
    127. <div class="main">
    128.  <header>
    129.      <div class="img1">
    130.          <img src="./pic/logo.png" alt="">
    131.      </div>
    132.      <div class="search">
    133.          <span></span>
    134.          <p class="iconfont icon-sousuo2"></p>
    135.      </div>
    136.      <div class="img2">
    137.          <a href="" class="iconfont icon-huiyuan1"></a>
    138.          <a href="" class="iconfont icon-danmu1"></a>
    139.          <a href="" class="iconfont icon-fabu"></a>
    140.          <a href="" class="iconfont icon-fangda"></a>
    141.          <a href="" class="iconfont icon-huiyuan2"></a>
    142.          <a href="" class="iconfont icon-dianzan"></a>
    143.      </div>
    144.  </header>
    145.  <div class="daohang">
    146.      <div class="daohang1">
    147.          <!--左侧图标与描述-->
    148.          <div class="pic">
    149.              <span class="iconfont icon-gongdan s"></span>
    150.              <div class="nav1">
    151.                  <span>资讯</span>
    152.                  <span>学习</span>
    153.              </div>
    154.          </div>
    155.          <!--右侧导航链接-->
    156.          <div class="links">
    157.              <a href="">器材</a>
    158.              <a href="">大师</a>
    159.              <a href="">学院</a>
    160.              <a href="">实战</a>
    161.              <a href="">大赛</a>
    162.              <a href="">裤子</a>
    163.              <a href="">影视</a>
    164.              <a href="">其它</a>
    165.          </div>
    166.          <div class="pic">
    167.              <span class="iconfont icon-renwujincheng s"></span>
    168.              <div class="nav2">
    169.                  <span>爱好</span>
    170.                  <span>姐妹</span>
    171.              </div>
    172.          </div>
    173.          <!--右侧导航链接-->
    174.          <div class="links">
    175.              <a href="">有品</a>
    176.              <a href="">图片</a>
    177.              <a href="">喝水</a>
    178.              <a href="">飞机</a>
    179.              <a href="">坦克</a>
    180.              <a href="">气球</a>
    181.              <a href="">毛线</a>
    182.              <a href="">其它</a>
    183.          </div>
    184.          <div class="pic">
    185.              <span class="iconfont icon-gongdan s"></span>
    186.              <div class="nav3">
    187.                  <span>软件</span>
    188.                  <span>技能</span>
    189.              </div>
    190.          </div>
    191.          <!--右侧导航链接-->
    192.          <div class="links">
    193.              <a href="">学习</a>
    194.              <a href="">爱国</a>
    195.              <a href="">敬业</a>
    196.              <a href="">友善</a>
    197.              <a href="">富强</a>
    198.              <a href="">互助</a>
    199.              <a href="">仁义</a>
    200.              <a href="">其它</a>
    201.          </div>
    202.          <div class="pic">
    203.              <span class="iconfont icon-DOC s"></span>
    204.              <div class="nav4">
    205.                  <span>编程</span>
    206.                  <span>美女</span>
    207.              </div>
    208.          </div>
    209.          <!--右侧导航链接-->
    210.          <div class="links4">
    211.              <a href="">吃饭</a>
    212.              <a href="">周易</a>
    213.              <a href="">黄山</a>
    214.              <a href="">合肥</a>
    215.              <a href="">上海</a>
    216.              <a href="">杭州</a>
    217.              <a href="">北京</a>
    218.              <a href="">其它</a>
    219.          </div>
    220.      </div>
    221.  </div>
    222.  <div class="slider">
    223.      <a href=""><img src="pic/2.jpg" alt=""></a>
    224.      <a href=""><img src="pic/banner-right.jpg" alt=""></a>
    225.  </div>
    226. </div>
    227. </body>
    228. </html>
上一条：1218_JS对象、定时器 第35课下一条：12月17日_JavaScript基础（数组、数组常用方法和常见事件）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多