Hello World -- CSS应用

最新推荐文章于 2022-07-31 23:57:29 发布
最新推荐文章于 2022-07-31 23:57:29 发布
阅读量725 收藏
点赞数
分类专栏： Design(CSS XHTML) 文章标签： css div class url border xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/logicbiz/article/details/2252884
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Hello World</title>
<style type="text/css" media="all">
   body
   {
      text-align:center;
   margin: 0px auto;
   width:778px;
   background:#3399CC;
   font-family: '宋体','新宋体',arial,verdana,sans-serif;
   font-size:62.5%;
   }
   pre {
 text-indent:0;
 background:#DDDDDD;
 padding:0.5em 1em;
 margin:0;
 margin-right:1em;
 color:blue;
}
a {
 margin: 0px;
 padding:0px;
 border: 0px;
 text-decoration:none; 
}
a:link {
 color: #E66133;
}

a:visited{
 color: #E66133;
}
a:hover{
 color: #637DBC;
 text-decoration: underline;
}

#top
{
 
 
 height: 1.2em;
 background: url(images/bg_top1.gif) #fff repeat-x left top;
 overflow:hidden;
 
}
#css8
{
    padding: 1.2em 0px;
 background: url(images/bg_dot1.gif) #fff repeat left top;
 text-align: left;
 
}
#css8_content
{
    width: 93%;
 margin-right: auto;
 margin-left: auto;
 padding: 1em;
 background: #fff;
}
#css8_title
{
    font-weight: bold;
 margin: 0px 0px 0.5em 0px;
 padding:0.5em 0px 0.5em 1em;
 font-size: 2.4em;
 color: #00A06B;
 border-bottom: solid  #9EA3C1  2px;
}
.css8_sub {
 color: #00A06B;
 font-weight:bold;
 font-size: 1.3em;
 text-align: left;
 padding:1em 2em 0;
 background: url(images/0.gif) #fff no-repeat 1em 74%; 
 
}
.css8_content {
 text-indent:2em;
 font-size:1.3em;
 margin-left:2em;
 padding:1em 6px;
 }
#gotop{
 width: 100%;
 margin: 0px;
 padding: 0px;
 background: #fff;
 height: 2em;
 font-size: 12px;
 text-align: right;
}
#footer
{
    clear: both;
 padding: 0px;
 background: url(images/bg_bottom.gif) #fff repeat left top;
 height: 39px;
 color: #ddd;
}
#copyright
{
  font-size:1.6em;
 color:#667EBE;
}
.box { background: url(images/nt.gif) repeat; }
.tl { background: url(images/tl.gif) no-repeat top left; }
.tr { background: url(images/tr.gif) no-repeat top right; }
.bl { background: url(images/bl.gif) no-repeat bottom left; }
.br { background: url(images/br.gif) no-repeat bottom right; }

</style>
</head>
<body>
<div id="top"></div>
<div id="top1"><img src="images/bg_top.jpg" width="100%" height="121" /></div>
<div id="css8">
  <div id="css8_content">
    <div id="css8_title"> Hello World -- 您的第一个程序 </div>
    <div class="css8_sub">实例</div>
    <div class="box">
      <div class="tl">
        <div class="tr">
          <div class="bl">
            <div  class="css8_content br"> 以下控制台程序是传统“Hello World!”程序的 C# 版，该程序显示字符串 Hello World!。
              <pre>using System;
// A &quot;Hello World!&quot; program in C#
namespace HelloWorld
{
    class Hello
    {
        static void Main()
        {
            System.Console.WriteLine(&quot;Hello World!&quot;);
        }
    }
}</pre>
<blockquote style="background-color:#f7f7f7;border:1px dotted #dedbde;padding:10px;">这是一个引用样式的例子</blockquote>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="gotop"><a title="跳到页首" href="#top">返回顶部</a></div>
  </div>
</div>
<div id="footer"></div>
<div id="copyright"> &copy;2007 <a href="http://www.csdn.cn" target="_black" >csdn.cn</a> all rights reserved </div>
</body>
</html>
 

logicbiz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS Hello World及标签认识
sanjiadiankeli的专栏
02-20 1968
从工作开始，开始从事android方面的开发，主要开发机顶盒方面, 在工作之余，学习了ios，也独自开发过一个上线的ios项目。 最近工作不是太忙，于是想再学习一个新的语言，生命在于折腾！ 语言选择了html5，一是现在比较火，二是想自己写点个人页面玩玩好了，不叨叨了，开始吧开发工具，我选择sublime_text 写html页面，可以使用很多工具来写，包括文本文档，当然，为了效率，我们需要选
常见字体介绍
Hello world！
03-15 1万+
如题，最近发现手机字体是个大学问，头一次发现原来字体里头差别这么大。 首先常见中文字体，宋体，黑体，仿宋，楷体，行楷，等等。其中各种字体大致区别 字号，点制和号制，打印时一点为0.35mm，号制为中文的。 衬线体，是指笔画中尽头的小三角，凸起来的小块等。 针对各公司字体可以看这个维基百科点击打开链接 几种常见的字体 衬线体与非衬线体 方正兰亭，很出名的方正字体
XML调用CSS输出hello world
qq_44769557的博客
07-03 557
XML数据格式最主要的功能就是：数据传输，而不是展示数据 XML：可扩展性，标记性语言。（传输和存储数据） HTML：超文本标记语言（展示数据） 一、实验目的： 1、输出hello world，在xml中调用样式表CSS 2、Xml语法总结 三、实验内容： 1、输出hello world，在xml中调用样式表CSS 代码： <?xml version="1.0" encoding="UTF-8" ?> <?xml-stylesheet type="text/css" href="css/s
前端之CSS
zhanghangqian的博客
05-03 344
前言：前面的HTML描述了一个人的“骨架”，即页面的结构和内容，那这里的CSS代码就是对这个人的“皮”的描述。即页面的样式，这个人长啥样。 1.CSS的基本语法 CSS的语法规则非常简单，即每一个CSS语句分为两个部分，即选择器和应用的属性 <style> p { /*设置字体大小*/ font-size : 10px; /*设置字体颜色*/ color : red; } </style> <p>hello</p&...
CSS教程
Ymh_Sirius的博客
04-30 307
CSS概述 1.1. 什么是CSS? 层叠样式表(Cascading Style Sheet ),定义了如何显示HTML元素，用来控制网页的样式和布局。 未设计CSS的页面 <html> <head> <title>Hello!</tit...
HelloWorld编译器
css
04-04 245
题目描述 Description 请编程判断一个负责打印HelloWord的程序是否能正确运行。 编译错误输出CE 答案错误输出WA 答案正确输出AC 输入描述 Input Description 一个C语言编写的HelloWord程序，输出HelloWord字符串，后跟一个换行符\n。 输出描述 Output Description
CSS三种样式表 内部样式表、行内部样式表、外部引用
weixin_47314602的博客
07-31 5439
无论是用内部还是外部都是一样的结果。我们通常都使用外部引用，因为随着代码的不断增加，内部样式表会让我们后期修改变得更加不便。使用外部CSS文件，所以在这边我们要新建一个.css文件，我这边给它重命名为text.css。直接在helloworld.html文件区域使用style元素来包含CSS。......
helloworld-nodejs
03-25
【标题】"helloworld-nodejs" 是一个基于Node.js开发的简单示例程序，它主要用于教育和演示目的，尤其在配合CloudBees Core Workshop时，能够帮助初学者了解和掌握Node.js的基础应用。 Node.js是一个开放源代码、跨...
multiscreen-helloworld-js
06-25
标题“multiscreen-helloworld-js”表明这是一个关于多屏幕适配的JavaScript示例项目，主要目的是展示如何在不同设备如电视和手机上实现良好的Web应用界面。描述中的“webapp-hello-world Hello World - 示例应用...
hello-world-war:用于测试部署的最简单的Java Web应用程序
03-30
【标题】"hello-world-war:用于测试部署的最简单的Java Web应用程序" 揭示了这是一个基础的Java Web项目，主要用于教学或测试目的。在Web开发领域，"war"（Web应用归档）文件是Java Web应用程序的标准打包格式，通常...
SpringBootDay01-HelloWorld-1.0-SNAPSHOT.jar
04-14
application.properties：Spring Boot应用的配置文件；可以修改一些默认设置； ———————————————— 版权声明：本文为CSDN博主「倦眼问酒书j」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上...
Hello World ： 简单的HTML页面
MINMIN0的博客
02-24 5434
您将学到什么您将学习Predix的基本操作… 如何登录，以及如何推送一个hello world Predix云应用程序。您需要设置什么代理如果您通过企业代理服务器访问互联网，请回顾关于设置代理的教程。安装工具如果您不使用DevBox-预配置的开发虚拟机，确保用此处列出的工具配置您的开发环 境。需要的工具Cloud Foundry CLI Git指导教程下一部分的指导教程脚本不仅会安装工具，还会指...
"HelloWorld"的10种常见写法
少言才不会咸's Tech-blog
10-23 2576
#include <stdio.h>void hello_1 { //十六进制输出字符 putchar(0x68); putchar(0x65); putchar(0x6c); putchar(0x6c); putchar(0x6f); putchar(0x77); putchar(0x6f); putchar(0x72); putcha
CSS设置字体为楷体
热门推荐
hellostory的专栏
11-25 3万+
<br />测试环境：windows 2003 + IE6<br />实现代码：font-family: "楷体","楷体_GB2312";
初学HTML（1）－－helloworld初体验
Summer_shining的博客
08-08 7886
－网页的组成 一个有具体功能的网页一般由三部分组成： （1）HTML：网页的具体内容和结构 （2）CSS：网页的样式（美化网页最重要的一块） （3）JavaScript：网页的交互效果，比如用户鼠标事件做出响应 －什么是HTML HTML的全称是HyperText Markup Language 超文本标记语言。其实它就是文本，由浏览器负责将它解析成具体的网页内容 HTML的
习题1.4.编写程序，输出 Hello World!
Garuy的博客
02-18 1万+
4.编写程序，输出 Hello World! 代码 /* 4.编写程序，输出 Hello World!*/ #include &lt;stdio.h&gt; int main () { printf ("Hello World!\n"); return 0; } 结果
vue-animate-css 使用
最新发布
05-23
Vue-Animate-CSS 是一个 Vue.js 的插件，它可以让你很容易地在 Vue.js 应用中使用 Animate.css 动画库。 要使用 Vue-Animate-CSS，首先需要安装它。你可以通过 npm 安装： ``` npm install vue-animate-css --save ``` 安装完成后，将其添加到你的 Vue.js 应用中。在 main.js 文件中添加以下代码： ```javascript import Vue from 'vue' import VueAnimateCss from 'vue-animate-css' Vue.use(VueAnimateCss) ``` 现在，你可以在 Vue.js 组件中使用 Vue-Animate-CSS 了。假设你想要为某个元素添加 Animate.css 中的 "bounce" 动画，你可以这样写： ```html <template> <div class="animated bounce"> Hello World! </div> </template> ``` 这里的 "animated" 是 Animate.css 中定义的一个 CSS 类，它可以让元素使用 Animate.css 中的动画。而 "bounce" 则是 Animate.css 中的一个动画类，它可以让元素跳动。 你也可以将动画绑定到 Vue.js 的过渡效果中，比如在元素显示和隐藏时使用不同的动画。下面是一个例子： ```html <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight"> <div v-if="show"> Hello World! </div> </transition> ``` 这里我们使用了 Vue.js 的过渡效果，并将 "enter-active-class" 和 "leave-active-class" 属性设置为 Animate.css 中的 "bounceInLeft" 和 "bounceOutRight" 动画类。当元素显示时，它会从左侧弹出；当元素隐藏时，它会向右侧弹出。 以上就是使用 Vue-Animate-CSS 的基本方法。你可以在其官网上查看更多使用方法和示例：https://github.com/asika32764/vue-animate-css

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值