html5&css3&bootstrap

最新推荐文章于 2021-12-23 15:59:36 发布

weixin_42672830

最新推荐文章于 2021-12-23 15:59:36 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/weixin_42672830/article/details/81838256

版权

本周主要是学习前端技术中的HTML与css技术，并学习了bootstrap框架
html:主要学习的是html5技术，是一门标记型语言，主要由一些具备特殊含义的标签构成。
主要标签有：1.对文本的标签：h1-h6,p,br,hr,b等
2.用于连接的标签:a
3.图像标签：img
4.表格：table，tr，td
5.列表：ol,ul,li等
6.表单：form,input,label等
7.div标签
这些标签还可以分为行级标签与块级标签，html标签主要用于布局整体页面，之后用css进行装饰。
CSS：主要是CSS3技术，是一门描述性语言，主要由一系列选择器（html元素）。
选择又可分为：类选择器（.类名），分组选择器，属性选择器，标签选择器，id选择器，伪类选择器（hover）等，常用的便是类选择器。
常用的属性：背景：background（-color，-image，-repeat...）
盒子模型：box，padding，border等
定位：position（absolute，relative等）
字体：font（-size，-color，-family等）
文本对齐方式：text-align（center，left,right,bottom等）
float浮动
boostrap框架：主要是一些css文件，js文件，用来装饰html。
注意事项：引入时用link标签，在使用时查文档。

用bootstrap框架画页面

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>资源上传</title>
	<link rel="stylesheet" href="asserts/bootstrap-3.3.7-dist/css/bootstrap.css" />
    <style>
    	nav{
    		border-radius: 0 !important;
    	}
    </style>
</head>
<body>
	<!--导航区域-->
	<nav class="navbar navbar-inverse">
		<div class="container">
			<div class="navbar-header">
				<a href="" class="navbar-brand">资源共享系统</a>
			</div>
			<div class="collapse navbar-collapse navbar-right">
				<ul class="nav navbar-nav">
					<li><a href="">资源列表</a></li>
					<li class="active"><a href="">资源上传</a></li>
					<li><a href="">我的资源</a></li>
					<li><a href="">我的下载</a></li>
					<li><a href=""><span class="caret"></span> </a></li>
				</ul>
			</div>
		</div>
	</nav>
	<!--表单区域-->
	<div class="container">
		<div class="page-header">
			<h1>资源共享<small>资源上传</small></h1>
		</div>
		
		<div class="row">
			<form action="" class="form-horizontal">
				<div class="form-group">
					<label for="" class="col-sm-2 control-label">选择文件:</label>
					<div class="input-group col-sm-10">
						<button class="btn btn-primary btn-lg">
							<span class="glyphicon glyphicon-plus"></span>选择文件</button>
							&nbsp;
							<span class="text-danger">请选择文件大小，大小不超过50M</span>
					</div>
				</div>
				
				<div class="form-group">
					<label for="" class="col-sm-2 control-label">资源名称:</label>
					<div class="input-group col-sm-8">
						<input type="text" class="form-control"/>
					</div>
				</div>
				
				<div class="form-group">
					<label for="" class="col-sm-2 control-label">关键字:</label>
					<div class="input-group col-sm-8">
						<input type="text" class="form-control"/>
						<span class=" glyphicon glyphicon-ok form-control-feedback"></span>
					</div>
				</div>
				
				<div class="form-group">
					<label for="" class="col-sm-2 control-label">下载所需积分:</label>
					<div class="input-group col-sm-8">
						<input type="text" class="form-control"/>
					</div>
				</div>
				
				<div class="form-group">
					<label for="" class="col-sm-2 control-label">资源描述:</label>
					<div class="input-group col-sm-8">
						<textarea name="" rows="5" cols="" class="form-control"></textarea>
					</div>
				</div>
				
				<div class="form-group">
					<div class="input-group col-sm-3 col-sm-offset-7">
						<button type="submit" class="btn btn-success btn-block">上传</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</body>
</html>

weixin_42672830

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5&css3&bootstrap

本周主要是学习前端技术中的HTML与css技术，并学习了bootstrap框架 html:主要学习的是html5技术，是一门标记型语言，主要由一些具备特殊含义的标签构成。主要标签有：1.对文本的标签：h1-h6,p,br,hr,b等 2.用于连接的标签:a ...
复制链接

扫一扫