前端学习_.header .logo{ float: left; width: 277px; height: -优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42272360/article/details/81232941

博客介绍了CSS相关知识，包括类上样式、id上行为，指出文本相关的color、text - 开头等属性可继承，还讲解了层叠性，通过具体选择器示例说明，强调注意#的中英文，最后提到仿照北大网站做了一个页面。

类上样式，id 上行为

<!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” xml:lang=“en”>
<head>
   <meta http-equiv=“Content-Type” content= “text/html;charset = utf-8”>
   <title></title>

   <style type="text/css">
   	  p{
         height: 60px;
         width: 60px;
         background-color: orange;
        }
        .pp2{
         border: 10px solid red;
        }
   </style>
   
</head>
<body>
	<p>段落1</p>
	<p class ="pp2" id="hezi">段落2</p>
	<p>段落3</p>

   <script type="text/javascript">
      var box = document.getElementById("hezi");

      var a = 0;
      setInterval(function(){
         a += 10;
         box.style.marginLeft = a + "px";
      },30)
   </script>
</body>
</html>

哪些属性能继承？（关于文本）

color、 text-开头的、line-开头的、font-开头的。

3.层叠性

<!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” xml:lang=“en”>
<head>
   <meta http-equiv=“Content-Type” content= “text/html;charset = utf-8”>
   <title></title>

   <style type="text/css">
   	  #box1 .hezi2 p{
            color:red;
         }

        div div #box3 p{
            color:green;
        }

        div.hezi1 div.hezi2 div.hezi3 p{
            color:blue;
        }
         
   </style>
        
        
   
</head>
<body>
	<div class = "hezi1" id = "box1">
      <div class = "hezi2" id = "box2">
         <div class = "hezi3" id = "box3">
             <p>什么颜色</p>
</body>
</html>

主要是数选择器（顺序）。

＃box1 .hezi1 p{
color: red;
} 1个id选择器，1个类选择器，1个标签选择器 111

div div #box3 p{
color: green;
} 112错误103

div.hezi1 div.hezi2 div.hezi3 p{
color: blue;
} 034

注意#的中英文，否则会不起作用

4.自己做了一个仿照北大网站的页面

<!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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
            margin:0;
            padding:0;
        }
		.header{
			width:970px;
			height: 103px;
			
			margin :0 auto;
		}
		.header .logo{
			float: left;
			width: 277px;
			height: 103px;
			background-color: red;
		}
		.header .language{
			float: right;
			width: 137px;
			height: 49px;
			background-color: green;
			margin-bottom: 8px;
		}
		.header .nav{
			float: right;
			width: 679px;
			height: 46px;
			background-color: green;

		}
		

		.content{
			width: 970px;
			height: 435px;
			
			margin :0 auto;
			margin-top: 10px;

		}
		.content .banner{
			float: left;
			width: 310px;
			height: 435px;
			background-color: orange;

		}
		.content .rightPart{
			float: left;
			width: 650px;
			height: 435px;
			margin-left: 10px;

		}
		.content .rightPart .main{
			float: left;
			width: 650px;
			height: 400px;
			

		}
		.content .rightPart .link{
			float: left;
			width: 650px;
			height: 25px;
			background-color: red;
			margin-top: 10px;
		}


		.content .rightPart .main .news{
			float: left;
			width: 450px;
			height: 400px;
			
		}
		.content .rightPart .main .hotnews{
			float: left;
			width: 190px;
			height: 400px;
			background-color: pink;
			margin-left: 10px;
			
		}

		.content .rightPart .main .news .news1{
			float: left;
			width: 450px;
			height: 240px;
			background-color: skyblue;
			
		}
		
		.content .rightPart .main .news .news2{
			float: left;
			width: 450px;
			height: 110px;
			background-color: skyblue;
			margin-top: 10px;
			

		}
		.content .rightPart .main .news .news3{
			float: left;
			width: 450px;
			height: 30px;
			background-color: skyblue;
			margin-top: 10px;

		}
		
		

		.footer{
			
			width: 970px;
			height: 35px;
			background-color: blue;
			margin :0 auto;
			margin-top: 10px;

		}

	</style>
</head>
<body>
	<div class ="header">
		<div class = "logo">logo</div>
		<div class = "language">语言选择</div>
		<div class = "nav">导航</div>
		
	</div>

	<div class ="content">
		<div class="banner">大广告</div>
		<div class="rightPart">
			<div class ="main"> 
				<div class = "news">
					<div class ="news1">新闻</div>
					<div class ="news2">通知公告</div>
					<div class ="news3">校内信息</div>	
				</div>
				<div class ="hotnews">热点</div>
			</div>
			
			<div class="link">底部链接</div>
		</div>

	</div>

	<div class ="footer">尾部</div>

</body>
</html>