当前位置：网站首页>Minimalist movie website

Minimalist movie website

2022-07-07 12:25:00 【Miracle_ ze】

Minimalist movie website

home page
css

home page

effect
Insert picture description here

html

<html>
<head><title> Catch the wind and follow the shadow </title>
<link href="css.css" type="text/css" rel="stylesheet"></head>
<body>
<div id="box">
<img src="images/movie_theme.jpg" />
<p id="nav"><a hrefe="#"> The plot </a> <a href="html/animation.htm"> Animation </a> <a href="html/sf.htm"> Science fiction </a> <a href="#"> action </a> <a href="#"> The suspense </a></p>
<p> There are many kinds of movies , Some make you cry , Some make you laugh ; </p>
<p> Some remind you of the past closed , Some make you look forward to the future ; </p><p> Some are very realistic , Some are bullshit ; </p>
<p classm="lastline"> Some make your brain work at high speed , Some give your heart a short rest .</p>
<p> The movie , It's such a magical thing ,</p>
<p> No matter what kind of movie it is — The plot , Animation , Science fiction , action , The suspense ......</p>
<p class="lastline"> Can make you feel the charm of life , Imagined surprise .</p>
<p> You ask me what a movie is ?</p>
<p> Maybe a movie is the whole world at a certain moment ,</p>
<p> Is eternity .</p>
<hr>
<p id="footer">copyright 2020</p>
</div>
</body>
</html>

Animation page （ The rest are the same , Same example ）

Insert picture description here
Kehua page

Animation page html

<html>
<head><title> cartoon </title>
<link href=" ../css.css" rel="stylesheet" type="text/css" />
<style> #box{
      background:lightgoldenrodyellow;} </style>
</head>
<body>
<div id="box">
<img class="banner" src="../images/animation_banner.jpg" />
<p id="nav"><a href="#"> The plot </a> <strong> Animation </strong> <a href="sf.htm"> Science fiction </a> <a href="#"> action </a> <a href="#"> The suspense </a></p>
<p id="bread"><a href="../ Movie home page .htm"> home page </a> > <strong> Animation </strong> </p>
<p><a href="nezha.htm"><img class="pics" src="../images/nezha.jpg" /></a><img class="pics" src="../images/spiritedaway.jpg" /><img class="pics" src="../images/zootopia.jpg" /></p>
<hr>
<p id="footer">copyright 2020</p>
</div>
</body>
</html>

Animation page details （ Which zha ）

Insert picture description here

html

<html>
<head><title> cartoon </title>
<link href=" ../css.css" rel="stylesheet" type="text/css" />
<style> #box{
      background:lightgoldenrodyellow;} </style>
</head>
<body>
<div id="box">
<img class="banner" src="../images/animation_banner.jpg" />
<p id="nav"><a href="#"> The plot </a> <strong> Animation </strong> <a href="sf.htm"> Science fiction </a> <a href="#"> action </a> <a href="#"> The suspense </a></p>
<p id="bread"><a href="../ Movie home page .htm"> home page </a> > <strong> Animation </strong> </p>
<p><a href="nezha.htm"><img class="pics" src="../images/nezha.jpg" /></a><img class="pics" src="../images/spiritedaway.jpg" /><img class="pics" src="../images/zootopia.jpg" /></p>
<hr>
<p id="footer">copyright 2020</p>
</div>
</body>
</html>

css

#box {text-align : center;
width: 80%;
margin: 0 auto;
}
#nav { font: 36px/2em  Regular script ;
background: lightblue;
}

#bread {border-bottom:1px black dotted;
    padding:3px;
    text-align:left;}
#footer{font-size:small;}

h1{font:36px/2em  In black ;}
h2{width:60%;border-bottom:1px black solid;margin:40px auto 20px;}
a{text-decoration:none;}
a:hover{text-decoration:underline;
color:red;}

.banner{width:850px;height:320px;}
.lastline{margin-bottom:2em;}
.pics{
    width:350px;height:515px;margin:8px;
    }

原网站

版权声明
本文为[Miracle_ ze]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202130618062698.html