滑动门

滑动门_第1张图片

一、所需技术:

1.HTML基础知识
2.css基础样式
3.css定位

二、实现步骤:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="stylesheet" href="iconfont/iconfont.css">
    <style>
        .slide{
      
            width: 234px;
            height: 420px;
            background-color: rgba(105,101,101,0.6);
            padding: 20px 0;
            text-align: left;
            position: absolute;
            top:0;
            left: 0;
        }
        .slide>ul>li>a{
      
            color: #fff;
            font-size: 14px;
        }
        .slide>ul>li{
      
            list-style:none;
            height: 42px;
            line-height: 42px;
            padding-left: 30px;
        }
        .slide>ul>li:hover{
      
            background-color: #ff6700;
        }
        .slide i{
      
            float: right;
            color: #e0e0e0;
            padding-right: 20px;
        }
        .slide-list{
      
            width: 992px;
            height: 460px;
            background-color: #fff;
            border: 1px solid #e0e0e0;
            border-left: none;
            box-sizing: border-box;
            box-shadow: 0 8px 16px rgba(0,0,0,0.18);
            position: absolute;
            top: 0;
            left: 100%;
            display: none;
        }
        .slide li:hover>.slide-list{
      
            display: block;
        }
    style>
head>
<body>
<div class="slide">
    <ul>
        <li><a href="#">手机 电话卡a><i class="iconfont">i>
        <div class="slide-list">div>li>
        <li><a href="#">电视 盒子a><i class="iconfont">i>li>
        <li><a href="#">笔记本 平板a><i class="iconfont">i>li>
        <li><a href="#">家电 插线板a><i class="iconfont">i>li>
        <li><a href="#">出行 穿戴a><i class="iconfont">i>li>
        <li><a href="#">智能 路由器a><i class="iconfont">i>li>
        <li><a href="#">电源 配件a><i class="iconfont">i>li>
        <li><a href="#">健康 儿童a><i class="iconfont">i>li>
        <li><a href="#">耳机 音响a><i class="iconfont">i>li>
        <li><a href="#">生活 箱包a><i class="iconfont">i>li>
    ul>
div>
body>
html>

滑动门_第2张图片

你可能感兴趣的:(学习笔记,css,html)