常见css：浮动，内联框架，及js基础原理

瑟瑟发抖的萌新学徒

于 2022-11-24 21:16:32 发布

阅读量134

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_56420338/article/details/128025528

版权

主页结构：头部，尾部，左半部，右半部

头部：系统的标题

尾部：版本号，版权，制作方

左半部：导航栏

右半部：内容部分

<div id="div1" >(注意双引号內不要有空格)

浮动：css布局（在style中的选择器中使用）

float：left；左浮动

float：right；右浮动

常见css：

text-align：center; 水平居中

vertical-align：middle；垂直居中（针对单元格）

line-height: 130（与div一样高）行高（实现div垂直居中）

内联框架标签

iframe标签，实现在一个页面显示其他页面內容

name属性自定义用做超链接实现，定位到对应iframe

src属性：实现指定默认的页面与a标签target相关联

frameborder="0"去边框

背景图片设置：（在style中的选择器中使用）

backgroud-mage：url（图片路径）；添加背景图片

background-repeat：no-rapeat；设置背景图不平铺

background-size：100%， 100%；设置尺寸

<marquea></maequea>弹幕

js：在网页上编写javascrip代码，使用<script></script>

定义一个脚本

function func1(){ 定义一个方法 function 方法（参数）{代码}

弹出提示信息

alert（"hello");

}</script>

<bady>

onclick 鼠标点击事件

</bady>

}

综合操作：

homepage.html:

注意：内部图片需要自己准备

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>主页</title>
		<style type="text/css">
			body{
				margin:0px;
			}
	#div1{
		width: 100%;
		height: 150px;
	/*	background-color: seagreen;*/
		font-size: 30px;
		text-align: center;
		line-height: 100px;
			background-image: url(img/2.jpg);
		background-repeat:no-repeat ;
		background-size: 100%  100%;
		border-radius: 20px;

	}	
	#div2{
		width: 15%;
		height: 550px;
	/*	background-color: yellow;*/
		margin-top: 6px;	
		float: left;
		background-image: url(img/s1.jpg);
		background-repeat:no-repeat ;
		background-size: 100%  100%;
		font-size: 30px;
		border-radius: 20px;

	}
	#div3{
		width: 85%;
		height: 550px;
/*		background-color: blue;*/
		float: right;
		border-radius: 20px;

	
	}
	#div4{
		width: 100%;
		height: 60px;
		background-color: black;
		float: left;                 
		text-align: center;
		font-size: 20px;
		border-radius: 20px;
		color: aliceblue;

	}
		</style>
	</head>
	
	<body background="img/design_jingmeisheji_257857_m.jpg">
	<div id="div1">
		<font color="aliceblue">星空主页</font>
	</div>
	<div id="div2">
		<table border="0" cellspacing="" cellpadding="">
				<tr>
				<td width="60px" height="60px"></td>
				<td width="100"></td >
				<td width="60"></td>
			</tr>
			<tr>
				<td  height="100px"></td>
				<td><a href="zhi1.html" target="hero">星云</a></td>
				<td></td>
			</tr>
			<tr>
				<td  height="100px"></td>
				<td ><a href="zhi2.html" target="hero"> 星系</a></td>
				<td></td>
			</tr>
			<tr>
				<td height="100px"></td>
				<td><a href="zhi3.html" target="hero">星球</a></td>
				<td></td>
			</tr>
			<tr>
				<td  height=100px"></td>
				<td><a href="zhi4.html" target="hero">地表</a></td>
				<td></td>
			</tr>
			
		</table>
	</div>
	<div id="div3">
		<iframe name="hero" src="zhi1.html" width="100%" height="100%" frameborder="0"></iframe>
		
	</div>
	<div id="div4">
		version v1.0       
	</div>
	</body>
</html>

zhi1.html(其他相似)：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="img/676-1F30Q02412.jpg" width="100%" height="550px"/>
	</body>
</html>

效果：