console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的博客</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.carousel-inner img {
height: 440px;
}
.carousel-inner {
position: relative;
width: 1275px;
margin-left: 20px;
overflow: hidden;
}
.carousel{
position: relative;
border: 1px solid #f8f9fa;
margin-left: 20px;
padding: 5px;
margin-right: 20px;
}
.carousel .carousel-indicators {
position: absolute;
bottom: 70px;
left: 60%;
top: 93%;
}
.carousel .carousel-indicators li{
width: 10px;
height: 10px;
background:rgba(7, 7, 7, 0);
border: 1px solid rgb(255, 253, 253);
border-radius: 58%;
}
.carousel .carousel-indicators .active{
background: rgb(114, 111, 111);
}
.carousel .carousel-control-prev,.carousel .carousel-control-next{
background:rgb(0,0,0,0.3);
width: 40px;
height: 40px;
top: 45%;
margin-left: 5px;
margin-right: 5px;
border-radius: 60%;
}
.topnav {
overflow: hidden;
background-color: rgba(219, 104, 190, 0.2);
margin-left: 20px;
margin-right: 20px;
padding: 2px;
border: 1px solid rgb(26, 25, 25);
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: rgb(218, 206, 39);
color: black;
}
.topnav a.active {
background-color: #d639fd;
color: white;
}
.topnav input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 16px;
font-size: 17px;
}
@media screen and (max-width: 600px) {
.topnav a, .topnav input[type=text] {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
*{
padding:0;
margin:0;
font-family:'Open Sans Light';
letter-spacing:.05em;
}
html{
height:100%;
}
body{
height:100%;
}
.container{
height:100%;
background-image: linear-gradient(to right,#f5fbc2,#d9a6ee);
}
.login-wrapper{
background-color:#fff;
width:250px;
height:500px;
border-radius: 15px;
padding:0 50px;
position:relative;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
.login-wrapper .header{
font-size:30px;
font-weight: bold;
text-align: center;
line-height: 200px;
}
.login-wrapper .form-wrapper .input-item{
display: block;
widith:100%;
margin-bottom: 20px;
border:0;
padding: 10px;
border-bottom: 1px solid rgb(128,125,125);
font-size: 15px;
outline: none;
}
.login-wrapper .form-wrapper .input-item::placeholder{
text-transform: uppercase;
}
.login-wrapper .form-wrapper .btn{
text-align:center;
padding: 10px;
width:100%;
margin-top:50px;
background-image: linear-gradient(to right,#e1eea6,#fbd2c2);
color:#fff;
}
.login-wrapper .msg{
text-align: center;
line-height: 80px;
}
.login-wrapper .msg a{
text-decoration-line:none;
color:#A6C1EE;
}
*{
margin: 0;
padding: 0;
}
.content{
width: 100%;
height: 100%;
position: absolute;
background-color: gray;
}
.cont{
width: 100%;
height: 80%;
background: url("img/index_bg.jpg");
background-size:cover ;
background-repeat: no-repeat;
position: relative;
}
.cont .logo{
width: 300px;
height: 200px;
position: absolute;
left:50%;
top: 15%;
}
cont .logo span{
display: block;
color:white;
font-family: 楷体;
text-align: center;
}
.cont .logo .title{
font-size:80px;
}
.cont .logo .describe{
font-size: 40px;
}
.cont .left{
width: 50%;
height: 100%;
position: absolute;
}
.cont .right{
width: 50%;
height: 100%;
position: absolute;
right: 0;
}
.cont .rightCell{
width: 300px;
height: 400px;
position: absolute;
left: 30%;
top: 10%;
}
.cont .right ul{
list-style: none;
}
.cont .right span{
color: #030404;
font-size: 18px;
}
.cont .right .loginTiTle{
font-weight: bolder;
font-size: 30px;
line-height: 60px;
}
.cont .right ul li {
margin-top: 15px;
}
.cont .right .input{
border: 0;
background-color: transparent;
outline: none;
line-height: 25px;
}
.cont .right .inputLi{
line-height: 45px;
background-color: #fff3cd;
border-radius: 5px;
}
.cont .right .btnLi{
width: 100%;
line-height: 45px;
background-color: #1a1402;
border-radius: 8px;
color: #efaf06;
font-size: 20px;
font-weight: bolder;
letter-spacing: 10px;
text-align: center;
}
.cont .right .login div{
display: inline-block;
width: 30px;
height: 30px;
vertical-align: middle;
background-position: -3px -5px;
}
.cont .right .login .userName_logo{
background-image: url("img/passw_bg.png");
}
.cont .right .login .passWord_logo{
background-image: url("img/passw_bg.png");
}
.footer{
width: 100%;
height: 20%;
background-color: white;
overflow: hidden;
position: relative;
}
.footer p{
margin: 4% 10%;
}
.footer .right{
position: absolute;
right: 2%;
top: 30%;
}
footer .right img{
vertical-align: middle;
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="topnav">
<a class="active" href="#home">主页</a>
<a href="#b">关于我</a>
<a href="#a">登录</a>
<a href="#contact">联系我们</a>
<input type="text" placeholder="搜索..">
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="C:/Users/陈晓煜/Desktop/新建文件夹/轮播图/images/1.jpg" width="100%">
</div>
<div class="carousel-item">
<img src="C:\Users\陈晓煜\Desktop\新建文件夹\轮播图\images\2.jpg" width="100%">
</div>
<div class="carousel-item">
<img src="C:\Users\陈晓煜\Desktop\新建文件夹\轮播图\images\3.jpg" width="100%">
</div>
<div class="carousel-item">
<img src="C:\Users\陈晓煜\Desktop\新建文件夹\轮播图\images\4.jpg"width="100%">
</div>
<div class="carousel-item">
<img src="C:\Users\陈晓煜\Desktop\新建文件夹\轮播图\images\5.jpg"width="100%">
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<div class = "container">
<a name="a"></a>
<div class = "login-wrapper">
<div class = "header">登录</div>
<div class = "form-wrapper">
<input type="text" name="账号" placeholder="账号" class="input-item">
<input type="password" name="密码"placeholder="密码" class="input-item">
<div class = "btn">登录</div>
</div>
<div class = "msg">
没有账户?<a href="#">注册</a>
</div>
</div>
</div>
<div class="content">
<a name="b"></a>
<div class="cont">
<div class="left">
<div class="logo">
<span class="title">晓煜</span><br/>
<span class="describe">一名在校生</span><br/>
<span class="describe">就读于广州东华职业学院</span><br/>
<span class="describe">移动互联应用一班的一名小小的学生</span>
</div>
</div>
<div class="right">
<div class="rightCell">
<div class="login">
<ul>
<li><sapn class="loginTiTle">没有特别喜欢啥 随缘比较多</sapn><br/>
<sapn class="loginTiTle">打羽毛球也还算比较喜欢的运动</sapn><br/>
<sapn class="loginTiTle">星期天了跟室友朋友一起出去吃东西逛街最舒服了</sapn><br/>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>