SOURCE

console 命令行工具 X clear

                    
>
console
<body>
  <nav style="background-color:#b22222;height:70px;">
<div class="m1">
  <ul>
    <li style="width:30px;height:70px;"></li>
    <li><a style="background-color:#008800" href="#">首页</a></li>
    <li class="dropdown"><a class="dropbtn">C/C++</a>
     <div class="dropdown-content">
    <a  href="#s1">语法篇</a>
    <a  target=_self href="#s2">实践篇</a>
    <a  href="#s3">示例代码</a>
  </div></li>
    <li class="dropdown"><a class="dropbtn" href="#">C#</a>
      <div class="dropdown-content">
    <a href="http://www.runoob.com">语法篇</a>
    <a href="http://www.runoob.com">WinForm</a>
    <a href="http://www.runoob.com">Web</a>
  </div></li>
    <li class="dropdown"><a class="dropbtn" href="#">SQL Server</a>    
     <div class="dropdown-content">
    <a href="http://www.runoob.com">语法篇</a>
    <a href="http://www.runoob.com">WinForm</a>
    <a href="http://www.runoob.com">Web</a>
  </div></li>
    <li class="dropdown"><a class="dropbtn" href="#">Html</a>
     <div class="dropdown-content">
    <a href="http://www.runoob.com">语法篇</a>
    <a href="http://www.runoob.com">WinForm</a>
    <a href="http://www.runoob.com">Web</a>
  </div></li>
    <li class="dropdown"><a class="dropbtn" href="#">CSS</a>
     <div class="dropdown-content">
    <a href="http://www.runoob.com">语法篇</a>
    <a href="http://www.runoob.com">WinForm</a>
    <a href="http://www.runoob.com">Web</a>
  </div></li>
  </ul>
</div>
    </nav>
  <div id="s1"class="p2">
    
    <p style="font-size:20px; text-align:center;">
    C/C++语法篇
    </p>
        <hr/>
    <div style="float:left;">
    <p>介绍了函数、指针、结构体、类等基本语法,</p>
     <p> 也介绍了“传值与传地址”、“字符串”、“深拷贝</p>
     <p> 与浅拷贝”、 “动态创建对象”、“安全地使用指针”</p>
      <p>、“面向对象编程思想”等核心概念。</p>
    </div>
  </div>
  <div class="p2">
    
    <p id="s2"style="font-size:20px;text-align:center;">
    C/C++实践篇
    </p>
        <hr/>
    <div style="float:left;">
      <p>收录一些未能在语法篇中介绍的语法和技术:单步调试技术,动态库与静态库,位运算, 排序与查找算法,函数指针与回调机制,以及一些杂项技术。</p>
    </div>
  </div>
   <div class="p2">
    
    <p id="s3"style="font-size:20px;text-align:center;">
    C/C++示例代码
    </p>
        <hr/>
    <div style="float:left;margin:0 auto;">
     <ul>
       <li>
         <a>scanf&printf</a>
       </li>
      </ul>
    </div>
  </div>
</body>
.p1{
  
}
.p2{
  background-color: #f1f1f1;
  width: 550px;
 	height:500px;
  border: 1px solid black;
  padding: 0px;
  margin:50px auto;
}
hr{
  width:450px;
}
body{

  background-color:white;
}
ul
{
	list-style-type:none;
  margin:0;
  padding:0;
}
.m1 a
{
  text-decoration:none;
  padding:20px;
	display:block;
	width:90px;
  height:30px;
  color:white;
	background-color:#b22222;
}
.dropdown-content a{
  background-color:white;
}
a:hover{background-color:#cc0000;}
li{
  font-size:20px;
 float:left;
}
.dropbtn {
 	padding:20px;
	display:block;
	width:90px;
 
  font-size:20px;
  color:white;

  border: none;
  cursor: pointer; 
}
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color:#f9f9f9;
    min-width: 90px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}