CSS学习笔记----页面居中实现

最新推荐文章于 2024-05-23 22:59:55 发布
最新推荐文章于 2024-05-23 22:59:55 发布
阅读量503 收藏 1
点赞数 1
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014548034/article/details/40891221
版权 
<html>
	<head>
		<title>页面居中</title>
	</head>
	<style type="text/css">
		*{
		padding:0px;
		margin:0px;
		font-size:12px;
	}
	/*IE浏览器设置此选项就会使页面居中
	body{
		text-align:center;
	}
	*/
	#container{
		width:1100px;
		/*除IE外的浏览器需要设置此选项，才会使页面居中
		margin:auto;*/
		/*这才是推荐的居中设置方式*/
		position:absolute;
		left:50%;
		margin-left:-550px;
	}
	#header{
		
		background:#33f;
		height:50px;
	}
	#nav{
		border:1px solid #88a;
		height:30px;
		border-bottom:#88a 1px solid;
	}
	#nav ul{
		list-style:none;
	}
	li.nav_li{
		width:120px;
		height:30px;
		float:left;
		font-size:12px;
		border-right:1px solid #339;
		text-align:center;
		
	}
	li.nav_last{
		border:none;
	}
	/*当使用了包含标签之后，应为它的加载时间比class的加载时间要晚，所以再定义一个class之后，它的效果不会被class覆盖。*/
	#nav ul li a{
		position:relative;
		top:8px;
	}
	a.nav_href:link,a.nav_href:visited{
		text-decoration:none;
		color:#125;
	}
	a.nav_href:hover{
		text-decoration:underline;
		color:#a43;
	}
	#content{
		margin-top:4px;
		/*如果上一个元素设置了float，下面的一个就要设置此选项来清除float，否则对于IE以外的浏览器而言
		  因为不占用空间，会飘上去。当然如果上一个设置了height将其隔开也没问题。*/
		clear:both;
		float:left;
	}
	#content_left{
		width:250px;
		float:left;
	}
	#content_right{
		width:835px;
		float:left;
	}
	/***********************以下为文章内容样式*****************************/
	dl.article_list{
		margin:4px;
		border:1px #999 solid;
	}
	dl.index_l_list{
		width:240px;
	}
	dl.index_r_list{
		width:390px;
		float:left;
		margin-left:20px;
	}
	dl.article_list dt{
		background:#238;
		height:30px;
		color:#fff;
		font-weight:bold;
		
	}
	dl.article_list dt span{
		position:relative;
		font-size:14px;
		top:8px;
		left:10px;
	}
	dl.article_list dd{
		height:30px;
		background:url("3.jpg") no-repeat;
		background-position:12px 12px;
		border-bottom:1px dotted #aaa;
	}
	dl.article_list dd a{
		position:relative;
		top:8px;
		left:25px;
	}
	a.article_href:link,a.article_href:visited{
		text-decoration:none;
		color:#555;
	}
	a.article_href:hover{
		text-decoration:underline;
		color:#a33;
	}
	#border{
		clear:both;
		margin-top:10px;
		text-align:center;
		height:30px;
		border:#999 1px solid;
	}
	</style>	
	<body>
			<div id="container">
				<div id="header">导航图片</div>
				<div id="nav">
					<ul>
						<li class="nav_li"><a href="#" class="nav_href">返回首页</a></li>
						<li class="nav_li"><a href="#" class="nav_href">摇滚音乐</a></li>
						<li class="nav_li"><a href="#" class="nav_href">另类电影</a></li>
						<li class="nav_li"><a href="#" class="nav_href">联系我们</a></li>
						<li class="nav_li"><a href="#" class="nav_href">网站导航</a></li>
						<!--一个css可以加载多个类，用空格隔开，这样就会继承两个类的属性-->
						<li class="nav_li nav_last"><a href="#" class="nav_href">网站帮助</a></li>
					</ul>
				</div>
				<div id="content">
					<div id="content_left">
						<dl class="article_list index_l_list">
						<dt><span>通知公告</span></dt>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						</dl>
						<dl class="article_list index_l_list">
						<dt><span>交流互动</span></dt>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						</dl>
						<dl class="article_list index_l_list">
						<dt><span>额外信息</span></dt>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						</dl>
					</div>
					<div id="content_right ">
						<dl class="article_list index_r_list">
						<dt><span>通知公告</span></dt>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						</dl>
						<dl class="article_list index_r_list">
						<dt><span>通知公告</span></dt>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						</dl>
						<dl class="article_list index_r_list">
						<dt><span>通知公告</span></dt>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						</dl>
						<dl class="article_list index_r_list">
						<dt><span>通知公告</span></dt>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						<dd><a href="#"  class="article_href">关于西游记读后感的书写格式通知</a></dd>
						</dl>
					</div>
				</div>
				<div id="border">
					&copy;CopuRight 2014/10/27
				</div>
			</div>
	</body>
</html>

庄公梦蝶
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学习笔记HTML-css-JS.zip
03-17
学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.z
margin:0px auto;
Noahの梦想
10-30 930
auto是页面左右留白相同的意思上下留白为0px,左右适当留白切空间相等默认情况下,内部div是在外部div的左上方当设置了margin:0px auto;后内部div就会在div居中...
min-width、max-width和margin:0 auto
少油少盐不要辣
01-25 1213
div{ min-width:1100px; max-width:1920px; margin:0 auto; } 上述代码可以保证网页在宽度超过1920px的浏览器窗口中居中显示，但是也会在小于1100px的浏览器窗口中有横向滚动条 ...
css
u014015448的专栏
03-22 489
自己刚刚做的，还不完善，只是基础！ #top{width:1000px; height:150px; margin:5px; background-color:#00C; } #menue{width:1000px; height:50px; margin:5px; background-color:#0F0; } #menue ul{width:1000px; mar
前端学习第十四天
qq_41550419的博客
04-15 63
【代码】前端学习第十四天。
css入门学习day04笔记
Perryc的博客
08-08 147
css布局实践（二） 绝对定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绝对定位</title> <style> body { } .outer { background-color: #cc...
实用JQ实现简单的屏幕的弹幕效果「style type=“text/css“」 html, body { margin: 0px；
qq_36264753的博客
07-09 2502
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> html, body { margin: 0px; padding: 0px; width: 100%; .
CSS学习笔记（二）——CSS文本样式
今天怎么又下雨的博客
03-19 1072
颜色color 在CSS中，元素的前景色可以使用color属性来设置，在HTML表现中，前景色一般是元素文本的颜色，另外color还会应用到元素的所有边框，除非被其它边框颜色属性所覆盖。 其基本语法如下： color : color_name | HEX | RGB | RGBA | HSL | HSLA | transparent ; 说明： color_name是颜色英文名称，例如gr...
CSS学习笔记-头条页面案例
qq_44653420的博客
12-05 741
头条页面 实现步骤-顶部和导航条 创建一个html文件 创建顶部div标签 通过三个a标签实现登录、注册、更多三个超链接 设置顶部样式（背景色 行高 文字对齐方式 字体大小 超链接颜色 悬浮 和去除下划线） 创建导航条div标签 通过img标签引入logo图片 通过两个a标签实现首页、科技两个超链接 通过font标签实现正文两个字的显示 设置导航条的样式（行高） 实现步骤-左侧分享、中间正文、右侧广告图片 创建左侧分享div标签 通过a标签嵌套img标签和span标签实现图片和文字的显示 设置左侧分享
CSS学习笔记-07-字体与背景
weixin_53249168的博客
12-03 323
fontawesome使用步骤：1、下载https://fontawesome.com/2、解压3、将css和webfonts移动到项目中4、将alll.css引入到网页中5、使用图标字体直接通过类名来使用图标，通过伪元素来设置图标字体行高（line height）行高指的是文字占有的实际高度可以通过line-height来设置行高行高可以直接指定一个大小（px em）也可以直接为行高设置一个整数​ -如果是一个整数的话，行高将会是字体的指定的倍数通常将行高和盒子高设置为一样的值，使单行文字垂直居中
前端学习笔记-黑马程序员CSS
01-09
前端学习笔记-黑马程序员CSS
Vue-router学习笔记
02-24
学习Vue的必备技能，必须熟练使用Vue-router，能够在实际项目中运用。VueRouter是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表；模块化的、...
html.css.javascript-学习笔记
03-23
html.css.javascript-学习笔记
CSS学习笔记---CSS3的新特性
wykkk1的博客
01-19 1061
一、CSS3新增选择器 1.1 属性选择器 类选择器和属性选择器 伪类选择器 权重都是 10 <style> /* 必须是input 但是同时具有 value这个属性 选择这个元素 [] */ /* input[value] { color:pink; } */ /* 只选择 type =text 文本框的input 选取出来 */ input[type=text] { .
移动端/PC端布局-flex布局
微木
05-22 132
flex布局详解
CSS常用的两种定位方式
代码有点萌的博客
05-23 370
relative定位是相对自身原始位置进行偏移。absolute定位是相对于最近的已定位（relativeabsolutefixedsticky）祖先元素进行偏移。如果没有已定位的祖先元素，则相对于初始包含块（通常是视口）进行定位。相对自身原始位置进行偏移。元素仍占据原始位置的空间。用于微调元素位置，不会影响其他元素的布局。脱离文档流，相对于最近的已定位祖先元素进行定位。不占据空间，其他元素会忽略它的位置。用于精确定位元素，通常与relative定位的祖先元素配合使用。
SCSS基本使用
最新发布
mj256115的博客
05-23 413
SCSS（Sassy CSS）是一种 CSS 预处理器，它是 CSS 语言的一个扩展，增加了变量、嵌套规则、混合（mixins）、函数等功能，使得编写 CSS 更加高效和易于维护。SCSS 代码最终会被编译成标准的 CSS 代码。
CSS学习笔记：空间转换——使用transform属性实现元素在空间内的位移、旋转、缩放等效果
lbcbjtlhmjq的博客
05-20 204
使用perspective属性实现透视效果什么是透视：近大远小，近实远虚说明：perspective的值指的是透视距离，透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
css左右滚动互不影响
this__valve的博客
05-20 244
滚动条
css-in-css
02-05
1. CSS Modules：CSS Modules是一种使用Webpack等构建工具实现的CSS-in-CSS方案。它通过给每个CSS类名添加唯一的哈希值，实现了样式的局部作用域。在使用时，可以通过import语法引入CSS文件，并在组件中使用对应的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值