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

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

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

然后偶然看到了这个代码.
就来分享一下喽.
比较开阔思路吧.

[HTML] 纯文本查看 复制代码

<!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写效果多好

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

我也是看了一圈，没找到啥动画效果

帐号		自动登录	找回密码
密码			注册[Register]

w5645060 w5645060 当前离线好友阅读权限 0 听众最后登录 1970-1-1 头像被屏蔽	w5645060 发表于 2018-7-10 13:19 吾爱破解论坛没有任何官方QQ群，禁止留联系方式，禁止任何商业交易。提示: 作者被禁止或删除内容自动屏蔽
	如何升级？如何获得积分？积分对应解释说明！
	回复支持 1 举报

[其他转载] 【分享】让没有js的页面动起来

免费评分