菜鸟学习笔记:html基础实战操作

结合所学内容,制作一个简单网站首页

难点:

div布局
表单制作

页面实现效果

贴代码

html部分

<!doctype html>
<html lang="zh-CN">
    <head>
        <title>实验楼</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="./styles/style.css">
    </head>
    <body>
        <div id="container">
            <div id="header">
                <br>
                <h1>Colorful Shi yan Lou</h1>
                <a href="#con">contact us</a>
            </div>
            <div id="paragraph">
            <br>
            <p>
                ![](./images/profile.png)
                <h1>we are engineers</h1>
                <p>we are young</p>
            </p>    
            </div>
            <div id="leftside">
                <h1>Working</h1>
                ![](./images/cabin.png)
            </div>
            <div id="middle1">
                <h1>Eating</h1>
                ![](./images/cake.png)
            </div>
            <div id="middle2">
                <h1>Playing</h1>
                ![](./images/game.png)
            </div>
            <div id="rightside">
                <h1>Sleeping</h1>
                ![](./images/circus.png)
            </div>
            <div id="footer1">
                <br>
                <a name="con">
                    <h1>let's learn with us
                    <br>
                    good good study,day day up!
                    </h1>
                </a>
            
            <div style="background-color: powderblue;width: 450px;height: 400px;float: left;margin-left: 80px"></div>
            <div style="background-color: orange;width: 400px;height: 400px;float: left;text-align: center;">
            ![](./images/user.png)
            <br>
            <br>
            <form action="MAILTO:support@shiyanlou.com" method="post" enctype="text/plain">
                <h3>Send email to shiynlou</h3>
                Your name:
                <br>
                <input type="text" name="name" value="yourname" size="20">
                <br>
                Your email:
                <br>
                <input type="text" name="mail" value="youremail" size="20">
                <br>
                What you wanna say:
                <br>
                <input type="text" name="comment" value="yourcomment" size="20">
                <br>
                <br>
                <input type="submit" value="send">
                <input type="reset" value="rewrite">
            </form> 
            </div>
            </div>
            <div id="footer2" align="center"></div>
        </div>
    </body>
</html>

css部分

#container{
    width:100%;
}
#header{
    width: 100%;
    height: 130px;
    text-align: center;
    background-color: #758181;
}
#header h1{
    color: aliceblue 
}
#header a{
    float: left;
    color: lightgray;                         
}
#paragraph{
    background-color: lightseagreen;
    height: 550px;
    text-align: center;
    font-size: 30px;
}
#paragraph h1{
    color: aliceblue;
}
#paragraph p{
    color: aliceblue;
}
#leftside{
    margin-left: 48px;
    height: 350px;
    width: 310px;
    float: left;
}
#leftside img{
    height: 260px;
    width: 300px;
}
#leftside h1{
    text-align: center;
    color: lightslategray;
}
#middle1{
    margin-left: 48px;
    height: 350px;
    width: 310px;
    float: left;
}
#middle1 img{
    height: 260px;
    width: 300px;
}
#middle1 h1{
    text-align: center;
    color: lightslategray;
}
#middle2{
    margin-left: 48px;
    height: 350px;
    width: 310px;
    float: left;
}
#middle2 img{
    height: 260px;
    width: 300px;
}
#middle2 h1{
    text-align: center;
    color: lightslategray;
}
#rightside{
    margin-left: 48px;
    height: 350px;
    width: 310px;
    float: left;
}
#rightside img{
    height: 260px;
    width: 300px;
}
#rightside h1{
    color: lightslategray;
    text-align: center;
}
#footer1{
    height: 600px;
    background-color: powderblue;
    clear: both;
}
#footer1 a{
    text-align: center;
    color: lightslategray;
}
#footer2{
    height: 100px;
    background-color: lightslategray;
    text-align: center;
    clear: both;
}

菜鸟学习笔记:html基础实战操作

菜鸟学习笔记:html基础实战操作

结合所学内容,制作一个简单网站首页

难点:

页面实现效果

贴代码

毕竟新手,做的还不够好,勿喷

推荐阅读更多精彩内容