html大作业---个人网页设计
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?没有合适的模板?那不如看看我的吧!!
![](https://i-blog.csdnimg.cn/blog_migrate/b81f7bdc8b4a0f19f09c28f92cb905d9.png)
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人介绍</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
list-style: none;
}
body{
background-color:lightpink;
}
#bigbox {
width: 1000px;
margin: 0 auto;
}
#banner {
width: 1000px;
font-size: 0px;
}
#banner img {
width: 1000px;
}
nav {
background-color: #hotpink;
width: 1000px;
height: 60px;
}
nav a {
text-decoration: none;
line-height: 60px;
margin-left: 50px;
margin-right: 50px;
color: #020C16;
font-weight: bold;
}
nav a:hover {
color: #1a9be6;
}
.dangqian {
color: #1a9be6;
}
#main {
height: 500px;
width: 1000px;
margin: 0 auto;
background-color: #ffb3a7;
}
#left {
width: 300px;
display: inline-block;
background-color: #ffb3a7;
float: left;
}
h2 {
box-sizing: border-box;
padding-left: 10px;
font-size: 20px;
line-height: 30px;
background-color: #03151F;
color: #CCD0D9;
}
#left img {
width: 300px;
}
#left p {
margin-left: 10px;
line-height: 40px;
}
#left span {
font-weight: bold;
}
#right {
position: relative;
width: 680px;
margin-left: 20px;
display: inline-block;
height: 200px;
}
#right img {
position: absolute;
width: 260px;
right: 0px;
top: 30px;
}
#right p {
width: 400px;
display: inline-block;
margin-left: 10px;
text-indent: 32px;
line-height: 30px;
margin-top: 10px;
}
#mn {
background-color: pink;
width: 1000px;
}
#mn div {
font-size: 0px;
}
#picture {
font-size: 0px;
display: inline-block;
margin-left: 25px;
margin-right: 25px;
margin-top: 25px;
}
#picture img {
width: 200px;
}
#picture p {
font-size: 16px;
text-align: center;
line-height: 60px;
}
#picture1 {
font-size: 0px;
display: inline-block;
margin-left: 25px;
margin-right: 25px;
margin-top: 25px;
}
#picture1 img {
width: 400px;
}
#picture1 p {
font-size: 16px;
text-align: center;
line-height: 60px;
}
footer {
line-height: 60px;
font-size: 14px;
text-align: center;
background-color:#aaaadd;
}
#right ul li {
width: 660px;
margin-left: 10px;
font-size: 12px;
margin-top: 10px;
border-bottom: 1px dotted #ccc;
padding-bottom: 10px;
}
#right ul li span {
font-size: 14px;
font-weight: bold;
}
#liuyan {
width: 660px;
margin-left: 10px;
margin: 20px;
}
#liuyan span {
display: inline-block;
width: 80px;
line-height: 40px;
}
button {
width: 100px;
height: 30px;
margin-left: 80px;
}
</style>
</head>
<body>
<div id="bigbox">
<!-- <div id="banner">
<img src="mn1.jpg" alt="">
</div> -->
<nav>
<a class="dangqian"href="me.html">我的主页</a>
<a class="dangqian" href="ms.html">热爱美食</a>
<a class="dangqian"href="jx.html ">我的家乡</a>
<a class="dangqian"href="ly.html">留言吧</a>
</nav>
<div id="main">
<div id="left">
<h2>关于我</h2>
<img src=".jpg" alt="" >
<p>
<span>姓名</span>:zqy<br>
<span>性别</span>:美女<br>
<span>爱好</span>:听歌 打游戏<br>
<span>性格</span> :开朗<br>
<span>家乡</span>:四川泸州<br>
<span>专业</span>:物联网应用技术
</p >
<img src="m.jpg" alt="">
</div>
<div id="mn">
<h2>美nv</h2>
<div id="picture">
<img src="mn3.jpg" alt="">
<p>咦,是我</p >
</div>
<div id="picture">
<img src="mn6.jpg" alt="">
<p>
哟,还是我
</p >
</div>
</div>
<div>
<footer>
<div id="picture1">
<h2>喔唷,厉害</h2>
<img src="wz.jpg" alt="">
>
</div>
<div id="picture1">
<h2>嘿嘿,一般</h2>
<img src="wz1.jpg" alt="">
</div>
</div>
</footer>
</div>
</div>
</body>
![](https://i-blog.csdnimg.cn/blog_migrate/31f4b34df845ea98623348a483fa6fda.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7e829351ed027a1c4cc39da1fe36c92d.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人介绍</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
list-style: none;
}
body{
background-color:lightpink;
}
#bigbox {
width: 1000px;
margin: 0 auto;
}
#banner {
width: 1000px;
font-size: 0px;
}
#banner img {
width: 1000px;
}
nav {
background-color: slateblue;
width: 1000px;
height: 60px;
}
nav a {
text-decoration: none;
line-height: 60px;
margin-left: 50px;
margin-right: 50px;
color: #020C16;
font-weight: bold;
}
nav a:hover {
color: #1a9be6;
}
.dangqian {
color: #1a9be6;
}
#main {
height: 490px;
width: 1000px;
margin: 0 auto;
background-color: #ffb3a7;
}
#left {
width: 300px;
display: inline-block;
background-color: #ffb3a7;
float: left;
}
h2 {
box-sizing: border-box;
padding-left: 10px;
font-size: 20px;
line-height: 30px;
background-color: #03151F;
color: #CCD0D9;
}
#left img {
width: 300px;
}
#left p {
margin-left: 10px;
line-height: 40px;
}
#left span {
font-weight: bold;
}
#right {
position: relative;
width: 680px;
margin-left: 20px;
display: inline-block;
height: 200px;
}
#right img {
position: absolute;
width: 260px;
right: 0px;
top: 30px;
}
#right p {
width: 400px;
display: inline-block;
margin-left: 10px;
text-indent: 32px;
line-height: 30px;
margin-top: 10px;
}
#ms {
background-color: #86aacb;
width: 1000px;
}
#ms div {
font-size: 0px;
}
#picture {
font-size: 0px;
display: inline-block;
margin-left: 25px;
margin-right: 25px;
margin-top: 25px;
}
#picture img {
width: 200px;
}
#picture p {
font-size: 16px;
text-align: center;
line-height: 60px;
}
footer {
line-height: 60px;
font-size: 14px;
text-align: center;
background-color:pink;
}
#right ul li {
width: 660px;
margin-left: 10px;
font-size: 12px;
margin-top: 10px;
border-bottom: 1px dotted #ccc;
padding-bottom: 10px;
}
#right ul li span {
font-size: 14px;
font-weight: bold;
}
#liuyan {
width: 660px;
margin-left: 10px;
margin: 20px;
}
#liuyan span {
display: inline-block;
width: 80px;
line-height: 40px;
}
button {
width: 100px;
height: 30px;
margin-left: 80px;
}
</style>
</head>
<body>
<div id="bigbox">
<!-- <div id="banner">
<img src="ms.jfif" alt="">
</div> -->
<nav>
<a href="me.html">我的主页</a>
<a class="dangqian" href="">热爱美食</a>
<a href="jx.html ">我的家乡</a>
<a href="ly.html">留言吧</a>
</nav>
< <div id="banner">
<img src="ms.jfif" alt="">
</div>
<div id="main">
<div id="left">
<img src="ms2.jpg">
<!-- <h2>关于我</h2>
<img src=".jpg" alt="" >
<p>
<span>姓名</span>:zqy<br>
<span>性别</span>:美女<br>
<span>爱好</span>:听歌 打游戏<br>
<span>性格</span> :开朗<br>
<span>家乡</span>:四川泸州<br>
<span>专业</span>:物联网应用技术
</p > -->
</div>
<div id="right">
<h2>热爱美食</h2>
<p>
中华美食广而深,菜式门派八大系。
鲁川粤苏浙闽湘,徽菜目前排最后。
</p >
<p>
川菜起源川渝味,民间菜品最牛气。
麻辣鲜香清厚醇,一格一菜百种味。
夫妻肺片回锅肉,麻婆豆腐口水鸡。
黄敬临和张大千,开水白菜干烧鱼。
</p >
<p>
江苏菜系淮扬名,国宴菜品多且美。
选材严谨刀工细,讲究原味精于型。
水晶肴肉狮子头,大煮干丝叫花鸡。
文思豆腐天宁寺,松鼠桂鱼乾隆帝。
</p >
<p>
湘菜亦称湖南菜,辣味腊肉随手来。
夏要清淡与香鲜,热辣浓鲜过冬天。
东安子鸡臭豆腐,祖庵鱼翅外婆菜。
腊味合蒸有典故,剁椒鱼头黄宗宪。
</p >
<img src="ms.jpg" alt="">
</div>
</div>
<div id="ms">
<h2>美食</h2>
<div>
<div id="picture">
<img src="ms3.jpg" alt="">
<p>吃不吃火锅</p >
</div>
<div id="picture">
<img src="ms7.jpg" alt="">
<p>
吃不吃串串
</p >
</div>
<div id="picture">
<img src="ms4.jpg" alt="">
<p>
吃不吃烤肉
</p >
</div>
<div id="picture">
<img src="ms6.jpg" alt="">
<p>
吃不吃烧烤
</p >
</div>
</div>
<div>
<footer>
<p>
卧底
</p >
</footer>
</div>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/390ad01b651cde3445343417fff3b5a9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e946b251502eb8bcdccb6841cbc96877.png)
<body>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>主页</title>
<style type="text/css">
*{
background-color: pink;
}
#center{
width: 100%;
height: 70%;
background: pink;
}
}
#head{
background-color: #aaaaD9;
width: 100%;
height: 60px;
align-content: center;
}
head a {
text-decoration: none;
line-height: 60px;
margin-left: 50px;
margin-right: 50px;
color: #020C16;
font-weight: bold;
}
head a:hover{
color: greenyellow;
}
.dangqian {
color: #000000;
}
footer {
line-height: 60px;
font-size: 14px;
text-align: center;
background-color:pink;
}
nav {
background-color: #red;
width: 1000px;
height: 60px;
}
nav a {
text-decoration: none;
line-height: 60px;
margin-left: 50px;
margin-right: 50px;
color: #020C16;
font-weight: bold;
}
nav a:hover {
color: #1a9be6;
}
.dangqian {
color: #1a9be6;
}
</style>
</head>
<body>
<nav>
<a class="dangqian"href="me.html">我的主页</a>
<a class="dangqian" href="ms.html">热爱美食</a>
<a class="dangqian"href="jx.html ">我的家乡</a>
<a class="dangqian"href="ly.html">留言吧</a>
</nav>
<hr align="center" width="100%" color="black">
<div id="head">
<nav>
<a class="dangqian" href="" target="_blank">http://www.weather.com.cn/weather1d/101271001.shtml#input">泸州天气</a>
<a class="dangqian" href="" target="_blank">https://baike.baidu.com/item/%E6%B3%B8%E5%B7%9E/466521">泸州历史</a>
<a class="dangqian" href="" target="_blank">https://m.maigoo.com/top/405482.html">泸州特产</a>
</nav>
</div>
<div>
<img src="lz4.jfif">
</div>
<hr style="height:1px;border:none;border-top:1px dashed goldenrod;">
<div id="center">
<p>
<img src="lz4.jfif" width="20px"
height="20px">
泸州,古称“江阳”,别称酒城、江城,四川省辖地级市,全国区域中心城市 ,川渝滇黔结合部区域中心城市和成渝地区双城经济圈南翼中心城市 、重要的商贸物流中心,长江上游重要的港口城市。截止2020年12月底,全市乡镇政区126个,面积12232.34平方千米。 2021年全市常住人口425.9万。
</p>
<p>
<img src="lz2.jfif" width="20px"
height="20px">
泸州市,位于四川省东南,东与重庆市和贵州省接壤,南与贵州省连界,西与云南省和四川省宜宾市、自贡市相连,北接四川省内江市和重庆市。 全市位于四川盆地南缘,永宁河、赤水河,沱江与长江交汇处。地理座标介于北纬27°39′-29°20′,东经105°8′-106°28′。南北长184.84千米,东西宽121.64千米;东到重庆221千米,北到成都268千米。全市辖区面积12232.34平方千米
</p>
<p>
<img src="lz1.jfif" width="20px"
height="20px">
泸州是国家历史文化名城,具有两千多年历史文化;西汉设江阳侯国;梁武帝大同年间建置泸州;泸州在宋代即为西南要会,明代即与成都、重庆三足鼎立,成为当时全国33个商业大都会之一。 形成了以名酒文化、生态文化、红色文化、历史文化、长江文化为代表的五大特色旅游资源;拥有国家4A级旅游景区14个,国家3A级旅游景区8个,国家2A级旅游景区10个。 泸州是四川培育壮大的七大区域中心城市之一、是长江中上游地区第二大集装箱码头,四川第三大航空港 ;也是第三批国家新型城镇化综合试点地区、跨境电子商务综合试验区;世界级白酒产业基地,国家重要的以名优酒为主体的食品工业基地、循环型化工基地、清洁能源生产基地、国家高性能液压件高新技术产业化基地、国家9大工程机械生产基地之一。泸州先后获得过联合国改善人居环境最佳范例奖(迪拜奖)、中国地级市民生发展100强、国家卫生城市 、中国优秀旅游城市、国家森林城市、国家园林城市、全国文明城市、国家水生态文明城市等荣誉。
</p>
<p>
<img src="lz.jfif" width="20px"
height="20px">
著名景点泸州老窖旅游区、张坝桂圆林、黄荆老林、福宝国家森林公园、画稿溪、太平古镇、方山风景区、古郎洞风景区、清溪谷花田酒地
</p>
</div>
<hr style="height:1px;border:none;border-top:1px dashed goldenrod;">
<hr style="height:1px;border:none;border-top:1px dashed
goldenrod;" />
<div>
<footer>
<p>
这是我的家乡
</p >
</footer>
</div>
</body>
![](https://i-blog.csdnimg.cn/blog_migrate/cd473cadb9d69fde8acdc59bd13fa61f.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-size: 1500px;
}
</style>
</head>
<body>
<h2 align="center">给我留言吧</h2>
<hr align="center" width="70%" color="pink">
<div>
<form action="receive.php" method="get" target="_blank" enctype="x-www-form-urlencoded">
<table width="500px" align="center" bgcolor="pink" border="1" cellpadding="0">
<tr>
<td align="right">姓名:</td>
<td><input type="text" name="username" size="20" maxlength="10" placeholder="请输入姓名"/></td>
</tr>
<tr>
<td align="right">性别:</td>
<td>男<input type="radio" name="gender" value="male" />
女<input type="radio" name="gender" value="female" checked/>
</td>
</tr>
<tr>
<td align="right">我想对你说:</td>
<td>
<textarea name="intro" placeholder="请说出你对我的思念" cols="30" rows="3"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="submit" value="提交">
<input type="reset" name="reset" value="重置">
</td>
</tr>
<tr >
<td colspan="2" align="center">
<a href="me.html"> <input type="text" name="submit" value="返回首页">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
好啦,就是这样,希望能帮助到您