html和css移动到一边的麻烦

html和css移动到一边的麻烦,html,css,Html,Css,我正在制作这个演示站点,我在将页面移到章节段落旁边时遇到了问题。我可以将侧边移到右侧,但似乎有什么东西阻止侧边向上移动 请有人检查一下,指出我为防止这种情况而犯的任何保证金错误或其他错误 <!DOCUTYPE html> <html> <head> <title>The J-Prop Shop</title> <link href="jpsstyles.css" rel="stylesheets" t

我正在制作这个演示站点,我在将页面移到章节段落旁边时遇到了问题。我可以将侧边移到右侧,但似乎有什么东西阻止侧边向上移动

请有人检查一下,指出我为防止这种情况而犯的任何保证金错误或其他错误

   <!DOCUTYPE html>
<html>
    <head>
    <title>The J-Prop Shop</title>
    <link href="jpsstyles.css" rel="stylesheets" type="text/css" />

<!-- The J-Prop Shop Sample Page
     Author: Alejandro Muratalla
     Date: 8/20/18 -->



        <style>

        html{

             background-color: #f4f4f4;


        }

        #heading{

            color: #0095f0;
            font-family: cursive;
            font-weight: bold;
            wrap: no-wrap;
        text-size: 60px;
        text-shadow: 2px 2px #000000;

        }


        #heading2{


            font-family: cursive;
            font-weight: bold;
            wrap: no-wrap;
        text-size: 60px;


        }

        h2{
               font-family: cursive;
        }


        p{
          font-family : Lucida Grande , sans-serif; 
        }












        /*
   New Perspectives on HTML
   Tutorial 1
   Tutorial Case

   J-Prop Shop Style Sheet
   Author: David Vinet
   Date:   3/1/2014

   Filename:         jpsstyles.css
   Supporting Files: none

*/

/* Section Styles */

body {
margin: 0px auto;
padding: 0px;
line-height: 1.5em;
width: 98%;
max-width: 980px;
min-width: 250px;
font-family: Verdana, Geneva, sans-serif
}

header {
width: 100%;
text-align: center;
}

section {
width: 66%;
float: left;
}

aside {
width: 45%;
margin-top: 2em;
float: up;
border: 3px solid black;
background-color: rgb(255, 177, 255);
-moz-border-radius: 35px;
 border-radius: 35px;
box-shadow:10px 10px 20px #000;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow: 10px 10px 20px #000;
margin-left: 650px;
margin-top: 10px;
}

footer {
clear: left;
width: 100%;
text-align: center;
margin-top: 5px;
}

footer address {
width: 150%;
clear: left;
font-size: 0.8em;
font-style: normal;
font-variant: small-caps;
border-top: 1px solid black;
background-color: rgb(255, 177, 255);
}

/* Block Styles */
h1, h2, h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
}

header h1 {
margin: 1em 0em;
font-size: 2em;
}

h2 {
margin: 1em 0em;
font-size: 1.5em;
}

header h1 {
margin: 0px;
}

header h2 {
font-size: 1.2em;
font-style: italic;
margin: 0em;
padding-bottom: 0.5em;
border-bottom:1px black solid;
}

article p {
margin: 0.2em 0.9em 0.7em 0em;
}

article ul {
margin: 0.1em 0.8em 0.5em;
}

article ul li {
margin-right: 0.5em;
}

aside h2 {
text-align: center;
}

aside p {
font-size: 0.8em;
margin: 0px 0.7em;
}

aside blockquote {
margin: 1.2em 2em 0em 2em;
}

aside blockquote p {
margin: 0em 0em 2em;
font-size: 0.7em;
}





        </style>
    </head>
<body>
<header>

<hgroup>
<h1><img src="jpslogo.png" alt="The J-Prop Shop" align="center" id=/> </h1>
<h2 align="center" id="heading2">Quality Juggling and Circus Props</h2>
</hgroup>

</header>

<section>

<article>
    <h2>Welcome</h2>
    <p>If you're looking for high-quality, hand crafted
    juggling and curious products, the J-prop Shop is
    the store for you. I've designed and built props
    for the past 35 years, and my products have been
    used by professional entertainers and hobbyists
    through out the world. Our prices are reasonable
    and our quality is excellent.</p>
</article>

<article>
    <h2>Specials This Month</h2>
    <p>
    The following devil sticks are available at a
    special discount for the entire month of may:
    </p>
        <ul>
            <li><strong>Basic Stick ($19.95)</strong>
                The easiest stick to learn with, 
                    but "grippy" enough for the most
                    demanding tricks. Comes in red,
                green, and blue.

            </li>

            <li><strong>Flower Stick ($24.95)</strong>
                A graceful stick with colored tassels.
                Flower sticks float slowly, making them
                ideal for beginners.
            </li>

            <li><strong>Glow Stick ($29.95)</strong>
                The Glow Stick shines brightly at night
                (without the danger of a fire stick)
            </li>
        </ul>
</article>

<article>
    <h2>Quality Tested</h2>
    <p>
    Every item I create is checked and tested before
    being shipped out to assure perfect quality.
    I take pride in every one of my juggling
    props and I want my customers to feel that
    same pride
    </p>
</article>

<aside>
    <h2>Customer Comments</h2>
    <p>
    Here are a few select quotes from our happy 
    family of our customers and assosiates:
    </p>
        <blockquote>
        <p>
        "I'm more than happy to recommend Dave Vinet's products.
        I came apon his work 10 years ago and was immediatly
        impressed by his craftmanshift. He provides well-
        balanced and attractive props which are the perfect
        complement to my performances."
        <cite> &#8212; 
        <br />Thomas Gage, Circus England</cite>
        </p>

        <p>
            "Dave Vinet makes the best juggling equipment on the
        planet. Period."

        &#8212; <cite>Douglas Pederson, Street-Wise Shows</cite>
        </p>


        <p>
        "David has been my main supplier for 20 years. I have
        never had a problem with his equipment and his service
        is impeccable."
        <cite> &#8212; Linda Unger , Linda & Louis</cite>
        </p>

        </blockquote>
</aside>

    <footer>
       <address>
       The J-Prop Shop
       541 West Highland Drive
       Auburn, ME 04210
       (207) 555 - 9001
       </address>
    </footer>


</body>
</html>

J-Prop商店
html{
背景色:#F4;
}
#标题{
颜色:#0095f0;
字体系列:草书;
字体大小:粗体;
包裹:不包裹;
文本大小:60px;
文本阴影:2px 2px#000000;
}
#标题2{
字体系列:草书;
字体大小:粗体;
包裹:不包裹;
文本大小:60px;
}
氢{
字体系列:草书;
}
p{
字体系列:Lucida Grande,无衬线;
}
/*
HTML的新视角
教程1
教程案例
J-Prop车间样式表
作者:David Vinet
日期:2014年3月1日
文件名:jpsstyles.css
支持文件:无
*/
/*剖面样式*/
身体{
保证金:0px自动;
填充:0px;
线高:1.5em;
宽度:98%;
最大宽度:980px;
最小宽度:250px;
字体系列:Verdana,日内瓦,无衬线
}
标题{
宽度:100%;
文本对齐:居中;
}
部分{
宽度:66%;
浮动:左;
}
旁白{
宽度:45%;
边缘顶部:2米;
浮动:向上;
边框:3倍纯黑;
背景色:rgb(255177255);
-moz边界半径:35px;
边界半径:35px;
盒影:10px 10px 20px#000;
-网络工具包盒阴影:10px 10px 20px#000;
-moz盒阴影:10px 10px 20px#000;
左边距:650px;
边缘顶部:10px;
}
页脚{
清除:左;
宽度:100%;
文本对齐:居中;
边缘顶部:5px;
}
页脚地址{
宽度:150%;
清除:左;
字号:0.8em;
字体风格:普通;
字体变体:小大写字母;
边框顶部:1件纯黑;
背景色:rgb(255177255);
}
/*块样式*/
h1、h2、h3、h4、h5、h6{
字体系列:Arial、Helvetica、无衬线字体;
}
收割台h1{
保证金:1百万元;
字号:2em;
}
氢{
保证金:1百万元;
字号:1.5em;
}
收割台h1{
边际:0px;
}
收割台h2{
字体大小:1.2米;
字体:斜体;
边距:0em;
垫底:0.5em;
边框底部:1px黑色实心;
}
第p条{
保证金:0.2em 0.9em 0.7em 0em;
}
第ul条{
利润率:0.1em 0.8em 0.5em;
}
第二条{
右边距:0.5em;
}
撇开h2{
文本对齐:居中;
}
旁白{
字号:0.8em;
利润率:0px 0.7em;
}
旁白大宗报价{
利润率:1.2em 2em 0em 2em;
}
旁白{
保证金:0em 0em 2em;
字体大小:0.7em;
}
高质量的杂耍和马戏道具
欢迎
如果您正在寻找高品质的手工制作
玩杂耍和好奇的产品,J-prop商店
这家商店是为你准备的。我设计并制作了道具
在过去的35年里,我的产品
由专业艺人和业余爱好者使用
全世界。我们的价格是合理的
我们的质量非常好

这个月的特色菜 以下魔棒可在 五月份整月的特别折扣:

  • 基本棒(19.95美元) 最容易学习的棍子, 但对大多数人来说“抓地力”已经足够了 要求技巧。它是红色的, 绿色,蓝色。
  • 花棒(24.95美元) 有彩色流苏的优雅的棍子。 花枝慢慢地飘浮,使它们飘浮不定 适合初学者。
  • 发光棒($29.95) 夜光棒在夜间发光 (没有火棍的危险)
质量测试 我创建的每一个项目都在创建之前进行了检查和测试 为了保证完美的质量而被装船。 我为我的每一个杂耍动作感到自豪 道具,我希望我的客户能感受到这一点 同样的骄傲

客户意见 下面是我们的快乐故事中的一些精选语录 我们的客户和协会家族:

“我非常乐意推荐Dave Vinet的产品。 10年前我参加了他的工作,很快 他的手艺给人留下了深刻的印象。他提供了很好的服务- 平衡且有吸引力的道具是完美的 补充我的表演。” —
托马斯·盖奇,英国马戏团

“Dave Vinet是世界上最好的杂耍设备 行星,周期。“ — 道格拉斯·佩德森,街头秀

“20年来,大卫一直是我的主要供应商 他的设备和服务从来没有问题 是无可挑剔的。” — 琳达·昂格、琳达和路易斯

J-Prop商店 西高地路541号 奥本,邮政编码04210 (207) 555 - 9001
打开左侧内容的
元素,但从未关闭它

在打开旁边的

之前,请使用您的原始代码查看这一点,但关闭
部分
,打开左侧内容的
元素,但从未关闭它

在打开旁边的

之前,先用原始代码查看一下,然后关闭
部分。要修复和防止这些问题,您应该格式化代码,使其更具可读性。这样,错误更容易发现

如果你不熟悉编码,不知道如何正确格式化代码,你可以使用网站的“整洁”功能来格式化代码。此外,它还用红色标记了一些明显的错误

如果你是n