XML:CSS基础之二
来源:互联网 发布:软件翻译器下载 编辑:程序博客网 时间:2024/05/22 14:34
web标准方法目前推荐大家使用XHTML+CSS来制作网站。目标是使结构与表现彻底相分离。
一, 文本格式和颜色
poem_sec.xml
<?xml version="1.0" encoding="gb2312"?>
<?xml-stylesheet type="text/css" href="poem_sec.css" ?>
<POEM>
<head/>
<pic/>
<po>
<pn>名称: 春晓 </pn>
图片资料</po>
<STANZA>
<TITLE>春晓①</TITLE>
<POET>孟浩然</POET>
<VERSE>春眠不觉晓, </VERSE>
<VERSE>处处闻啼鸟。② </VERSE>
<VERSE>夜来风雨声, </VERSE>
<VERSE>花落知多少。</VERSE>
</STANZA>
<p_au>作者:孟浩然</p_au>
<p_intro>
<pname>孟浩然</pname>
(689~740),字浩然。襄州襄阳(今湖北襄樊)人。早年隐居鹿门山,四十八岁入长安赶考落第,失意东归,自洛阳东游吴越。张九龄出镇荆州,引为从事,后病疽卒。他不甘隐沦,却以隐沦终老。其诗多写山水田园的幽清境界,却不时流露出一种失意情绪,诗歌淡雅而有壮逸之气,为当时诗坛所推崇。在描写山水田园上,孟浩然与王维齐名,世称“王孟”。</p_intro>
<comment>
<con>[注释]</con><con>①晓:清晨。</con><con>②闻啼鸟:听到鸟叫声。</con>
</comment>
<intro>
<o_intro>赏析</o_intro>
<m_intro>
《春晓》是一首惜春诗,看似极为口语化,却既有悠美的韵致,行文又跌宕起伏。作者以“不知——知;知——不知”的句式,将春天的景物展现给读者的。不知清晨,但是却知道报晓的鸟儿鸣叫;知道春风春雨的光顾,却不知道落英多少。诗人就是这样在反复周折的句式中来描写大好春光的。
</m_intro>
</intro>
</POEM>
poem_sec.css
head {
background-image: url(poemHead.JPG);
background-repeat: no-repeat;
height: 76px;
width: 779px;
}
po {
height: 50px;
width: 100px;
position: absolute;
left: 10px;
top: 100px;
font-family: "宋体";
font-weight: bold;
}
pic {
background-image: url(poemPic.JPG);
background-repeat: no-repeat;
height: 200px;
width: 300px;
position: absolute;
left: 10px;
top: 150px;
background-position: center;
}
STANZA {
height: 200px;
width: 400px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: dashed;
border-right-style: dashed;
border-bottom-style: dashed;
border-left-style: dashed;
position: absolute;
left: 350px;
top: 100px;
display: block;
padding: 2em;
}
comment {
height: 50px;
width: 400px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: dashed;
border-right-style: dashed;
border-bottom-style: dashed;
border-left-style: dashed;
position: absolute;
left: 350px;
top: 320px;
display: block;
padding: 2em;
}
intro {
height: 100px;
width: 400px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: dashed;
border-right-style: dashed;
border-bottom-style: dashed;
border-left-style: dashed;
position: absolute;
left: 350px;
top: 470px;
display: block;
padding: 2em;
}
p_au {
height: 50px;
width: 100px;
position: absolute;
left: 10px;
top: 370px;
display: block;
}
p_intro {
height: 300px;
width: 300px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: dashed;
border-right-style: dashed;
border-bottom-style: dashed;
border-left-style: dashed;
position: absolute;
left: 10px;
top: 400px;
display: block;
padding: 2em;
}
TITLE,POET,VERSE,o_intro,con,pn{
display: block;
line-height: 1.5em;
}
pname {
display: block;
line-height: 2em;
}
POEM
{
background-image: url(getBgPic.gif);
background-repeat: repeat;
height: 768px;
width: 1024px;
}
显示效果如下:
- 选择特殊字体和字体大小
- 设置粗体,斜体,下划线和文本阴影
- 改变文本颜色,删除下划线
- 缩进文本,或者使文本居中
- 拉伸,调整文本大小和行间距
- 将文本部分转换程大写,小写,或者转换成大小写混合的形式
- 添加首字母大写,下沉和其他特效
二,图形外观布局 - 设置背景图形,控制位置,排列,滚动
- 绘制页面个部分的边界,轮廓
- 设置全部元素的处置和水平边距,水平和垂直的填充方式
- 生成图像周围设置是其他文本周围的流动文本
- 在虚拟画布上把页面部分定位到准确位置
- 重新定义HTML表,表单和列表的显示方式
- 以指定的顺序在个元素顶部将它们分层放置
三,动态操作 - 鼠标放在链接上的效果
- 在HTML标签之前或之后动态插入内容
- 自动对页面元素编号
- 在动态HTML和异步JS与XML中的完全交互式设计
- XML:CSS基础之二
- XML:CSS基础之三
- XML:CSS基础之四
- XML:CSS基础之五
- XML:CSS基础之七
- XML:CSS基础之八
- XML:CSS基础之九
- XML:CSS基础之十
- XML:CSS基础之十一
- XML:CSS基础之十二
- HTML CSS 基础之二
- HTML5学习笔记之二CSS基础
- 互联网基础之DIV和CSS二
- Web基础之CSS(二)
- CSS基础(二)之三栏式布局
- Spring基础之二:xml配置注入
- XML基础之DOM4j解析(二)
- 蓝鸥零基础学习HTML5之CSS的基础样式二
- Android 文档的阅读顺序(转)
- c语言控制语句对应的汇编语句代码
- JAVA中final、finally、finalize
- ASP.NET系统用户权限设计与实现
- 二难树顺序与链接存储结构的转换
- XML:CSS基础之二
- linux下获取网络流量的实现方法
- samba服务器配置---学习笔记
- STRUTS中的FORM与HASHMAP自动传值
- 让你知道ext表格控件的厉害
- 互联网时代计算机视觉为王
- 中国又少了个社会闲散人员
- C++各大有名库的介
- 独自等待