【转载】CSS 入门精要（四）-白红宇

【转载】CSS 入门精要（四）

阅读量：6967 次

发布时间：2019-06-27

本文共 3505 字，大约阅读时间需要 11 分钟。

5. 综合示例

如果你对如何综合运用我们之前讲述的知识完成一个实际的网页设计还感到无从下手，相信仔细研读这个例子后会有所帮助，并可以学到一些未提到的知识和技巧。

（例子中的代码可能并非最佳的做法，只能抛砖引玉，也欢迎各位提出宝贵意见！）

为了让你可以直接实验，例子中没有使用任何图片，所使用的颜色也只是黑、白、灰三色，一切力求精简。最终效果如下图：

下面是HTML文档的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>DIV+CSS布局示例</title>

</head>

<body>

<div id="title">DIV + CSS布局示例</div>

<ul>

</ul>

</div>

<div>

<p class="title">侧边栏标题</p>

<ul>

</ul>

</div>

<p class="title">侧边栏标题</p>

<ul>

</ul>

</div>

<ul>

<li><a href="#">栏目中文章的标题</a></li>

</ul>

</div>

<ul>

<li><a href="#">栏目中文章的标题</a></li>

</ul>

</div>

<ul>

<li><a href="#">栏目中文章的标题</a></li>

</ul>

</div>

<ul>

<li><a href="#">栏目中文章的标题</a></li>

</ul>

</div>

</div>

</body>

</html>

样式统一写在一个独立的样式表文件中，文件名为 example.css，与HTML文档放置于同一文件夹下：

* {font-size:12px; margin:0px; padding:0px;}

body {margin:0px;}

li {list-style:none;}

a {color:black;text-decoration:none;}

a:hover {color:#C00; text-decoration:underline;}

.clear {clear:both;}

#m-body {width:960px; margin:0px auto; border:1px dashed silver; border-width:0px 1px; background-color:#EEE;}

#title {height:100px; font-size:32px; font-family:黑体,sans-serif; line-height:100px; padding-left:50px;

background-color:#CCC;}

#nav {height:30px; line-height:30px; background-color:#333; color:#FFF; margin:5px 0px;}

#nav ul {margin-left:20px;}

#nav li {float:left; margin:0px 10px;}

#side {float:left; width:200px; padding:0px 5px;}

#side .item {border:1px solid #CCC; margin-bottom:20px;}

#side .item .title {height:30px; line-height:30px; background-color:#CCC; font-size:14px; padding-left:10px;}

#side .item ul {margin-left:15px;}

#side .item li {margin:10px 0px;}

#content {float:left; width:720px; margin-left:10px; padding-left:10px; border-left:1px dotted #CCC; min-height:500px;}

#content .item {width:320px; margin:7px; padding:10px; float:left; background-color:#FFF;}

#content .item .title {line-height:16px; font-size:16px; padding-left:8px; margin-bottom:10px; font-family:黑体,sans-serif;}

#content .item ul {margin-left:10px;}

#content .item li {line-height:22px;}

#footer {height:20px; line-height:20px; padding:5px 15px; margin:5px 0px; background-color:#333; color:#FFF; text-align:right; }

-----------------------------------------

建议将上述代码复制到 Dreamweaver之类的开发工具中，这样更便于阅读。

好了，就到这里吧……

转载于:https://www.cnblogs.com/toge/p/6114737.html

你可能感兴趣的文章

httpd/php/mysql的安装-1

查看>>

终极版：由简单工厂模式，升级到抽象工厂模式（用到反射）

查看>>

LintCode: O(1) Check Power of 2

c# 异步编程demo (async await)

查看>>

命令行參数选项处理：getopt()及getopt_long()函数使用

查看>>

OSS设置CORS规则以后还是报No 'Access-Control-Allow-Origin'解决方法

查看>>

opengl 教程(24) shadow mapping (2)

查看>>

数据库——浅谈数据库中的存储过程（转）

查看>>

html学习一（html简史及doctype）

查看>>

Castle IOC容器与Spring.NET配置之比较

查看>>

[Javascript] Call Stack

查看>>

单表60亿记录等大数据场景的MySQL优化和运维之道

查看>>

Linux zip解压/压缩并指定目录

查看>>

Ubuntu下安装MySQL 5.6.23

查看>>

Codeforces Round #261 (Div. 2)——Pashmak and Buses

查看>>

kafka源码分析之一server启动分析

查看>>

【CodeForces 626C】Block Towers

查看>>

SQL Server代理(11/12)：维护计划作业

查看>>