截图例如，下面的：

<!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. 基于visual Studio2013解决面试题之0303数组求和

     题目

  2. hdu5086——Revenge of Segment Tree

    Revenge of Segment Tree Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/ ...

  3. C++编程规范之11：隐藏信息

    摘要: 不要泄密,不要公开提供抽象的实体的内部信息. 为了尽量减少操作抽象的调用代码和抽象的实现之间的依赖性,必须隐藏实现内部的数据.否则,调用代码就能够访问该信息,或者更糟,操作该信息,而原来应属于 ...

  4. C++ 虚函数表解析（比较清楚，还可打印虚函数地址）

    C++ 虚函数表解析 陈皓 http://blog.csdn.net/haoel 前言 C++中的虚函数的作用主要是实现了多态的机制.关于多态,简而言之就是用父类型别的指针指向其子类的实例,然后通过父 ...

  5. eclipse如何查看类之间的引用关系

    今天遇到这个问题:mark一点点: 在类名上单击右键.选择Reference->Workingspace快捷克债券Ctrl+Shift+G 版权声明:本文博客原创文章,博客,未经同意,不得转载.

  6. 实现 select中指定option选中触发事件

    我们在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发. ...

  7. 更改windows系统语言，改为英文

  8. js封装的类似java StringBuilder类

    使用js的时候,经常会使用字符串拼接,但是在IE6和IE7没有对+作优化,所以性能会很低,鉴于此,我封装了StringBuilder类,用于拼接字符串,直接把代码贴出来如下: function Str ...

  9. [每日一题] 11gOCP 1z0-052 :2013-09-5 runInstaller oracle of no swap

    转载请注明出处:http://blog.csdn.net/guoyjoe/article/details/11186995 正确答案:A 我们先来看下面这张截图,这是我在安装Oracle 11.2.0 ...

  10. poj 2409+2154+2888（Burnside定理）

    三道burnside入门题: Burnside定理主要理解置换群置换后每种不动点的个数,然后n种不动点的染色数总和/n为answer. 对于旋转,旋转i个时不动点为gcd(n,i). 传送门:poj ...