新闻界面
综合应用HTML5和CSS3，设计并开发完成WEB文档页面，可以是一篇论文，或一篇新闻，或某一 章节的学习内容等。要求综合应用HTML5的文本、图片、表格、列表等语义标记，以及CSS3的相关外观样式。参考附件文档。提交要求：以附件形式提交单个HTML文档。CSS代码写在HTML文档中，图片等资源省略，在图片位置显示图片相关信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#tr{
height: 80px;
background: gainsboro;
font-size: 20px;
font-weight: 400;
color: blueviolet;
text-align: center;
}
#table{
background: whitesmoke;
width: 80%;
height: 90%;
opacity: 0.8;
}
.title{
font-size: 17px;
background: antiquewhite;
line-height: 30px;
}
.txt{
line-height: 20px;
}
.txt1{
line-height: 25px;
}
#tr ul{
font-size: 15px;
color: red;
font-weight: 600;
}
ul{
list-style-type: none;
}
ul li{
float: left;
width: 117px;
text-align: center;
}
ul li a{
text-decoration: none;
color: red;
}
#table #tr1 #td a{
text-decoration: none;
text-align: center;
color: brown;
}
#table #tr1 #td{
color: brown;
text-align: center;
align-items: center;
}
</style>
</head>
<body>
<table width="100%" height="400px">
<tr id="tr">
<td>《基于html5的WEB设计与开发》在线课程
<ul>
<li><a href="">好好学习</a></li>
<li><a href="">天天向上</a></li>
<li><a href="">天天向上</a></li>
<li><a href="">日期格式</a></li>
<li><a href="">九九乘法</a></li>
<li><a href="">网站首页</a></li>
<li><a href="">网站注册</a></li>
<li><a href="">web前端</a></li>
<li><a href="">密码修改</a></li>
<li><a href="">联系我们</a></li>
</ul>
</td>
</tr>
<tr>
<td background="../img/regist_bg.jpg" width="100%" height="400px">
<table id="table" align="center" align="absbottom">
<tr id="tr1">
<td width="12%" bgcolor="bisque" valign="top" id="td">
<!--
作者：1062093334@qq.com
时间：2019-09-24
描述：
<table width="100%" border="2px">
<tr>
<td class="title">CSS简介</td>
</tr>
<tr>
<td class="title">CSS简介</td>
</tr>
<tr>
<td class="title">CSS简介</td>
</tr>
<tr>
<td class="title">CSS简介</td>
</tr>
<tr>
<td class="title">CSS简介</td>
</tr>
<tr>
<td class="title">CSS简介</td>
</tr>
</table>-->
<!--<ul class="ul1">
<li>huhu</li>
<li>haha</li>
<li>lili</li>
<li>qiqi</li>
</ul>-->
<a href="#title1"><font class="title"> CSS简介 </font></a>
<a href="#title2"><font class="title"> CSS优势 </font></a>
<a href="#title3"><font class="title"> CSS结构 </font></a>
<a href="#title4"><font class="title"> CSS格式 </font></a>
<a href="#title5"><font class="title"> CSS属性 </font></a>
<a href="#title6"><font class="title"> CSS架构 </font></a>
</td>
<td width="3px" height="100px"></td>
<td width="85%" height="100px">
<div style="overflow-y: scroll; overflow-x: hidden;">
<a name="title1"><h3>1.1 什么是CSS</h3></a>
<hr color="#8A2BE2"/>
<font class="txt">1. CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。<br />
2. CSS 是一种标记语言，属于浏览器解释型语言，可以直接由浏览器执行，不需要编译。<br />
3. CSS 是用来表现HTML或XML的标记语言。<br />
4. CSS 是由W3C的CSS工作组发布推荐和维护的。<br />
5. CSS 是编程入门人员的必修课，运用CSS样式可以让页面变得美观。<br />
6. CSS 语法规则：选择器、属性和值： selector {property: value;...} <br />
</font>
<a name="title2"><h3>1.2 CSS编译</h3></a>
<hr color="#8A2BE2"/>
<font class="txt">1.记事本：使用Windows系统自带的记事本可以编辑网页。<br />
只需要在保存文档时，以.html为后缀名进行保存即可。<br />
2.Dreamweaver：它与Flash、Fireworks并称网页三剑客。<br />
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻而易举地制作出充满动感的网页。<br />
</font>
<a name="title3"><h3>1.3 CSS的结构</h3></a>
<hr color="#8A2BE2"/>
<font class="txt">1. CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。<br />
2. CSS 是一种标记语言，属于浏览器解释型语言，可以直接由浏览器执行，不需要编译。<br />
3. CSS 是用来表现HTML或XML的标记语言。<br />
4. CSS 是由W3C的CSS工作组发布推荐和维护的。<br />
5. CSS 是编程入门人员的必修课，运用CSS样式可以让页面变得美观。<br />
6. CSS 语法规则：选择器、属性和值： selector {property: value;...} <br />
</font>
<a name="title4"><h3>1.4 什么是CSS</h3></a>
<hr color="#8A2BE2"/>
<font class="txt1"><strong>属性<br /></strong>
属性的名字是一个合法的标识符，它们是CSS语法中的关键字。一种属性规定了格式修饰的一个方面。例如：color是文本的颜色属性，而text-indent则规定了段落的缩进。<br />
要掌握一个属性的用法，有六个方面需要了解。具体叙述如下：<br />
①该属性的合法属性值（legal value）。显然段落缩进属性text-indent只能赋给一个表示长度的值，而表示背景图案的background．image属性则应该取一个表示图片位置链接的值或者是关键字none表示不用背景图案。<br />
②该属性的默认值（initial value）。当在样式表单中没有规定该属性，而且该属性不能从它的父级元素那儿继承的时候，则浏览器将认为该属性取它的默认值。<br />
③该属性所适用的元素（Applies to）。有的属性只适用于某些个别的元素，比如white-space属性就只适用于块级元素。white-space属性可以取normal、pre和nowrap三个值。<br />
当取normal的时候，浏览器将忽略掉连续的空白字符，而只显示一个空白字符。当取pre的时候，则保留连续的空白字符。而取nowrap的时候，连续的空白字符被忽略，而且不自动换行。<br />
④该属性的值是否被下一级继承（inherited）。<br />
⑤如果该属性能取百分值（percentage），那么该百分值将如何解释。也就是百分值所相对的标准是什么。如margin属性可以取百分值，它是相对于margin所存元素的容器的宽度。<br />
⑥该属性所属的媒介类型组（media groups）。<br />
<strong>属性值<br /></strong>
①整数和实数<br />
这和普通意义上的整数和实数没有多大区别。在CSS中只能使用浮点小数，而不能像其他编程语言那样使用科学记数法表示实数，即1.2E3在CSS中将是不合法的。下面是几个正确的例子，整数：128、-313，实数：12.20、1415、-12.03。<br />
②长度量<br />
一个长度量由整数或实数加上相应的长度单位组成。长度量常用来对元素定位。而定位分为绝对定位和相对定位，因而长度单位也分为相对长度单位和绝对长度单位。<br />
相对长度单位有：em——当前字体的高度，也就是font.size属性的值；ex——当前字体中小写字母x的高度；Dx——一个像素的长度，其实际的长度由显示器的设置决定，比如在800木600的设置下，一个像素的长度就等于屏幕的宽度除以800。<br />
另一一点值得注意的是，子级元素不继承父级元素的相对长度值，只继承它们的实际计算值。<br />
③百分数量（percentages）<br />
百分数量就是数字加上百分号。显然，百分数量总是相对的，所以和相对长度量一样，百分数量不被子级元素继承。<br />
</font>
<a name="title5"><h3>1.5 CSS的优点</h3></a>
<hr color="#8A2BE2"/>
<font class="txt">内容与表现分离，有了CSS，网页的内容(XHMTL)与表现就可以分开了。<br />
使用CSS可以减少网页的代码量，增加网页的浏览速度。<br />
</font>
<h3>1.3 CSS的语法</h3>
<hr color="#8A2BE2"/>
<font class="txt">CSS基础语法<br />
CSS 语法规则由两个主要的部分构成：<br />
(1)选择器selector，(2)以及用花括号括起来的一条或多条声明{property: value;...}。<br />
selector {property: value;...}<br />
选择器通常是需要设置外观样式的HTML文档元素名称，或元素的 id 或 class 属性值。<br />
声明由CSS样式属性及其值组成。属性（property）是设置的样式属性名称，比如字体font、颜色color、背景background、边框border等等。<br />
每个属性有一个值。属性和值用冒号分开，以分号结束声明。比如设置颜色属性值为红色：color: red;<br />
</font>
<a name="title6"><h3>1.6 CSS的属性</h3></a>
<hr color="#8A2BE2"/>
<font class="txt">CSS基础语法<br />
在HTML文件里加一个超级链接, 引入外部的 CSS 文档。这个方法最方便管理整个网站的网页风格, 它让网页的文字内容与版面设计分开。<br />
只要在一个CSS文档内（扩展名为 CSS） 定义好网页的风格,然后在网页中加一个超级链接连接到该文档,那么网页就会按照在CSS文档内定义好的风格显示出来。<br />
<br />
<br />
</font>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
