由于我个人非常喜欢哆啦A梦，所以在空闲的时间里我利用了自己在上课的时候学到的一点点有关网页设计的知识，将我喜欢的东西设计成了一个网页一样的东西，可能里面还有很多漏洞和不足之处，我希望能在以后的学习过程中继续改进，还是很感谢我的专业老师，我觉得在他的课上我学到了很多很多的东西，同时也激起了我的兴趣，对于网页设计我个人真的还是十分喜欢的，今天就先看个总体成效吧，等下次有时间我再具体将小的一些知识点分步书写。
首先是html具体书写步骤，以及一些内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>哆啦A梦</title>
<meta name="keywords" content="叮当猫，机器猫，蓝胖子，二次元，四次元口袋">
<meta name="description" content="哆啦A梦与大雄，静香，哆啦A梦的口袋，哆啦A梦动画片，哆啦A梦大电影，哆啦A梦头像，哆啦A梦手机壁纸">
<link rel="stylesheet" href="css/public.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 导航 -->
<nav class="pageNav">
<ul>
<li><a href="http://www.baidu.com" target="_blank">首页</a></li>
<li><a href="http://www.baidu.com" target="_blank">简介</a></li>
<li><a href="http://www.baidu.com" target="_blank">图片鉴赏</a></li>
<li><a href="http://www.baidu.com" target="_blank">有关电影</a></li>
<li><a href="http://www.baidu.com" target="_blank">联系我们</a></li>
<li><a href="http://www.baidu.com" target="_blank">登录/注册</a></li>
</ul>
</nav>
<!-- 导航 end -->
<!-- banner -->
<div class="banner">
<img src="img/QQ图片20210904205030.jpg" alt="哆啦A梦">
</div>
<!-- banner end-->
<div class="txtbox">
<div class="box">
<img src="img/QQ图片20210904205017.jpg" alt="简介">
</div>
<hl>
<a href="http://www.baidu.com">哆啦A梦简介</a>
</hl>
<div class="txt">
<p>
《哆啦A梦》(日语：ドラえもん;英语：Doraemon;旧译叮当 / 小叮当)是由日本漫画家藤本弘(笔名藤子·F·不二雄)和安孙子素雄(笔名藤子不二雄A)共同创作的漫画作品，1987年12月23日后，由于两位作者打算各自创作漫画，《哆啦A梦》系列的创作便完全由藤本弘负责。
</p>
<p>
该漫画叙述了一只来自22世纪的猫型机器人——哆啦A梦，受主人野比世修的托付，回到20世纪，借助从四维口袋里拿出来的各种未来道具，来帮助世修的高祖父——小学生野比大雄化解身边的种种困难问题，以及生活中和身边的小伙伴们发生的轻松幽默搞笑感人的故事。
</p>
<p>
哆啦A梦的歌声比胖虎还要可怕。一次，有一只爱唱歌的虫子进了哆啦A梦的身体里。哆啦A梦就变得比胖虎还爱开演唱会再加上他的道具非常的多，没有人逃避听他的演唱会。
</p>
</div>
<div class="clears"></div>
</div>
<div class="pics">
<hl><a href="http://www.baidu.com">图片鉴赏</a></hl>
<div class="pics1">
<a href="http://www.baidu.com"><img src="img/QQ图片20210904210012.jpg" alt="哆啦A梦之家"></a>
</div>
<div class="pics2">
<a href="http://www.baidu.com"><img src="img/QQ图片20210904194243.jpg" ></a>
</div>
<div class="pics3">
<a href="http://www.baidu.com"><img src="img/QQ图片20211005124543.jpg" ></a>
</div>
<div class="clears"></div>
</div>
<div class="film">
<hl><a href="http://www.baidu.com">相关电影</a></hl>
<div class="film1">
<a href=""><img src="img/QQ图片20211005144559.jpg" ></a>
</div>
<div class="filmtxt">
<p>2014 日本 动画</p>
<p>时长: 109分钟</p>
<p>导演: 八秋新之介</p>
<p>主演:水田山葵 大原惠美 嘉数由美 关智一 三石琴乃等</p>
</div>
<div class="film2">
<a href="http://www.aiqiyi.com">立即播放</a>
</div>
</div>
<footer class="bottom">
<ul>
<li><a href="http://www.baidu.com" target="_blank">客服专线:15235691860</a></li>
<li><a href="http://www.baidu.com" target="_blank">地址:地球村的一个非常美丽的神仙圣地</a></li>
</ul>
</footer>
</body>
</html>
然后是css样式
.pageNav{
width: 800px;
height: 80px;
background-color: #00ffff;
margin-left: auto;
margin-right: auto;
}
.pageNav ul > li > a{
color: #fff;
font-size: 20px;
text-align: center;
font-family: "arial rounded mt bold";
font-weight: bold;
padding-left: 30px;
padding-right: 20px;
display: block;
transition: 0.6s;
}
.pageNav ul > li > a:hover{
background: #f80;
}
.pageNav ul > li{
float: left;
line-height: 80px;
}
.banner img{
display: block;
width: 800px;
height: 400px;
margin: auto;
padding-bottom: 20px;
}
.txtbox{
width: 800px;
height: 300px;
background-color: #FFF;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
.txtbox img{
width: 400px;
height: 200px;
margin: 10px;
border-radius: 100%;
shape-outside: margin-box;
float: left;
overflow: hidden;
}
.txtbox hl > a{
font-size: 30px;
text-align: center;
color: #0000ff;
font-weight: bold;
line-height: 5px;
}
.txtbox hl > a:hover{
background: #f80;
}
.txtbox txt{
font-size: 25px;
font-family: "arial black";
color: #000000;
line-height: 10px;
}
.pics{
width: 800px;
height: 300px;
background-color: #fff;
margin: auto;
margin-top: 10px;
}
.pics hl > a{
font-size: 30px;
text-align: center;
color: #0000ff;
padding-top: 20px;
font-weight: bold;
}
.pics hl > a:hover{
background: #f80;
}
.pics1 img{
width: 200px;
height: 200px;
float: left;
padding-right: 70px;
padding-left: 20px;
padding-top: 20px;
}
.pics1 img > a:hover{
background: #f80;
}
.pics2 img{
width: 200px;
height: 200px;
padding-right: 30px;
padding-top: 20px;
border-radius: 25%;
float: left;
}
.pics2 img > a:hover{
background: #f80;
}
.pics3 img{
width: 200px;
height: 200px;
float: right;
padding-top: 20px;
padding-right: 20px;
}
.pics3 img > a:hover{
background: #f80;
}
.film{
width: 800px;
height: 330px;
background-color: #fff;
margin: auto;
margin-top: 20px;
}
.film hl > a{
font-size: 30px;
text-align: center;
color: #0000ff;
padding-top: 10px;
font-weight: bold;
}
.film hl > a:hover{
background: #f80;
}
.film1 img{
width: 200px;
height: 250px;
float: left;
padding-left: 20px;
padding-top: 20px;
}
.filmtxt{
font-size: 25px;
font-family: "arial black";
color: #000000;
padding-left: 260px;
padding-top: 20px;
}
.film2 a{
width: 300px;
height: 40px;
background-color:#6b8e23;
font-size: 30px;
font-family: "arial black";
color: #000000;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
display: block;
}
.film2 a:hover{
background: #f80;
}
.bottom{
width: 800px;
height: 80px;
background-color: #00ffff;
margin-left: auto;
margin-right: auto;
}
.bottom ul > li > a{
color: #fff;
font-size: 22px;
text-align: center;
font-family: "arial rounded mt bold";
font-weight: bold;
padding-left: 30px;
display: block;
transition: 0.6s;
}
.bottom ul > li > a:hover{
background: #f80;
}
.bottom ul > li{
float: left;
line-height: 80px;
}
接下来我们来看看具体的成果吧。
5743
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
