【分享】让没有js的页面动起来

公子语凉 发表于 2018-7-10 13:10

本帖最后由 wushaominkk 于 2018-7-10 14:54 编辑

然后偶然看到了这个代码.
就来分享一下喽.
比较开阔思路吧.<!DOCTYPE html>
<html>
   <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">
                     *{
                           margin: 0;
                           padding: 0;
                     }
                     menu{
                           width: 800px;
                           margin: 10px auto;
                     }
                     .ul1 li
                     {
                           height: 30px;
                           line-height: 30px;
                           width: 120px;
                           text-align: center;
                           font-size: 15px;
                           border: 1px solid white;
                           background-color: #70c3cd;
                           list-style: none;
                           float: left;
                     }
                     .ul1 li:hover
                     {
                           background-color: #e8e239;
                     }
                     .ul1 li a:hover
                     {
                           color: #70c3cd;
                     }
                     .ul1 li a
                     {
                           text-decoration: none;
                           color: green;
                     }
                     .ul2
                     {
                           display: none;
                     }
                     .ul1 li:hover .ul2
                     {
                           display: block;
                     }
            </style>
   </head>
   <body>
            <menu>
                     <ul class="ul1">
                           <li>
                                    <a href="">jichagnxiu01</a>
                                    <ul class="ul2">
                                             <li><a href="">jichagnxiu01</a></li>
                                             <li><a href="">jichagnxiu02</a></li>
                                             <li><a href="">jichagnxiu03</a></li>
                                             <li><a href="">jichagnxiu04</a></li>
                                    </ul>
                           </li>
                           <li>
                                    <a href="">jichagnxiu02</a>
                                    <ul class="ul2">
                                             <li><a href="">jichagnxiu01</a></li>
                                             <li><a href="">jichagnxiu02</a></li>
                                             <li><a href="">jichagnxiu03</a></li>
                                             <li><a href="">jichagnxiu04</a></li>
                                    </ul>
                           </li>
                           <li>
                                    <a href="">jichagnxiu03</a>
                                    <ul class="ul2">
                                             <li><a href="">jichagnxiu01</a></li>
                                             <li><a href="">jichagnxiu02</a></li>
                                             <li><a href="">jichagnxiu03</a></li>
                                             <li><a href="">jichagnxiu04</a></li>
                                    </ul>
                           </li>
                           <li>
                                    <a href="">jichagnxiu04</a>
                                    <ul class="ul2">
                                             <li><a href="">jichagnxiu01</a></li>
                                             <li><a href="">jichagnxiu02</a></li>
                                             <li><a href="">jichagnxiu03</a></li>
                                             <li><a href="">jichagnxiu04</a></li>
                                    </ul>
                           </li>
                           <li>
                                    <a href="">jichagnxiu05</a>
                                    <ul class="ul2">
                                             <li><a href="">jichagnxiu01</a></li>
                                             <li><a href="">jichagnxiu02</a></li>
                                             <li><a href="">jichagnxiu03</a></li>
                                             <li><a href="">jichagnxiu04</a></li>
                                    </ul>
                           </li>
                     </ul>
            </menu>
   </body>
</html>

丨皮卡丘丶 发表于 2018-7-10 14:50

特立独行的强发表于 2018-7-10 13:41
老哥，你签名的是哪位啊

中村静香，1988年9月9日出生于京都府宇治市，日本写真模特、演员。电视剧作品包括《叹息的美女》、《摔跤妖精宫殿》、《对不起青春》等
中村静香获得过2003年及2004年蝉联日本《VideoBoy》杂志年度性感女艺人第一名。

w5645060 发表于 2018-7-10 13:19

特立独行的强 发表于 2018-7-10 13:41

w5645060 发表于 2018-7-10 13:19
我们通常晃动电脑显示器让网页动起来

老哥，你签名的是哪位啊

snhj 发表于 2018-7-10 14:10

用js自动生成用js写效果多好 {:1_926:}

zxinyun 发表于 2018-7-10 14:11

配个效果图更好！

坐久落花多 发表于 2018-7-10 14:33

这个。。。
有啥用处吗？

小鸟闯京东 发表于 2018-7-10 14:41

额不明觉厉的感觉看了一下也就鼠标经过的时候变了下颜色行内标签变成块状的还不如动画属性呢

a3565131 发表于 2018-7-10 14:46

w5645060 发表于 2018-7-10 13:19
我们通常晃动电脑显示器让网页动起来

哥，你签名后面的是车牌号码?

宁宁鸡 发表于 2018-7-10 15:00

小鸟闯京东发表于 2018-7-10 14:41
额不明觉厉的感觉看了一下也就鼠标经过的时候变了下颜色行内标签变成块状的还不如动画属性呢

{:1_924:}我也是看了一圈，没找到啥动画效果

页: [1] 2

吾爱破解 - 52pojie.cn's Archiver

【分享】让没有js的页面动起来