如何解决如何使用CSS / Bootstrap 3制作斜线
如何制作带有斜线的此类页面?
例如我可以设置20度角吗?我必须放3格吗?
现在,我将第一个div放置在徽标的中间,然后放置导航栏,我希望导航栏与倾斜线上方的角度对齐。 我必须研究bootstrap 3 我有点迷路了。非常感谢您的帮助和解释
<div class="container" style="background-color: #04342E; width:100%">
<img class="img-responsive center-block" style="height: 600px; align-items: center;"; src="/i/gp-logo.png" />
<nav class="navbar navbar-default" style="justify-content: space-between; background-color: transparent; background: transparent; border-color: transparent;">
<ul class="nav navbar-nav" style="text-decoration: none">
<li class="nav-item">
<a class="nav-link active" href="#" style="color: white;">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Tableaux</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Papeterie</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">A propos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Contact</a>
</li>
</ul>
</nav>
<div>
</div>
</div>
解决方法
您可以使用
import win32com.client as w3c
shell = w3c.DispatchEx('C:/Program Files/FAME.exe')
shell.Run('FAME')
time.sleep(5)
shell.AppActivate('FAME')
shell.SendKeys("input +""C:\programs\FAMESCRIPT.txt""+{ENTER}",1)
创建div,我建议您使用:https://bennettfeely.com/clippy/
要么使用线性渐变背景。
具有剪切路径的演示:
clip-path
body{
background: #04342E;
margin:0;
}
div.polygon{
height: 100vh;
width: 100vw;
background: white;
clip-path: polygon(0 25%,100% 0,100% 100%,0 75%);
display:flex;
}
.content{
height: 50%;
width: 100%;
background-color:rgba(255,0.3); /** Just used to show the written area But it should be removed **/
margin:auto;
}
,
.container {
background-color: #04342E;
width: 100%;
height: 500px;
position: relative;
}
.container::after {
position: absolute;
content: "";
left: 0px;
right: 0px;
bottom: 0px;
border-bottom: solid white 500px;
transform-origin: bottom right;
transform: skew(1000deg);
}
.container #content {
background-color: #04342E;
width: 100%;
height: 500px;
margin-top: 600px;
position: relative;
}
.container #content::after {
position: absolute;
content: "";
top: 0px;
right: 0px;
left: 0px;
border-top: solid white 500px;
transform-origin: top left;
transform: skew(-1000deg);
}
<div class="container">
<img class="img-responsive center-block" style="height: 100px; align-items: center;" ; src="./images/image 5.png" />
<nav class="navbar navbar-default" style="justify-content: space-between; background-color: transparent; background: transparent; border-color: transparent;">
<ul class="nav navbar-nav" style="text-decoration: none">
<li class="nav-item">
<a class="nav-link active" href="#" style="color: white;">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Tableaux</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Papeterie</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">A propos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Contact</a>
</li>
</ul>
</nav>
<div id="content">
</div>
</div>
you can use psuedo classes in css to create this. see above for the code.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。