Java日记之HTML基础三

下面讲讲HTML如何在eclipse上书写

一.HTML in Eclipse?

1.首先 ,你需要在你的Eclipse中下载JavaEE插件 ,具体操作站内搜索
2.当有了JavaEE插件后 , 在WebContent下 , new 一个HTML文件
3.CSS文件需要独立分出一个Folder的时候 ,在WebContent下创建一个CSS文件夹 ,然后new一个file ,后缀设置为.css即可

二.3种样式

分别为内嵌式 , 内联式和外链式
先讲讲内嵌式
1.内嵌式
在div标签中 ,使用style属性 ,参数有HTML内置好了 ,直接拿来使用(是键值对形式的)
2.内联式
在head标签中使用style标签 ,指定添加样式的标签通过选择器实现
常用选择器有三种
①标签选择器: 直接为所有标签 / 指定名字的标签添加样式
采用就近原则 ,一般用于重置网页内标签的默认样式
②id选择器 #id{} ,选中目标标签
③class选择器.class{}
④对input框进行美化 input[type=" "]{样式}

3.外链式
单独创建一个css文件存放样式 ,实现CSS 和 HTML分离
需要的head标签中所有< link/>引入 ,

三.div并排显示

1.float:left 左浮动
需要给所有要并排显示的内容都加上左浮动
2.display:inline-block行内显示
更加的灵活
3.顶部对齐:vertical-align:top
4.底部对齐:vertical-align:bottom
5.中间对齐: vertical-align:middle

四.div盒子模型

元素的宽高计算(内边距)： 内容+左右padding 才是宽度
内容高度+上下的padding 才是真正的高度

外边距: margin

margin-left : 两盒左边距 (一盒时为边缘矩)
margin-right / top / bottom
margin :10px 10px 10px 10px; 上右下左(顺时针)
margin :0 auto; 针对页面居中
text-align: 内部所有内容都居中
text-align:center 水平居中
line-height:()px 垂直居中

//index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<!-- 内联式(写在head标签内) -->
		<!-- 1.标签选择器 -->
		<style>
			div{
				color :#0000a0 ; 
				width : 200px;
				height: 200px ;
				background-color:#ff0000; 
				border-radius: 50%;
			}
			<!-- 2.ID选择器 -->
			#three{
				color :#0000a0 ; 
				width : 200px;
				height: 200px ;
				background-color:#ff0000; 
				border-radius: 50%;
				}	
			<!-- 3.class选择器 -->
			.myClass{
				color :#0000a0 ; 
				width : 200px;
				height: 200px ;
				background-color:#ff0000; 
				
				}
			<!-- 4.input框选择器 -->
			input[type ="button"] {
				color :#00ff00 ; 
				width : 200px;
				height: 200px ;
				background-color:#00ff00;
				}	
			/* #username{
				width:200px;
				height:35px;
				background-color:#ff0000;
				border:0px;
			} */		
		</style>
		<!-- 外链式CSS的link标签 -->
		<link href = "CSS/style.css" rel="stylesheet" type ="text/css">
</head>

<body>
	<!-- 内嵌式 -->>
	<div style=" color :#0000a0 ; width : 200px;height: 200px ;background-color: #ff0000; border-radius: 50%"> 
		我是div
		
	</div>
	<div>
		标签选择器测试
	</div>

	<div id="three">
		id选择器测试
	</div>
	
	<div class="myClass">
		class选择器测试
	</div>
	
	<div class="myClass">
		class选择器测试2
	</div>
	
	<form>
		用户名:<input type="text" name="" id="username" />
		<input type="button" value="登陆"  />
	</form>
	<div id="six">
		外链式测试
	</div>
</body>
</html>

style.css

#six{	
	width:100px;
	height:100px;
	background-color: #000000;
	border-radius:10px;
}