截图例如，下面的：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>UL+CSS布局</title>

		<style type="text/css">

			.menu{

				margin: 0;

				padding: 0;

				height: 30px;

				list-style-type: none;

			}

			.menu li{

				float: left;

				width: 100px;

				background-color: black;

				text-align: center;

				padding: 5px;

			}

			.menu li a{

				color: white;

				text-decoration: none;

				font-size: 12px;

			}

			.menu li a:hover{/*hover用于修饰鼠标置于其上的超链接*/

				color: yellow;

			}

		</style>

	</head>

	<body>

		<h3>友情链接</h3>

		<hr />

		<ul class="menu">

			<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>

		</ul>

	</body>

</html>

版权声明：本文博主原创文章，博客，未经同意不得转载。

HTML——UL+CSS设计的更多相关文章

  1. 《CSS 设计指南》学习笔记 一

    本篇文章是对这几天看完 Charles Wyke-Smit 的 <CSS 设计指南> 后的一些学习笔记与心得,笔者好像是大一的时候开始接触网页设计,由于并不是计算机专业的,所以所有都是自己 ...

  2. 结构化CSS设计思维

    LESS.SASS等预处理器给CSS开发带来了语法的灵活和便利,其本身却没有给我们带来结构化设计思维.很少有人讨论CSS的架构设计,而很多框架本身,如Bootstrap确实有架构设计思维作为根基. 要 ...

  3. 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密

    你真的了解字典(Dictionary)吗?   从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...

  4. （11）用css设计电子相册 {上}

    本篇学习资料讲解:       通过css对电子相册进行排版 和 侧面强调“盒子模型.标准流.浮动和定位”的重要性. 先来看看"双向联动模式"的电子相册图: {鼠标指针经过某张图片 ...

  5. CSS设计指南之理解盒子模型

    原文:CSS设计指南之理解盒子模型 一.理解盒模型 每一个元素都会在页面上生成一个盒子.因此,HTML页面实际上是由一堆盒子组成的.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看 ...

  6. CSS设计指南之浮动与清除

    原文:CSS设计指南之浮动与清除 浮动意思就是把元素从常规文档流中拿出来,浮动元素脱离了常规文档流之后,原来紧跟在其后的元素就会在空间允许的情况下,向上提升到与浮动元素平起平坐. 一.浮动 CSS设计 ...

  7. CSS设计指南之定位

    原文:CSS设计指南之定位 CSS布局的核心是position属性,对元素盒子应用这个属性,可以相对于它在常规文档流中的位置重新定位.position属性有4个值:static.relative.ab ...

  8. TMS WEB CORE直接从HTML&CSS设计的页面布局

    TMS WEB CORE直接从HTML&CSS设计的页面布局 TMS WEB CORE支持DELPHI IDE中拖放控件,生成HTML UI.这种方式适合DELPHI和C++ BUILDER的 ...

  9. HTML & CSS设计与构建网站 ([美]达科特) PDF原版​

    HTML & CSS 设计与构建网站采用有别于许多传统编程书籍的新颖编排方式,将使您收到事半功倍的学习效果.每一页都在短小精悍的示例代码的引导下,简明直观.直截了当地阐述一个新主题. < ...

随机推荐

  1. 如何做实时监控？—— 参考 Spring Boot 实现

    随着 微服务 的流行,相比较以前一个大型应用程序搞定所有需求,我们现在更倾向于把大型应用程序切分成多个微服务,服务之间通过 RPC 调用.微服务架构的好处非常多,例如稳定的服务变化较少,不会被非稳定服 ...

  2. 【IACV】边缘检测技术传统的方法与理论

    1.边缘检测的目的 边缘检测是图像分析中使用到的最常见的操作之一,而且相比其他任何主题来说,文献中提到的与边缘增强(edge enhancement)[1]与边缘检测(edge detection)[ ...

  3. setOnClickListener报空指针异常

    1.异常提示: 2.错误原因: 先看代码: public class MainActivity extends ActionBarActivity { private Button btn_test; ...

  4. 积累的VC编程小技巧之文件操作

    1.删除文件夹 // 删除文件夹及其所有内容void CBaseDoc::RemoveFolder(const CString &strPathName){    CString path = ...

  5. jqueryUI中datepicker的使用，解决与asp.net中的UpdatePanel联合使用时的失效问题

    1.jqueryUI的datepicker的使用 -->首先在jqueryUI官网上根据你的需要下载适合你系统主题的样式,jqueryUI主题下载地址: -->下载后的文件 jquery- ...

  6. 深入分析redis cluster 集群

    深入分析redis cluster 集群安装配置详解 下面小编来为各位介绍一篇深入分析redis cluster 集群安装配置详解,如果你希望做数据库集群就可以来看看此文章的哦. http://rub ...

  7. 绘制FastMM内存分配流程图(小块内存分配)

    http://blog.csdn.net/henreash/article/details/38751353

  8. 当try和finally里都有return时，会忽略try的return，而使用finally的return

    今天去逛论坛 时发现了一个很有趣的问题: 谁能给我我解释一下这段程序的结果为什么是:2.而不是:3 代码如下: class Test { public int aaa() { int x = 1; t ...

  9. timeout connect 10000 # default 10 second time out if a backend is not found

    timeout connect <timeout> timeout contimeout <timeout> (deprecated) Set the maximum time ...

  10. delphi 自我删除和线程池（1000行代码，需要仔细研究）

    unit Unit4; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...