书写三层结构的模态框 编写简易博客园界面 前端框架之Bootstrap

今日内容概要

  • 书写三层结构的模态框
  • 编写简易博客园界面(重点掌握)
  • 前端框架之Bootstrap(有趣重点)
带你使用CV大法快速搭建页面

今日内容详细

img

书写三层结构的模态框

1.最上面一层需要有一个form表单 获取用户名和密码
2.第二层就是浅黑色
3.第三层放一张图片

<!DOCTYPR html>
<html>
	<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
			}
			.modal {
				position:fixed;
				top:50%;
				left:50%;
				z-index:1000;
				background-color:white;
				height:200px;
				width:400px;
				margin-top:-100px;
				margin-left:-200px;
				
			}
		</style>
	</head>
	<body>
		<div class='content'>
			<img src='111.png'/>
		</div>
		<div class='cover'></div>
		<div class='modal'>
			<form action=''>
				<p>username:
					<input name='username' type='text'/>
				</p>
				<p>password:
					<input name='password' type='password'/>
				</p>
				<input type='submit' value='注册'/>
				<input type='button' value='取消' id='d1'/>
			</form>
		</div>
	</body>
</html>

书写简易博客园界面

"""
搭建网页不要急着写 先利用div构造页面的大致布局
	eg:回想常用布局标签div以及小米官网
在使用div做页面布局的时候 由于div个数较多为了能够很好的区分
我们通常会给不同的div起不同的class属性(属性值最好能够有一定的区分度)
"""
# 1.先写html代码
# 2.再写css代码

前端框架

# 前端的框架有很多 功能也参差不齐
什么是框架：别人提前帮你写好大部分功能的工具
	前端框架
    	页面搭建相关
        	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>	# 控制占几份
# 响应式布局
	能够根据浏览器窗口和机器型号的不同自动调整比例
"""使用bootstrap的情况下给标签调样式 一般都是修改标签的calss值即可"""
posted @ 2021-08-06 13:56  lovewx35  阅读(82)  评论(0)    收藏  举报