格式与布局

最新推荐文章于 2025-04-29 16:14:29 发布

weixin_30781107

最新推荐文章于 2025-04-29 16:14:29 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gaofangquan/p/6979754.html

本文详细介绍了CSS样式的设置方法，包括背景、字体、边距等属性的使用技巧，并通过实例展示了流式布局的设计方法。

width
height
background color 背景颜色
background image 背景图片

background repeat 背景图片平铺
background position 背景图片位置 top bottom left right
background-attachment 背景图是否随着滚动条动
background-size：200px 200px 先写宽度的像素在写高度的像素

<style type="text/css">
   #a{
	   width:300px;
	   height:1200px;
	   background-color:#603;
	   background-image:url(t0135c8a98de3472211.jpg);
	   background-size:1000px 100px;
	   background-repeat:no-repeat;
	   background-position:center;
	   background-attachment:fixed;
	   
	   ;}
</style>
</head>

<body>
<div id="a"></div>

字体一般是 font开头

font-size 字体大小
font-family 字体
普通的正文一般为14像素页脚一般是12像素稍微大点的16，常用的三种
字体颜色为 color

           font-size:24px;
	   font-family:微软雅黑;
	   color:#0F3;
	   text-align:center;
	   line-height:1200px;
	   vertical-align:middle;

对齐方式：
text-align 水平对齐（文字）
vertical-align：垂直对齐方式 middle top bottom 这个对齐方式需要配合line-height（行高）使用

text-indent 首行缩进
<a href="###" style="text-decoration:none">shouye </a> 去掉下划线

外界与边框
margin 这个元素与外边之间的距离
margin-top 上边距 margin-left左边距 margin-bottom下边距 margin-right右边距
也可以 margin 像素像素像素像素；
padding 内边距代表与里边的距离
boder 边框 solid实线
border width 边框粗细
border style
border color
边框的大小式计算在边框里的

<style type="text/css">
*{margin:auto}
#b{ width:600px;
    height:400px;
	background-color:#3F3;
	padding:20px;
	border:#C66 solid 23px;}
#aa{ width:300px;
     height:100px;
	 background-color:#69F;}	
</style>
</head>

<body>
<div id="b">
 <div id="aa"></div>
 </div>

　list-style：none 没有列表样式

<style type="text/css">
#menu{list-style:none;
</style>
</head>
<body>
<ol id="menu">
 <li>yingyu</li>
 <li>yuwen</li>
 <li>shuxue</li>
</ol>

position 位置 absolute 绝对定位绝对定位是相对于浏览器的边界来说的
配合 top bottom left right使用
fixed 固定位置
relative 相对定位（相对于该元素本该出现的位置）
元素加了position后与原来的元素就不在同一层了
div居中可以 margin：0px auto；
流式布局：用来做布局页面
float：四个方向。

#menu{ width:800px;
       height:50px;
	}
.a{ width:100px;
        height:50px; 
        float:left;
		margin:10px;
		background-color:#0F0;
		text-align:center;
		line-height:50px;
		vertical-align:middle;
	}

</style>
</head>

<body>
<div id="menu">
     <div class="a">shouye</div>
     <div class="a">xinwen</div>
     <div class="a">wenwen</div>
     <div class="a">kankan </div>
     <div class="a">ditu</div>
     <div class="a">tieba</div>       
   </div>

转载于:https://www.cnblogs.com/gaofangquan/p/6979754.html