不可滚动的内容 + 网页栏中不可点击的超链接

Posted 2023-03-21

技术标签:

【中文标题】不可滚动的内容 + 网页栏中不可点击的超链接【英文标题】：unscrollable content + unclickable hyperlink in webpage bar 【发布时间】：2020-06-12 10:37:40 【问题描述】：

我遇到了这个问题，我的页面无法在栏后的整个内容中滚动。另外，我希望栏后的图像适合页面大小，因此不会有任何左右间隙并且图像后面的文本要在中心对齐。最后购物车和用户由于某种原因不可点击，尽管我用<a> 标签制作了它们输出的屏幕截图我希望图像从左到右适合整个部分：他们没有滚动查看<P>标签的全部内容 css代码::

*
    padding: 0;
    margin: 0;

.header
   height: 80px;
 width: 100%;
    background: url(images/header.jpeg);
    position: fixed;
    z-index: 99;

.bar
    width: 100%;
    height: 43px;
    background: url(images/menu-boarder.jpeg);
    flex-flow: row wrap;
  align-items: center;
    position: fixed;
    z-index: 99;


.container 
  position: relative;
  width: 100%;
  max-width: 400px;


.container img 
  width: 100%;
  height: auto;

.mark_colour
    background-color: pink;


.container .btn 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
    background-color: pink;

body
     margin-left: auto;
  margin-right: auto;
  margin-bottom: 100px;
  margin-top: 20px;
  overflow: auto;
  width: 80%;

.menu
    float: left;
    list-style: none;
    margin-top: 10px;


.menu li
    display: inline-block;


.menu li a
    color: #fff;
    text-decoration: none;
    padding: 10px;
    font-family: sans-serif;
    font-size: 24px;


.menu li a:hover
    background: #fff;
    color: #333;
    padding: 10px;
    font-weight: bold;


.search 
  display: flex;
  float: right;
  padding-top: 7px;
  position: relative;
  right:80px;




.searchTerm 
  width: 400%;
  border: 3px solid #000000;
  color: #000000;
  border: 3px solid #000000;
  padding-bottom: 10px;
  padding-top: 20px;
  padding-right: 25px;
  padding-left: 15px;
  height: 20px;


.searchTerm:focus
  color: #000000;





.homeage_but 
  width: 100%;
  height: auto;


.searchButton 
  width: 100px;
  border: 1px solid #000000;
  background: #000000;
  padding-right: 8px;
  padding-left: 10px;
  color: #FFFFFF;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;

.fa-shopping-cart, .glyphicon-user

    color: #000000;


#lblCartCount 
    font-size: 12px;
    background-color: crimson;
    color: #fff;
    padding: 0 5px;
    vertical-align: top;

.form-inline 
   display: flex;


.banneroverflow:hidden
.banner imgwidth:100%
.centered-elementtext-align:center

.footer
    width: 100%;
    height: 100px;
    background: url(images/footer.jpeg);
    bottom: 0px;
    left: 0px;
    right: 0px;
    position: fixed;
    margin-bottom: 0px;

html代码::

<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<title>Cookie|Bakery shop</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<div class="header">
        </div>
    <br><br><br><br>
 <div class="bar">
        <ul class="menu">
        <li><a href="">Home</a></li>
            <li><a href="">Contact us</a></li>
            <li><a href="">About us</a></li>
            <li><a href="">Product</a></li>
        </ul>



      <div class="search">
         <form class="form-inline">
              <input type="text" class="searchTerm" placeholder="What are you looking for?">
              <button type="submit" class="searchButton"><i class="fa fa-search"></i></button> 
            </form> 
     <div class="icons"><!-- here is the unclickable part --------------------------------------------->
     <a herf="xx.html" ><i class="fa fa-shopping-cart" style="font-size:36px; margin-right: 10px;">
          <asp:Label ID="lblCartCount" ForeColor="White"/>3</i></a>
     <a herf="" ><i class="glyphicon glyphicon-user" style="font-size:30px; margin-right: 5px; "></i></a>
     </div>
     </div>


     </div>

    <!-- Image of a product with button refrence to the product it self  -->
    <div class="container">
<div class="banner">
<img src="images/cake.jpg" >
     <button class="btn" >CLICK ME!</button>
</div>
         </div>
<div class="centered-element">
    <h4><center><u><mark class="mark_colour">Welome to our Bakery shop!</mark></u></center></h4>
    <p>
       Lorem ipnam dolor sit amet, consectetur adipiscing elit Sed felis turpis, ulturicies nee herndrerit a
      ullarneorper in maars Donee a erat molestie, condimentum ex eu, vehicula elst Ut egestas consectenor
      libero, et dictum elir tineidunt sed Sed tellus nisi, faciliais sut nulla eu, euismod blandit marpia. Praesent
      uficies semper auctor. Quisque eftieitur sollacstudin metus pec porta. Donec bbero notla, accumsan ut
      negue sit amet, tincsdurt facilisis felis. Phasellus ac ante pretium, vehicula ex sed, feugsat ipsum Nullam
      dapibus erat vitae ligula venenatis vestibulum Morbi aliquam sapien eu volutpet volutpat. Quisquue
      sapien nisl, pulvinar eu finabua eget, tempus quis ante Cras sed blandst eros. Quisque posuere eros at
      tellus tincidtant tristique.

    </p>
</div>








    <div  class="footer">


    </div>
</body>
</html>

【问题讨论】：

这是什么意思“页面在栏后不能滚动浏览整个内容”？请解释一下。 @Kevin 很抱歉我没有说清楚。我的意思是我的网页有一个用于徽标的标题和一个用于菜单栏的栏，其中还包含购物车和用于登录和注册的用户图标。我希望现在很清楚有点清楚，能不能也发个截图？导致您的 html 在小提琴中没有说清楚 @Kevin 当然！！！我现在就做是的.........您的网站在线吗？意思是我可以得到链接吗？ 【参考方案1】：

据我了解，我为您的“后栏”图像制作了这个小提琴。看一看。我已经重新编辑了这个。

<a herf="xx.html"><i class="fa fa-shopping-cart" style="font-size:36px; margin-right: 10px;">

<a herf=""><i class="glyphicon glyphicon-user" style="font-size:30px; margin-right: 5px; "></i></a>

您需要将herf 更正为href --- 您输入错误。 这将解决您的点击问题。

对于您的其他问题，请告诉我您要扩展横幅上的“蛋糕图像”吗？

*
    padding: 0;
    margin: 0;

.header
   height: 80px;
 width: 100%;
    background: url(https://via.placeholder.com/1600x400);
    position: fixed;
    z-index: 99;

.bar
    width: 100%;
    height: 43px;
    background: url(https://via.placeholder.com/1600x400);
    flex-flow: row wrap;
  align-items: center;
    position: fixed;
    z-index: 99;


.container 
  position: relative;
  width: 100%;
  max-width: 400px;


.container img 
  width: 100%;
  height: auto;

.mark_colour
    background-color: pink;


.container .btn 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
    background-color: pink;

body
     margin-left: auto;
  margin-right: auto;
  margin-bottom: 100px;
  margin-top: 20px;
  overflow: auto;
  width: 80%;

.menu
    float: left;
    list-style: none;
    margin-top: 10px;


.menu li
    display: inline-block;


.menu li a
    color: #fff;
    text-decoration: none;
    padding: 10px;
    font-family: sans-serif;
    font-size: 24px;


.menu li a:hover
    background: #fff;
    color: #333;
    padding: 10px;
    font-weight: bold;


.search 
  display: flex;
  float: right;
  padding-top: 7px;
  position: relative;
  right:80px;




.searchTerm 
  width: 400%;
  border: 3px solid #000000;
  color: #000000;
  border: 3px solid #000000;
  padding-bottom: 10px;
  padding-top: 20px;
  padding-right: 25px;
  padding-left: 15px;
  height: 20px;


.searchTerm:focus
  color: #000000;





.homeage_but 
  width: 100%;
  height: auto;


.searchButton 
  width: 100px;
  border: 1px solid #000000;
  background: #000000;
  padding-right: 8px;
  padding-left: 10px;
  color: #FFFFFF;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;

.fa-shopping-cart, .glyphicon-user

    color: #000000;


#lblCartCount 
    font-size: 12px;
    background-color: crimson;
    color: #fff;
    padding: 0 5px;
    vertical-align: top;

.form-inline 
   display: flex;


.banneroverflow:hidden
.banner imgwidth:100%
.centered-elementtext-align:center

.footer
    width: 100%;
    height: 100px;
    background: url(https://via.placeholder.com/1600x400);
    bottom: 0px;
    left: 0px;
    right: 0px;
    position: fixed;
    margin-bottom: 0px;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Cookie|Bakery shop</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>

<body>
  <div class="header">
  </div>
  <br><br><br><br>
  <div class="bar">
    <ul class="menu">
      <li><a href="">Home</a></li>
      <li><a href="">Contact us</a></li>
      <li><a href="">About us</a></li>
      <li><a href="">Product</a></li>
    </ul>

    <div class="search">
      <form class="form-inline">
        <input type="text" class="searchTerm" placeholder="What are you looking for?">
        <button type="submit" class="searchButton"><i class="fa fa-search"></i></button>
      </form>
      <div class="icons">
        <!-- here is the unclickable part --------------------------------------------->
        <a herf="xx.html"><i class="fa fa-shopping-cart" style="font-size:36px; margin-right: 10px;">
            <asp:Label ID="lblCartCount" ForeColor="White" />3</i></a>
        <a herf=""><i class="glyphicon glyphicon-user" style="font-size:30px; margin-right: 5px; "></i></a>
      </div>
    </div>

  </div>

  <!-- Image of a product with button refrence to the product it self  -->
  <div class="container">
    <div class="banner">
      <img src="https://via.placeholder.com/400x400" >
      <button class="btn">CLICK ME!</button>
    </div>
  </div>
  <div class="centered-element">
    <h4>
      <center><u><mark class="mark_colour">Welome to our Bakery shop!</mark></u></center>
    </h4>
    <p>
      Lorem ipnam dolor sit amet, consectetur adipiscing elit Sed felis turpis, ulturicies nee herndrerit a
      ullarneorper in maars Donee a erat molestie, condimentum ex eu, vehicula elst Ut egestas consectenor
      libero, et dictum elir tineidunt sed Sed tellus nisi, faciliais sut nulla eu, euismod blandit marpia. Praesent
      uficies semper auctor. Quisque eftieitur sollacstudin metus pec porta. Donec bbero notla, accumsan ut
      negue sit amet, tincsdurt facilisis felis. Phasellus ac ante pretium, vehicula ex sed, feugsat ipsum Nullam
      dapibus erat vitae ligula venenatis vestibulum Morbi aliquam sapien eu volutpet volutpat. Quisquue
      sapien nisl, pulvinar eu finabua eget, tempus quis ante Cras sed blandst eros. Quisque posuere eros at
      tellus tincidtant tristique.

    </p>
  </div>

  <div class="footer">

  </div>
</body>

</html>

对于您的点击问题，我建议您将display:block添加到搜索和购物车<a>标签。

【讨论】：

等等有一些问题我怎么给你看？有什么问题？我希望图像从左到右扩展到页面。而 p 标签仍然无法滚动查看。至于点击问题，我试过你的建议，很遗憾没有奏效。我在问题中添加了屏幕截图以表明问题我需要一个可以检查元素的链接。

以上是关于不可滚动的内容 + 网页栏中不可点击的超链接的主要内容，如果未能解决你的问题，请参考以下文章

删除在状态栏中显示超链接的超链接/鼠标悬停按钮

【急】【狗不答问题】点击网页中的超链接按钮没用是怎么回事？赏金：200

ifarme里面的页面包含的超链接点击能直接就在IFRAME里面跳转吗？

如何实现用户点击页面的超链接，然后本网页就跳转到A页面。然后再新跳转出一个B页面。求代码

android中，如何屏蔽WebView里的超链接？

怎么实现点击本页面的超链接a,跳到另一个页面,并触发另一个页面的onclick事件