2016.10.31学习笔记（上）

<!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-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
	<style>
    	*{ margin:0px auto; padding:0px}/*把所有元素都清0 所有DIV都居中 每个页面都要写*/
		
		#a1{ width:100px; height:30px; color:#603; text-decoration:none;}/*打掉超链接下面的下划线*/
		
		#a2{ width:300px; /*宽度*/
			 height:300px; /*高度*/
			 background-color:#0F6;/*背景色*/ 
			 color:blue;
			 text-align:center;
			 vertical-align:middle;/*垂直居中要看行高*/
			 line-height:200px;			 }
		
		#anniu{ width:140px; height:40px;
			  background-color:#30F;
			  color:#FFF;
			  font-size:14px;
			  text-align:center;/*水平对齐方式*/
			  vertical-align:middle;/*垂直对齐方式要跟行高一起用*/
			  line-height:40px;}	/*行高配合垂直对齐方式一起使用 数值是height的值*/
			 
		#wai{
			 width:300px; height:300px;
			 background-color:#00F;}
		#nei{ width:180px; height:160px;/*原值是宽200px 高200px*/
			 background-color:#F00;
			 margin:20px 30px 20px 30px;/*外边距数值一次是上右下左顺时针方向*/
			 padding:40px 0px 0px 20px;}/*内边距如果加了内边距该元素也会相应变大宽和高要减去相应的大小*/
			 
		#li	{ width:100px; height:100px;
			  background-color:#0F0;} 
			
		#a4{ color:#FFF;
			 text-decoration:none;}	 
			 
			 
			 
			 
			 
    </style>
	
</head>

<body>
	<div style="width:600px; height:300px; background-color:#03F; 
    background-image:url(%E6%96%A9%E9%BE%8D-%E6%9C%80%E6%96%B0%E7%8B%AC%E5%AE%B6%E8%BD%BB%E5%BE%AE%E5%8F%98%C2%B7%E6%97%A0%E7%89%B9%E6%88%92%C2%B7%E9%87%8D%E9%87%91%E5%B9%BF%E5%91%8A%C2%B7%E6%BF%80%E6%83%85%E7%81%AB%E7%88%86%C2%B7%E6%95%A3%E4%BA%BA%E5%A4%A9%E5%A0%82_files/1.jpg); background-repeat:no-repeat; background-position:left 20px top 30px; background-size:250px 200px ">测试文字</div><!--background-image 背景图 background-repeat:no-repeat;背景图平铺方式 
    background-position:left 20px top 30px;背景图片在背景色中的位置 background-size:250px 200px背景图片大小-->
    
    <div style=" font-family:微软雅黑; font-size:34px; font-weight:bold; font-style:italic; color:#C00; text-decoration:underline ">控制字体</div><!--font-family:微软雅黑;字体样式font-size:34px;字体大小网页字体常用大小12像素 14像素 16像素 font-weight:bold;字体加粗 font-style:italic;字体倾斜 color:#C00;字体颜色 text-decoration:underline在字体上中下加横线-->
    
    <a id="a1" href="http://www.baidu.com">百度一下</a>
    
    <div id="a2">测试</div>
	
    
    <div id="anniu"><a id="a4" href="http://www.baidu.com">百度一下</a></div>
    
    <p style="text-indent:50px">呵呵呵呵呵呵</p><!--style="text-indent:50px代表缩进50像素-->
    
    
    
    <div id="wai">
    		<div id="nei">
            	<div id="li">
                </div>
            </div>
    </div>
    
    <embed src='http://player.youku.com/player.php/sid/XMjI2NzgzMTky/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>

    


</body>
</html>
posted @ 2017-01-15 13:55 小太白阅读(161) 评论(0) 编辑收藏举报
小太白

2016.10.31学习笔记（上）

公告
