个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我想创建一个带有顶部横幅、水平导航栏和两栏(一栏用于文章，一栏用于侧链)的页面。但是，我遇到了一些问题:
这是 HTML 代码:
<html>
<head>
<title> Green Tea vault </title>
<link type="text/css" rel="stylesheet" href="css/stylesheet.css"/>
</head>
<body>
<section id="maincontent">
<div id="banner">
<img src="image/Greentea.jpg"/>
<ul id="nav">
<li> <a href ="Home.html"> Home </a></li>
<li> <a href ="Cheesecakes.html"> Cheesecakes </a></li>
<li> <a href ="Cakes.html"> Cakes </a> </li>
<li> <a href ="Drinks"> Drinks </a> </li>
</ul>
</div>
<h1> Home of all the matcha goodness! </h1>
<p>
<iframe width="500" height="315" src="http://www.youtube.com/embed/lcu2op4x00s" frameborder="0" allowfullscreen></iframe>
</p>
<div id="maincolumn">
Match Tiramisu recipes
From: http://www.ohhowcivilized.com/blog/2013/6/20/step-by-step-recipe-matchamisu-matcha-green-tea-tiramisu.html
INGREDIENTS
Matcha Syrup
3/4 cup water
1/2 cup sugar
1 tablespoon matcha (I also like Aiya's Cooking Grade matcha.)
DIRECTIONS
1. Making the matcha syrup first, bring water (3/4 cup) and sugar (1/2 cup) to a boil. Simmer for 3 minutes and remove from heat. <br>
2. Let cool, then sift in the matcha (1 tablespoon). Whisk well. (This can be made up to a day before.) <br>
Now, moving onto the matcha sponge cake. <br>
...
Assembling the Matchamisu. <br>
16. In a small glass (we used these mini cups), put in a piece of the sponge cake. (We cut a smaller piece of cake to fit the tapered bottom of the cup.) <br>
17. Spoon on the matcha syrup over the sponge cake, making sure the sponge cake gets soaked with the syrup. Dollop the matcha cream on top. Layer on another piece of sponge cake. Pour on matcha syrup to the top level sponge cake. Add the final layer of matcha cream and dust with matcha. <br>
</id>
<div id="sidebar">![enter image description here][1]
<ul>
<li> <a href ="Japanrecipes.html"> Japan Recipes </a> </li>
<li> <a href="Koreanrecipes.html"> Korean Recipes </a> </li>
<li> <a href="Parisrecipes.html"> Paris Recipes </a> </li>
<li> <a href="Germanrecipes.html"> German Recipes </a> </li>
</ul>
</div>
</section>
</body>
</html>
CSS:
img {
width:500;
height:200;
border: solid green;
}
ul #nav {
list-style-type:none;
margin:0;
padding:0;
}
li {
display:inline;
}
a, a:visited {
display:block;
/*width:60;*/
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
}
a:hover, a:active {
background-color:#7A991A;
}
#maincontent {
background-color:peach;
position: absolute;
left:50%;
width: 300px;
margin-left: -150px;
}
#maincolumn {
float: left;
width: 90%;
margin-right: 3%; /add space between column/
margin-left: 3%;
}
#sidebar {
position: absolute;
top: 370px;
right: 0px;
width: 10%;
background: #EEE;
}
最佳答案
快速解决您的导航栏问题，但请考虑验证您的 HTML 和 CSS!
这样你的菜单就会水平显示:
a, a:visited {
display:inline;
width: 100%;
text-decoration: none;
text-transform: uppercase;
color: #000000;
}
我在以下方面实现了您想要实现的目标:
HTML
<!DOCTYPE html>
<head>
<title>Green Tea vault</title>
<link type="text/css" rel="stylesheet" href="css/stylesheet.css" />
</head>
<body>
<section id="maincontent">
<div id="banner">
<img src="image/Greentea.jpg" alt="banner" />
<ul id="nav">
<li> <a href="Home.html"> Home </a>
</li>
<li> <a href="Cheesecakes.html"> Cheesecakes </a>
</li>
<li> <a href="Cakes.html"> Cakes </a>
</li>
<li> <a href="Drinks"> Drinks </a>
</li>
</ul>
</div>
<h1> Home of all the matcha goodness! </h1>
<p>
<iframe width="500" height="315" src="http://www.youtube.com/embed/lcu2op4x00s" allowfullscreen></iframe>
</p>
<div id="maincolumn">
<div class="left-column">Match Tiramisu recipes From: http://www.ohhowcivilized.com/blog/2013/6/20/step-by-step-recipe-matchamisu-matcha-green-tea-tiramisu.html INGREDIENTS Matcha Syrup 3/4 cup water 1/2 cup sugar 1 tablespoon matcha (I also like Aiya's Cooking Grade matcha.) DIRECTIONS 1. Making the matcha syrup first, bring water (3/4 cup) and sugar (1/2 cup) to a boil. Simmer for 3 minutes and remove from heat.
<br>2. Let cool, then sift in the matcha (1 tablespoon). Whisk well. (This can be made up to a day before.)
<br>Now, moving onto the matcha sponge cake.
<br>... Assembling the Matchamisu.
<br>16. In a small glass (we used these mini cups), put in a piece of the sponge cake. (We cut a smaller piece of cake to fit the tapered bottom of the cup.)
<br>17. Spoon on the matcha syrup over the sponge cake, making sure the sponge cake gets soaked with the syrup. Dollop the matcha cream on top. Layer on another piece of sponge cake. Pour on matcha syrup to the top level sponge cake. Add the final layer of matcha cream and dust with matcha.
<br>
</div>
<div class="right-column">
<div id="sidebar">
<ul>
<li> <a href="Japanrecipes.html"> Japan Recipes </a>
</li>
<li> <a href="Koreanrecipes.html"> Korean Recipes </a>
</li>
<li> <a href="Parisrecipes.html"> Paris Recipes </a>
</li>
<li> <a href="Germanrecipes.html"> German Recipes </a>
</li>
</ul>
</div>
</div>
</div>
</section>
</body>
</html>
CSS
img {
width:500px;
height:200px;
border: solid green;
}
#nav {
list-style-type:none;
margin:0;
padding:0;
width: 100%;
}
li {
display:inline;
}
a, a:visited {
display:inline;
width: 100%;
text-decoration: none;
text-transform: uppercase;
color: #000000;
}
a:hover, a:active {
background-color:#7A991A;
}
#maincontent {
background-color:beige;
position: absolute;
left:50%;
width: 500px;
margin-left: -150px;
}
#maincolumn {
float: left;
width: 90%;
margin-right: 3%;
/*add space between column*/
margin-left: 3%;
}
#sidebar {
background: #EEE;
}
.left-column {
width: 70%;
float: left;
}
.right-column {
width: 25%;
float: left;
}
关于css - 使用显示 :inline to create horizontal bar，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22791112/
26
4
0
假设有一个创建用户的操作。如果存在指定的电子邮件或用户名，此操作可能会失败。如果它失败了，则需要确切地知道原因。在我看来，有三种方法可以做到这一点，我想知道是否有明显的赢家。 所以，这是一个类用户:
var obj1 = Object.create; console.log(typeof obj1); var obj2 = Object.create(null); console.log(type
I am getting this error after running npm run build yield User.create({^在运行NPM Run Build Year Use
我应该为其他人将从中继承的第一个父对象传递哪个参数，哪个参数更有效 Object.create(Object.prototype) Object.create(Object) Object.creat
我正在尝试使用 JDBC(最新版本)设置 SQL Server 2008 数据库。 我有一个我想一起执行的 setup sql 命令列表: 基本上我做的是: connection.setAutoCom
我正在尝试创建一个 CloudFormation 模板来创建一个 Auto Scaling 组，以便我可以从中启动 2 个实例。 我已经创建了 Auto Scaling 组，但我不知道如何编写用于从
我正在创建我的第一个WordPress网站。我已经在我的网站上安装了Elementor Pro插件。随之而来的一个有利因素是“循环旋转木马”。。。当我把它添加到我的页面时，一切似乎都在工作，但是当我点
create-react-app error 我从终端运行yarn start时收到此错误消息...我尝试了sudo killall node和许多其他过程来清除i-node却没有成功。 我也将我的c
在 CRM 中，当我尝试设置工作流程时，我可以选择与某个实体的创建时间相关的超时。涉及三个字段。 记录创建于 创建于 修改时间 虽然最后一个很明显，但我看不出其他两个之间有任何逻辑上的区别。 最佳答案
我在一次采访中被问到这个问题。我无法回答。 "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ] 我可以
这是一个 Rails 新手问题: 当我在模型上调用 create() 时，它会绕过关联的 Controller create 操作吗？ 例如，这没有命中我的标签 Controller #create
我不明白这两种特权之间的区别。 我找到了这两种解释，但对我没有帮助。 CREATE TABLE -> Enables a user to create a table owned by that us
我是 SharePoint 工作流的新手。 创建新任务并分配 TaskId 时，我有两个选项: 创建一个新字段来保存 TaskId 创建一个新属性来保存 TaskId。 新属性是一个依赖属性。 我的问
我突然注意到我们的代码库中有一个TDataModuleTestExchange(nil)“构造函数调用”: procedure TDialoogConfigExchange.ButtonTestCli
我有一个具有 TComponent 变量的单元，我在单元初始化时创建此组件，如下所示: var XComp: TComponent; . . . . initialization begin
Composer 是否提供了更新项目创建时使用的包的方法？即，如果我使用以下内容创建一个新的 Laravel 项目 composer create-project --prefer-dist lara
在 Hibernate 中，如果我们将 hbm2ddl.auto 设置为 create/create-drop ，那么它将在启动时删除旧模式并创建新模式。这意味着，它也会删除数据？..我的疑问是，如果
我使用了 create an Automated Build 中的此链接 ( this guide ) . 浏览器错误控制台显示: https://hub.docker.com/v2/reposito
我已经搜索了 msdn 并没有找到答案。我应该知道有什么区别吗？ 如果真的没有区别，那么为什么会存在这种冗余？ --SQL Server Stored Procedure Syntax CREATE
我有以下内容: var CardViewModel = function (data) { ko.mapping.fromJS(data, {}, this); this.editin
我是一名优秀的程序员,十分优秀！