⽹页框架搭建和内容布局三层结构的模拟框
要求：
    1.最上⾯⼀层需要有⼀个form表单获取⽤户名和密码
  　2.第⼆层就是浅⿊⾊
  　3.第三层放⼀张图⽚
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<title>模拟框</title>
<style>
<!--第⼆层布局-->
.cover {
position:fixed;
top:0px;
left:0px;
right:0px;
bottom:0px;
<!--背景灰颜⾊和透明度-->
background-color:rgba(127,127,127,0.75);
<!--设置堆叠优先级最⼤最优先-->
z-index:999
}
<!--第⼀层-->
.model{
position:fixed;
<!--top和left⽤于调整所在位置-->
top:50%;
left:45%;
z-index:1000;
background-color:white;
height:200rpx;
width:400rpx;
margin-top:-100px;
margin-bottom:-200px;
}
</style>
<body>
<!--第三层-->
<div class='content'>
<img src='img\zhu.jpg'/>
</div>
<!--第⼆层-->
<div class="cover"></div>
<!--第⼀层-->
<div class="model">
<!--form表-->
<form action=''>
<p>⽤户:
<input name='username' type='text'/>
</p>
<p>密码:
<input name='password' type='password'/>
</p>
<input type='submit' value='注册'/>
<input type='button' value='取消' id='d1'/>
</form>
</div>
</body>
</html>
成果展⽰
书写简易博客园界⾯
技巧：
# 1.先写html代码
搭建⽹页不要急着写先利⽤div构造页⾯的⼤致布局；
在使⽤div做页⾯布局的时候，div个数较多为了能够很好的区分；
我们通常会给不同的div起不同的class属性(属性值最好能够有⼀定的区分度)；
# 2.再写css代码
HTML代码
<html>
<head>
<meta charset="utf-8">
<title>博课园</title>
<link rel="stylesheet" href="mycss.css"/>
</head>
<body>
<!--博客左侧内容-->
<div class="blog-left"><div class="blog-avatar"><img src="img/ma.jpg"/></div><div class="blog-title"><p>我的博客</p></div><div class="blog-desc"><p>友好的boy</p></div><div class="blog-info">
<!--博客左侧内容-->
<div class="blog-right clearfix"><div class="article-list"><div class="article-title"><span class="title">招亲</span><span class="data"> 2021-8-6 </span></div><div class="article-content"><div class="left"
CSS代码
body{
margin: 0px;
background-color: rgb(238,238,238);
}
a{
text-decoration: none;
}
<!--⽤于解决浮动带来的问题-->
.clearfix:after {
content: '';
display: block;
clear:both;
}
<!--左侧布局-->
.blog-left{
float: left;
position: fixed;
width: 20%;
height: 100%;
top: 0px;
left: 0px;
background-color:rgb(78,78,78);
}
<!--头像框架-->
.blog-avatar{
height: 200px;
width:200px;
border:5px solid white;
border-radius:50%;
overflow: hidden;
margin:20px auto;
}
.blog-avatar img{
layui和bootstrap哪个好
width: 100%;
}
.blog-title,.blog-desc {
color: darkgray;
font-size:18px;
text-align: center;
}
.blog-desc{
margin-bottom:50px
}
.blog-info a,.blog-link a{
color: darkgrey;
}
.blog-info{
margin-bottom:50px;
}
.blog-info a:hover, .blog-link a:hover{    color: white;
}
.blog-info p,.blog-link p {
margin-left:100px;
text-align:center;
margin:10px auto;
}
<!--右侧布局-->
.blog-right{
float: right;
height: 2000px;
width: 80%;
}
<!--列表设置-->
.article-list{
background-color:white;
margin:20px 40px 20px 20px;
box-shadow:2px 2px 5px #000; }
.article-title{
border-left:10px solid red;
}
.article-title .title{
font-size:36px;
margin-left:16px;
}
.article-title .data{
float:right;
margin:20px 20px;
}
.article-content{
padding: 0px;
height: 160px;
border-bottom:1px solid black }
<!--⽂章图⽚所在位置-->
.article-content .left{
margin: 5px;
padding: 0px;
height: 150px;
width: 150px;
float:left;
}
<!--图⽚⼤⼩-->
.article-content .left img{
height: 150px;
width:150px;
}
<!--⽂章位置-->
.article-content .right{
margin: 5px;
padding: 0px;
height: 200px;
float: left;
}
.article-content .right p{
font-size:20px;
text-indent:20px
}
.article-others{
padding:10px 20px;
}
成果展⽰
前端框架⼯具
# 前端的框架有很多功能也参差不齐
前端框架
页⾯搭建相关
Bootstrap elementui layui
功能应⽤相关
react Vue
# Bootstrap框架
能够让你cv快速搭建页⾯
bootstrap.css  # 未压缩的
bootstrap.min.css  # 压缩之后的
# 页⾯布局
<div class='container'>  # 左右两边是否有留⽩
<div class='row'>  # ⼀⾏均分12份
<div class='col-md-6 c1'></div>  # 控制占⼏份
# 响应式布局
.col-xs-超⼩屏幕⼿机 (<768px),.col-sm-⼩屏幕平板 (≥768px),.col-md-中等屏幕桌⾯显⽰器 (≥992px)能够根据浏览器窗⼝和机器型号的不同⾃动调节⽐例
使⽤bootstrap的情况下给标签调样式⼀般都是修改标签的calss值即可

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。