博客列表 >简单页面制作-PHP培训十期线上班

简单页面制作-PHP培训十期线上班

黑白。
黑白。原创
2019年12月22日 19:17:48874浏览

制作简单页面:

代码如下:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="./iconfont.css">    <script src="./jquery3.4.1.js"></script>    <style>        *{            padding: 0;            margin: 0;        }        .main {            width: 1200px;            margin: auto;        }        .header{            margin-top: 30px;            overflow: auto;        }        .logo{            float: left;        }        .search {            float: left;            margin-left: 350px;            position: relative;            margin-top: 20px;        }        .search input {            width: 300px;            height: 35px;            border: 1px solid #cccccc;            border-radius: 10px;        }        .search span {            position: absolute;            right: 8px;            top: 2px;            font-size: 30px;        }        a{            text-decoration: none;            color: black;        }        .icon {            float: right;            width: 300px;            height: 50px;            margin-top: 20px;        }        .icon span {            font-size: 35px;            margin-right: 10px;        }        .nav{            margin-top: 20px;            overflow: auto;        }        .nav-sub{            width: 300px;            height: 50px;            float: left;        }        .nav-sub-left{            border-right: 2px solid #cccccc;            float: left;            width: 100px;        }        .nav-sub-left>span{            float: left;            font-size: 44px;            color: red;            margin-right: 10px;        }        .nav-sub-left li{            margin-top: 2px;            list-style:none;        }        .nav-sub-right{            float: left;        }        .nav-sub-right ul li{            list-style:none;            float: left;            margin-left: 8px;            margin-top: 2px;        }        .banner{            margin-top: 20px;        }        .hover{            width: 500px;            border: 2px solid red;        }    </style></head><body>    <div class="main">        <div class="header">            <div class="logo">                <a href=""><img src="./images/logo.png" alt=""></a>            </div>            <div class="search">                <input id="search" type="text">                <span class="iconfont">&#xe618;</span>            </div>            <div class="icon">                <a href=""><span class="iconfont">&#xe629;</span></a>                <a href=""><span class="iconfont">&#xe61b;</span></a>                <a href=""><span class="iconfont">&#xec0a;</span></a>                <a href=""><span class="iconfont">&#xec14;</span></a>                <a href=""><span class="iconfont">&#xe60e;</span></a>                <a href=""><span class="iconfont">&#xec80;</span></a>            </div>        </div>        <div class="nav">            <div class="nav-sub">                <div class="nav-sub-left">                    <span class="iconfont">&#xec39;</span>                    <ul>                        <li>资讯</li>                        <li>学习</li>                    </ul>                </div>                <div class="nav-sub-right">                    <ul>                        <a href=""><li>器材</li></a>                        <a href=""><li>大师</li></a>                        <a href=""><li>坦克</li></a>                        <a href=""><li>飞机</li></a>                    </ul>                    <ul>                        <a href=""><li>器材</li></a>                        <a href=""><li>大师</li></a>                        <a href=""><li>坦克</li></a>                        <a href=""><li>飞机</li></a>                    </ul>                </div>            </div>            <div class="nav-sub">                <div class="nav-sub-left">                    <span class="iconfont">&#xec39;</span>                    <ul>                        <li>资讯</li>                        <li>学习</li>                    </ul>                </div>                <div class="nav-sub-right">                    <ul>                        <a href=""><li>器材</li></a>                        <a href=""><li>大师</li></a>                        <a href=""><li>坦克</li></a>                        <a href=""><li>飞机</li></a>                    </ul>                    <ul>                        <a href=""><li>器材</li></a>                        <a href=""><li>大师</li></a>                        <a href=""><li>坦克</li></a>                        <a href=""><li>飞机</li></a>                    </ul>                </div>            </div>            <div class="nav-sub">                <div class="nav-sub-left">                    <span class="iconfont">&#xec39;</span>                    <ul>                        <li>资讯</li>                        <li>学习</li>                    </ul>                </div>                <div class="nav-sub-right">                    <ul>                        <a href=""><li>器材</li></a>                        <a href=""><li>大师</li></a>                        <a href=""><li>坦克</li></a>                        <a href=""><li>飞机</li></a>                    </ul>                    <ul>                        <a href=""><li>器材</li></a>                        <a href=""><li>大师</li></a>                        <a href=""><li>坦克</li></a>                        <a href=""><li>飞机</li></a>                    </ul>                </div>            </div>            <div class="nav-sub">                <div class="nav-sub-left">                    <span class="iconfont">&#xec39;</span>                    <ul>                        <li>资讯</li>                        <li>学习</li>                    </ul>                </div>                <div class="nav-sub-right">                    <ul>                        <a href=""><li>器材</li></a>                        <a href=""><li>大师</li></a>                        <a href=""><li>坦克</li></a>                        <a href=""><li>飞机</li></a>                    </ul>                    <ul>                        <a href=""><li>器材</li></a>                        <a href=""><li>大师</li></a>                        <a href=""><li>坦克</li></a>                        <a href=""><li>飞机</li></a>                    </ul>                </div>            </div>        </div>        <div class="banner">            <a href=""><img src="./images/2.jpg" alt=""></a>            <a href=""><img src="./images/banner-right.jpg" alt=""></a>        </div>    </div>    <script>        $('#search').mouseover(function() {            $(this).css({'box-shadow':'0 0 2px black'});        });        $('#search').mouseout(function() {            $(this).css({'box-shadow':''});        });        $('.banner img').mouseover(function() {            $(this).css({'box-shadow':'1px 1px 8px black'});        });        $('.banner img').mouseout(function() {            $(this).css({'box-shadow':''});        });        $(".icon span").mouseover(function() {            $(this).css({'color':'red'});        });        $(".icon span").mouseout(function() {            $(this).css({'color':'black'});        });    </script></body></html>

效果写上去了 也不知道 用的正不正规。。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议