如何使用html / css创建侧边栏
我目前正在为学校做一个项目，但我在构建网站和创建一个加载到每个页面的静态侧边栏时遇到了麻烦。
最终产品应如下所示。我正努力在左右两侧拿到这两个侧边栏。
我会将我的HTML和CSS代码粘贴到
下面
/*
Name:
Date: 1/28/2018
*/
@charset "utf-8";
@import url("mp_layout.css");
html {
height: 100%;
font-size: 14px;
background-color: rgb(255, 255, 255)
}
img, object, embed, video {
max-width: 100%;
}
body {
font-family: Verdana, Geneva, sans-serif;
margin-left: auto;
margin-right: auto;
width: 81.9%;
padding-left: 4.55%;
padding-right: 4.55%;
clear: none;
float: none;
min-height: 100%;
}
h1 {
font-weight: normal;
}
h2 {
font-weight: normal;
}
Nav a{
text-decoration: none; /*removes underlining */
}
body > header {
background-color: rgb(206, 206, 206)
}
nav {
width: 25%;
float: left;
margin: 6% 2% 0% 0%;
}
article {
width: 73%;
float: left;
font-size: 0.8em;
text-align: left;
}
nav ul li {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 0.8em;
}
nav ul li a {
color: black;
text-decoration: none;
display: block;
margin-bottom: 8%;
padding-bottom: 5px;
padding-top: 5px;
}
nav ul li a:visited {
color: rgb(167, 175, 28);
}
nav ul li a:hover {
background-color: rgb(217, 217, 217);
color: rgb(167, 175, 28);
}
nav ul li a:focus {
outline: thin dotted;
color: rgb(167, 175, 28)
}
nav ul li a:hover, nav ul li a:active {
outline: 0;
color: rgb(167, 175, 28)
}
body h1 {
margin: 1%;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 1.5em;
}
body article h1 {
font-size: 1.15em;
}
header img {
float: none;
width: 96%;
margin: 2% 2% 0% 2%;
}
body p, body address {
margin: 3.5% 1%;
font-size: 1em;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-style: normal;
height: 100%;
}
dl {
margin-left: 2%;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}
dt {
display: block;
margin: 0;
text-indent: 0;
font-weight: bold;
border-bottom: 1px solid rgba(168, 168, 168,1.00);
}
dd {
display: block;
margin: 0 0 3% 3%;
text-indent: 0;
}
footer {
text-align: center;
font-size: 0.8em;
color: black;
background-color: rgb(194, 194, 194);
margin-top: 4%;
border-top: 3px outset #cf7b79;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
clear: both;
padding-bottom: 1px;
padding-top: 1px;
}
article aside h1 {
display: none;
}
article div {
border-bottom: 1px solid rgb(151, 151, 151);
}
article div:first-of-type {
margin-top: 30px;
}
article div h1 {
font-size: 1em;
font-weight: bold;
}
article p, article address {font-family: "Times New Roman", Times, serif;}
/* =============================================
Tablet layout styles used by devices
481px to 768px and cascaded to larger
devices.
=============================================
*/
@media only screen and (min-width: 481px) {
html, body {
font-size: 16px;
}
body {
width: 89.9%;
padding-left: 1.55%;
padding-right: 1.55%;
clear: none;
float: none;
margin-left: auto;
}
header h1 {
font-size: 2.2em;
}
body article h1 {
font-size: 1.75em;
}
article {
width: 94%;
float: none;
margin: 0px auto;
}
dl#ct_locations {
width: 57%;
margin: 0px 0px 0px 20px;
}
dl {
width: 90%;
margin: 0 auto;
text-align: left;
}
article img {
float: right;
width: 40%;
margin: 0% 2% 2% 2%;
}
nav ul li {
display: table-cell;
width: 15%;
text-align: center;
margin-right: 2%;
border: thin solid rgba(127,96,17,1.00);
border-collapse: collapse;
}
nav ul li a {
margin-bottom: 0;
}
nav {
display: table;
width: 96%;
margin: 0 auto;
float: none;
}
nav ul {
display: table-row;
margin: 0;
}
nav ul li:last-of-type {
margin-right: 0%;
}
article ul {
margin-top: -20px;
}
article aside {
float: left;
margin: 0 0 10px 10px;
padding: 5%;
border: 1px solid rgb(206, 206, 206);
width: 15%;
font-size: 0.9em;
background-color: #cecece;
}
article aside h1 {
display: block;
font-size: 1em;
text-align: center;
border-bottom: 1px solid rgb(111, 111, 111);
}
article div {
float: left;
width: 30.3%;
margin: 0% 1% 2% 1%;
border: 1px solid rgb(151, 151, 151);
}
article div:first-of-type {
margin-top: 0%;
}
article div h1 {
text-align: right;
font-weight: normal;
font-size: 1em;
border-bottom: 1px solid rgb(151, 151, 151);
background-color: #ffdcdb;
}
article div p {
font-size: 0.85em;
text-align: left;
}
footer {
font-size: 0.9em;
}
}
/* =============================================
Desktop layout styles used by devices
769px and larger.
=============================================
*/
@media only screen and (min-width: 769px) {
html, body {
font-size: 20px;
}
html {
background-color: rgb(255, 255, 255); /*change browser background color */
margin: 0px auto;
}
body {
width: 88.2%;
max-width: 900px;
padding-left: 0.9%;
padding-right: 0.9%;
margin: 0px auto auto auto;
clear: none;
float: none;
background-color: white; /* <-- Change body background color */
-moz-box-shadow: rgba(31, 61, 31, 0.9) 20px 0px 25px, rgba(31, 61, 31, 0.9) -20px 0px 25px;
-webkit-box-shadow: rgba(31, 61, 31, 0.9) 20px 0px 25px, rgba(31, 61, 31, 0.9) -20px 0px 25px;
box-shadow: rgba(31, 61, 31, 0.9) 20px 0px 25px, rgba(31, 61, 31, 0.9) -20px 0px 25px;
}
article div h1 {
font-size: 1.1em;
}
article div p {
font-size: 0.95em;
}
}<html>
<head>
<!-- - 1/15/2017 -->
<title>Mobile Panini</title>
<meta charset="utf-8" />
<meta name="keywords" content="Italian, Mobile, food, Charlotte" />
<link href="mp_styles.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Limelight" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<a href="mp_index.html"><img src="banner.png" alt="Mobile Panini" /></a>
<nav>
<ul>
<li><a href="mp_index_txt.html">Home</a></li>
<li><a href="mp_courses_txt.html">Courses</a></li>
<li><a href="mp_about_txt.html">About</a></li>
<li><a href="mp_terms_txt.html">Terms</a></li>
<li><a href="mp_feedback_txt.html">Feedback</a></li>
<li><a href="mp_help_txt.html">Help</a></li>
</ul>
</nav>
</header>
<article>
<h1>Child & Youth Care</h1>
<img src="mp_photo1.png" alt="" />
<p><strong>Mobile Panini</strong> is the culmination of the dream of Antonio and Carmen
Dolcini, who came to America looking to serve people the
authentic recipes learned from their Sicilian family.</p>
<p>Antonio began work as a child in his grandmother's deli where he
learned the age-old secrets of Sicilian cooking. He refined his
technique at the Culinary Institute of Milan. His younger brother,
Carmen, with no less of a love for cooking and good food, also
worked in the deli and became well-acquainted with the open-air
fresh food markets of his home town. Carmen too, is a proud
graduate of the Culinary Institute of Milan.</p>
<p>Now you can enjoy what they have learned and mastered, right outside
your door; but with no compromises in freshness or delicacy of preparation.
We've partnered with <em>Curbside Thai</em> to bring you the finest cuisine on
four wheels - from the East and the West!</p>
<p> Phone: <a href="tel:+1 (704) 555-2188" >+1 (704) 555-2188 </a></p>
<p>E-mail: <a href="mobilepanini@panini.com" >mobilepanini@panini.com</a></p>
</article>
<footer>
Douglas College : 700 Royal Avenue, New Westminster : 604-527-5400
</footer>
</body>
</html>
2 个答案:
答案 0 :(得分：0)
您要做的是将现有的<article>包裹在<div>列中，该right列将成为您的<div class="right">列（<div>）。然后，您希望在此包装器之前创建第二个left，它将成为<div class="left">列（20%）。这两列都应该在左侧 float ，并且应该设置 width 。对于较小的列，我的宽度为80%，对于较大的列，我的宽度为.left {
width: 20%;
}
.right {
width: 80%;
}
.left,
.right {
float: left;
}
。
/*
Name:
Date: 1/28/2018
*/
@charset "utf-8";
@import url("mp_layout.css");
html {
height: 100%;
font-size: 14px;
background-color: rgb(255, 255, 255)
}
img,
object,
embed,
video {
max-width: 100%;
}
body {
font-family: Verdana, Geneva, sans-serif;
margin-left: auto;
margin-right: auto;
width: 81.9%;
padding-left: 4.55%;
padding-right: 4.55%;
clear: none;
float: none;
min-height: 100%;
}
h1 {
font-weight: normal;
}
h2 {
font-weight: normal;
}
Nav a {
text-decoration: none;
/*removes underlining */
}
body>header {
background-color: rgb(206, 206, 206)
}
nav {
width: 25%;
float: left;
margin: 6% 2% 0% 0%;
}
article {
width: 73%;
float: left;
font-size: 0.8em;
text-align: left;
}
nav ul li {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 0.8em;
}
nav ul li a {
color: black;
text-decoration: none;
display: block;
margin-bottom: 8%;
padding-bottom: 5px;
padding-top: 5px;
}
nav ul li a:visited {
color: rgb(167, 175, 28);
}
nav ul li a:hover {
background-color: rgb(217, 217, 217);
color: rgb(167, 175, 28);
}
nav ul li a:focus {
outline: thin dotted;
color: rgb(167, 175, 28)
}
nav ul li a:hover,
nav ul li a:active {
outline: 0;
color: rgb(167, 175, 28)
}
body h1 {
margin: 1%;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 1.5em;
}
body article h1 {
font-size: 1.15em;
}
header img {
float: none;
width: 96%;
margin: 2% 2% 0% 2%;
}
body p,
body address {
margin: 3.5% 1%;
font-size: 1em;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-style: normal;
height: 100%;
}
dl {
margin-left: 2%;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}
dt {
display: block;
margin: 0;
text-indent: 0;
font-weight: bold;
border-bottom: 1px solid rgba(168, 168, 168, 1.00);
}
dd {
display: block;
margin: 0 0 3% 3%;
text-indent: 0;
}
footer {
text-align: center;
font-size: 0.8em;
color: black;
background-color: rgb(194, 194, 194);
margin-top: 4%;
border-top: 3px outset #cf7b79;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
clear: both;
padding-bottom: 1px;
padding-top: 1px;
}
article aside h1 {
display: none;
}
article div {
border-bottom: 1px solid rgb(151, 151, 151);
}
article div:first-of-type {
margin-top: 30px;
}
article div h1 {
font-size: 1em;
font-weight: bold;
}
article p,
article address {
font-family: "Times New Roman", Times, serif;
}
/* =============================================
Tablet layout styles used by devices
481px to 768px and cascaded to larger
devices.
=============================================
*/
@media only screen and (min-width: 481px) {
html,
body {
font-size: 16px;
}
body {
width: 89.9%;
padding-left: 1.55%;
padding-right: 1.55%;
clear: none;
float: none;
margin-left: auto;
}
header h1 {
font-size: 2.2em;
}
body article h1 {
font-size: 1.75em;
}
article {
width: 94%;
float: none;
margin: 0px auto;
}
dl#ct_locations {
width: 57%;
margin: 0px 0px 0px 20px;
}
dl {
width: 90%;
margin: 0 auto;
text-align: left;
}
article img {
float: right;
width: 40%;
margin: 0% 2% 2% 2%;
}
nav ul li {
display: table-cell;
width: 15%;
text-align: center;
margin-right: 2%;
border: thin solid rgba(127, 96, 17, 1.00);
border-collapse: collapse;
}
nav ul li a {
margin-bottom: 0;
}
nav {
display: table;
width: 96%;
margin: 0 auto;
float: none;
}
nav ul {
display: table-row;
margin: 0;
}
nav ul li:last-of-type {
margin-right: 0%;
}
article ul {
margin-top: -20px;
}
article aside {
float: left;
margin: 0 0 10px 10px;
padding: 5%;
border: 1px solid rgb(206, 206, 206);
width: 15%;
font-size: 0.9em;
background-color: #cecece;
}
article aside h1 {
display: block;
font-size: 1em;
text-align: center;
border-bottom: 1px solid rgb(111, 111, 111);
}
article div {
float: left;
width: 30.3%;
margin: 0% 1% 2% 1%;
border: 1px solid rgb(151, 151, 151);
}
article div:first-of-type {
margin-top: 0%;
}
article div h1 {
text-align: right;
font-weight: normal;
font-size: 1em;
border-bottom: 1px solid rgb(151, 151, 151);
background-color: #ffdcdb;
}
article div p {
font-size: 0.85em;
text-align: left;
}
footer {
font-size: 0.9em;
}
}
/* =============================================
Desktop layout styles used by devices
769px and larger.
=============================================
*/
@media only screen and (min-width: 769px) {
html,
body {
font-size: 20px;
}
html {
background-color: rgb(255, 255, 255);
/*change browser background color */
margin: 0px auto;
}
body {
width: 88.2%;
max-width: 900px;
padding-left: 0.9%;
padding-right: 0.9%;
margin: 0px auto auto auto;
clear: none;
float: none;
background-color: white;
/* <-- Change body background color */
-moz-box-shadow: rgba(31, 61, 31, 0.9) 20px 0px 25px, rgba(31, 61, 31, 0.9) -20px 0px 25px;
-webkit-box-shadow: rgba(31, 61, 31, 0.9) 20px 0px 25px, rgba(31, 61, 31, 0.9) -20px 0px 25px;
box-shadow: rgba(31, 61, 31, 0.9) 20px 0px 25px, rgba(31, 61, 31, 0.9) -20px 0px 25px;
}
article div h1 {
font-size: 1.1em;
}
article div p {
font-size: 0.95em;
}
.left {
width: 20%;
}
.right {
width: 80%;
}
.left,
.right {
float: left;
}
}请注意，您需要将所有这些规则放在媒体查询中，以用于仅限桌面的视图，以便列仍然可以在移动设备上堆叠。
这可以在以下内容中看到：
<body>
<header>
<a href="mp_index.html"><img src="banner.png" alt="Mobile Panini" /></a>
<nav>
<ul>
<li><a href="mp_index_txt.html">Home</a></li>
<li><a href="mp_courses_txt.html">Courses</a></li>
<li><a href="mp_about_txt.html">About</a></li>
<li><a href="mp_terms_txt.html">Terms</a></li>
<li><a href="mp_feedback_txt.html">Feedback</a></li>
<li><a href="mp_help_txt.html">Help</a></li>
</ul>
</nav>
</header>
<div class="left">
LEFT-HAND CONTENT
</div>
<div class="right">
<article>
<h1>Child & Youth Care</h1>
<img src="mp_photo1.png" alt="" />
<p><strong>Mobile Panini</strong> is the culmination of the dream of Antonio and Carmen Dolcini, who came to America looking to serve people the authentic recipes learned from their Sicilian family.</p>
<p>Antonio began work as a child in his grandmother's deli where he learned the age-old secrets of Sicilian cooking. He refined his technique at the Culinary Institute of Milan. His younger brother, Carmen, with no less of a love for cooking and good
food, also worked in the deli and became well-acquainted with the open-air fresh food markets of his home town. Carmen too, is a proud graduate of the Culinary Institute of Milan.</p>
<p>Now you can enjoy what they have learned and mastered, right outside your door; but with no compromises in freshness or delicacy of preparation. We've partnered with <em>Curbside Thai</em> to bring you the finest cuisine on four wheels - from the
East and the West!</p>
<p> Phone: <a href="tel:+1 (704) 555-2188">+1 (704) 555-2188 </a></p>
<p>E-mail: <a href="mobilepanini@panini.com">mobilepanini@panini.com</a></p>
</article>
</div>
<footer>
Douglas College : 700 Royal Avenue, New Westminster : 604-527-5400
</footer>
</body>public @interface TestA
{
String spel() default "";
}
@TestA( spel = "${some.value.in.app.yml}" )
public class Test {}
希望这有帮助！ ：）
答案 1 :(得分：0)
这是html
<!doctype html>
<html lang="en">
<head>
<title>Hello, world!</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="header">
<div class="header-inside">
</div>
</div>
<div class="sidebar">
<div class="navigation">
<ul>
<li>
<a href="#">
<span>First</span>
</a>
</li>
<li>
<a href="#mycollapsable" data-toggle="collapse">
<span>Second</span>
</a>
<div id="mycollapsable" class="collapse">
<ul>
<li>asjd</li>
<li>dasd</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="inner-content">
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>
CSS：
*{
direction:rtl;
}
body{
overflow:hidden;
width:100%;
height:100%;
padding-top:60px;
padding-right:200px;
background-color:#d8d8d8;
direction:rtl;
}
.container{
position:relative;
top:0px;
right:0px;
bottom:0px;
left:0px;
width:100%;
height:100%;
background-color:gray;
}
.header{
position:fixed;
left:0px;
right:0px;
height:50px;
top:0px;
margin-right:200px;
box-shadow:0 10px 10px gray;
}
.header .header-inside{
position:fixed;
top:0px;
left:0px;
width:100%;
height:50px;
margin-right:0px;
background-color:red;
}
.sidebar{
position: fixed;
right:0px;
width:200px;
height:100%;
top:0px;
bottom:0px;
background-color:blue;
}
.sidebar .navigation ul {
width:100%;
height:50px;
padding:0px;
margin:0px;
text-align:right;
list-style:none;
}
.sidebar .navigation ul li{
border-bottom:1px solid black;
height:60px;
}
.sidebar .navigation ul li a{
display:block;
width:100%;
height:100%;
text-decoration:none;
}
.sidebar .navigation ul li a:hover{
background-color:red;
}
.sidebar .navigation ul li a span{
position:absolute;
margin-top:5px;
margin-right:10px;
font-size:2em;
}
.inner-content{
position:relative;
box-sizing:border-box;
width:100%;
height:100%;
}
.inner-content .inner-content-2{
position:relative;
overflow:auto;
padding:25px;
width: 100%;
height: 900px;
overflow: scroll;
background-color:red;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？