格式与布局

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="/gaofangquan/p/###" 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>

  

posted on 2017-06-10 19:57 superficial。 阅读(...) 评论(...) 编辑 收藏

导航

统计

公告