html and css3 实现分屏设计-网页前端设计 id1086

zwxic

已于 2022-06-13 18:38:51 修改

阅读量1.4k

点赞数 2

分类专栏：网站前端前端设计 html

于 2020-09-24 21:55:41 首次发布

本文链接：https://blog.youkuaiyun.com/zwxic/article/details/108784365

版权

HTML CSS3 分屏设计网页前端响应式布局

关键词由优快云通过智能技术生成

html and css3 实现分屏设计-网页前端设计 id1086 在这里插入图片描述
源码下载地址

在新演示地址

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i" rel="stylesheet">

  <title>Split</title>
 <style>
    
    /* Reset */

*, *:after, *:before {
     
  box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    
  font-size: 100%; 
  padding: 0; 
  margin: 0;
}

body {
   
     font-family: 'Roboto Condensed', sans-serif;
    color: #fff;
    background: #333;
}

a {
   
  color: #ccc;
  text-decoration: none;
}

a:hover {
   
  color: #000;
}

/* /Reset */

html, body, 
.container {
   
  position: relative;
  width: 100%;
  height: 100%;
}

body {
   
   
   overflow: hidden;
}

.splitlayout {
   
  position: relative;
  overflow-x: hidden;
  min-height: 100%;
  width: 100%;
}

/* Intro sides */
.side {
   
  position: fixed;
  top: 0;
  z-index: 100;
  width: 50%;
  height: 100%;
  text-align: center;
  -webkit-backface-visibility: hidden;
}

.open-left .side,
.open-right .side {
   
  cursor: default;
}

.overlay {
   
  position: absolute;
  top: 0;
  left: 0;
  z-index: 499;
  visibility: hidden;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.side-left .overlay {
   
  background: rgba(0,0,0,0.7);
}

.side-right .overlay {
   
  background: rgba(0,0,0,0.3);
}

.side-left {
   
  left: 0;
  background: #f4c150;
  color: #fff;
  outline: 1px solid #47a3da; /* avoid gap */
}

.side-right {
   
  right: 0;
  background: #fff;
  color: #47a3da;
  outline: 1px solid #fff; /* avoid gap */
}

/* Intro content, profile image and name, back button */
.intro-content {
   
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0 1em;
  width: 50%;
  cursor: pointer;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}

.profile {
   
  margin: 0 auto;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: #47a3da;
    
}

.profile img {
   
  max-width: 100%;
  border-radius: 50%;
  
 
    	 
}

.intro-content h1 > span {
   
  display: block;
  white-space: nowrap;
}

.intro-content h1 > span:first-child {
   
  font-weight: bold;
  font-size: 1em;
}

.intro-content h1 > span:nth-child(2) {
   
  position: relative;
  margin-top: 0.5em;
  padding: 0.8em;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.8em;
}

.intro-content h1 > span:nth-child(2):before {
   
  position: absolute;
  top: 0;
  left: 25%;
  width: 50%;
  height: 2px;
  background: #fff;
  content: '';
}

.side-right .intro-content h1 > span:nth-child(2):before {
   
  background: #47a3da;
}

.back {
   
  position: fixed;
  top: 2.6em;
  z-index: 500;
  display: block;
  visibility: hidden;
  width: 50px;
  height: 50px;
  border-radius:

最低0.47元/天解锁文章