RSS订阅
全球VPS列表|搬瓦工英文站
当前位置：美国VPS_搬瓦工CN2 GIA VPS > VPS交流 > 正文

不耻下问我来了, 来来大佬帮我看看web这个代码,

  • We'r VPS 发布于 2020-04-07
  • 分类：VPS交流
  • 阅读(356)
  • 评论(0)
搬瓦工机场JMS

html,css 同一个程序, 不同<!DOCTYPE> 头会出来有些标签对 , 多出几个像素来,  用h5的<!DOCTYPE>多了几个像素, 用html:xt的<!DOCTYE>头就跟预期的一样.
用h5的<!DOCTYPE>的头, 中间出来一条白色空白. 查看了每个标签的 padding margin border 都是正常的没有多出来的像素.

用html:xt的<!DOCTYPE>的头,中间就不会出现一条空白, 跟代码的预期一样.
pichost

大佬, 这是怎么回事啊, 帮我看看

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  2. <html xmlns="http://www.w3.org/1999/xhtml&quot; xml:lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>Document</title>
  6.         <style>
  7.                 * {
  8.                         margin: 0;
  9.                         padding: 0;
  10.                 }
  11.                 .cl        {
  12.                         clear: both;
  13.                 }
  14.                 .nomargin {
  15.                         margin: 0 !important;
  16.                 }
  17.                 body {
  18.                         height: 4444px;
  19.                         font-size: 14px;
  20.                         font-family: "微软雅黑";
  21.                 }
  22.                 .inner_c {
  23.                         width: 1000px;
  24.                         margin: 0 auto;
  25.                 }
  26.                 .product{
  27.                         padding-top: 50px;
  28.                         height: 229px;
  29.                         border-bottom: 1px solid #DBE1E7;
  30.                         position: relative;
  31.                 }
  32.                 .product ul{
  33.                         list-style: none;
  34.                 }
  35.                 .product ul li{
  36.                         float: left;
  37.                         width: 218px;
  38.                         margin-right: 43px;
  39.                 }
  40.                 .product ul li.last{
  41.                         width: 217px;
  42.                         overflow: hidden;
  43.                 }
  44.                 .product ul li a{
  45.                         text-decoration: none;
  46.                         display: block;
  47.                         padding-bottom: 12px;
  48.                 }
  49.                 .product ul li a:hover{
  50.                         background-color: #38B774;
  51.                 }
  52.                 .product ul li span{
  53.                         /*转成块之后，就能用text-align:center;来居中内部文字了*/
  54.                         display: block;
  55.                         text-align: center;
  56.                 }
  57.                 .product ul li span.chinese{
  58.                         line-height: 40px;
  59.                         color:#444866;
  60.                         font-weight: bold;
  61.                         background-color: red;
  62.                 }
  63.                 .product ul li span.english{
  64.                         font-size: 12px;
  65.                         line-height: 12px;
  66.                         color:#38B774;
  67.                         background-color: yellow;
  68.                 }
  69.                 .product ul li a:hover span.chinese{
  70.                         color:white;
  71.                 }
  72.                 .product ul li a:hover span.english{
  73.                         color:white;
  74.                 }
  75.                 .product ul li span.english b{
  76.                         font-weight: normal;
  77.                         padding-right: 11px;
  78.                         background: url(https://i.postimg.cc/xChn7SkL/arrow.png) no-repeat right center;
  79.                 }
  80.                 .product ul li a:hover span.english b{
  81.                         background-image: url(https://i.postimg.cc/j2ftYkNm/arrow2.png);
  82.                 }
  83.                
  84.                 .product .circles{
  85.                         position: absolute;
  86.                         bottom: -6px;
  87.                         left: 50%;
  88.                         width: 117px;
  89.                         height: 12px;
  90.                         background-color: white;
  91.                         margin-left: -59px;
  92.                 }
  93.                 .product ol{
  94.                         padding-left: 17px;
  95.                         list-style: none;
  96.                 }
  97.                 .product .circles ol li{
  98.                         float: left;
  99.                         width: 12px;
  100.                         height: 12px;
  101.                         background:url(https://i.postimg.cc/y63VRW5j/icons.png) no-repeat -1px -15px;
  102.                         margin-right: 14px;
  103.                 }
  104.                 .product .circles ol li.cur{
  105.                         background-position: -13px -15px;
  106.                 }
  107.         </style>
  108. </head>
  109. <body>
  110.            <div class="product inner_c">
  111.                            <ul>
  112.                                    <li>
  113.                                            <a href="#">
  114.                                                    <img src="https://i.postimg.cc/t4wZh8kn/pro1.png&quot; alt="">
  115.                                                    <span class="chinese">四川麻将</span>
  116.                                                    <span class="english"><b>SICHUAN MAJIANG</b></span>
  117.                                            </a>
  118.                                    </li>
  119.                                    <li>
  120.                                            <a href="#">
  121.                                                    <img src="https://i.postimg.cc/t4wZh8kn/pro1.png&quot; alt="">
  122.                                                    <span class="chinese">四川麻将</span>
  123.                                                    <span class="english"><b>SICHUAN</b></span>
  124.                                            </a>
  125.                                    </li>
  126.                                    <li>
  127.                                            <a href="#">
  128.                                                    <img src="https://i.postimg.cc/t4wZh8kn/pro1.png&quot; alt="">
  129.                                                    <span class="chinese">四川麻将</span>
  130.                                                    <span class="english"><b>SICHUAN MAJIANG</b></span>
  131.                                            </a>
  132.                                    </li>
  133.                                    <li class="nomargin last">
  134.                                            <a href="#">
  135.                                                    <img src="https://i.postimg.cc/t4wZh8kn/pro1.png&quot; alt="">
  136.                                                    <span class="chinese">四川麻将</span>
  137.                                                    <span class="english"><b>SICHUAN MAJIANG</b></span>
  138.                                            </a>
  139.                                    </li>
  140.                            </ul>
  141.            </div>
  142. </body>
  143. </html>

复制代码

湖北网友:朋友，你知道什么叫做不耻下问吗
宁夏网友:朋友，你知道什么叫做不耻下问吗
安徽网友:
在第48行后面加一条CSS语句:

  1. .product ul li a img {
  2.     display: block;
  3. }

复制代码

内蒙古网友:朋友，你知道什么叫做不耻下问吗

海南网友:你根本不知道什么叫做不耻下问，就一文盲
浙江网友:目测楼主要被骂死
山西网友:朋友，你知道什么叫做不耻下问吗
福建网友:朋友，你知道什么叫做不耻下问吗
山东网友:虽然你不知道什么是不耻下问
但我还是帮你看了一下，我用Chrome、Firefox、IE都测试了，HTML5的<!DOCTYPE>没有任何问题，和html:xt都是一个效果
宁夏网友:你的意思是大佬们都不如你，然后你向大佬们提问，还想着大佬自愿回答你？
甘肃网友:你的意思是大佬们都不如你，然后你向大佬们提问，还想着大佬自愿回答你？
四川网友:朋友，你知道什么叫做不耻下问吗

山西网友:朋友，你知道什么叫做不耻下问吗

湖南网友:你这是瞧不起我薛某人
湖北网友:虽然我是萌新，但是我还是要说：
朋友，你知道什么叫做不耻下问吗
黑龙江网友:语文水平有点弱。。。。zsbd
湖北网友:好嚣张哇
江西网友:哈哈哈 这个词有印象 当年被我师傅教育了  
吉林网友:可是多了一条空格, 你测试没有吗
浙江网友:没有，效果完全相同，我无法复现你那个空格的效果

贵州网友:没有，效果完全相同，我无法复现你那个空格的效果

山西网友:
应该是一样的，你再看看？// 其实添加了代码

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  12.         .cl {
  13.             clear: both;
  14.         }
  16.         .nomargin {
  17.             margin: 0 !important;
  18.         }
  20.         body {
  21.             height: 4444px;
  22.             font-size: 14px;
  23.             font-family: "微软雅黑";
  24.         }
  26.         .inner_c {
  27.             width: 1000px;
  28.             margin: 0 auto;
  29.         }
  31.         .product {
  32.             padding-top: 50px;
  33.             height: 229px;
  34.             border-bottom: 1px solid #DBE1E7;
  35.             position: relative;
  36.         }
  38.         .product ul {
  39.             list-style: none;
  40.         }
  42.         .product ul li {
  43.             float: left;
  44.             width: 218px;
  45.             margin-right: 43px;
  46.         }
  48.         .product ul li.last {
  49.             width: 217px;
  50.             overflow: hidden;
  51.         }
  53.         .product ul li a {
  54.             text-decoration: none;
  55.             display: block;
  56.             padding-bottom: 12px;
  57.         }
  59.         .product ul li a:hover {
  60.             background-color: #38B774;
  61.         }
  63.         /*添加的代码*/
  64.         .product ul li img {
  65.             display: block;
  66.         }
  68.         .product ul li span {
  69.             /*转成块之后，就能用text-align:center;来居中内部文字了*/
  70.             display: block;
  71.             text-align: center;
  72.         }
  74.         .product ul li span.chinese {
  75.             line-height: 40px;
  76.             color: #444866;
  77.             font-weight: bold;
  78.             background-color: red;
  79.         }
  81.         .product ul li span.english {
  82.             font-size: 12px;
  83.             line-height: 12px;
  84.             color: #38B774;
  85.             background-color: yellow;
  86.         }
  88.         .product ul li a:hover span.chinese {
  89.             color: white;
  90.         }
  92.         .product ul li a:hover span.english {
  93.             color: white;
  94.         }
  96.         .product ul li span.english b {
  97.             font-weight: normal;
  98.             padding-right: 11px;
  99.             background: url(https://i.postimg.cc/xChn7SkL/arrow.png) no-repeat right center;
  100.         }
  102.         .product ul li a:hover span.english b {
  103.             background-image: url(https://i.postimg.cc/j2ftYkNm/arrow2.png);
  104.         }
  106.         .product .circles {
  107.             position: absolute;
  108.             bottom: -6px;
  109.             left: 50%;
  110.             width: 117px;
  111.             height: 12px;
  112.             background-color: white;
  113.             margin-left: -59px;
  114.         }
  116.         .product ol {
  117.             padding-left: 17px;
  118.             list-style: none;
  119.         }
  121.         .product .circles ol li {
  122.             float: left;
  123.             width: 12px;
  124.             height: 12px;
  125.             background: url(https://i.postimg.cc/y63VRW5j/icons.png) no-repeat -1px -15px;
  126.             margin-right: 14px;
  127.         }
  129.         .product .circles ol li.cur {
  130.             background-position: -13px -15px;
  131.         }
  132.     </style>
  133. </head>
  134. <body>
  135. <div class="product inner_c">
  136.     <ul>
  137.         <li>
  138.             <a href="#">
  139.                 <img src="https://i.postimg.cc/t4wZh8kn/pro1.png&quot; alt="">
  140.                 <span class="chinese">四川麻将</span>
  141.                 <span class="english"><b>SICHUAN MAJIANG</b></span>
  142.             </a>
  143.         </li>
  144.         <li>
  145.             <a href="#">
  146.                 <img src="https://i.postimg.cc/t4wZh8kn/pro1.png&quot; alt="">
  147.                 <span class="chinese">四川麻将</span>
  148.                 <span class="english"><b>SICHUAN</b></span>
  149.             </a>
  150.         </li>
  151.         <li>
  152.             <a href="#">
  153.                 <img src="https://i.postimg.cc/t4wZh8kn/pro1.png&quot; alt="">
  154.                 <span class="chinese">四川麻将</span>
  155.                 <span class="english"><b>SICHUAN MAJIANG</b></span>
  156.             </a>
  157.         </li>
  158.         <li class="nomargin last">
  159.             <a href="#">
  160.                 <img src="https://i.postimg.cc/t4wZh8kn/pro1.png&quot; alt="">
  161.                 <span class="chinese">四川麻将</span>
  162.                 <span class="english"><b>SICHUAN MAJIANG</b></span>
  163.             </a>
  164.         </li>
  165.     </ul>
  166. </div>
  167. </body>
  168. </html>

复制代码

湖南网友:你有动代码吗
你考过了的是没有一条空白
我的代码就是有
山西网友:性感咩咩，在线扣分
朋友，你…….
福建网友:看了一下，我好像写错了，H5的头是<!doctype html>，我写成了<!doctype>，换成<!doctype html>的确出现了你所说的空行现象。
我看了代码，HTML5中img元素是inline显示的，而span元素是block显示的，HTML可能把换行符当作字符解析了。解决这一问题很多种方法，比如把img的显示改为block显示，添加以下代码

  1.         .product ul li img {
  2.             display: block;
  3.         }

复制代码
山东网友:默认样式我到没太在意他, 我想把span转行内块, 没成功, 代码写错了, 啊哈哈哈哈哈哈哈
谢谢啊
内蒙古网友:不用谢，就当温习一下HTML和css基础知识吧，都忘光了
安徽网友:
在第48行后面加一条CSS语句:

  1. .product ul li a img {
  2.     display: block;
  3. }

复制代码

未经允许不得转载：美国VPS_搬瓦工CN2 GIA VPS » 不耻下问我来了, 来来大佬帮我看看web这个代码,

AD：【新手必备】搬瓦工SS服务已转移至Just My Socks,最低5.88美元/月
赞 (0) 打赏

相关推荐

评论 0

取消
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
我要提问

BandwagonHost搬瓦工VPS优惠券码（优惠6.81%）

BWHNCXNVXV

6.81%优惠码：BWHNCXNVXV

6.58%优惠码：BWH3HYATVBJW

6.38%优惠码：BWH34QMFYT2R

6.25%优惠码：BWH26FXH3HIQ

5.5%优惠码：ireallyreadtheterms8

4.4%优惠码：ireadtheterms8

 More Less

常用教程

Just my socks教程

猜你喜欢

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏