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;
}