网页作业2-CSDN博客

本文链接：https://blog.csdn.net/Cg523719/article/details/143035615

调查问卷

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小说类型喜好调查问卷</title>
<style>
body {
margin: 0px;
padding: 0px;
background-image: url('img/7a71f97704014165b1d43aef70d05df6.jfif');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.divlogo {
width: 100%;
height: 200px;
}
.divlogol {
width: 15%;
height: 175px;
padding-right: 15%;
padding-top: 25px;
float: left;
}
.divlogor {
width: 30%;
height: 175px;
padding-top: 25px;
padding-left: 10%;
float: left;
}
.divbiaoti {
width: 100%;
height: 80px;
text-align: center;
margin: 0px;
float: left;
}
.divwenjuan {
width: 60%;
height: 800px;
margin-left: 20%;
box-shadow: 8px 8px 8px rosybrown;
border-radius: 8px;
}
.divdibu {
width: 100%;
height: 60px;
background-color: aliceblue;
}
</style>
</head>

<body>
<div class="divlogo">
<div class="divlogol"><img src="img/7a71f97704014165b1d43aef70d05df6.jfif"/></div>
</div>
<div class="divbiaoti"><h1>番茄用户小说喜好类型问卷调查</h1></div>
<div class="divwenjuan">
<form action="" method="post">
<label>1、请问你喜欢那种主题？</label><br>
<input type="checkbox" name="vehicle[]" value="1">玄幻<br>
<input type="checkbox" name="vehicle[]" value="2">仙侠<br>
<input type="checkbox" name="vehicle[]" value="3">灵异<br>
<input type="checkbox" name="vehicle[]" value="4">搞笑轻松<br>
<input type="checkbox" name="vehicle[]" value="5">悬疑推理<br>
<input type="checkbox" name="vehicle[]" value="6">历史古代<br><br>
<label>2、请问你喜欢那类角色？</label><br>
<input type="checkbox" name="vehicle[]" value="1">群像<br>
<input type="checkbox" name="vehicle[]" value="2">学霸<br>
<input type="checkbox" name="vehicle[]" value="3">天才<br>
<input type="checkbox" name="vehicle[]" value="4">反派<br>
<input type="checkbox" name="vehicle[]" value="5">全能<br>
<input type="checkbox" name="vehicle[]" value="6">特工<br><br />
<label>3、你对平台推荐的小说满意吗？</label><br>
<input type="radio" name="sex" value="male">非常满意<br>
<input type="radio" name="sex" value="female">满意<br>
<input type="radio" name="sex" value="male">一般满意<br>
<input type="radio" name="sex" value="female">还凑合<br><br>
<label>4、以下几本小说你比较喜欢那本？</label><br>
<label>书名：</label>
<select name="xueyuan">
<option value="1">《斗破苍穹》</option>
<option value="2">《剑来》</option>
<option value="3">《雪中悍刀行》</option>
<option value="4">《大王饶命》</option>
<option value="5">《开局摆摊卖大力》</option>
<option value="6">《蛊真人》</option>
<option value="7">《遮天》</option>
<option value="8">《求魔》</option>
<option value="9">《诛仙》</option>
<option value="10">《完美世界》</option>
</select>
<label>喜欢程度：</label>
<select name="banji">
<option value="1">非常喜欢</option>
<option value="2">比较喜欢</option>
<option value="3">一般</option>
<option value="4">不喜欢</option>
</select><br><br>
<label>5、你对平台推文改进的方面有什么建议？</label><br>
<textarea rows="5" cols="150">
请您留下宝贵的意见，我们会及时处理！
</textarea>
</form>
</div>
<div class="divdibu"></div>
</body>
</html>

网页

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>番茄小说网</title>
       <style>
           body
           {
               margin: 0;
               padding: 0;
           }
           .divbig /*最大的盒子，用以让其它盒子参考，而不是以浏览器*/
           {
               width: 100%;
               height: 1800px;
               position: absolute; /*绝对定位*/
           }
           .div1
           {
               width: 100%;
               height: 100px;
               background-color: black;
               color: white;
               font-size: 32px;
               font-family: 黑体;
               font-weight: 200;
               text-shadow: 15px 15px 15px ;
               text-align: center;
               line-height: 100px;
               position: fixed; /*固定定位*/
               margin-top: 0;
           }
           .div2
           {
               width: 86%;
               height: 80px;
               background-color: aliceblue;
               margin-left: 7%;
               margin-top: 100px; /*外边距顶部是100像素，正好是div1的盒子的高度*/
               position: fixed;

           }
           .div2 ul
           {
               list-style: none;
               margin: 0;
               height: 80px;
           }
           .div2 ul li
           {
               display: inline-block; /*列表按照横向排列*/
               margin-right: 2%;
               line-height: 80px; /*行高*/
               font-size: 20px;
               font-family: 隶书;

           }
           .div2 ul li:hover
           {
               background-color: coral;
               border-radius: 6px;
               color: cornflowerblue;

           }
           .div3
           {
               width: 100%;
               height: 420px;
               margin-top: 180px;
           }
           .div3 img
           {
               width: 100%;
               height: 100%;
           }
           .div4
           {
               width: 100%;
               height: 400px;
               background-color: azure;
           }
           .div4l
           {
               width: 20%;
               height:500px ;
               margin-left: 5%;
               float: left;
           }
           .div4c
           {
               width: 38%;
               height: 500px;
               margin-left: 2%;
               float: left;
           }
           .div4r
           {
               width: 30%;
               height: 500px;
               margin-right: 5%;
               float: left;
           }
           ul li /*主要内容*/
           {
               line-height: 40px;
           }
           .h /*标题样式设计*/
           {
               text-shadow: 5px 5px 5px green;
               font-weight: 300;
               font-family: 隶书;
               font-size: 30px;
           }
           .div5
           {
               width: 100%;
               height: 400px;
               margin-top: 180px;
               margin-left: 0%;
               overflow: hidden;
           }
           .div5 ul
           {
               list-style: none;
           }
           .div5 ul li
           {
               display: inline-block;
               margin-right: 5%;
           }
           .div5 ul li img
           {
               width: 100%;
               height: 420px;
               object-fit: contain; /*图片自适应大小，不发生溢出*/

           }
       </style>


   </head>

   <body>
       <div class="divbig">
           <div>
               <div class="div1">番茄小说网站</div>
               <div></div>
           </div>
       <div class="div2">
           <ul>
               <li>首页</li>
               <li>书库</li>
               <li>书架</li>
               <li>作家专区</li>
               <li>版权专区</li>
                   <li>番茄推荐榜</li>
           </ul>
       </div>
           <div class=""></div>
       <div class="div3">
           <img src="../img/f6cdd266f5055a2805a6352ba4f4dee6.jfif"/>
       </div>
       <div class="div4">
               <div class="div4l">
                   <h3 class="h">原创榜</h3>
                   <ul>
                       <li>《我在精神病院学斩神》</li>
                       <li>《开局摆摊卖大力》</li>
                       <li>《请叫我鬼差大人》</li>
                       <li>《这个魔子不对经》</li>
                       <li>《从前有座镇妖关》</li>
                       <li>《烟雨楼》</li>
                   </ul>
               </div>
               <div class="div4c">
                   <h3 class="h">推荐榜</h3>
                   <ul>
                       <li>《十日终焉》</li>
                       <li>《我不是戏神》</li>
                       <li>《异兽迷城》</li>
                       <li>《风水之王》</li>
                       <li>《凡骨》</li>
                       <li>《天渊》</li>
                   </ul>
               </div>
               <div class="div4r">
                   <h3 class="h">巅峰榜</h3>
                   <ul>
                       <li>《完美世界》</li>
                       <li>《雪中悍刀行》</li>
                       <li>《剑来》</li>
                       <li>《龙族》</li>
                       <li>《诛仙》</li>
                       <li>《仙逆》</li>
                   </ul>
               </div>
           </div>
           <div class="div5">
               <ul>
                   <li><img src="../img/28928ff95ec47fd72261ff0c4add7236.jfif"/></li>
               </ul>
           </div>




       </div>
   </body>
</html>