首页> 图书频道> 工学> 计算机科学

11.3.1  编写基本的样式

2025年09月26日
版权
11.3.1 编写基本的样式

所谓的基本样式是指诸如背景颜色、文字大小和颜色等样式，在上一节实例的基础上继续扩展，具体实现流程如下。

（1）在文件android.css中设置<body>元素的如下基本样式。

978-7-111-53392-4-Part03-253.jpg

（2）开始处理<header>中的<div>内容，它包含主要入口的链接（也就是logo）和一级、二级站点导航。第一步是把logo链接的格式调整得像可以单击的标题栏，在此需要将下面的代码加入到文件android.css中。

978-7-111-53392-4-Part03-254.jpg

978-7-111-53392-4-Part03-255.jpg

（3）用同样的方式格式化一级和二级导航的<ul>元素。在此只需用通用的标签选择器（也就是#header ul）就够用了，不必再设置标签<ID>，也就是不必设置诸如下面的样式了。

■#header ul

■#utility

■#header ul

■#nav

此步骤的代码如下。

978-7-111-53392-4-Part03-256.jpg

（4）给content和sidebar div加点内边距，让文字到屏幕边缘之间空出点距离。代码如下。

978-7-111-53392-4-Part03-257.jpg

（5）接下来设置<footer>中内容的样式，<footer>里面的内容比较简单，只需将display设置为none即可。其代码如下。

978-7-111-53392-4-Part03-258.jpg

978-7-111-53392-4-Part03-259.jpg

将上述代码在计算机中执行的效果如图11-13所示。在Android中的执行效果如图11-14所示。

978-7-111-53392-4-Part03-260.jpg

图11-13 计算机中的执行效果

978-7-111-53392-4-Part03-261.jpg

图11-14 在Android中的执行效果

因为添加了自动缩放，并且添加了修饰Menu的样式，所以整个界面看上去很美。