Imitation of Sina's partial static page display-H5 Tutorial-php.cn

3 4 5 </ti"/><meta property="og:local" content="faq"> <meta property="og:title" content="Imitation of Sina's partial static page display-H5 Tutorial-php.cn"> <meta property="og:description" content="1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></ti"> <meta property="og:url" content="https://m.php.cn/faq/374251.html"> <meta property="og:image" content="https://m.php.cn/static/images/logo.png"> <meta property="og:site_name" content="php.cn"> <meta property="og:type" content="website"> <link rel="canonical" href="https://www.php.cn/faq/374251.html"/> <link rel="alternate" hrefLang="zh-cn" href="https://m.php.cn/zh/faq/374251.html" /> <link rel="alternate" hrefLang="en" href="https://m.php.cn/faq/374251.html" /> <link rel="alternate" hrefLang="zh-tw" href="https://m.php.cn/zh-tw/faq/374251.html" /> <link rel="alternate" hrefLang="ja" href="https://m.php.cn/ja/faq/374251.html" /> <link rel="alternate" hrefLang="ko" href="https://m.php.cn/ko/faq/374251.html" /> <link rel="alternate" hrefLang="ms" href="https://m.php.cn/ms/faq/374251.html" /> <link rel="alternate" hrefLang="fr" href="https://m.php.cn/fr/faq/374251.html" /> <link rel="alternate" hrefLang="de" href="https://m.php.cn/de/faq/374251.html" /> <meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, user-scalable=1" /><meta name="applicable-device" content="mobile" /><link rel="stylesheet" href="/static/css/style.css?4.5.31"><link href="/static/front/mobcss/newphpcommon.css?1.1" type="text/css" rel="stylesheet"/><link href="/static/front/mobcss/swiper.min.css" type="text/css" rel="stylesheet"/><link href="/static/front/mobcss/newphp.css?1.2" type="text/css" rel="stylesheet"/><link href="/static/css/global.css" type="text/css" rel="stylesheet"/><link href="/static/layui/css/layui.css" type="text/css" rel="stylesheet"/><link href="/static/mobcss/mobindex3.css" type="text/css" rel="stylesheet"/><script src="/static/front/mobjs/jquery-1.6.1.min.js"></script><script src="/static/front/mobjs/swiper.min.js"></script><script src="/static/front/mobjs/newphpcommon.js"></script><link rel="canonical" href="https://www.php.cn/faq/374251.html"/> <link rel="alternate" hrefLang="zh-cn" href="https://m.php.cn/zh/faq/374251.html" /> <link rel="alternate" hrefLang="en" href="https://m.php.cn/faq/374251.html" /> <link rel="alternate" hrefLang="zh-tw" href="https://m.php.cn/zh-tw/faq/374251.html" /> <link rel="alternate" hrefLang="ja" href="https://m.php.cn/ja/faq/374251.html" /> <link rel="alternate" hrefLang="ko" href="https://m.php.cn/ko/faq/374251.html" /> <link rel="alternate" hrefLang="ms" href="https://m.php.cn/ms/faq/374251.html" /> <link rel="alternate" hrefLang="fr" href="https://m.php.cn/fr/faq/374251.html" /> <link rel="alternate" hrefLang="de" href="https://m.php.cn/de/faq/374251.html" /> <script> var canshu = { SeeMore:'See more', FoldUp:'Fold up', Choice:'LANGUAGE', wait:'Loading, please wait~', LoginFirst:"Please log in first", needKeyword:'Enter keyword search', emailPhoneError:'Please enter the correct phone or email address', missPwd:'Please enter the password', emailError:'Please enter your correct email address', VerCode:"Please enter the verification code", getCode:'Sending', pwdError:'Incorrect password format', TwoPassNotMatch:'Two passwords do not match', Bindemail:'Bind email', resetpassword:'reset password', ConfirmPass:'Confirm Password', pwdCheck:'Please enter 6-18 letters or numbers', Editinfor: 'Edit personal information', trimContent:'Please enter content', titleCheck:'Title should be at least 5 words long', choiceLang:'Please select a language classification', Secondreply:'reply', NetWorkError:'Network error, please try again later!', keywordSearch:'Enter keyword search', all_lang_string:'zh|en|zh-tw|ja|ko|ms|fr|de', Next:'Next', Previous:'Previous' }; </script><script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl; f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-WWVXRJPW'); </script><script async src="https://www.googletagmanager.com/gtag/js?id=G-H42EVCYBJC"></script><script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-H42EVCYBJC'); </script><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5902227090019525" crossorigin="anonymous"></script><script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"WebSite","url":"https:\/\/m.php.cn\/","potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/m.php.cn\/search?word={search_term_string}"},"query-input":"required name=search_term_string"}}</script><meta property="article:author" content="PHP中文网" /><meta property="article:published_first" content=",https://www.php.cn/faq/374251.html" /><link rel="stylesheet" href="/static/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css?1"><link rel="stylesheet" href="/static/ueditor/third-party/SyntaxHighlighter/shCoreDefault1.css"><link href="/static/mobcss/newphp.css" type="text/css" rel="stylesheet"/><script src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js"></script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script><script> var xnb_name = 'Virtual currency'; </script><script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"Article","headline":"Imitation of Sina's partial static page display","description":"1 <!DOCTYPE html> 2 <html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"> 3 <head> 4 <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\"\/> 5 <title><\/ti","image":["img\/1.jpg"],"datePublished":"2017-07-14T18:15:14+8:00","author":{"url":"https:\/\/m.php.cn\/member\/1.html","name":"PHP中文网"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/m.php.cn\/faq\/374251.html"},"url":"https:\/\/m.php.cn\/faq\/374251.html","articleBody":"<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080\"> 1<\/span> <span style=\"color: #800000\">\n<\/span><span style=\"color: #008080\"> 2<\/span> <span style=\"color: #800000\">\n<\/span><span style=\"color: #008080\"> 3<\/span> <span style=\"color: #800000\">\n<\/span><span style=\"color: #008080\"> 4<\/span> <span style=\"color: #800000\"><meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\">\n<\/span><span style=\"color: #008080\"> 5<\/span> <span style=\"color: #800000\"> <title><\/title>\n<\/span><span style=\"color: #008080\"> 6<\/span> <span style=\"color: #800000\"> <link href=\"css\/demo.css\" rel=\"stylesheet\">\n<\/span><span style=\"color: #008080\"> 7<\/span> <span style=\"color: #800000\">\n<\/span><span style=\"color: #008080\"> 8<\/span> <span style=\"color: #800000\">\n<\/span><span style=\"color: #008080\"> 9<\/span> <span style=\"color: #800000\"> <div id=\"dnews\">\n<span style=\"color: #008080\">10<\/span> <span style=\"color: #800000\"> <div id=\"dhead\"><a href=\"#\" target=\"_blank\">汽车\/在线购车<\/a><\/div>\n<\/span><span style=\"color: #008080\">11<\/span> <span style=\"color: #800000\"> <div id=\"news\">\n<span style=\"color: #008080\">12<\/span> <span style=\"color: #800000\"> <div id=\"newspic\"><a href=\"#\"><img src=\"img\/1.jpg\" alt=\"Imitation of Sina's partial static page display\" ><\/a><\/div>\n<\/span><span style=\"color: #008080\">13<\/span> <span style=\"color: #800000\"> <div id=\"newstitle\"><a href=\"#\">选贵的也要选对的热销豪华中型SUV推荐<\/a><\/div>\n<\/span><span style=\"color: #008080\">14<\/span> <span style=\"color: #800000\"> <\/span>\n<\/div>\n<\/span><span style=\"color: #008080\">15<\/span> <span style=\"color: #800000\"> <ul id=\"tabs\">\n<\/ul><\/span><span style=\"color: #008080\">16<\/span> <span style=\"color: #800000\"> <li class=\"tab\"><a href=\"#\">新高尔夫百公里油耗为5L 奥迪Q4整体犀利<\/a><\/li>\n<\/span><span style=\"color: #008080\">17<\/span> <span style=\"color: #800000\"> <li class=\"tab\"><a href=\"#\">新高尔夫百公里油耗为5L 奥迪Q4整体犀利<\/a><\/li>\n<\/span><span style=\"color: #008080\">18<\/span> <span style=\"color: #800000\"> <li class=\"tab\"><a href=\"#\">新高尔夫百公里油耗为5L 奥迪Q4整体犀利<\/a><\/li>\n<\/span><span style=\"color: #008080\">19<\/span> <span style=\"color: #800000\"> <li class=\"tab\"><a href=\"#\">新高尔夫百公里油耗为5L 奥迪Q4整体犀利<\/a><\/li>\n<\/span><span style=\"color: #008080\">20<\/span> <span style=\"color: #800000\"> <li class=\"tab\"><a href=\"#\">新高尔夫百公里油耗为5L 奥迪Q4整体犀利<\/a><\/li>\n<\/span><span style=\"color: #008080\">21<\/span> <span style=\"color: #800000\"> <li class=\"tab\"><a href=\"#\">新高尔夫百公里油耗为5L 奥迪Q4整体犀利<\/a><\/li>\n<\/span><span style=\"color: #008080\">22<\/span> <span style=\"color: #800000\"> <li class=\"tab\"><a href=\"#\">新高尔夫百公里油耗为5L 奥迪Q4整体犀利<\/a><\/li>\n<\/span><span style=\"color: #008080\">23<\/span> <span style=\"color: #800000\"> \n<\/span><span style=\"color: #008080\">24<\/span> <span style=\"color: #800000\"> <\/span>\n<\/div>\n<\/span><span style=\"color: #008080\">25<\/span> <span style=\"color: #800000\">\n<\/span><span style=\"color: #008080\">26<\/span> <span style=\"color: #800000\"><\/span><\/pre>\n<\/div>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080\"> 1<\/span> <span style=\"color: #800000\">a<\/span>{\n<span style=\"color: #008080\"> 2<\/span> <span style=\"color: #ff0000\"> text-decoration<\/span>:<span style=\"color: #0000ff\">none<\/span>;\n<span style=\"color: #008080\"> 3<\/span> }\n<span style=\"color: #008080\"> 4<\/span> <span style=\"color: #800000\">#dnews<\/span>{\n<span style=\"color: #008080\"> 5<\/span> <span style=\"color: #ff0000\"> width<\/span>:<span style=\"color: #0000ff\">320px<\/span>;\n<span style=\"color: #008080\"> 6<\/span> <span style=\"color: #ff0000\"> height<\/span>:<span style=\"color: #0000ff\">264px<\/span>;\n<span style=\"color: #008080\"> 7<\/span> \n<span style=\"color: #008080\"> 8<\/span> }\n<span style=\"color: #008080\"> 9<\/span> <span style=\"color: #800000\">#dhead<\/span>{\n<span style=\"color: #008080\">10<\/span> <span style=\"color: #ff0000\"> width<\/span>:<span style=\"color: #0000ff\">320px<\/span>;\n<span style=\"color: #008080\">11<\/span> <span style=\"color: #ff0000\"> height<\/span>:<span style=\"color: #0000ff\">30px<\/span>;\n<span style=\"color: #008080\">12<\/span> <span style=\"color: #ff0000\"> padding-left<\/span>:<span style=\"color: #0000ff\">10px<\/span>;\n<span style=\"color: #008080\">13<\/span> <span style=\"color: #ff0000\"> box-sizing<\/span>:<span style=\"color: #0000ff\">border-box<\/span>;\n<span style=\"color: #008080\">14<\/span> <span style=\"color: #ff0000\"> line-height<\/span>:<span style=\"color: #0000ff\">30px<\/span>;\n<span style=\"color: #008080\">15<\/span> <span style=\"color: #ff0000\"> background-color<\/span>:<span style=\"color: #0000ff\">rgba(76,255,0,0.1)<\/span>;\n<span style=\"color: #008080\">16<\/span> }\n<span style=\"color: #008080\">17<\/span> <span style=\"color: #800000\">#dnews #dhead a:hover<\/span>{\n<span style=\"color: #008080\">18<\/span> <span style=\"color: #ff0000\"> color<\/span>:<span style=\"color: #0000ff\">blue<\/span>;\n<span style=\"color: #008080\">19<\/span> }\n<span style=\"color: #008080\">20<\/span> <span style=\"color: #800000\">#news<\/span>{\n<span style=\"color: #008080\">21<\/span> <span style=\"color: #ff0000\"> width<\/span>:<span style=\"color: #0000ff\">320px<\/span>;\n<span style=\"color: #008080\">22<\/span> <span style=\"color: #ff0000\"> height<\/span>:<span style=\"color: #0000ff\">70px<\/span>; \n<span style=\"color: #008080\">23<\/span> <span style=\"color: #ff0000\"> margin-top<\/span>:<span style=\"color: #0000ff\">10px<\/span>;\n<span style=\"color: #008080\">24<\/span> }\n<span style=\"color: #008080\">25<\/span> <span style=\"color: #800000\">#news #newspic<\/span>{\n<span style=\"color: #008080\">26<\/span> <span style=\"color: #ff0000\"> float<\/span>:<span style=\"color: #0000ff\">left<\/span>;\n<span style=\"color: #008080\">27<\/span> <span style=\"color: #ff0000\"> width<\/span>:<span style=\"color: #0000ff\"> 36%<\/span>;\n<span style=\"color: #008080\">28<\/span> }\n<span style=\"color: #008080\">29<\/span> <span style=\"color: #800000\">#news #newstitle<\/span>{\n<span style=\"color: #008080\">30<\/span> <span style=\"color: #ff0000\"> width<\/span>:<span style=\"color: #0000ff\"> 64%<\/span>;\n<span style=\"color: #008080\">31<\/span> <span style=\"color: #008000\">\/*<\/span><span style=\"color: #008000\"> padding-left: 10px; <\/span><span style=\"color: #008000\">*\/<\/span>\n<span style=\"color: #008080\">32<\/span> <span style=\"color: #ff0000\"> font-size<\/span>:<span style=\"color: #0000ff\"> 16px<\/span>;\n<span style=\"color: #008080\">33<\/span> <span style=\"color: #008000\">\/*<\/span><span style=\"color: #008000\"> margin-left: 5px; <\/span><span style=\"color: #008000\">*\/<\/span>\n<span style=\"color: #008080\">34<\/span> <span style=\"color: #008000\">\/*<\/span><span style=\"color: #008000\"> padding-left: 4px; <\/span><span style=\"color: #008000\">*\/<\/span>\n<span style=\"color: #008080\">35<\/span> <span style=\"color: #ff0000\"> float<\/span>:<span style=\"color: #0000ff\"> left<\/span>;\n<span style=\"color: #008080\">36<\/span> }\n<span style=\"color: #008080\">37<\/span> <span style=\"color: #800000\">#news #newstitle a:hover<\/span>{\n<span style=\"color: #008080\">38<\/span> <span style=\"color: #ff0000\"> color<\/span>:<span style=\"color: #0000ff\">blue<\/span>;\n<span style=\"color: #008080\">39<\/span> }\n<span style=\"color: #008080\">40<\/span> <span style=\"color: #800000\">#tabs<\/span>{\n<span style=\"color: #008080\">41<\/span> <span style=\"color: #ff0000\"> list-style-type<\/span>:<span style=\"color: #0000ff\">none<\/span>;\n<span style=\"color: #008080\">42<\/span> <span style=\"color: #ff0000\"> color<\/span>:<span style=\"color: #0000ff\">black<\/span>;\n<span style=\"color: #008080\">43<\/span> <span style=\"color: #ff0000\"> font-size<\/span>:<span style=\"color: #0000ff\">14px<\/span>;\n<span style=\"color: #008080\">44<\/span> <span style=\"color: #ff0000\"> line-height<\/span>:<span style=\"color: #0000ff\">20px<\/span>;\n<span style=\"color: #008080\">45<\/span> <span style=\"color: #ff0000\"> float<\/span>:<span style=\"color: #0000ff\">left<\/span>;\n<span style=\"color: #008080\">46<\/span> <span style=\"color: #ff0000\"> margin<\/span>:<span style=\"color: #0000ff\"> 0px -40px<\/span>;\n<span style=\"color: #008080\">47<\/span> \n<span style=\"color: #008080\">48<\/span> }\n<span style=\"color: #008080\">49<\/span> <span style=\"color: #800000\">#tabs .tab a:hover<\/span>{\n<span style=\"color: #008080\">50<\/span> <span style=\"color: #ff0000\"> color<\/span>:<span style=\"color: #0000ff\">red<\/span>;\n<span style=\"color: #008080\">51<\/span> }\n<span style=\"color: #008080\">52<\/span> <span style=\"color: #800000\">.tab<\/span>{\n<span style=\"color: #008080\">53<\/span> <span style=\"color: #ff0000\"> background-image<\/span>:<span style=\"color: #0000ff\">url(..\/img\/2.png)<\/span>;\n<span style=\"color: #008080\">54<\/span> <span style=\"color: #ff0000\"> background-repeat<\/span>:<span style=\"color: #0000ff\">no-repeat<\/span>;\n<span style=\"color: #008080\">55<\/span> <span style=\"color: #ff0000\"> padding-left<\/span>:<span style=\"color: #0000ff\">20px<\/span>;\n<span style=\"color: #008080\">56<\/span> <span style=\"color: #ff0000\"> background-position-y<\/span>:<span style=\"color: #0000ff\">center<\/span>;\n<span style=\"color: #008080\">57<\/span> }<\/pre>\n<\/div>\n<p> <\/p>"}</script><script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https:\/\/m.php.cn\/","name":"Home"}},{"@type":"ListItem","position":2,"item":{"@id":"https:\/\/m.php.cn\/web-designer.html","name":"Web Front-end"}},{"@type":"ListItem","position":3,"item":{"@id":"https:\/\/m.php.cn\/html5-tutorial.html","name":"H5 Tutorial"}},{"@type":"ListItem","position":4,"item":{"@id":"https:\/\/m.php.cn\/faq\/374251.html","name":"Imitation of Sina's partial static page display"}}]}</script></head><body data-commit-time="2023-12-28T14:50:12+08:00" class="body2_2"><link rel="stylesheet" type="text/css" href="/static/csshwm/m_stylehw.css"><header><div class="head"><div class="haed_left"><div class="haed_logo"><a href="https://m.php.cn/" title="php.cn" class="haed_logo_a"><img src="/static/imghwm/logo.png" alt="php.cn" class="haed_logoimg"></a></div></div><div class="search_div search_div_top2"><input id="key_words" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="" onkeydown="if (event.keyCode == 13) searchs('en')"/><a onclick="searchs('en')" href="javascript:;" title="search"><img onerror="this.onerror=''; this.src='static/imghwm/default1.png'" src="/static/imghwm/find.png" alt="search"></a></div><div class="head_right"><button type="button" class="layui-btn layui-btn-primary headerlan headlanmax lan1" id="lan1sp" lay-on="test-offset-r"><img src="/static/imghwm/m_menu.png" alt=""></button><div id="m_menu" class="m_menu" style="display: none;"><div class="m_editormain12main_top"><img src="/static/imghwm/logo.png" alt="logo"><a href="javascript:;" class="m_editormain12main_topi" id="m_editormain12main_topi_sp"><i class="layui-icon layui-icon-close"></i></a></div><div class="layui-panel m_menu_main"><ul class="layui-menu" id="demo-menu"><li class="layui-menu-item-group layui-menu-item-up m_menus" lay-options="{type: 'group'}"><div class="layui-menu-body-title m_menus_title">Community<i class="layui-icon layui-icon-down"></i></div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/article.html" title="Articles">Articles</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/faq/zt" title="Topics">Topics</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/wenda.html" title="Q&A">Q&A</a></div></li></ul></li><li class="layui-menu-item-divider"></li><li class="layui-menu-item-group layui-menu-item-up m_menus" lay-options="{type: 'group'}"><div class="layui-menu-body-title m_menus_title">Learn<i class="layui-icon layui-icon-down"></i></div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/course.html" title="Course">Course</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/dic/29.html" title="Programming Dictionary">Programming Dictionary</a></div></li></ul></li><li class="layui-menu-item-divider"></li><li class="layui-menu-item-group layui-menu-item-up m_menus" lay-options="{type: 'group'}"><div class="layui-menu-body-title m_menus_title">Tools Library<i class="layui-icon layui-icon-down"></i></div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/toolset/development-tools" title="Development tools">Development tools</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/toolset/website-source-code" title="Website Source Code">Website Source Code</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/toolset/php-libraries" title="PHP Libraries">PHP Libraries</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/toolset/js-special-effects" title="JS special effects">JS special effects</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/toolset/website-materials" title="Website Materials">Website Materials</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/toolset/extension-plug-ins" title="Extension plug-ins">Extension plug-ins</a></div></li></ul></li><li class="layui-menu-item-divider"></li><li lay-options="{id: 100}"><div class="layui-menu-body-title m_menus_oth"><a href="https://m.php.cn/ai" title="AI Tools">AI Tools</a></div></li><li class="layui-menu-item-divider"></li><li class="layui-menu-item-group layui-menu-item-up m_menus" lay-options="{type: 'group'}"><div class="layui-menu-body-title m_menus_title">Leisure<i class="layui-icon layui-icon-down"></i></div><ul class="m_menusnames"><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/game" title="Game Download">Game Download</a></div></li><li><div class="layui-menu-body-title m_menus_name"><a href="https://m.php.cn/mobile-game-tutorial/" title="Game Tutorials">Game Tutorials</a></div></li></ul></li><li class="layui-menu-item-divider"></li></ul></div><div class="m_menu_button m_menu_button_login"><a href="https://m.php.cn/login" title="Login">Log in</a></div><div class="m_menu_button m_menu_button_lang"><button type="button" class="layui-btn layui-btn-primary headerlan headlanmax lan1" id="lan1" lay-on="page2">English<i class="layui-icon layui-icon-triangle-d"></i></button></div></div><div class="m_menu_lang" id="m_menu_lang" style="display: none;"><div class="m_editormain12main_top"><img src="/static/imghwm/logo.png" alt="logo"><a href="javascript:;" class="m_editormain12main_topi" id="m_editormain12main_topi_lan"><i class="layui-icon layui-icon-close"></i></a></div><div class="m_menu_lang_main"><a href="javascript:setlang('zh-cn');" class="m_menu_lang_mains">简体中文<span>zh-cn</span></a><a href="javascript:;" class="m_menu_lang_mains">English<span>en</span></a><a href="javascript:setlang('zh-tw');" class="m_menu_lang_mains">繁体中文<span>zh-tw</span></a><a href="javascript:setlang('ja');" class="m_menu_lang_mains">日本語<span>ja</span></a><a href="javascript:setlang('ko');" class="m_menu_lang_mains">한국어<span>ko</span></a><a href="javascript:setlang('ms');" class="m_menu_lang_mains">Melayu<span>ms</span></a><a href="javascript:setlang('fr');" class="m_menu_lang_mains">Français<span>fr</span></a><a href="javascript:setlang('de');" class="m_menu_lang_mains">Deutsch<span>de</span></a></div></div></div></div></header><script> document.getElementById('lan1sp').addEventListener('click', function (event) { event.preventDefault(); var elements = document.getElementsByClassName('m_menu'); for (var i = 0; i < elements.length; i++) { elements[i].style.display = 'block'; } }); document.getElementById('m_editormain12main_topi_sp').addEventListener('click', function (event) { event.preventDefault(); var elements = document.getElementsByClassName('m_menu'); for (var i = 0; i < elements.length; i++) { elements[i].style.display = 'none'; } }); document.getElementById('lan1').addEventListener('click', function (event) { event.preventDefault(); var elements = document.getElementsByClassName('m_menu_lang'); for (var i = 0; i < elements.length; i++) { elements[i].style.display = 'block'; } }); document.getElementById('m_editormain12main_topi_lan').addEventListener('click', function (event) { event.preventDefault(); var elements = document.getElementsByClassName('m_menu_lang'); for (var i = 0; i < elements.length; i++) { elements[i].style.display = 'none'; } }); </script><main class="m_phpTopic_Details m_phpArticle_Details"><div class="Article_Details_main1M"><div class="phpgenera_Details_mainL1"><a href="https://m.php.cn/" title="Home" class="phpgenera_Details_mainL1a">Home</a><img class="lazy" data-src="/static/imghwm/top_right.png" src="/static/imghw/default1.png" alt="" /><a href="https://m.php.cn/web-designer.html" class="phpgenera_Details_mainL1a">Web Front-end</a><img class="lazy" data-src="/static/imghwm/top_right.png" src="/static/imghw/default1.png" alt="" /><a href="https://m.php.cn/html5-tutorial.html" class="phpgenera_Details_mainL1a">H5 Tutorial</a><img class="lazy" data-src="/static/imghwm/top_right.png" src="/static/imghw/default1.png" alt="" /><span>Imitation of Sina's partial static page display</span></div><div class="Articlelist_txts"><div class="Articlelist_txts_info"><h1><a href="" title="" class="Articlelist_txts_title">Imitation of Sina's partial static page display</a></h1><div class="Articlelist_txts_info_head"><div class="author_info"><a href="https://m.php.cn/member/1.html" class="author_avatar"><img class="lazy" data-src="https://img.php.cn/upload/avatar/000/000/001/6251028808086368.png" alt="PHP中文网" src="/static/imghw/default1.png" alt="author avatar" onerror="this.onerror=''; this.src='/static/imghw/default1.png'"></a><div class="author_detail"><a href="https://m.php.cn/member/1.html" class="author_name">PHP中文网</a></div></div></div><span class="Articlelist_txts_time">Jul 14, 2017 pm 06:15 PM</span><div class="Articlelist_txts_infos"><span class="Articlelist_txts_infoss on">exhibit</span><span class="Articlelist_txts_infoss ">static</span><span class="Articlelist_txts_infoss ">page</span></div></div></div><hr /><div class="article_main wenda-list"><div class="cnblogs_code"> <pre class="brush:php;toolbar:false"><span style="color: #008080"> 1</span> <span style="color: #800000"> </span><span style="color: #008080"> 2</span> <span style="color: #800000"> </span><span style="color: #008080"> 3</span> <span style="color: #800000"> </span><span style="color: #008080"> 4</span> <span style="color: #800000"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </span><span style="color: #008080"> 5</span> <span style="color: #800000"> <title></title> </span><span style="color: #008080"> 6</span> <span style="color: #800000"> <link href="css/demo.css" rel="stylesheet"> </span><span style="color: #008080"> 7</span> <span style="color: #800000"> </span><span style="color: #008080"> 8</span> <span style="color: #800000"> </span><span style="color: #008080"> 9</span> <span style="color: #800000"> <div id="dnews"> <span style="color: #008080">10</span> <span style="color: #800000"> <div id="dhead"><a href="#" target="_blank">汽车/在线购车</a></div> </span><span style="color: #008080">11</span> <span style="color: #800000"> <div id="news"> <span style="color: #008080">12</span> <span style="color: #800000"> <div id="newspic"><a href="#"><img src="/static/imghwm/default1.png" data-src="img/1.jpg" class="lazy" alt="Imitation of Sina's partial static page display" ></a></div> </span><span style="color: #008080">13</span> <span style="color: #800000"> <div id="newstitle"><a href="#">选贵的也要选对的热销豪华中型SUV推荐</a></div> </span><span style="color: #008080">14</span> <span style="color: #800000"> </span> </div> </span><span style="color: #008080">15</span> <span style="color: #800000"> <ul id="tabs"> </ul></span><span style="color: #008080">16</span> <span style="color: #800000"> <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li> </span><span style="color: #008080">17</span> <span style="color: #800000"> <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li> </span><span style="color: #008080">18</span> <span style="color: #800000"> <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li> </span><span style="color: #008080">19</span> <span style="color: #800000"> <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li> </span><span style="color: #008080">20</span> <span style="color: #800000"> <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li> </span><span style="color: #008080">21</span> <span style="color: #800000"> <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li> </span><span style="color: #008080">22</span> <span style="color: #800000"> <li class="tab"><a href="#">新高尔夫百公里油耗为5L 奥迪Q4整体犀利</a></li> </span><span style="color: #008080">23</span> <span style="color: #800000"> </span><span style="color: #008080">24</span> <span style="color: #800000"> </span> </div> </span><span style="color: #008080">25</span> <span style="color: #800000"> </span><span style="color: #008080">26</span> <span style="color: #800000"></span></pre> </div> <div class="cnblogs_code"> <pre class="brush:php;toolbar:false"><span style="color: #008080"> 1</span> <span style="color: #800000">a</span>{ <span style="color: #008080"> 2</span> <span style="color: #ff0000"> text-decoration</span>:<span style="color: #0000ff">none</span>; <span style="color: #008080"> 3</span> } <span style="color: #008080"> 4</span> <span style="color: #800000">#dnews</span>{ <span style="color: #008080"> 5</span> <span style="color: #ff0000"> width</span>:<span style="color: #0000ff">320px</span>; <span style="color: #008080"> 6</span> <span style="color: #ff0000"> height</span>:<span style="color: #0000ff">264px</span>; <span style="color: #008080"> 7</span> <span style="color: #008080"> 8</span> } <span style="color: #008080"> 9</span> <span style="color: #800000">#dhead</span>{ <span style="color: #008080">10</span> <span style="color: #ff0000"> width</span>:<span style="color: #0000ff">320px</span>; <span style="color: #008080">11</span> <span style="color: #ff0000"> height</span>:<span style="color: #0000ff">30px</span>; <span style="color: #008080">12</span> <span style="color: #ff0000"> padding-left</span>:<span style="color: #0000ff">10px</span>; <span style="color: #008080">13</span> <span style="color: #ff0000"> box-sizing</span>:<span style="color: #0000ff">border-box</span>; <span style="color: #008080">14</span> <span style="color: #ff0000"> line-height</span>:<span style="color: #0000ff">30px</span>; <span style="color: #008080">15</span> <span style="color: #ff0000"> background-color</span>:<span style="color: #0000ff">rgba(76,255,0,0.1)</span>; <span style="color: #008080">16</span> } <span style="color: #008080">17</span> <span style="color: #800000">#dnews #dhead a:hover</span>{ <span style="color: #008080">18</span> <span style="color: #ff0000"> color</span>:<span style="color: #0000ff">blue</span>; <span style="color: #008080">19</span> } <span style="color: #008080">20</span> <span style="color: #800000">#news</span>{ <span style="color: #008080">21</span> <span style="color: #ff0000"> width</span>:<span style="color: #0000ff">320px</span>; <span style="color: #008080">22</span> <span style="color: #ff0000"> height</span>:<span style="color: #0000ff">70px</span>; <span style="color: #008080">23</span> <span style="color: #ff0000"> margin-top</span>:<span style="color: #0000ff">10px</span>; <span style="color: #008080">24</span> } <span style="color: #008080">25</span> <span style="color: #800000">#news #newspic</span>{ <span style="color: #008080">26</span> <span style="color: #ff0000"> float</span>:<span style="color: #0000ff">left</span>; <span style="color: #008080">27</span> <span style="color: #ff0000"> width</span>:<span style="color: #0000ff"> 36%</span>; <span style="color: #008080">28</span> } <span style="color: #008080">29</span> <span style="color: #800000">#news #newstitle</span>{ <span style="color: #008080">30</span> <span style="color: #ff0000"> width</span>:<span style="color: #0000ff"> 64%</span>; <span style="color: #008080">31</span> <span style="color: #008000">/*</span><span style="color: #008000"> padding-left: 10px; </span><span style="color: #008000">*/</span> <span style="color: #008080">32</span> <span style="color: #ff0000"> font-size</span>:<span style="color: #0000ff"> 16px</span>; <span style="color: #008080">33</span> <span style="color: #008000">/*</span><span style="color: #008000"> margin-left: 5px; </span><span style="color: #008000">*/</span> <span style="color: #008080">34</span> <span style="color: #008000">/*</span><span style="color: #008000"> padding-left: 4px; </span><span style="color: #008000">*/</span> <span style="color: #008080">35</span> <span style="color: #ff0000"> float</span>:<span style="color: #0000ff"> left</span>; <span style="color: #008080">36</span> } <span style="color: #008080">37</span> <span style="color: #800000">#news #newstitle a:hover</span>{ <span style="color: #008080">38</span> <span style="color: #ff0000"> color</span>:<span style="color: #0000ff">blue</span>; <span style="color: #008080">39</span> } <span style="color: #008080">40</span> <span style="color: #800000">#tabs</span>{ <span style="color: #008080">41</span> <span style="color: #ff0000"> list-style-type</span>:<span style="color: #0000ff">none</span>; <span style="color: #008080">42</span> <span style="color: #ff0000"> color</span>:<span style="color: #0000ff">black</span>; <span style="color: #008080">43</span> <span style="color: #ff0000"> font-size</span>:<span style="color: #0000ff">14px</span>; <span style="color: #008080">44</span> <span style="color: #ff0000"> line-height</span>:<span style="color: #0000ff">20px</span>; <span style="color: #008080">45</span> <span style="color: #ff0000"> float</span>:<span style="color: #0000ff">left</span>; <span style="color: #008080">46</span> <span style="color: #ff0000"> margin</span>:<span style="color: #0000ff"> 0px -40px</span>; <span style="color: #008080">47</span> <span style="color: #008080">48</span> } <span style="color: #008080">49</span> <span style="color: #800000">#tabs .tab a:hover</span>{ <span style="color: #008080">50</span> <span style="color: #ff0000"> color</span>:<span style="color: #0000ff">red</span>; <span style="color: #008080">51</span> } <span style="color: #008080">52</span> <span style="color: #800000">.tab</span>{ <span style="color: #008080">53</span> <span style="color: #ff0000"> background-image</span>:<span style="color: #0000ff">url(../img/2.png)</span>; <span style="color: #008080">54</span> <span style="color: #ff0000"> background-repeat</span>:<span style="color: #0000ff">no-repeat</span>; <span style="color: #008080">55</span> <span style="color: #ff0000"> padding-left</span>:<span style="color: #0000ff">20px</span>; <span style="color: #008080">56</span> <span style="color: #ff0000"> background-position-y</span>:<span style="color: #0000ff">center</span>; <span style="color: #008080">57</span> }</pre> </div> <p> </p><p>The above is the detailed content of Imitation of Sina's partial static page display. For more information, please follow other related articles on the PHP Chinese website!</p></div><div class="wzconShengming_sp"><div class="bzsmdiv_sp">Statement</div><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="phpgenera_Details_mainL4"><div class="phpmain1_2_top"><a href="javascript:void(0);" class="phpmain1_2_top_title">Related Article<img class="lazy" data-src="/static/imghwm/index2_title2.png" src="/static/imghw/default1.png" alt="" /></a></div><div class="phpgenera_Details_mainL4_info"><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796800887.html" title="The Connection Between H5 and HTML5: Similarities and Differences" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174542411212625.jpg?x-oss-process=image/resize,p_40" alt="The Connection Between H5 and HTML5: Similarities and Differences" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796800887.html" title="The Connection Between H5 and HTML5: Similarities and Differences" class="phphistorical_Version2_mids_title">The Connection Between H5 and HTML5: Similarities and Differences</a><span class="Articlelist_txts_time">Apr 24, 2025 am 12:01 AM</span><p class="Articlelist_txts_p">H5 and HTML5 are different concepts: HTML5 is a version of HTML, containing new elements and APIs; H5 is a mobile application development framework based on HTML5. HTML5 parses and renders code through the browser, while H5 applications need to run containers and interact with native code through JavaScript.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796800602.html" title="The Building Blocks of H5 Code: Key Elements and Their Purpose" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174533817284091.jpg?x-oss-process=image/resize,p_40" alt="The Building Blocks of H5 Code: Key Elements and Their Purpose" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796800602.html" title="The Building Blocks of H5 Code: Key Elements and Their Purpose" class="phphistorical_Version2_mids_title">The Building Blocks of H5 Code: Key Elements and Their Purpose</a><span class="Articlelist_txts_time">Apr 23, 2025 am 12:09 AM</span><p class="Articlelist_txts_p">Key elements of HTML5 include,,,,,, etc., which are used to build modern web pages. 1. Define the head content, 2. Used to navigate the link, 3. Represent the content of independent articles, 4. Organize the page content, 5. Display the sidebar content, 6. Define the footer, these elements enhance the structure and functionality of the web page.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796800095.html" title="HTML5 and H5: Understanding the Common Usage" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174525130290661.jpg?x-oss-process=image/resize,p_40" alt="HTML5 and H5: Understanding the Common Usage" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796800095.html" title="HTML5 and H5: Understanding the Common Usage" class="phphistorical_Version2_mids_title">HTML5 and H5: Understanding the Common Usage</a><span class="Articlelist_txts_time">Apr 22, 2025 am 12:01 AM</span><p class="Articlelist_txts_p">There is no difference between HTML5 and H5, which is the abbreviation of HTML5. 1.HTML5 is the fifth version of HTML, which enhances the multimedia and interactive functions of web pages. 2.H5 is often used to refer to HTML5-based mobile web pages or applications, and is suitable for various mobile devices.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796799447.html" title="HTML5: The Building Blocks of the Modern Web (H5)" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174516510279313.jpg?x-oss-process=image/resize,p_40" alt="HTML5: The Building Blocks of the Modern Web (H5)" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796799447.html" title="HTML5: The Building Blocks of the Modern Web (H5)" class="phphistorical_Version2_mids_title">HTML5: The Building Blocks of the Modern Web (H5)</a><span class="Articlelist_txts_time">Apr 21, 2025 am 12:05 AM</span><p class="Articlelist_txts_p">HTML5 is the latest version of the Hypertext Markup Language, standardized by W3C. HTML5 introduces new semantic tags, multimedia support and form enhancements, improving web structure, user experience and SEO effects. HTML5 introduces new semantic tags, such as, ,, etc., to make the web page structure clearer and the SEO effect better. HTML5 supports multimedia elements and no third-party plug-ins are required, improving user experience and loading speed. HTML5 enhances form functions and introduces new input types such as, etc., which improves user experience and form verification efficiency.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796798868.html" title="H5 Code: Writing Clean and Efficient HTML5" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174507877285589.jpg?x-oss-process=image/resize,p_40" alt="H5 Code: Writing Clean and Efficient HTML5" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796798868.html" title="H5 Code: Writing Clean and Efficient HTML5" class="phphistorical_Version2_mids_title">H5 Code: Writing Clean and Efficient HTML5</a><span class="Articlelist_txts_time">Apr 20, 2025 am 12:06 AM</span><p class="Articlelist_txts_p">How to write clean and efficient HTML5 code? The answer is to avoid common mistakes by semanticizing tags, structured code, performance optimization and avoiding common mistakes. 1. Use semantic tags such as, etc. to improve code readability and SEO effect. 2. Keep the code structured and readable, using appropriate indentation and comments. 3. Optimize performance by reducing unnecessary tags, using CDN and compressing code. 4. Avoid common mistakes, such as the tag not closed, and ensure the validity of the code.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796798343.html" title="H5: How It Enhances User Experience on the Web" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174499251279316.jpg?x-oss-process=image/resize,p_40" alt="H5: How It Enhances User Experience on the Web" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796798343.html" title="H5: How It Enhances User Experience on the Web" class="phphistorical_Version2_mids_title">H5: How It Enhances User Experience on the Web</a><span class="Articlelist_txts_time">Apr 19, 2025 am 12:08 AM</span><p class="Articlelist_txts_p">H5 improves web user experience with multimedia support, offline storage and performance optimization. 1) Multimedia support: H5 and elements simplify development and improve user experience. 2) Offline storage: WebStorage and IndexedDB allow offline use to improve the experience. 3) Performance optimization: WebWorkers and elements optimize performance to reduce bandwidth consumption.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796797806.html" title="Deconstructing H5 Code: Tags, Elements, and Attributes" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174490596269472.jpg?x-oss-process=image/resize,p_40" alt="Deconstructing H5 Code: Tags, Elements, and Attributes" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796797806.html" title="Deconstructing H5 Code: Tags, Elements, and Attributes" class="phphistorical_Version2_mids_title">Deconstructing H5 Code: Tags, Elements, and Attributes</a><span class="Articlelist_txts_time">Apr 18, 2025 am 12:06 AM</span><p class="Articlelist_txts_p">HTML5 code consists of tags, elements and attributes: 1. The tag defines the content type and is surrounded by angle brackets, such as. 2. Elements are composed of start tags, contents and end tags, such as contents. 3. Attributes define key-value pairs in the start tag, enhance functions, such as. These are the basic units for building web structure.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/faq/1796797288.html" title="Understanding H5 Code: The Fundamentals of HTML5" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174481968244816.jpg?x-oss-process=image/resize,p_40" alt="Understanding H5 Code: The Fundamentals of HTML5" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/faq/1796797288.html" title="Understanding H5 Code: The Fundamentals of HTML5" class="phphistorical_Version2_mids_title">Understanding H5 Code: The Fundamentals of HTML5</a><span class="Articlelist_txts_time">Apr 17, 2025 am 12:08 AM</span><p class="Articlelist_txts_p">HTML5 is a key technology for building modern web pages, providing many new elements and features. 1. HTML5 introduces semantic elements such as, , etc., which enhances web page structure and SEO. 2. Support multimedia elements and embed media without plug-ins. 3. Forms enhance new input types and verification properties, simplifying the verification process. 4. Offer offline and local storage functions to improve web page performance and user experience.</p></div></div><a href="https://m.php.cn/web-designer.html" class="phpgenera_Details_mainL4_botton"><span>See all articles</span><img class="lazy" data-src="/static/imghwm/down_right.png" src="/static/imghw/default1.png" alt="" /></a></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="AI_ToolDetails_main4sR"><div class="phpgenera_Details_mainR3"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hottools2.png" src="/static/imghw/default1.png" alt="" /><h2>Hot AI Tools</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ai/undresserai-undress" title="Undresser.AI Undress"class="phpmain_tab2_mids_title"><h3>Undresser.AI Undress</h3></a><p>AI-powered app for creating realistic nude photos</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ai/ai-clothes-remover" title="AI Clothes Remover"class="phpmain_tab2_mids_title"><h3>AI Clothes Remover</h3></a><p>Online AI tool for removing clothes from photos.</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ai/undress-ai-tool" title="Undress AI Tool"class="phpmain_tab2_mids_title"><h3>Undress AI Tool</h3></a><p>Undress images for free</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ai/clothoffio" title="Clothoff.io"class="phpmain_tab2_mids_title"><h3>Clothoff.io</h3></a><p>AI clothes remover</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ai/video-swap" title="Video Face Swap"class="phpmain_tab2_mids_title"><h3>Video Face Swap</h3></a><p>Swap faces in any video effortlessly with our completely free AI face swap tool!</p></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/ai">Show More</a></div></div></div><div class="phpgenera_Details_mainR4"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hotarticle2.png" src="/static/imghw/default1.png" alt="" /><h2>Hot Article</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/1796785841.html" title="Assassin's Creed Shadows: Seashell Riddle Solution" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Seashell Riddle Solution</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 weeks ago</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/1796789525.html" title="What's New in Windows 11 KB5054979 & How to Fix Update Issues" class="phpgenera_Details_mainR4_bottom_title">What's New in Windows 11 KB5054979 & How to Fix Update Issues</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 weeks ago</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/1796785857.html" title="Where to find the Crane Control Keycard in Atomfall" class="phpgenera_Details_mainR4_bottom_title">Where to find the Crane Control Keycard in Atomfall</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 weeks ago</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/1796784440.html" title="Roblox: Dead Rails - How To Complete Every Challenge" class="phpgenera_Details_mainR4_bottom_title">Roblox: Dead Rails - How To Complete Every Challenge</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>4 weeks ago</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/1796784000.html" title="Atomfall guide: item locations, quest guides, and tips" class="phpgenera_Details_mainR4_bottom_title">Atomfall guide: item locations, quest guides, and tips</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>1 months ago</span><span>ByDDD</span></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/article.html">Show More</a></div></div></div><div class="phpgenera_Details_mainR3"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hottools2.png" src="/static/imghw/default1.png" alt="" /><h2>Hot Tools</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/toolset/development-tools/1492" title="EditPlus Chinese cracked version" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/5e21527e79622256.png" src="/static/imghw/default1.png" alt="EditPlus Chinese cracked version" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/toolset/development-tools/1492" title="EditPlus Chinese cracked version" class="phpmain_tab2_mids_title"><h3>EditPlus Chinese cracked version</h3></a><p>Small size, syntax highlighting, does not support code prompt function</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg" src="/static/imghw/default1.png" alt="Notepad++7.3.1" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title"><h3>Notepad++7.3.1</h3></a><p>Easy-to-use and free code editor</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg" src="/static/imghw/default1.png" alt="SublimeText3 Chinese version" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_title"><h3>SublimeText3 Chinese version</h3></a><p>Chinese version, very easy to use</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/toolset/development-tools/505" title="Dreamweaver Mac version" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d36dab93a95387.png" src="/static/imghw/default1.png" alt="Dreamweaver Mac version" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/toolset/development-tools/505" title="Dreamweaver Mac version" class="phpmain_tab2_mids_title"><h3>Dreamweaver Mac version</h3></a><p>Visual web development tools</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/toolset/development-tools/1544" title="MinGW - Minimalist GNU for Windows" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="" src="/static/imghw/default1.png" alt="MinGW - Minimalist GNU for Windows" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/toolset/development-tools/1544" title="MinGW - Minimalist GNU for Windows" class="phpmain_tab2_mids_title"><h3>MinGW - Minimalist GNU for Windows</h3></a><p>This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.</p></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/ai">Show More</a></div></div></div><div class="phpgenera_Details_mainR4"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hotarticle2.png" src="/static/imghw/default1.png" alt="" /><h2>Hot Topics</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/gmailyxdlrkzn" title="Where is the login entrance for gmail email?" class="phpgenera_Details_mainR4_bottom_title">Where is the login entrance for gmail email?</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>7687</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>15</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/java-tutorial" title="Java Tutorial" class="phpgenera_Details_mainR4_bottom_title">Java Tutorial</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1639</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>14</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/cakephp-tutor" title="CakePHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP Tutorial</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1393</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>52</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/laravel-tutori" title="Laravel Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel Tutorial</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1287</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>25</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/faq/php-tutorial" title="PHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP Tutorial</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1229</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>29</span></div></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/faq/zt">Show More</a></div></div></div></div></main><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><script> jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script><script>// 通用函数，用于显示或隐藏元素 function toggleElementsDisplay(className, show) { const elements = document.getElementsByClassName(className); for (let i = 0; i < elements.length; i++) { elements[i].style.display = show ? "block" : "none"; } } // 页面加载完成后执行的主函数 document.addEventListener("DOMContentLoaded", () => { // 1. 绑定菜单按钮事件 const bindMenuEvents = () => { const toggleDisplay = (className, show, eventId) => { const element = document.getElementById(eventId); if (element) { element.addEventListener("click", (event) => { event.preventDefault(); toggleElementsDisplay(className, show); }); } }; toggleDisplay("m_editormain12main", true, "fixed_tab_img"); toggleDisplay("m_editormain12main", false, "fixed_tab_topi"); toggleDisplay("m_editormain12main", false, "fixed_tab_close"); toggleDisplay("m_menu", true, "lan1sp"); toggleDisplay("m_menu", false, "m_editormain12main_topi_sp"); toggleDisplay("m_menu_lang", true, "lan1"); toggleDisplay("m_menu_lang", false, "m_editormain12main_topi_lan"); }; // 2. 绑定滚动链接事件 const bindScrollLinks = () => { const titleList = document.getElementById("fixed_tab_titlelist"); const menuMain = document.getElementsByClassName("m_editormain12main")[0]; const links = document.querySelectorAll('.fixed_tab_a'); links.forEach(linkElement => { if (linkElement) { linkElement.addEventListener("click", async (e) => { e.preventDefault(); e.stopPropagation(); // 先隐藏菜单 if (menuMain) menuMain.style.display = "none"; if (titleList) titleList.style.display = "none"; // 获取目标元素的 ID const targetId = linkElement.getAttribute('href').substring(1); const targetElement = document.getElementById(targetId); // 等待 DOM 更新 await new Promise(resolve => requestAnimationFrame(resolve)); // 滚动到目标位置 if (targetElement) { targetElement.scrollIntoView({ behavior: "smooth", block: "start" }); } }); } }); }; // 3. 绑定关闭按钮事件 const bindCloseButton = () => { const closeButton = document.querySelector(".phpgenera_Details_mainR1_close"); const container = document.querySelector(".phpgenera_Details_mainR1"); if (closeButton && container) { closeButton.addEventListener("click", (event) => { event.preventDefault(); container.style.display = "none"; }); } }; // 4. 初始化菜单交互功能 const initMenuInteraction = () => { const menuGroupElements = document.querySelectorAll('.layui-menu-item-group'); menuGroupElements.forEach(menuItem => { menuItem.addEventListener('click', function(event) { if (event.target.closest('.m_menusnames')) { return; } this.classList.toggle('layui-menu-item-down'); this.classList.toggle('layui-menu-item-up'); const subMenuContainer = this.querySelector('.m_menusnames'); const icon = this.querySelector('.layui-icon'); if (subMenuContainer && icon) { if (this.classList.contains('layui-menu-item-down')) { subMenuContainer.style.display = 'block'; icon.classList.remove('layui-icon-down'); icon.classList.add('layui-icon-up'); } else { subMenuContainer.style.display = 'none'; icon.classList.remove('layui-icon-up'); icon.classList.add('layui-icon-down'); } } }); }); }; // 5. 初始化 layui 功能 const initLayui = () => { if (typeof layui !== 'undefined') { layui.use(function () { var util = layui.util; if (util && util.fixbar) { util.fixbar({ on: { mouseenter: function (type) { if (layer && layer.tips) { layer.tips(type, this, { tips: 4, fixed: true, }); } }, mouseleave: function (type) { if (layer && layer.closeAll) { layer.closeAll("tips"); } }, }, }); } }); } }; // 执行所有初始化函数 bindMenuEvents(); bindScrollLinks(); bindCloseButton(); initMenuInteraction(); initLayui(); }); </script></body></html>