Bootsrtap +列+全高+倾斜

Question

我不习惯在premed模板之外开发很多html，现在我有了一个绝佳的机会来冒险。

My Layout https://i.stack.imgur.com/hZJEM.png

我正经历着一生中最艰难的日子，要把代码放进去。可以给一些好的东西一个起点吗？

我仍然没有代码，我有很多代码可以试用，但是没有一个可以达到我想要的。

有没有人可以帮助我？

Answer 1

我有这张图片作为布局，但是我需要使它有用，我需要知道是否仍然有这样的倾斜列编码

Answer 2

这是您的带有倾斜列的图像的示例，而运行该片段时将仅显示代码，要查看完整的示例，请从下载链接下载资源 here is a live view of what is the result

这是我用于偏斜的代码：

position: absolute;
left: 27%;
height: 29in;
transform: rotate(15deg);
top: -200;
text-align: center;
width: 238px;
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
transform: skewX(-17deg);
transform: rotate(16deg);
width: 21%;
}

download

这里是偏斜CSS代码的示例：

$("div").on("click", function() {
  $("#menu").toggleClass("active");
});
$("div").on("click", function() {
  $(".wrapper").toggleClass("active");
});

@import url("https://fonts.googleapis.com/css?family=Lato:300,800");



.text {
  background: transparent;
  top: 22%;
  right: -100%;
  width: 110px;
  color: #f7720c;
  font-weight: bold;
  font-size: 30px;
  opacity: 0;
}



.three {
  bottom: 0px;
  right: 0;
  width: 70px;
}

div:hover .one {
  right: 90px;
  opacity: 0;
}

div:hover .three {
  width: 110px;
}

div:hover .text {
  right: -11%;
  opacity: 1;
}

h1 {
  text-align: center;
  position: absolute;
  top: 10%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: #f7720c;
  opacity: .04;
  font-size: 6em;
  font-weight: 800;
  text-transform: uppercase;
  line-height: .8;
  pointer-events: none;
}

#menu {
     position: fixed;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background: #000000c7;
    display: block;
    transition: cubic-bezier(0.62,-0.79, 0, 1.71);
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
}
#menu .wrapper {
  opacity: 0;
  -webkit-transform: translate(0, 40px);
          transform: translate(0, 40px);
  padding-top: 20vh;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: all .4s ease-in-out;
}
#menu .wrapper ul {
  list-style-type: none;
  text-align: center;
  color: #fff;
}
#menu .wrapper ul li:first-child {
  padding-top: 0;
}
#menu .wrapper ul li {
  padding-top: 1.5em;
}
#menu .wrapper a {
  text-decoration: none;
  font-size: 3em;
  font-weight: 800;
  color: #f3f3f3;
  transition: color .3s ease-in-out;
}
#menu .wrapper a:hover {
  color: #f7720c;
}

#menu.active {
  -webkit-transform: translate(0, 0%);
          transform: translate(0, 0%);
  height: 100%;
  transition-delay: .2s;
}

#menu .active {
  -webkit-transform: translate(0, 0px);
          transform: translate(0, 0px);
  transition-delay: .45s;
  opacity: 1;
}


/* Main styles */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);

.box-with-text {
  background-image: url('https://unsplash.imgix.net/photo-1433354359170-23a4ae7338c6?fit=crop&fm=jpg&h=700&q=75&w=1050');
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}



.box-with-text {
  position: relative;
  margin-top:50px;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background-repeat: repeat;
  background-position: 50% 50%;
  background-size: cover;
  white-space: nowrap;
  text-align: center;
  text-transform: uppercase;
  font-size:95px;
  font-family:Oswald, Impact;
}

.box-with-text-2 {
  background-image: -webkit-linear-gradient(seagreen 50%, lightseagreen 80%);
  background-repeat: repeat;
  background-position: 0 0;
  background-size: 100% 50px;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-animation: stripes 2s linear infinite;
  animation: stripes 2s linear infinite;
}

@-webkit-keyframes stripes {
  100% {
    background-position: 0 -50px;
  }
}

@keyframes stripes {
  100% {
    background-position: 0 -50px;
  }
}

.box-with-text-2 {
  position: relative;
  display:block;
  margin-top:50px;
  left: 50%;
  white-space: nowrap;
  text-align: center;
  text-transform: uppercase;
  font-size:82px;
  font-family: bold Open Sans, Impact;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}


/* Main styles */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);

.text {
  fill: none;
  stroke-width: 6;
  stroke-linejoin: round;
  stroke-dasharray: 70 330;
  stroke-dashoffset: 0;
  -webkit-animation: stroke 6s infinite linear;
  animation: stroke 6s infinite linear;
}

.text:nth-child(5n + 1) {
  stroke: #F2385A;
  -webkit-animation-delay: -1.2s;
  animation-delay: -1.2s;
}
.text:nth-child(5n + 2) {
  stroke: #F5A503;
  -webkit-animation-delay: -2.4s;
  animation-delay: -2.4s;
}

.text:nth-child(5n + 3) {
  stroke: #E9F1DF;
  -webkit-animation-delay: -3.6s;
  animation-delay: -3.6s;
}

.text:nth-child(5n + 4) {
  stroke: #56D9CD;
  -webkit-animation-delay: -4.8s;
  animation-delay: -4.8s;
}

.text:nth-child(5n + 5) {
  stroke: #3AA1BF;
  -webkit-animation-delay: -6s;
  animation-delay: -6s;
}

@-webkit-keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

/* Other styles */

svg {
  position: absolute;
  left:0;
  right:0;
  width: 250px;
  height: 250px;
  margin:0 auto;
}

<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <link href='https://fonts.googleapis.com/css?family=Exo+2:600,700,800,900' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/styletxt.css">

  
      <link rel="stylesheet" href="./css/styletxt.css">
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="./css/style.css">
	  
	  
<style>
.bodybg {
 font-family: helvetica, arial, sans-serif;
    background-image: url(./background.png);
    height: 90%;
    width: 100%;
    background-size: cover;
    overflow: hidden;
    z-index: 1;
    background-repeat: no-repeat;
    background-color: black;
    position: absolute;
    left: 0;
    top: 5%;
    box-shadow: -1px -3px 20px 0px #333333fa;}
.col { 
   background: #ddd;
   width: 33%; 
   height: 100%;
   float: left; 
   position: relative; 
   cursor: pointer;
   
   -moz-transform: skew(-5deg, 0deg);
   -webkit-transform: skew(-5deg, 0deg);
   -o-transform: skew(-5deg, 0deg);
   -ms-transform: skew(-5deg, 0deg);
   transform: skew(-5deg, 0deg);
   
   -webkit-transition: all 200ms ease-in-out;
   -moz-transition: all 200ms ease-in-out;
   -ms-transition: all 200ms ease-in-out;
   -o-transition: all 200ms ease-in-out;
   transition: all 200ms ease-in-out;
}
.col:first-of-type {
   background: #fff;
   margin-left: -50px;
   padding-left: 50px;
}
.col:last-of-type {
   background: #f7d00c;
   margin-right: -50px;
   padding-right: 50px;
}
.col:hover {
   background: #900;
   color: #fff;
}
.col-content {
   position: absolute;
   width: calc(100% - 40px);
   bottom: 0;
   padding: 20px;
   text-align: center;
   
   -webkit-transform: skew(5deg, 0deg);
   -moz-transform: skew(5deg, 0deg);
   -ms-transform: skew(5deg, 0deg);
   -o-transform: skew(5deg, 0deg);
   transform: skew(5deg, 0deg);
}
.col:first-of-type .col-content,
.col:last-of-type .col-content {
   width: calc(100% - 90px);
}

	
	}
	
	@import url('https://fonts.googleapis.com/css?family=Lato:300,800');

$menu-bg-color: #f7580;
$content-color: #f7580;
$background-color: #f3f3f3;
$links: #f3f3f3;

body {
  display: flex;
  // flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: $background-color;
  font-family: 'Lato', sans-serif;
}
div {
  position: relative;
  height: 60px;
  width: 110px;
  cursor: pointer;
}
span {
  width: 110px;
  height: 7px;
  background: $content-color;
  position: absolute;
  transition: all .4s ease-in-out;
}
.text {
  background: transparent;
  top: 22%;
  right: -100%;
  width: 110px;
  color: $content-color;
  font-weight: bold;
  font-size: 30px;
  opacity: 0;
}
.one {
  top: 50%;
  right: 0;
  width: 90px;
  transform: translate(0%, -50%);
}
.three {
  bottom: 0px;
  right: 0;
  width: 70px;
}
div:hover .one {
  right: 90px;
  opacity: 0;
}
div:hover .three {
  width: 110px;
}
div:hover .text {
  right: -11%;
  opacity: 1;
}
h1 {
  text-align: center;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: $content-color;
  opacity: .04;
  font-size: 6em;
  font-weight: 800;
  text-transform: uppercase;
  line-height: .8;
  pointer-events:none;
}

// menu styling

#menu {
  position: fixed;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background: $menu-bg-color;
  display: block;
  transition: all .3s ease-in-out;
  transform: translate(0, -100%);
  .wrapper {
    opacity: 0;
    transform: translate(0, 40px);
    padding-top: 20vh;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: all .4s ease-in-out;
    ul {
      list-style-type: none;
      text-align: center;
      color: #fff;
    }
    ul li:first-child {
      padding-top: 0;
    }
    ul li {
      padding-top: 1.5em;
    }
    a {
      text-decoration: none;
      font-size: 3em;
      font-weight: 800;
      color: $links;
      transition: color .3s ease-in-out;
      &:hover {
        color: darken($links, 25%);
      }
    }
  }
}

#menu.active {
  transform: translate(0, 0%);
  height: 100%;
   transition-delay: .2s;
}
#menu .active {
  transform: translate(0, 0px);
  transition-delay: .45s;
  opacity: 1;
}


.menuinteract{

position:absolute;right:6%;top:4%;z-index:88888;height:100px; background-image:url("./menudisabled.png");
background-size:cover;
}



.menuinteract:hover{

position:absolute; right:6%; top:4%;z-index:88888;height:100px; background-image:url("./clicked.png");
background-size:cover;}
</style>

<script>
$("div").on("click", function() {
  $("#menu").toggleClass("active");
});
$("div").on("click", function() {
  $(".wrapper").toggleClass("active");
});
</script>
</head>

<body  style="overflow:hidden;background-color:black">





<div class="menuinteract" " 
<div>
  <span class="one"></span>
  <span class="two"></span>
  <span class="three"></span>
  <span class="text">MENU</span>
</div>


<nav id="menu">
  <div class="wrapper">
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Journal</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>


<div style="height: 100%;width: 100%;text-align:center;">

<div class="bodybg">



<div class="col" style="position: absolute;
    left: 17%;
    height: 29in;
    transform: rotate(15deg);
    top: -200;
    text-align: center;
    width: 238px;
    -ms-transform: skewX(20deg);
    -webkit-transform: skewX(20deg);
    transform: skewX(-17deg);
    transform: rotate(16deg);
    width: 21%;">


            <div class="col-content">
			
		

     
         </div>
		 
		 <div style="position:absolute; top:5%;z-index:10000;">
<!-- animated txt here >
	
<svg viewBox="0 0 600 300">

  <!-- Symbol -->
  <symbol id="s-text">
    <text text-anchor="middle" x="50%" y="50%" dy=".35em">
      |SL|
    </text>
  </symbol>  

  <!-- <svg viewBox="0 0 600 300">

  <!-- Symbol -->
  <symbol id="s-text">
    <text text-anchor="middle"
          x="50%" y="50%" dy=".35em">
      |SL|
    </text>
  </symbol>  

  <!-- Duplicate symbols -->
  <use xlink:href="#s-text" class="text"
       ></use>
  <use xlink:href="#s-text" class="text"
       ></use>
  <use xlink:href="#s-text" class="text"
       ></use>
  <use xlink:href="#s-text" class="text"
       ></use>
  <use xlink:href="#s-text" class="text"
       ></use>

</svg>
  
  
</div>

-->
</div>
</div>
</body>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>

</html>