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://m.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" /> <meta charset="utf-8" /><meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"><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><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!' }; </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><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> 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":"http:\/\/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":"<?xml encoding=\"utf-8\" ?><html><body><div class=\"cnblogs_code\">\n<pre><span style=\"color: #008080\"> 1<\/span> <span style=\"color: #800000\"><!DOCTYPE html>\n<\/span><span style=\"color: #008080\"> 2<\/span> <span style=\"color: #800000\"><html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<\/span><span style=\"color: #008080\"> 3<\/span> <span style=\"color: #800000\"><head>\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\"><\/head>\n<\/span><span style=\"color: #008080\"> 8<\/span> <span style=\"color: #800000\"><body>\n<\/span><span style=\"color: #008080\"> 9<\/span> <span style=\"color: #800000\"> <div id=\"dnews\">\n<\/span><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><span style=\"color: #008080\">12<\/span> <span style=\"color: #800000\"> <div id=\"newspic\"><a href=\"#\"><img src=\"img\/1.jpg\" \/><\/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\"> <\/div>\n<\/span><span style=\"color: #008080\">15<\/span> <span style=\"color: #800000\"> <ul id=\"tabs\">\n<\/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\"> <\/ul>\n<\/span><span style=\"color: #008080\">24<\/span> <span style=\"color: #800000\"> <\/div>\n<\/span><span style=\"color: #008080\">25<\/span> <span style=\"color: #800000\"><\/body>\n<\/span><span style=\"color: #008080\">26<\/span> <span style=\"color: #800000\"><\/html><\/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><\/body><\/html>\n"}</script></head><body><div class="bodyBg"><div class="nphpHead"><div class="nphpTop"><div class="nphpTopIn"><div class="nphpLogo"><a href="http://m.php.cn/" title="PHP Chinese website"></a></div><div class="nphpSubmit"><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a></div></div><a href="http://m.php.cn/login" class="bg3"></a></div></div></div><div class="nphpNav"><div class="nphpNavIn"><div class="swiper-container nphpNavSwiper"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/" >Home</a></div><div class="swiper-slide"><a href="http://m.php.cn/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/course.html" >Course</a></div><div class="swiper-slide"><a href="http://m.php.cn/faq/zt" >Topic</a></div><div class="swiper-slide"><a href="http://m.php.cn/xiazai" >Download</a></div><div class="swiper-slide"><a href="http://m.php.cn/game" >Game</a></div><div class="swiper-slide"><a href="http://m.php.cn/dic.html" >Dictionary</a></div><div class="clear"></div></div></div><script> var swiper = new Swiper('.nphpNavSwiper', { slidesPerView : 'auto' }); </script></div></div></div><div class="bodyMain"><div class="nphpSize"><div class="nphpSizeIn"><b></b><p><a href="http://m.php.cn/" title="Home" class="bBlack">Home</a> > <a href="http://m.php.cn/article.html" title="Article" class="bBlack">Article</a> > <a href="http://m.php.cn/web-designer.html" class="cBlack">Web Front-end</a> > Imitation of Sina's partial static page display</p><div class="clear"></div></div></div><div class="nphpQianBox"><div class="nphpQianTitle"><h1>Imitation of Sina's partial static page display</h1><div class="nphpQianTitleIn"><span><img data-src="https://img.php.cn/upload/avatar/000/000/001/6251028808086368.png" alt="PHP中文网" class="lazyload" src="/static/front/mobimages/moren/moren.png" /></span><dl><dt><em>PHP中文网</em><i class='bg1'>Original</i><div class="clear"></div></dt><dd><em>2017-07-14 18:15:14</em><i>1482browse</i><div class="clear"></div></dd></dl><div class="clear"></div></div></div><div class="nphpQianCont wenda-list"><?xml encoding="utf-8" ?><html><body><div class="cnblogs_code"> <pre class="brush:php;toolbar:false"><span style="color: #008080"> 1</span> <span style="color: #800000"><!DOCTYPE html> </span><span style="color: #008080"> 2</span> <span style="color: #800000"><html xmlns="http://www.w3.org/1999/xhtml"> </span><span style="color: #008080"> 3</span> <span style="color: #800000"><head> </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> 6 7 8 9

汽车/在线购车

选贵的也要选对的热销豪华中型SUV推荐

新高尔夫百公里油耗为5L 奥迪Q4整体犀利

25 26

 1 a{
 2     text-decoration:none;
 3 }
 4 #dnews{
 5     width:320px;
 6     height:264px;
 7   
 8 }
 9 #dhead{
10     width:320px;
11     height:30px;
12     padding-left:10px;
13     box-sizing:border-box;
14     line-height:30px;
15     background-color:rgba(76,255,0,0.1);
16 }
17 #dnews #dhead a:hover{
18     color:blue;
19 }
20 #news{
21     width:320px;
22     height:70px; 
23     margin-top:10px;
24 }
25 #news #newspic{
26     float:left;
27     width: 36%;
28 }
29 #news #newstitle{
30       width: 64%;
31     /* padding-left: 10px; */
32     font-size: 16px;
33     /* margin-left: 5px; */
34     /* padding-left: 4px; */
35     float: left;
36 }
37 #news #newstitle a:hover{
38     color:blue;
39 }
40 #tabs{
41     list-style-type:none;
42     color:black;
43     font-size:14px;
44     line-height:20px;
45     float:left;
46     margin: 0px  -40px;
47       
48 }
49 #tabs .tab a:hover{
50     color:red;
51 }
52 .tab{
53     background-image:url(../img/2.png);
54     background-repeat:no-repeat;
55     padding-left:20px;
56     background-position-y:center;
57 }

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!

Statement：

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

Previous article：Front-end framework-pop-up window researchNext article：Front-end framework-pop-up window research

See more

Related articles