- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
html, body {
height: 100%;
overflow: auto;
margin: 0 auto;
padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
height:100vh;
margin: 0 auto;
}
/* Total Container, incl. Navbar and Footer */
.bckg {
height: 100vh;
background-image: url('images/zzzleft.jpg'), url('images/zzzright.jpg');
background-position: top left, top right;
background-repeat: repeat-y;
max-width: 2270px;
}
/* Middle Section Container */
.centerSection {
overflow-y:scroll;
height: 100vh;
width: 72%;
margin: 0 auto;
background: white;
border: none;
}
/* All Content Between Nav and Footer */
.row {
padding: 10px 30px 20px 40px;
}
.navbar {
list-style-type: none;
margin-top: 0;
padding-top: 0;
padding: 0;
height: 100px;
display: flex;
}
.navLogo {
margin: 0 auto;
margin-left: 26%;
margin-top: 0;
margin-bottom: 7%;
}
.navTalkText {
color: white;
text-align: right;
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
padding-right: 30px;
font-size: 12px;
}
.rightsideNav {
width: 78%;
margin-left: auto;
overflow: hidden;
}
.centered {
padding-bottom: 18px;
font-size: 13px;
letter-spacing: -.5px;
}
.leftSideNav {
width: 20%;
}
.red-strip {
background: #ce3229;
height: 37px;
position: relative;
border-color: white;
}
.dark-strip {
background: #2d2d2c;
height: 37px;
position: relative;
border-color: white;
}
.red-strip:before {
content: "";
position: absolute;
top: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 18px 37px 18px;
border-color: transparent transparent #a9282b #fff;
}
.dark-strip:before {
content: "";
position: absolute;
top: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 37px 18px 0 18px;
border-color: #0c0c0c transparent transparent #fff;
}
li {
float: right;
padding-bottom: 22px;
display: block;
position: relative;
top: 50%;
transform: translateY(-38%);
padding-left: 0;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<div class="bckg">
<div class="centerSection">
<ul class="navbar">
<div class="leftsideNav">
<a href="../index.php">
<img src="images/trans_logo.jpg" width="160" class="navLogo" alt="navbar_logo" />
</a>
</div>
<div class="rightsideNav">
<div class="red-strip">
<p class="navTalkText">Ready to talk? 860-659-0777</p>
</div>
<div class="dark-strip">
<li class="centered"><a href="contact.php">CONTACT</a></li>
<li class="centered"><a href="resources.php">RESOURCES</a></li>
<li class="centered"><a href="about.php">ABOUT</a></li>
<li class="centered"><a href="industries.php">INDUSTRIES</a></li>
<li class="centered"><a href="services.php">SERVICES</a></li>
<li class="centered"><a href="solutions.php">SOLUTIONS</a></li>
<li class="centered"><a href="work.php">WORK</a></li>
</div>
</div>
</ul>
<div class="content">
<div class="row">
<div class="col-6">
<h1>What is Lorem Ipsum?</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="col-6">
<h1>Why do we use it?</h1>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
</div>
<div class="row">
<div class="col">
<h1>1 of 3</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="col">
<h1>2 of 3</h1>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
<div class="col-5">
<h1>3 of 3 (wider)</h1>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
</div>
</div>
</div>
</body>
</html>
我自己很难解决的 CSS 小问题...
导航栏由两个 div(红色和灰色条)组成,使用 :before 伪类在左侧创建三 Angular 形,如图所示。在某些分辨率下,会出现这些奇怪的轮廓。我该如何摆脱它们?这是问题的图片:
.red-strip {
background: #ce3229;
height: 37px;
position: relative;
border: none;
border-color: white;
padding-right: 16px;
}
.dark-strip {
background: #2d2d2c;
height: 37px;
position: relative;
border: none;
border-color: white;
padding-right: 16px;
}
.red-strip:before {
content: "";
position: absolute;
display: inline;
top: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 18.5px 37px 18.5px;
border-color: transparent transparent #a9282b #fff;
}
.dark-strip:before {
content: "";
position: absolute;
display: inline;
top: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 37px 18.5px 0 18.5px;
border-color: #0c0c0c transparent transparent #fff;
}
其他可能相关的 CSS:
.rightsideNav {
width: 78%;
margin-left: auto;
overflow: hidden;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
background-color: white;
height: 74px;
display: flex;
}
/* Total Container, incl. Navbar and Footer */
.bckg {
height: 100vh;
background-image: url('images/zzzleft.jpg'), url('images/zzzright.jpg');
background-position: top left, top right;
background-repeat: repeat-y;
max-width: 2270px;
}
导航栏也在其中:
/* Middle Section Container */
.centerSection {
overflow-y:scroll;
height: 100vh;
width: 72%;
margin: 0 auto;
background: white;
border: none;
}
最佳答案
实际上颜色不同,这就是创建边框的原因。请使用您的 style.css 中的代码,或者您可以在您拥有该代码的地方编辑现有的 css 文件并使用以下边框颜色
.red-strip:之前{
border-color: transparent transparent #ce3229 #fff !important;
}
.dark-strip:before {
border-color: #2d2d2c transparent transparent #fff !important;
}
关于css - 带有三 Angular 形的 Navbar 上不需要的边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46240520/
我正在尝试用 C 语言编写一个使用 gstreamer 的 GTK+ 应用程序。 GTK+ 需要 gtk_main() 来执行。 gstreamer 需要 g_main_loop_run() 来执行。
我已经使用 apt-get 安装了 opencv。我得到了以下版本的opencv2,它工作正常: rover@rover_pi:/usr/lib/arm-linux-gnueabihf $ pytho
我有一个看起来像这样的 View 层次结构(基于其他答案和 Apple 的使用 UIScrollView 的高级 AutoLayout 指南): ScrollView 所需的2 个步骤是: 为 Scr
我尝试安装 udev。 udev 在 ./configure 期间给我一个错误 --exists: command not found configure: error: pkg-config and
我正在使用 SQLite 3。我有一个表,forums,有 150 行,还有一个表,posts,有大约 440 万行。每个帖子都属于一个论坛。 我想从每个论坛中选择最新帖子的时间戳。如果我使用 SEL
使用 go 和以下包: github.com/julienschmidt/httprouter github.com/shwoodard/jsonapi gopkg.in/mgo.v2/bson
The database仅包含 2 个表: 钱包(100 万行) 事务(1500 万行) CockroachDB 19.2.6 在 3 台 Ubuntu 机器上运行 每个 2vCPU 每个 8GB R
我很难理解为什么在下面的代码中直接调用 std::swap() 会导致编译错误,而使用 std::iter_swap 编译却没有任何错误. 来自 iter_swap() versus swap() -
我有一个非常简单的 SELECT *用 WHERE NOT EXISTS 查询条款。 SELECT * FROM "BMAN_TP3"."TT_SPLDR_55E63A28_59358" SELECT
我试图按部分组织我的 .css 文件,我需要从任何文件访问文件组中的任何类。在 Less 中,我可以毫无问题地创建一个包含所有文件导入的主文件,并且每个文件都导入主文件,但在 Sass 中,我收到一个
Microsoft.AspNet.SignalR.Redis 和 StackExchange.Redis.Extensions.Core 在同一个项目中使用。前者需要StackExchange.Red
这个问题在这里已经有了答案: Updating from Rails 4.0 to 4.1 gives sass-rails railties version conflicts (4 个答案) 关
我们有一些使用 Azure DevOps 发布管道部署到的现场服务器。我们已经使用这些发布管道几个月了,没有出现任何问题。今天,我们在下载该项目的工件时开始出现身份验证错误。 部署组中的节点显示在线,
Tip: instead of creating indexes here, run queries in your code – if you're missing any indexes, you
你能解释一下 Elm 下一个声明中的意思吗? (=>) = (,) 我在 Elm architecture tutorial 的例子中找到了它 最佳答案 这是中缀符号。实际上,这定义了一个函数 (=>
我需要一个 .NET 程序集查看器,它可以显示低级详细信息,例如元数据表内容等。 最佳答案 ildasm 是 IL 反汇编程序,具有低级托管元数据 token 信息。安装 Visual Studio
我有两个列表要在 Excel 中进行比较。这是一个很长的列表,我需要一个 excel 函数或 vba 代码来执行此操作。我已经没有想法了,因此转向你: **Old List** A
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。 想要改善这个问题吗?更新问题,以便将其作为on-topi
我正在学习 xml 和 xml 处理。我无法很好地理解命名空间的存在。 我了解到命名空间帮助我们在 xml 中分离相同命名的元素。我们不能通过具有相同名称的属性来区分元素吗?为什么命名空间很重要或需要
我搜索了 Azure 文档、各种社区论坛和 google,但没有找到关于需要在公司防火墙上打开哪些端口以允许 Azure 所有组件(blob、sql、compute、bus、publish)的简洁声明
我是一名优秀的程序员,十分优秀!