菜鸟学习笔记:html基础实战操作
2017-02-14 本文已影响41人
钛合金3000
结合所学内容,制作一个简单网站首页
难点:
- 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>
<h1>we are engineers</h1>
<p>we are young</p>
</p>
</div>
<div id="leftside">
<h1>Working</h1>
</div>
<div id="middle1">
<h1>Eating</h1>
</div>
<div id="middle2">
<h1>Playing</h1>
</div>
<div id="rightside">
<h1>Sleeping</h1>
</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;">
<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;
}
