在html页面的右侧和左侧添加两条垂直线(矩形)

时间:2014-12-28 17:58:27

标签: html css webpage

我是HTML,CSS的新手,我想在html页面的两侧(左侧和右侧)添加两条垂直线。 非常感谢一点帮助...非常感谢 编辑:现在已添加代码

            <!doctype html>
            <html lang="en">

            <head>
            <style>
            #button1{
            width: 300px;
            height: 40px;

            }

            #button2{
            width: 300px;
            height: 40px;
            }

            #link1{
            font-size: 33px;}

            #pic1 {
                 position:fixed;
                left:30%;
                top:30%;
                margin-left:-382px /*half the width*/
                margin-top:-370px /*half the height*/
            }



            </style>

            <meta charset="utf-8">
            <meta name="Homepage" content="Starting page for the survey website ">

            <title> Survey HomePage</title>
            </head>

            <body>

            <img src="kingstonunilogo.jpg" alt="uni logo" style="width:180px;height:160px">
            <button type="button home-button" id="button1" >Home</button>
            <button type="button contact-button" id="button2">Contact Us</button>
            <a href="http://www.w3schools.com/html/" id="link1">LogIn</a>
            <img src="homepagepic.jpg" alt="homepagepic" id="pic1" style="width:400px;height:350px">



            </body> 
            </html>

1 个答案:

答案 0 :(得分:1)

您可以尝试在您的身体中创建一个div容器并设置边框,这些内容如下:

<body style="width:100%">
//you can set the div-width to 100% too, I'm setting it to 95% so you can see it.//
    <div style="width:95%;border-left:1px solid #000;border-right:1px solid #000;">
        Page contents go here
    </div>
</body>

预览: http://jsfiddle.net/pbj4xxh0/