博客列表 >HTML基础1作业-08-10

HTML基础1作业-08-10

theYon的博客
theYon的博客原创
2018年08月11日 19:41:36528浏览

html 基础学习-1

1). 简单介绍div a 等标签

2). head 标签里面的编写规范

3). 选择器的简单运用

4). 样式的简单介绍

实例

<!-- 页面声明 -->
<!DOCTYPE html>
<html lang="en">
<head>
	<!-- 编码声明 -->
	<meta charset="utf-8" />
	<!-- 网页头部标题 -->
	<title>php中文网-教程</title>
	<!-- 网页头部小图标 -->
	<link rel="shortcut icon" type="image/x-icon" href="./static/images/logo.png">
	<link rel="stylesheet" type="text/css" href="./static/css/style.css">
	<style type='text/css'>
		/*tag标签选择器*/
		body{
			padding: 0;
			margin: 0;
		}
		div a {
			color: #cc00ff;
		}
		/*class类名选择器*/
		.all{
			width: 200px;
			height: 200px;
			background: #ccc;
			margin: 50px auto;
			text-align: center;
		}
		/*id选择器 唯一性*/
		#box{
			width: 50px;
			height: 50px;
			background: blue;
			margin: 5px auto;
		}
		/*属性选择器*/
		a[href="https://www.baidu.com"] {
			color: green;
		}
		a[href="http://www.php.cn"] {
			color: yellow;
		}
		div a
	</style>


</head>
<body>
	<!-- div块级元素 class类名:all -->
	<div class="all">
		<!-- 行内元素 -->
		<!-- 不跳转,本页面加载 -->
		<a href="https://www.baidu.com">百度</a>
		<!-- 跳转,其他兄弟页面加载 -->
		<a href="http://www.php.cn" target="_blank">php中文网</a>
		<!-- id名:box -->
		<div id='box'></div>
	</div>
</body>
</html>
运行实例 »

点击 "运行实例" 按钮查看在线实例


运行结果

TIM图片20180811193611.png

总结

div+css 简单的基础还是可以的

不过,通过这次学习主要是为了发现自己不足,精益求精

之后还得多多请教各位老师

上一条:2018年8月10号下一条:npm下载express
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议