截图例如，下面的：

<!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. Eequal sum sets

    Let us consider sets of positive integers less than or equal to n. Note that all elements of a set a ...

  2. 【ASP.NET Web API教程】2 创建各种Web API

    原文 [ASP.NET Web API教程]2 创建各种Web API Chapter 2: Creating Web APIs第2章 创建各种Web API 本文引自:http://www.asp. ...

  3. 特殊的Windows消息

    WM_CREATE消息 该消息是Windows发送给视图的第一个消息.由于当应用程序框架调用Create函数时该消息就会被发送,而此时窗口创建还未完成,窗口还不可见,因此在控制函数OnCreate内部 ...

  4. C语言中输入输出重定，freopen()妙用。

    使用的理由(范围):如果输入数据很庞大,需要一次又一次的重新输入和调试时可采用本函数. freopen ()函数: 1.格式 FILE * freopen ( const char * filenam ...

  5. Delphi事件的广播2

    上篇文章写了将事件分离成类的方法来实现事件的广播,这次将参考观察者模式来实现事件的广播.模式中主要有这两个角色: 发布者:发布者保存着一张观察者的列表,以便在必要的时候调用观察者的方法. 观察者:观察 ...

  6. QT实现不规则窗体

    看到网上有很多不规则窗体的实现,效果很酷.于是使用QT也实现了一个,QT的不规则窗体实现非常简单,只需要设置一个mask(遮掩)图片,这个图片的格式可以使用png或bmp格式,我使用了png格式,默认 ...

  7. COCOS2D中对精灵的操作、对图片的各种操作

    内容简要: 1.初始化 2.创建无图的精灵 3.设置精灵贴图大小  4.添加入层中 5.对精灵进行缩放  6.对精灵宽或高进行缩放  7.旋转精灵 8.设置精灵透明度  9.精灵的镜像反转  10.设 ...

  8. UVA 534 - Frogger（kruskal扩展)

    UVA 534 - Frogger 题目链接 题意:给定一些点.如今要求一条路径从第一个点能跳到第二个点,而且这个路径上的最大距离是最小的 思路:利用kruskal算法,每次加最小权值的边进去,推断一 ...

  9. ssh-copy-id -i ~/.ssh/id_rsa.pub admin@172.17.42.66

    ssh-copy-id -i ~/.ssh/id_rsa.pub admin@172.17.42.66

  10. jvm调优经验分享

    当Java程序申请内存,超出VM可分配内纯的时候,VM首先可能会GC,假设GC完还是不够,或者申请的直接超够VM可能有的,就会抛出内 存溢出异常.从VM规范中我们能够得到,一下几种异常. java.l ...