HTML课程的期末作业
要求
- 制作首页(index.html)
- 制作详情页(detail.html)
- 制作注册页(register.html)
页面整体为上中下布局
页面中间又分为左右布局
使用DIV来布局网页结构,整体页面布局使用标准文档流布局
局部布局使用浮动定位
1)页面排版、布局合理,页面与效果图一致
2)超链接效果设置正确
3)动画显示正确
4)字体颜色、背景颜色等整体美观
1)首页和详情页需要广告图片banner(不需要滚动,如果能滚动,额外加分)
2)文字排版合理, 不能直接与图片和文字接触, 需要有边距
3)首页默认有音乐自动循环播放, 详情页有视频(默认不需要自动播放)
4)首页和详情页所有图片(除背景和logo之外), 添加鼠标悬浮图片过渡放大
5)详情页必须具有浮动元素
6)首页必须有定位元素
7)首页和详情页侧边要有侧边栏(至少包含返回顶部功能)
1)注册页面需要提供账号、密码、手机号、性别、生日、兴趣爱好等基本信息
2)密码不能显示输入内容
3)性别需要冲突效果,有默认性别
4)兴趣要有默认选中
5)要有提交按钮
1)提供项目介绍文档,内容为以下几点:
a)本项目的开发背景
b)本项目的主要用途
c)项目中遇到的问题是什么?怎么解决的?
注意事项
1、 请注意代码格式规范,缩进符合要求
2、 请注意命名符合规范,主要代码必须有注释
结构
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| |css | |——detall.css | |——index.css | |——register.css |img | |——article.png | |——back_top.png | |——banner1.jpg | |——banner2.jpg | |——banner3.jpg | |——bg.svg | |——home.png | |——music.png | |——video.mp4 |bgm.mp3 |detail.html |index.html |register.html |说明.md(也不知道老师为什么非要让我们写s)
|
首页(index.html)
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
| <!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"> <link rel="stylesheet" type="text/css" href="css/index.css"> <title>主页</title> </head> <body> <div id="top"> <span>BLOG</span> <ul> <a href="index.html"><li>主页</li></a> <a href=""><li>归档</li></a> <a href=""><li>分类</li></a> <a href="register.html"><li>注册</li></a> <a href="detail.html"><li>关于</li></a> </ul> </div>
<div id="nav"> <ul> <li><a href="#banner"><img src="img/back_top.png" alt="返回顶部"></a></li> <li><a href="#article"><img src="img/article.png" alt=""></a></li> <li><a href="https://www.wucheng.work"><img src="img/home.png" alt=""></a></li> <li class="audio"> <img src="img/music.png" alt=""> <div class="music"> <audio src="bgm.mp3" controls loop></audio> </div> </li> </ul> </div> <div id="banner"> <h2>期末作业</h2> </div>
<div id="nav_page"> <ol><span>阿巴阿巴</span> <a href=""><li>xxxxxx</li></a> <a href=""><li>xxxxxx</li></a> <a href=""><li>xxxxxx</li></a> <a href=""><li>xxxxxx</li></a> <a href=""><li>xxxxxx</li></a> </ol> </div> <div id="nav_page"> <ol><span>今日热点</span> <a href=""><li>xxxxxx</li></a> <a href=""><li>xxxxxx</li></a> <a href=""><li>xxxxxx</li></a> <a href=""><li>xxxxxx</li></a> <a href=""><li>xxxxxx</li></a> </ol> </div> <div id="article" onclick="location.href='';"> <h2>标题</h2> <p>描述文字</p> <span>阅读全文</span> </div> <div id="article" onclick="location.href='';"> <h2>标题</h2> <p>描述文字</p> <span>阅读全文</span> </div> <div id="article" onclick="location.href='';"> <h2>标题</h2> <p>描述文字</p> <span>阅读全文</span> </div> <div id="article" onclick="location.href='';"> <h2>标题</h2> <p>描述文字</p> <span>阅读全文</span> </div> <div id="article" onclick="location.href='';"> <h2>标题</h2> <p>描述文字</p> <span>阅读全文</span> </div>
<div id="down"> <p>Make By @Wuhan Polytechnic Software class 6 WuCheng</p> </div> </body> </html>
|
index.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221
| html{ padding: 0px; margin: 0px; background-color: #34343b; } *a{ display: none; }
#top{ height: 60px; width: 100%; border-bottom: 1px solid #252525; background-color: #34343b; top: 0; position: fixed; z-index: 999; }
#top span{ font-size: 35px; font-weight: bolder; line-height: 60px; margin-left: 20%; float: left; color: white; }
#top ul{ margin: 0px; width: 50%; height: 60px; margin-left: 45%; }
#top li{ float: left; list-style-type: none; width: 20%; height: 60px; color: white; line-height: 60px; text-align: center; }
#top li:hover{ background-color: #252525; text-shadow: 1px 1px 10px white; }
#nav{ position: fixed; right: 20px; bottom: 10%; z-index: 999; }
#nav ul{ width: auto; height: auto; list-style-type: none; }
#nav li{ border-radius: 10px; margin-top: 10px; width: 40px; height: 40px; }
#nav img{ border: 1px solid black; border-radius: 10px; width: 100%; height: 100%; }
#nav img:hover{ box-shadow: 0px 0px 5px white; }
#nav .audio{ position: relative; }
#nav .music{ position: absolute; left: 60px; bottom: -15px; transition: all 2s; }
#nav .audio:hover .music{ left: -250px; }
#banner{ background: url(../img/bg.svg); background-size: 100%; border: 2px solid gray; margin: 0 auto; margin-top: 100px; border-radius: 30px; width: 1500px; height: 800px; transition: all 1s; }
#banner:hover{ transform: scale(1.03); box-shadow: 1px 1px 10px white; }
#banner h2{ font-size: 35px; line-height: 800px; z-index: 100; text-align: center; color: white; }
#nav_page{ width: 200px; height: 400px; border-radius: 10px; padding: 10px; margin-top: 100px; float: left; position: -webkit-sticky; position: sticky; top: 300px; left: 0px; box-shadow: 1px 1px 10px black; }
#nav_page span{ margin: 10px 20px; font-size: 20px; color: white; } #nav_page ol{ color: rgb(211, 207, 207); font-size: 15px; line-height: 50px; }
#nav_page li{ border-bottom: solid gray; color: rgb(211, 207, 207); }
#article{ border-radius: 10px; height: 150px; width: 40%; margin: auto; margin-top: 50px; padding: 30px 50px; text-align: right; box-shadow: 1px 1px 3px gray;; transition: all 0.5s; }
#article:hover{ transform: scale(1.01); cursor: pointer; box-shadow: 2px 2px 5px gray; }
#article h2{ text-align: left; color: rgb(211, 207, 207); }
#article span{ color: gray; }
#article p{ color: rgb(192, 189, 189); text-align: left; margin-top: 10px; margin-bottom: 20px; }
#down{ border-top: gray; width: 100%; height: 50px; margin-top: 80px; }
#down p{ color: rgb(192, 189, 189); font-size: 15px; line-height: 50px; text-align: center; }
|
注册页(register.html)
register.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
| <!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"> <link rel="stylesheet" href="css/register.css"> <title>注册</title> </head> <body> <div id="nav"> <ul> <li><a href="index.html"><img src="img/home.png" alt=""></a></li> <li class="audio"> <img src="img/music.png" alt=""> <div class="music"> <audio src="bgm.mp3" controls autoplay loop></audio> </div> </li> </ul> </div> <form id="register"> <h1>注册</h1> <p>用户名:<input type="text" name="user"></p> <p>密码:<input type="password" name="suer"></p>
<p>手机号:<input type="text"></p>
<p>性别:<input type="radio" name="gender" id="gender" value="男" checked>男 <input type="radio" name="gender" id="gender" value="女">女</p>
<p>生日:<input type="date" value=""></p>
<p>兴趣: <input type="checkbox" name="interest" id="interest" checked>游戏 <input type="checkbox" name="interest" id="interest">篮球 <input type="checkbox" name="interest" id="interest">影视 <input type="checkbox" name="interest" id="interest">小说 <input type="checkbox" name="interest" id="interest">其他 </p> <div id="button"> <input type="submit" value="注册" name="user" id="but"> <input type="reset" name="user" id="but"> </div> </form> </body> </html>
|
register.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131
| html{ padding: 0px; margin: 0px; background: url(../img/bg.svg); background-size: 100%; background-color: #34343b; }
#nav{ position: fixed; right: 20px; bottom: 10%; z-index: 999; }
#nav ul{ width: auto; height: auto; list-style-type: none; }
#nav li{ margin-top: 10px; width: 40px; height: 40px;
}
#nav img{ border: 1px solid black; border-radius: 10px; width: 100%; height: 100%; }
#nav .audio{ position: relative; }
#nav .music{ position: absolute; left: 60px; bottom: -15px; transition: all 2s; }
#nav .audio:hover .music{ left: -250px; }
#register{ border: 2px solid gray; border-radius: 50px; background-color: #34343b; width: 30%; padding: 70px; margin: 100px 33.3%; box-shadow: 3px 3px 30px black; position: fixed; }
#register h1{ color: white; text-align: center; margin-bottom: 30px; text-shadow: 1px 1px 5px gray; }
#register input{ border: 2.5px solid grey; color: white; border-radius: 30px; width: 30%; padding: 10px; position:absolute; left: 33.3%; }
#register p{ color: white; font-size: 20px; margin: 30px; line-height: 30px; }
#register #gender{ position: static; width: auto; margin-left: 15%; }
#birthday{ color: white; height: 30px; width: 20%; margin: 20px auto; }
#register #interest{ position: static; width: auto; margin-left: 10px; }
#button{ width: 50%; margin: 10px auto; } #register #but{ font-weight: bolder; background-color: #34343b; position: static; margin-left: 20px; }
|
详情页(detail.html)
detail.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
| <!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"> <link rel="stylesheet" href="css/detail.css" type="text/css"> <title>详情</title> </head> <body> <div id="top"> <span>BLOG</span> <ul> <a href="index.html"><li>主页</li></a> <a href=""><li>分类</li></a> <a href="register.html"><li>注册</li></a> <a href="detail.html"><li>关于</li></a> </ul> </div> <div id="nav"> <ul> <li><a href="#top"><img src="img/back_top.png" alt="返回顶部"></a></li> <li><a href="https://www.wucheng.work"><img src="img/home.png" alt=""></a></li> <li class="audio"> <img src="img/music.png" alt=""> <div class="music"> <audio src="bgm.mp3" controls loop></audio> </div> </li> </ul> </div>
<div id="video"> <video src="img/video.mp4" controls autoplay loop></video> </div> <div id="banner"> <div class="photo"> <img src="img/banner1.jpg" alt=""> <img src="img/banner2.jpg" alt=""> <img src="img/banner3.jpg" alt=""> </div> </div>
<div id="article"> <div class="zh"> <h2>这是一个博客</h2> <p>欢迎来到本站 <br>这里本来有一堆凑数的描述文字 <br>不过这种东西就不写在这里了 <br>因为实在不知道写些什么 <br>本来好好的博客但是期末作业要求是要有详情页和注册页 <br>只能硬生生的加了上来 <br>实在怪得很 <br>早知道还不如找别的网站去写 </p> </div>
<div class="en"> <h2>This is a Blog</h2> <p>Welcome to blog. <br>这里其实应该是一对英文的 <br>我也不知道为什么自己要搞个英文的介绍在这里 <br>大概主要还是闲的蛋疼 <br>当然在这里展示的当然不可能再写英文了 <br>毕竟我英文实在烂 <br>也不想用翻译 <br>就这样子 </p> </div> </div> </body> </html>
|
detail.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215
| html{ padding: 0px; margin: 0px; background-color: #34343b; }
#top{ height: 60px; width: 100%; border-bottom: 1px solid #252525; background-color: #34343b; top: 0; position: fixed; z-index: 999; }
#top span{ font-size: 35px; font-weight: bolder; line-height: 60px; margin-left: 20%; float: left; color: white; }
#top ul{ margin: 0px; width: 50%; height: 60px; margin-left: 45%; }
#top li{ float: left; list-style-type: none; width: 20%; height: 60px; color: white; line-height: 60px; text-align: center; }
#top li:hover{ background-color: #252525; text-shadow: 1px 1px 10px white; }
#nav{ position: fixed; right: 20px; bottom: 10%; z-index: 999; }
#nav ul{ width: auto; height: auto; list-style-type: none; }
#nav li{ margin-top: 10px; width: 40px; height: 40px;
}
#nav img{ border: 1px solid black; border-radius: 10px; width: 100%; height: 100%; }
#nav .audio{ position: relative; }
#nav .music{ position: absolute; left: 60px; bottom: -15px; transition: all 2s; }
#nav .audio:hover .music{ left: -250px; }
#video{ width: 800px; height: auto; border: 1px solid gray; border-radius: 10px; overflow: hidden; margin-top: 100px; margin-left: 100px; transition: all 1s; }
#video:hover{ transform: scale(1.03); box-shadow: 1px 1px 5px gray; }
#video video{ width: 100%; height: 100%; }
#banner { border: 1px solid gray; border-radius: 10px; width: 800px; height: 450px; position: absolute; top: 100px; right: 100px; overflow: hidden; transition: all 2s; }
#banner:hover{ transform: scale(1.03); box-shadow: 1px 1px 5px gray; }
.photo { width: 2400px; height: 450px; position: absolute; left: 0px; animation-name: move; animation-duration: 50s; animation-iteration-count: infinite; }
.photo img { width: 800px; height: 450px; float: left; } @keyframes move { 0%,15%{ left: 0px; } 30%,45%{ left: -100%; } 60%, 75% { left: -200%; } 85%, 100%{ left: 0px; } }
#article{ position: relative; }
#article div{ border: 0.1px solid gray; border-radius: 15px; width: 800px; height: 500px; padding: 30px; transition: all 0.5s; }
#article div:hover{ box-shadow: 0px 0px 5px gray; }
.zh{ position:absolute; top: 50px; left: 60px; }
.en{ position: absolute; top: 50px; right: 60px; }
h2{ text-align: center; color: white; }
p{ font-size: 20px; color: white; line-height: 40px; }
|
最后
这个破期末作业终于写完了,本来想复刻一个自己的博客的
但是要求要写注册页和详情页只能硬生生的改了
问题不大,反正为了完成任务,再说写的也还能混过去,就是不知道能拿多少分
不说了,困死了,睡觉去了!
这也能拿93分稍微有点离谱了