简单认识网页

最新推荐文章于 2024-09-06 11:00:54 发布

嗷兔漫

最新推荐文章于 2024-09-06 11:00:54 发布

阅读量251

点赞数 1

分类专栏： c1学习文章标签： css html

本文链接：https://blog.csdn.net/weixin_56745595/article/details/116144338

版权

c1学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

简单认识网页，表格与布局

资源

《深入浅出HTML》《CSS图鉴》《CSS那些事⼉》《JavaScript DOM编程艺术(第2版)》《代码整洁之道》

准备工作

随便下个网页编辑器，网上很多，我用的Eclipse，安装教程就不叙述了，进入正题，新建两个文件NewFile.html和NewFile.css
新建文件
网页基本框架搭建,引入css文件

<html>
	//网页头部
	<head>
		<link href="NewFile.css" type="text/css" rel="stylesheet"></link>
	</head>
	//网页主体,可视部分
	<body>
	</body>
</html>

实现表格隔行变色

写NewFile.html内容，写在body标签内，添加class，一行一换

<!-- 用g1和w1控制隔行变色，所以一行一换 -->
<table>
  <tr class="g1">
    <th>姓名</th>
    <th>爱好</th>
  </tr>
  <tr class="w1">
    <td>张三</td>
    <td>足球</td>
  </tr>
	……重复代码不贴
</table>

写NewFile.css内容，写在body标签内，添加class

/* 
1.设置外边距50，居中对齐
2.文本居中 
3.合并表格边框
*/
table {
	margin:50 auto;
	text-align: center;
	border-collapse:collapse;
}
/* 
1.设置边框1像素 实线 黑色
2.列宽60像素
*/
table tr th{
	border: 1px solid black;
	width: 60px;
	
}
/* 设置边框1像素 实线 黑色 */
table tr td{
	border: 1px solid black;
}
/* g1类定义背景色为白色，文字大小为12 */
.g1 {
	background-color: white;
	font-size: 12;
}
/* w1类定义背景色为灰色，文字大小为12 */
.w1 {
	background-color: bbb;
	font-size: 12;
}

看看效果
显示效果

盒子模型布局

想要以下显示效果，初步观察可以设置为三列，分为左右两个模块
布局效果
所以先把css样式写好

/* 取消外边距 */
*{
	margin: 0;
}
/* 定义为外边框 我想居中显示，并且设置盒子区域，所以加了宽 */
.box{
	width: 960px;
	background-color: white;
	margin:0 auto;
	height: 680px;
}
/* 定义左边两盒子的父元素 */
.boxsl{
	float: left;
	width: 316px;
}
/* 定义右边盒子的父元素 */
.boxsr{
	float: left;
	width: 642px;
}
/* 取消浮动 */
.boxc{
	clear: both;
}
/* 分为三份，一个盒子宽306像素 左浮动 左上边距10像素*/
.box1{
	margin-left: 10px;
	margin-top: 10px;
	width: 306px;
	background-color: fffacd;
	float: left;
}
/* 分为三份，盒子占两份宽622像素 左浮动 左上边距10像素 */
.box2{
	margin-left: 10px;
	margin-top: 10px;
	width: 622px;
	background-color: fffacd;
	float: left;
}
/* 分为三份，盒子占三份宽940像素 左浮动 左上右边距10像素 */
.box3{
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
	width: 940px;
	background-color: fffacd;
	float: left;
}
/* 高150像素，下同 */
.h150{
	height: 150px;
}
.h195{
	height: 195px;
}
.h250{
	height: 250px;
}
.h400{
	height: 400px;
}
.h500{
	height: 500px;
}

然后写html

<div class="box">
	<!-- 左边盒子 -->
	<div class="boxsl">
		<div class="box1 h150"></div>
		<div class="box1 h500 boxc"></div>
	</div>
	<!-- 右边盒子 -->
	<div class="boxsr">
		<div class="box2 h250"></div>
		<div class="box1 h400"></div>
		<div class="box1 h195"></div>
		<div class="box1 h195"></div>
	</div>
</div>

效果
效果图

添加背景音乐

我用的audio元素，缺点是对浏览器有要求

<!-- 
autoplay 音频在就绪后马上播放
loop每当音频结束时重新循环开始播放
src音乐地址，我的音乐就放在同一个目录下，一般项目会单独放个文件夹
 -->
<audio autoplay="autoplay" loop="loop" src="BillieEilish.mp3"/>

总结

1.更新代码刷新页面有时无变化，可能是未保存代码或浏览器缓存的原因。
2.html5为了使元素可拖动一般需要把draggable属性设为"true"。
3.html5日期选择器需要把type属性设置为date（Firefox 或者 Internet Explorer 11 以及更早版本不支持 type=“date”）。
4.CSS盒子模型中的Margin、Border、Padding分别为外边距、边框、内边距。
5.html常见事件
onchange HTML 元素已被改变
onclick 用户点击了 HTML 元素
onmouseover 用户把鼠标移动到 HTML 元素上
onmouseout 用户把鼠标移开 HTML 元素
onkeydown 用户按下键盘按键
onload 浏览器已经完成页面加载

嗷兔漫

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单认识网页

简单认识网页，表格与布局资源准备工作实现表格隔行变色盒子模型布局添加背景音乐总结资源《深入浅出HTML》《CSS图鉴》《CSS那些事⼉》《JavaScript DOM编程艺术(第2版)》《代码整洁之道》准备工作随便下个网页编辑器，网上很多，我用的Eclipse，安装教程就不叙述了，进入正题，新建两个文件NewFile.html和NewFile.css网页基本框架搭建,引入css文件<html> //网页头部 <head> <link href="N
复制链接

扫一扫