截图例如，下面的：

<!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. Ubuntu_文件夹名字转化成英文

    打开终端命令行输入: export LANG=en_US xdg-user-dirs-gtk-update 之后重启,就看到中文的文件夹变成英文的了 想要换回中文的输入: export LANG=zh ...

  2. 怎样使用jstack诊断Java应用程序故障（转）

    最近一段时间,我们的生产系统升级频繁出现故障,具体故障现象是启动后10来分钟就出现交易缓慢,处理线程耗尽等现象,并且故障发生的频率蛮高的.经过详细的诊断和排查,终于发现了问题,是groovy在osgi ...

  3. [置顶] Java字节码文件剖析

    Java为什么能够支持跨平台,其实关键就是在于其*.class字节码文件,因为*.class字节码文件有一个统一标准的规范,里面是JVM运行的时需要的相关指令,各家的JVM必须能够解释编译执行标准字节 ...

  4. Xamarin.forms 自定义dropdownview控件

    一 基本说明 想用xamarin做个像美团这样的下拉列表进行条件选择的功能,但是但是找了半天好像没有现成的,也没有其他类似的控件可以走走捷径,再则也没有找到popwindow之类的东东,这里只好使用s ...

  5. expect 参数处理之一

    expect 参数处理之一 expect是很强悍的脚本,网上资源虽然很经典,但很少,我把自己的测试脚本贴之,仅作参考 #!/usr/bin/expect -f proc help {} { puts ...

  6. [置顶] ※数据结构※→☆线性表结构（queue）☆============循环队列 顺序存储结构（queue circular sequence）（十）

    循环队列 为充分利用向量空间,克服"假溢出"现象的方法是:将向量空间想象为一个首尾相接的圆环,并称这种向量为循环向量.存储在其中的队列称为循环队列(Circular Queue). ...

  7. Android读取网络图片

    本文是自己学习所做笔记,欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 在android4.0之后,已不同意在主线程中进行网络请求操作了, 否则会出现N ...

  8. Android监听外部存储设备的状态（SD卡、U盘等等）

    近期在项目中须要对外部存储设备的状态进行监听,所以整理了此笔记,以便日后查看. 外部存储设备的状态变化时发出的广播 对照不同状态下的广播 1. 插入外部SD卡时: 2. 移除外部SD卡时: 3. 连接 ...

  9. 网络知识汇总(2) - Linux下如何修改ip地址

    在Linux的系统下如何才能修改IP信息   以前总是用ifconfig修改,重启后总是得重做.如果修改配置文件,就不用那么麻烦了-   A.修改ip地址   即时生效:   # ifconfig e ...

  10. 改动Oracle GoldenGate(ogg)各个进程的读检查点和写检查点

    请注意:请谨慎改动Oracle GoldenGate(ogg)各个进程的读检查点和写检查点. 请确保已经 掌握 ogg 各个进程的读检查点和写检查点的详细含义. BEGIN {NOW | yyyy-m ...