简单页面制作-PHP培训十期线上班
程序员文章站
2022-03-06 17:33:21
...
制作简单页面：
代码如下：
<!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"></span> </div> <div class="icon"> <a href=""><span class="iconfont"></span></a> <a href=""><span class="iconfont"></span></a> <a href=""><span class="iconfont"></span></a> <a href=""><span class="iconfont"></span></a> <a href=""><span class="iconfont"></span></a> <a href=""><span class="iconfont"></span></a> </div> </div> <div class="nav"> <div class="nav-sub"> <div class="nav-sub-left"> <span class="iconfont"></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"></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"></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"></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>
效果写上去了 也不知道 用的正不正规。。
上一篇： flex实现手机端首页
下一篇： win10smb1协议怎么开
推荐阅读