JAVA WEB_CSS的初步(3)

最新推荐文章于 2025-12-04 16:35:29 发布

最新推荐文章于 2025-12-04 16:35:29 发布 · 79 阅读

文章标签：

#java

本文详细介绍了如何使用HTML和CSS实现网页布局，并通过创建外部样式表和处理超级链接的不同状态，展示了字体和背景样式的调整。具体展示了三种不同的网页布局实例，包括基本布局、分栏布局和响应式布局，并提供了CSS样式代码示例。

自行根据如下内容，利用CSS对网页样式进行修改。

要求：

l采用外部样式表的形式进行处理。

l网页中应包含超级链接。（可对超级链接的四种状态进行处理）

l对字体的样式、背景的样式进行相应的处理。

index.html

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link REL=stylesheet href="马云.css" type="text/css"> <title>不平凡的IT人</title> </head> <body> <div class="all"> <div class="tou"><h1 class="tou">不平凡的IT人——马云</h1></div> <div class="left"> <a href="个人简介.html">个人简介</a><br> <a href="马云往事.html">马云往事</a><br> <a href="创办淘宝.html">创办淘宝</a><br> <a href="马云语录.html">马云语录</a><br> </div> <div class="content"> <h1>中国的"互联网之父"</h1> <p>从某种意义上说，企业家马云的创业史，也是一部中国互联网的发展史。</p> <p>马云创办的个人拍卖网站淘宝网，成功走出了一条中国本土化的独特道路，从2005年第一季度开始成为亚洲最大的个人拍卖网站。</p> <p>当人们谈到中国互联网十余年的发展历程中，不得不提到企业家马云，也不可能避开这个"幽灵"的存在。他是当仁不让的开创者"教父"，也是充满变革精神的颠覆者、"叛逆"。</p> </div> <div class="jiao">马洪涛制作</div> </div> </body> </html>
网页布局1.HTML

<html > <head > <title>网页布局</title> <link href="StyleSheet.css" type="text/css" rel="Stylesheet" /> </head> <body> <div id="Top"> <div id="header">header</div> <div id="nav">nav</div> </div> <div id="main1"> <div id="main1_left"> main1_left </div> <div id="main1_center"> main1_center </div> <div id="main1_right"> main1_right </div> </div> </form> </body> </html>
网页布局2.HTML

<html> <head> <title>网页布局2</title> <style type="text/css"> div.container { width:100%; margin:0px; border:5px solid gray; line-height:200%; } div.header,div.footer { padding:0.5em; color:white; background-color:gray; clear:left;/*左侧不允许有浮动元素*/ } h1.header { padding:0; margin:0; } div.left { float:left; width:160px; margin:0; padding:1em; } div.content { margin-left:190px; border-left:1px solid gray; padding:1em; } </style> </head> <body> <div class="container"> <div class="header"><h1 class="header">欢迎访问我的网页</h1></div> <div class="left"><p>本网页用于个人练习</p></div> <div class="content"> <h2>中秋节的由来与传说</h2> <p>中秋节有悠久的历史，和其它传统节日一样，也是慢慢发展形成的，古代帝王有春天祭日，秋天祭月的礼制，早在《周礼》一书中，已有“中秋”一词的记载。后来贵族和文人学士也仿效起来，在中秋时节，对着天上又亮又圆一轮皓月，观赏祭拜，寄托情怀，这种习俗就这样传到民间，形成一个传统的活动，一直到了唐代，这种祭月的风俗更为人们重视，中秋节才成为固定的节日，《唐书·太宗记》记载有“八月十五中秋节”，这个节日盛行于宋朝，至明清时，已与元旦齐名，成为我国的主要节日之一。 </p> <p>中秋节的传说是非常丰富的，嫦娥奔月，吴刚伐桂，玉兔捣药之类的神话故事流传甚广。</p></div> <div class="footer">本网站全部内容归个人所有</div> </div> </body> </html>
其他链接文件我就不发布了。这里主要说的是div css的布局。