CSS+DIV入门

最新推荐文章于 2023-08-22 18:01:51 发布

phoebird

最新推荐文章于 2023-08-22 18:01:51 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS/HTML/JAVASCRIPT 文章标签： div css html class stylesheet float

本文链接：https://blog.youkuaiyun.com/phoebird/article/details/4247817

CSS/HTML/JAVASCRIPT 专栏收录该内容

23 篇文章

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>使用内嵌样式</title> </head> <body style="background-color:#ccffee" mce_style="background-color:#ccffee"> <p style="font-size:16px;color:red" mce_style="font-size:16px;color:red">第一段文字</p> <p style="font-stytle:italic;font-size:20px;color:" mce_style="font-stytle:italic;font-size:20px;color:"#bb22cc">第二段文字</p> </body> </html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>内部样式表</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body { background-color: "#ccffee" } h2 {text-align =center; color: red } p.mystyle1 { font-size: 20px; color: blue } p.mystyle2 { font-size: 40px; color: "#dd44aa"; text-align: center }</style> </head> <body> <h2> 文字标题 </h2> <p class="mystyle1"> 第一段文字 </p> <p class="mystyle2"> 第二段文字 </p> <p class="mystyle1"> 第三段文字 </p> <p> 第四段文字 </p> <p class="mystyle2"> 第五段文字 </p> </body> </html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>外部样式表</title> <link rel="stylesheet" type="text/css" href="m1.css" mce_href="m1.css"> </head> <body> <p class="mystyle1">第一段文字</p> <p class="mystyle2">第二段文字</p> </body> </html>

body { background-color: "#ccffee" } h2 {text-align =center; color: red } p.mystyle1 { font-size: 20px; color: blue } p.mystyle2 { font-size: 40px; color: "#dd44aa"; text-align: center }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>CSS基本语法</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> p{color:#aa66cc} h2{text-align:center;color:red} h1,h3,h4,h5,h6,mystyle3{text-align:center;color:green} .mystyle{text-align:right;color:ff00ff} body { background-color: "#ccffee" } h2 {text-align =center; color: red } p.mystyle1 { font-size: 20px; color: blue } p.mystyle2 { font-size: 40px; color: "#dd44aa"; text-align: center }</style> </head> <body> <h2> 文字标题 </h2> <h5>标题文字</h5> <p class="mystyle1"> 第一段文字 </p> <p class="mystyle2"> 第二段文字 </p> <p class="mystyle3"> 第三段文字 </p> <p> 第四段文字 </p> <p class="mystyle"> 第五段文字 </p> <h4 class="mystyle">h4标题文字</h4> <div class="mystyle">DIV块内文字</div> </body> </html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Css字体属性</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> p.mt1{font-family:courier;font-size:20px} p.mt2{font-style:italic;font-weight:bold;font-size:20pt;font-family:宋体} </style> </head> <body> <p class="mt1">The first parapha</p> <p class="mt2">第二段文字</p> </body> </html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>CSS常用文本属性</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .t1{text-align:left;text-indent=lcm;line-height=20px;letter-spacing=150%;color=red} .t2{text-align:center; text-indent=0; line-height=20pt; letter-spacing=0.2em; color=blue; font-weight:bold} </style> </head> <body> <p class="t1">春眠不觉晓，处处闻啼鸟，夜来风雨声，花落知多少。</p> <p class="t2">锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆辛苦。</p> </body> </html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>CSS+DIV实现简单页面布局</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">* { margin: 0px; padding: 0px; } body { font-size: 20px; } .main { width: 800px; background: blue; } .mail.top1 { width: 800px; height: 40px; background: #ffaaff; border: 1px solid #dddddd; } .main.nav { float: left; width: 100px; height: 300px; background: #bbeeff; border: 1px solid #dddddd; } .main.content { float: left; width: 700px; height: 300px; background: #ffccaa; border: 1px solid #dddddd; }</style> </head> <body> <div class="main"> <div class="top1"> 页面标题内容 </div> <div class="nav"> 导航内容 </div> <div class="content"> 主题内容 </div> </div> </body> </html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>使用span标记</title> </head> <body> <p>段文字中的<span style="font-size:40px;color:red" mce_style="font-size:40px;color:red">部分显示效果有所不同,使用span元素不换行</span>，可以采用span元素实现</p> </body> </html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>使用CSS的display属性</title> </head> <body> <p>段文字中的<span style="display:inline;font-size:40px;color:red" mce_style="display:inline;font-size:40px;color:red">部分显示效果有所不同,使用span元素不换行</span>，可以采用span元素实现</p> <hr> <p>段文字中的<span style="display:block;font-size:40px;color:red" mce_style="display:block;font-size:40px;color:red">部分显示效果有所不同,使用span元素不换行</span>，可以采用span元素实现</p> <hr> <p>段文字中的<span style="display:none;font-size:40px;color:red" mce_style="display:none;font-size:40px;color:red">部分显示效果有所不同,使用span元素不换行</span>，可以采用span元素实现</p> <hr> DIV之前的文字--<div style="display:inline;font-size:40px;color:blue" mce_style="display:inline;font-size:40px;color:blue">DIV块内的文字</div>--DIV之后的文字 <hr> DIV之前的文字--<div style="block:inline;font-size:40px;color:blue" mce_style="block:inline;font-size:40px;color:blue">DIV块内的文字</div>--DIV之后的文字 <hr> DIV之前的文字--<div style="display:none;font-size:40px;color:blue" mce_style="display:none;font-size:40px;color:blue">DIV块内的文字</div>--DIV之后的文字 <hr> </body> </html>