Blogger Information
Blog 34
fans 1
comment 0
visits 23154
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML基础1作业-08-10
theYon的博客
Original
530 people have browsed it

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 简单的基础还是可以的

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

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

Correction status:qualified

Teacher's comments:缺少手写代码!!
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post