网页制作与布局

目录

  • 三层结构的模态框
  • 编写简易博客园界面
  • 前端框架之Bootstrap
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构造页面的大致布局
在使用div做页面布局的时候 由于div个数较多为了能够很好的区分
我们通常会给不同的div起不同的class属性(属性值最好能够有一定的区分度)
"""
# 1.先写html代码
# 2.再写css代码

前端框架

1.页面搭建相关
Bootstrap elementui layui

2.功能应用相关
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值即可"""
img
posted @ 2021-08-06 14:58  陌若安然  阅读(183)  评论(0)    收藏  举报