个人中心
gpt4 book ai didi

html - 复制 BBC 网站

转载 作者：太空宇宙 更新时间：2023-11-04 10:38:26 24 4
gpt4 key购买 nike

我正在尝试复制 BBC 网站。我几乎完成了顶部导航栏样式的第一部分。

enter image description here

我在更多部分的最后一部分和那个三 Angular 形箭头上遇到了问题。我一插入那个箭头，它就破坏了我的设计，感谢任何帮助。

如果您在上图中注意到，文本“更多”和三 Angular 形箭头的位置略低于其他元素。但是，如果我从我的代码中删除三 Angular 形箭头，“更多”将与其他箭头完美对齐。所以，我无法解决这个问题，即 more 和箭头与导航栏中的其他标签对齐。

另外我想知道我们是否可以设置placeholder 值的样式？这是引用代码。

body,
p,
div,
ul,
li,
span,
input {
  margin: 0px;
  padding: 0px
}
body {
  margin: 0px;
  color: #FFFFFD;
  font-family: Arial, Helvetica, freesans, sans-serif;
  background-color: #E7E8E1;
}
#topnav {
  background-color: black
  /*#7a0000*/
  ;
  width: 100%;
  height: 41px;
}
.page-width {
  width: 1268px;
  margin: 0px auto;
}
#topnav-logo {
  padding: 5.5px 14px 2px 0px;
  float: left;
  border-right: 1px solid #666666;
}
#topnav-signin {
  font-stretch: semi-expanded;
  font-size: 13px;
  font-weight: 600;
  padding: 1px 87px 13px 13px;
  border-right: 1px solid #666666
  /*black*/
  ;
  float: left;
}
#topnav-signin img {
  position: relative;
  top: 7px;
  padding-right: 1px;
}
#topnav-menu {
  float: left;
}
#topnav-menu li {
  list-style-type: none;
  font-weight: 600;
  font-size: 13px;
  padding: 13px 20px 12px 20px;
  border-right: 1px solid #666666;
  float: left;
}
#topnav-menu ul li span {
  position: relative;
  top: 1px;
  padding-left: 57px
}
#topnav-search {
  float: left;
  padding: 0px 0px 2px 18px;
}
#topnav-search input {
  padding-top: 0px;
  padding-left: 7px;
  height: 24px;
  width: 143px;
  font-weight: 600;
  color: black;
  border: none;
  vertical-align: middle
}
#topnav-search img {
  position: relative;
  top: 8px;
}
<!doctype html>
<html>

<head>
  <title>My BBC</title>
</head>

<body>
  <div id="container">
    <div id="topnav">
      <div class="page-width">
        <div id="topnav-logo">
          <img src="images/bbclogo.PNG" />
        </div>
        <div id="topnav-signin">
          <p>
            <img src="images/signinlogo.PNG" />Sign in</p>
        </div>
        <div id="topnav-menu">
          <ul>
            <li>News</li>
            <li>Sport</li>
            <li>Weather</li>
            <li>Shop</li>
            <li>Earth</li>
            <li>Travel</li>
            <li>Capital</li>
            <li>Culture</li>
            <li>More<span>&#9654</span>
            </li>
          </ul>
        </div>
        <div id="topnav-search">
          <input type="text" placeholder="Search" />
          <img src="images/search.PNG" />
        </div>
      </div>
    </div>
  </div>
</body>

</html>

最佳答案

你的箭头问题与内联垂直对齐的乐趣有关，如果你查看 span block 在 chrome 的元素检查器(开发人员工具)中的位置，它比它旁边的文本低几个像素。

通常这样的问题与 block 的高度以及它与相邻 block 对齐的位置有关。在这种情况下，解决它的简单方法是将父级设置为固定高度，现在一切都会很好且水平。

如果您还没有看过 chrome 的元素检查器，我强烈建议您检查一下，它为您提供了一种简单的方法来查看事物的工作方式并即时修改它们。 Safari 和 Firefox 也有类似的工具。我学到的大部分知识都来自于使用它来弄清楚某些网站如何通过反复试验来工作。

body,
p,
div,
ul,
li,
span,
input {
  margin: 0px;
  padding: 0px
}
body {
  margin: 0px;
  color: #FFFFFD;
  font-family: Arial, Helvetica, freesans, sans-serif;
  background-color: #E7E8E1;
}
#topnav {
  background-color: black
  /*#7a0000*/
  ;
  width: 100%;
  height: 41px;
}
.page-width {
  width: 1268px;
  margin: 0px auto;
}
#topnav-logo {
  padding: 5.5px 14px 2px 0px;
  float: left;
  border-right: 1px solid #666666;
}
#topnav-signin {
  font-stretch: semi-expanded;
  font-size: 13px;
  font-weight: 600;
  padding: 1px 87px 13px 13px;
  border-right: 1px solid #666666
  /*black*/
  ;
  float: left;
}
#topnav-signin img {
  position: relative;
  top: 7px;
  padding-right: 1px;
}
#topnav-menu {
  float: left;
}
#topnav-menu li {
  list-style-type: none;
  font-weight: 600;
  font-size: 13px;
  padding: 13px 20px 12px 20px;
  border-right: 1px solid #666666;
  float: left;
}
#topnav-menu ul li span {
  position: relative;
  top: 1px;
  padding-left: 57px;
  
}
#topnav-search {
  float: left;
  padding: 0px 0px 2px 18px;
}
#topnav-search input {
  padding-top: 0px;
  padding-left: 7px;
  height: 24px;
  width: 143px;
  font-weight: 600;
  color: black;
  border: none;
  vertical-align: middle
}
#topnav-search img {
  position: relative;
  top: 8px;
}
<!doctype html>
<html>

<head>
  <title>My BBC</title>
</head>

<body>
  <div id="container">
    <div id="topnav">
      <div class="page-width">
        <div id="topnav-logo">
          <img src="images/bbclogo.PNG" />
        </div>
        <div id="topnav-signin">
          <p>
            <img src="images/signinlogo.PNG" />Sign in</p>
        </div>
        <div id="topnav-menu">
          <ul>
            <li>News</li>
            <li>Sport</li>
            <li>Weather</li>
            <li>Shop</li>
            <li>Earth</li>
            <li>Travel</li>
            <li>Capital</li>
            <li>Culture</li>
            <li>More<span>&#9654</span>
            </li>
          </ul>
        </div>
        <div id="topnav-search">
          <input type="text" placeholder="Search" />
          <img src="images/search.PNG" />
        </div>
      </div>
    </div>
  </div>
</body>

</html>

关于html - 复制 BBC 网站，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35994312/

24 4 0
文章推荐： linux - 使用 Bash 脚本或 Ubuntu 命令行移动按名称排序的第一个 "n"文件
文章推荐： android - 无法在 init.rc 中启动时执行守护进程
文章推荐： css - Jekyll:在 _config.yml 中仅更改 sass 文件的编译目录
文章推荐： linux - chrt 将进程设置为 SCHED_OTHER 策略失败，错误为 "Invalid argument"
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com