截图例如，下面的：

<!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. php 控制页面跳转

    <?php class UserAction extends Action{ public function index(){ echo "你好!"; $m=M('user' ...

  2. 14.2.1 MySQL and the ACID Model

    14.2 InnoDB Concepts and Architecture InnoDB 概念和结构体系: 14.2.1 MySQL and the ACID Model 14.2.2 InnoDB ...

  3. SilkTest Q&A 7

    Q61.有一个用Dotnet开发的应用,有1000个为测它而录制的case,一直都运行的很正常,直到有一天… 有人改变了该应用命名空间,由于现在有一个新的window或是panel出现,所以测试脚本一 ...

  4. 【状态DP】 HDU 1074 Doing Homework

    原题直通车:HDU  1074  Doing Homework 题意:有n门功课需要完成,每一门功课都有时间期限t.完成需要的时间d,如果完成的时间走出时间限制,就会被减 (d-t)个学分.问:按怎样 ...

  5. cocos2dX 事件之触摸事件和触摸事件集合

    今天, 我们来学习cocos2dX里面的触摸事件与触摸事件合集, 如今的手机游戏交互基本上都是通过触摸交互的, 所以大家明确这节的重要性了吧, 本节篇幅比較大, 所以我就不扯闲话了 先来看看经常使用函 ...

  6. 深入分析 Java 中的中文编码问题(1)

    几种常见的编码格式 为什么要编码 不知道大家有没有想过一个问题,那就是为什么要编码?我们能不能不编码?要回答这个问题必须要回到计算机是如何表示我们人类能够理解的符号的,这些符号也就是我们人类使用的语言 ...

  7. 详谈隐藏Tabbar的几种方法

    如今正在写的一个项目,涉及到了使用两个TabBar,然后我须要显示当中一个的时候,然后隐藏另外一个,可是中间却出现故障了.我查了一些资料,想总结一下关于TabBar的隐藏. 第一种方法是: //隐藏t ...

  8. EasyUI初体验--右键弹框

    在C/S中可能非常easy实现右键弹框,但在B/S中直到今天我才搞定,小小得瑟一下.只一个html页面,导入相关的Easy-UI类库就能搞定,Easy-UI类库下载地址 <!DOCTYPE ht ...

  9. iOS 如何创建单例对象

    一.什么是单例? 说到单例我就想起了我的java啊 ,不禁感叹起我的大学时光,学了4年的java开发,到现在还是放弃了我的java,踏入了iOS的行列. 算了,入正轨,我现在正是铁树银花的青春美少女, ...

  10. POJ2584 T-Shirt Gumbo【二分图多重匹配】

    题目链接: id=2584">http://poj.org/problem?id=2584 题目大意: 如今有5种型号(S.M.L.X.T)的衣服要发放给N个參赛队员.给出每一个參赛者 ...