-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
沉沙
2018-09-18
来源 ：
阅读 670
评论 0
摘要：本篇教程介绍了HTML+CSS入门 小案例讲解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。
本篇教程介绍了HTML+CSS入门 小案例讲解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。
<
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<meta http-equive="refresh" content="30">
<!--页面30秒刷新一次-->
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<style>
*{
margin:0;
padding:0;
border:0;
}
.p1{
color:pink;
margin-top:88px;
}
.a1{
text-decoration:none;
}
.p3{
color:red;
}
.p4{
font-size:38px;
}
.p5{
font-weight:bold;
}
.p6{
font-weight:bold;
font-size:30px;
background:yellow;
text-align:center;
}
</style>
<!--三种样式：
1.行内样式：在标签使用“style”元素来包含css，优先级最高
2.内联样式：在头部用<style>标签包含css样式，优先级次之
2.外链样式：使用<link href="" rel="stylesheet" type="text/css">
-->
</head>
<body>
<div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background:#40b3df;"></div>
<div style="font-family:verdana;padding:20px;border:10px solid #EE872A;border-radius:10px;">
<div style="opacity:0.3;position:absolute;left:120px;width:80px;height:200px;background:#8AC007"></div>
<h3>看这里看这里</h3>
<div style="letter-spacing:3px">这里是控制横排字符间距的，也就是两个字间的距离</div>
<div style="color:#40B3DF;">
<span style="background:#B4009E;color:#ffffff;">就是这个字</span>
</div>
<div style="color:#000">更多</div>
</div>
<p class="p1">这是一个段落，我用头部样式把自己变成骚气粉色</p>
<a href="javascript:;" class="a1">我用头部样式去掉我的鞋子--下划线</a>
<p class="p2">我是外部样式表改变的大小和加粗</p>
<p class="p3">我是红色</p>
<p class="p4">我是38号字体</p>
<p class="p5">我是加粗</p>
<p class="p6">我是加粗30号又是黄背景,我还要居中</p>
<br />
<p>图像插入以及左右浮动图像</p>
<!--浮动图像-->
<img src="//www.runoob.com/images/logo.png" width="80" height="30" alt="这是图片加载不出来是时显示文字" title="这是提示信息" style="float:left">
<img src="//www.runoob.com/images/logo.png" width="80" height="30" alt="这是图片加载不出来是时显示文字" title="这是提示信息" style="float:right">
<map>
<area shape="circle" coords="0,0,0"
</map>
</body>
</html>
本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
