HTML——UL+CSS布局

截图如下:

<!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>
时间: 2024-10-02 10:32:15

HTML——UL+CSS布局的相关文章

DIV+CSS布局重新学习之css控制ul li实现2级菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

&lt;转载&gt;div+css布局教程之div+css常见布局结构定义

在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索框.页脚(版权和有关法律声明). 通常采用DIV元素来将这些结构定义出来,类似这样: <div id="Container"></div> 页面层容器 <div id="header"></div> 页面头部 <di

css布局实践总结(part2)

一.总结: 在第一篇css布局实践心得总结中总结了通过给元素设置position:absolute的方式让元素处在BFC(块级格式化上下文)的环境中,处在BFC环境中的元素是独立的,它和外面其他元素毫无关系. 今天很兴奋的是实践到了通过将元素设置成line-block的方式让元素处在BFC的环境中,让其与外面的元素隔绝关系.还是引用这张图. 问题:如何让一个块级元素在没有采用float或position:absolute的情况下(采用这两种方式布局的元素,元素都会脱离文档流,元素大小由元素里面的

css012 css布局简介

css012  css布局简介 一.    网页布局的类型 网页布局的类型 1.固定宽度 2.流式 3.相应式web设计 二.    如何进行css布局 1.强大的<div>标签 网页的html代码数量应该尽可能减到最少,尤其是div标签的嵌套,当使用div标签有助于网页布局设计时,就很好用.但是并不是div嵌套的越多越好. 2.html5的分区元素 <div>  用于分割区域,块级元素 <span> 行内分区元素 <article> 给网页或者网页的分区提

div+css 布局经验 - 最简单的 = 最不变形的(原创技巧)

站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条"捷径". 希望广大网友提出宝贵意见 同时不希望将初学的您 带入走火入魔的状态! 1 :css (cascading style sheet): 初学者可以下载一本css 2.0 手册 大概48小时的时间可以看完 试完.至于样式手册上的单词(属性和取值) 多久能背完取决你的努力和英语基础,请注意 无论

一些css布局

# css布局 #---bootstrap   详情请看官方文档---首先要按照相应的官方规范引入相应的css js fonts等 container相当于一个容器 一般设置一个 接下来设置行 用row row里面套col col里面可以继续套row   row不能直接套row <div class="container">        <div class="row header">            <div class=&q

div css布局兼容性问题

在strict mode中:width是内容宽度 ,也就是说,元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right; 在quirks mode中:width则是元素的实际宽度 ,内容宽度 = width – (margin-left + margin-right + padding-left + padding-rig

(转)CSS布局-负边距-margin

css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的.本文非常基础,老鸟可以略过. 负边距在普通文档流中的作用和效果 那些没有脱离文档流的元素(指不是浮动元素也不是绝对定位.固定定位的元素等),其在页面中的位置是跟随者文档流的变化而变化的.看下面这幅图: 负边距对这些由文档流控制的元素的作用是,会使它们在文档流中的位置发生偏移,但这种偏移不同于相对定位

CSS_使用css布局

本文出自:http://blog.csdn.net/svitter 1.   创建一个HTML页面, 其内容为一个无序列表,列表中至少包含了5本畅销书,每本书之前的项目符号必须采用概述封面的缩略图.这些信息可以冲Web上获取. 要求采用CSS方法进行布局. 交作业的请不要照抄我的代码- -. ex1.html: <html> <head> <meta http-equiv="Content-Type" content="text/html; ch