学生试图写HTML - 第一个网站

时间:2014-07-04 16:12:06

标签: html css transparent

我是HTML的新手。对于我非常简单的网站,我有大部分想要的东西。我只需要知道一些在我尝试过时没有解决的问题。

我需要在身体的文字周围放一个透明的盒子(但不是图片)。我也希望我的照片之间没有间距。

这是我的代码:

<html>
<head>
<div style="font-family: Comic Sans MS; font-size: 30pt">
<center><h1> Katharine Bragg </center> </h1>
</div>
</head>

<body background="glitter_by_ermenelwen.jpg">
<center><img src="piano.jpg" width="200" height="250"> <img src="headshot.jpg" width="170" height="250"> <img src = "stella.jpg" width="250" height="250"> <img src="makeup.jpg" width="200" height="250"> <img src="drowsy.png" width="400" height="250"/>


<div style="margin: 40px 150px 20px 150px; font-family: Comic Sans MS; font-size: 15;">   

                                     Hi!!! My name is Katharine Bragg. I am a 21 year old college student from Virginia. Although I am a native Virginian, I have hopped to a couple other places all for the love and passion of one thing - theatre. 
                                <p>
                                     When I was three years old I started dance lessons and from there on, I knew my one true love was performance. At the age of 16, I decided to leave the comfort of my public high school to go spend two years at Walnut Hill School for the Arts as a Musical Theatre major. After those two years I moved to New York City to attend Wagner College as a Theatre Performance major. As I live my life, I'm always going out of my way to learn as much about theatre as I can. 
                                <p>
                                     Below, you can find links to learn more about the schools I've attended and some of my favourite acting related websites!
                                </center><p> </div>
<div style="margin: 40px 150px 20px 150px; font-family: Comic Sans MS; font-size: 15">

                                     <a href="http://walnuthillarts.org/admission/arts/theatre/" target="_blank">Walnut Hill School for the Arts</a>  
                                <p>
                                     <a href="http://wagner.edu/theatre/" target="_blank">Wagner College Theatre</a>
                                <p>
                                     <a href="http://www.backstage.com/" target="_blank">Back Stage - A Website for Actors</a>
                                <p>
                                     <a href="http://www.dramabookshop.com/" target="_blank">The Drama Bookshop</a>
                                <p>
                                     <a href="http://www.completeactorstraining.com/about.html" target="_blank">Meisner Acting Technique</a>
                                </p> </d>                                   


</body>

</html>

4 个答案:

答案 0 :(得分:1)

这些是帮助您制作未来网站/网络应用的一些内容

1.不使用漫画sans(这是一个笑话,但大多数人都不喜欢它)
2.使用<br>代替换行符<p> 3.如果您要使用<p>,请关闭段落末尾的标记(使用</p>
4.对于图片间距这样做:

<style>
img{

margin-left:0;
margin-right:0;

}
</style>

5.对于透明框,您只需将文本放入DIV中并执行

<div style="background:rgb(red,green,blue,opacity)">text in here</div>

希望有帮助:) 祝你有愉快的一天

答案 1 :(得分:0)

这是一个开始

.trans {

border:1px;
border-style:solid;
border-color:red;  
position:absolute;
top:100px;
color:000;

}

http://jsfiddle.net/sajrashid/d4kkg/17/

答案 2 :(得分:0)

结帐:BackgroundWithTransparentText Area

HTML


 <div class="wrapper">

    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non convallis sapien, non rhoncus dui. Aliquam consectetur neque interdum risus tincidunt rutrum. Integer a laoreet enim. Duis velit eros, viverra interdum urna nec, placerat vulputate tellus. Sed vel congue mi. Donec consequat lectus fermentum lorem eleifend, eget viverra massa lacinia. Ut massa enim, posuere quis adipiscing scelerisque, sollicitudin vitae mauris. Suspendisse libero dui, semper vitae fermentum nec, consectetur et nunc. Aliquam cursus augue at purus sollicitudin, vel viverra dui sagittis. Cras sit amet commodo tellus, non viverra lectus. Curabitur placerat elit in consectetur pretium. Nulla posuere commodo tempor. Duis vitae vehicula velit, vel luctus lacus.

         <p>
Vivamus vehicula consectetur gravida. Curabitur egestas fermentum adipiscing. Etiam ut erat vulputate lorem egestas auctor et vitae erat. Suspendisse leo arcu, pulvinar eget urna dignissim, pharetra vulputate lorem. In laoreet blandit arcu non ultrices. Donec pulvinar magna vitae ornare sagittis. Ut turpis diam, porttitor sit amet fringilla at, tincidunt et sem. Aenean feugiat molestie tempus. Nam et erat ligula. Aenean a sem tempor, ultrices libero venenatis, luctus lorem.
</p>
Vivamus semper ac felis id egestas. Proin eu nunc congue, pretium elit eu, vestibulum nisi. Sed fermentum turpis non metus aliquet, ut rhoncus turpis malesuada. Sed vitae mollis urna. Cras ligula nisl, malesuada vel adipiscing nec, lacinia at magna. Proin imperdiet quis quam sed ornare. In quis lobortis dui. Curabitur ut varius turpis, ut pellentesque quam. Cras tristique elementum nisi et cursus. Donec eu fermentum libero. Mauris cursus sapien justo, eu varius lectus dapibus vitae.
</p>
              <p>
Suspendisse odio massa, tristique vitae bibendum in, tristique eget nunc. Maecenas tristique ultrices ipsum, quis sodales dui accumsan eget. Nulla a aliquam erat. Mauris volutpat tristique orci. Proin ac nulla at est iaculis lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus accumsan, quam ac varius aliquam, neque mi faucibus odio, ac laoreet tortor neque in justo. In eget aliquet mi. Quisque molestie cursus erat vitae rutrum. Vestibulum ac libero faucibus, interdum lacus id, blandit nunc.

   </p>                <p>
                       Aliquam erat volutpat. Nunc lacus massa, dictum non nisi eget, venenatis aliquet est. Maecenas vitae ligula vitae justo elementum convallis adipiscing ut magna. Sed in sem a arcu volutpat dictum. Duis interdum suscipit libero, ut adipiscing enim iaculis ac. Integer posuere nec purus a dictum. In sit amet viverra eros.</p>

CSS


 body{
    background:green;
}

.wrapper{
    width:80%;
    margin:0 auto;
    background-color:rgba(255,255,255,0.5);
    border-radius:25px;
}

答案 3 :(得分:0)

考虑将您的样式与页面上的对象分开。通常,人们将样式(css)放在不同的文件中,并从HTML头部链接(引用)该文件。您还可以将样式设置为内联(如下所示)。看看我如何使用#objectID引用对象ID {your styles here}?

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>katharine bragg</title>
    <style>
        body {
            background-color: black;
            background-image: url("glitter_by_ermenelwen.jpg");
        }

        img {
            width: 200px;
            height: 200px;
            border: 2px solid rgb(60, 58, 58);
        }

        #aboutme-div {
            position: absolute;
            font-size:  large;
            background-color: AppWorkspace;
            opacity: .75;
            top: 40%;
            left: 15%;
            max-width: 90%;
            right: 15%;
        }

        #image-div {
            position: absolute;
            top: 8%;
            left: 15%;
            max-width: 90%;
        }

        #links-div {
            position: absolute;
            bottom: 8%;
            left: 15%;
            height: 100px;
            width: 90%;
        }
    </style>
</head>
<body>
    <div id="image-div">
        <img src="piano.jpg">
        <img src="headshot.jpg">
        <img src="stella.jpg">
        <img src="makeup.jpg">
        <img src="drowsy.png">
    </div>
    <div id="aboutme-div">
        Hi!!! My name is Katharine Bragg. I am a 21 year old college student from Virginia. Although I am a native Virginian, I have hopped to a couple other places all for the love and passion of one thing - theatre.
        When I was three years old I started dance lessons and from there on, I knew my one true love was performance. At the age of 16, I decided to leave the comfort of my public high school to go spend two years at Walnut Hill School for the Arts as a Musical Theatre major. After those two years I moved to New York City to attend Wagner College as a Theatre Performance major. As I live my life, I'm always going out of my way to learn as much about theatre as I can.
        Below, you can find links to learn more about the schools I've attended and some of my favourite acting related websites!
    </div>
    <div id="links-div">
        <a href="http://walnuthillarts.org/admission/arts/theatre/" target="_blank">Walnut Hill School for the Arts</a>
        <a href="http://wagner.edu/theatre/" target="_blank">Wagner College Theatre</a>
        <a href="http://www.backstage.com/" target="_blank">Back Stage - A Website for Actors</a>
        <a href="http://www.dramabookshop.com/" target="_blank">The Drama Bookshop</a>
        <a href="http://www.completeactorstraining.com/about.html" target="_blank">Meisner Acting Technique</a>
    </div>
</body>
</html>