博客列表 >8月10日作业:初步认识HTML和css

8月10日作业:初步认识HTML和css

岑勋的博客
岑勋的博客原创
2018年08月13日 17:15:33627浏览

第一天上课,补充了解了meta标签、rel属性和css中的属性选择器。这是自己敲的

代码练习

实例

<!DOCTYPE html>
<html>
<head>
	<title>小牛之家</title>
	<!-- meta标签指定网页的描述内容、关键字、字符编码等 -->
	<meta charset="utf-8">  
	<!-- link标签引入外部文件。其中rel属性规定当前文档与被链接文档之间的关系。在下面第一个例子中,rel 属性在网页标签栏左侧显示图标。 -->
	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> 
	<!-- 此处rel属性表明被链接文档是样式表,href属性指定URL -->
	<link rel="sheetstyle" type="text/css" href="style.css">
	<!-- 内部样式表 -->
	<style type="text/css">
		/*设置a标签样式*/
		a{
			text-decoration:none;
			display: block;
		}
		
		a[href='http://www.php.cn']{color:red;}
		a:hover{
			color:blue;
		}
		div{
			border: 2px solid gray;
			width:100px;
			height: 100px;
			float: left;
		}
		/*分别设置类名为box,id为big的div元素的样式*/
		div.box{
			background: lightgreen;
		}
		div#big{
			width: 200px;
			background: pink;
		}

	</style>

</head>
<body>
	<a href="http://www.php.cn">php中文网</a>
	<a href="http://www.baidu.com">百度</a>
	<div >
		<p>来PHP中文网学习</p>
	</div>
	<div ></div>
	<div id="big"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
</body>
</html>

运行实例 »

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

QQ截图20180813171341.png


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