如何对页面进行美化调整?
<style> 标签用于为 HTML 文档定义样式信息。
style 元素可以出现在 HTML 文档中的各个部分,一个文档可以包含多个 style 元素。
__________________________________
<html>
<head>
<meta charset="UTF-8">
<title>鱼C-零基础入门学习Web(Html5+Css3)</title>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>
</html>
__________________________________
<style>
body {
background-image: url (“../img/bc.png”)
}
h1 {
text-align: center;
color: white;
}
h2 {
margin-left: 60%;
color: white;
}
p {
text-indent: 32px;
font-size: 16px;
line-height: 32px;
color: white;
}
img{
position: absolute;
left: 50%
margin-left: -181px;
}
</style>
__________________________________
<style media=”print”>
h1 {
color: black;
}
h2 {
color: black;
}
p {
background-color: black;
}
</style>
__________________________________
<style media=”screen and (min-width:512px) and (max-width:1024px)”>
body{
background-image: url(“../img/bc2.png”)
}
</style>
__________________________________
media 属性指定样式适用的媒体。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鱼C-零基础入门学习Web(Html5+Css3)</title>
<style type="text/css">
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>
<style type="text/css" media="print">
h1 {color:#000000;}
p {color:green;}
body {background-color:#FFFFFF;}
</style>
</head>
<body>
<h1>style标签-media属性 例子</h1>
<p>如果打印这个页面,或者预览这个页面,会看到 media="print" 的样式。这个 "print"样式包含了绿色文本和白色背景。</p>
</body>
</html>
__________________________________
课程来自鱼C论坛
0 条评论