软件工程第二次做业

时间 2019-11-30

标签软件工程第二次繁體版

原文原文链接

码云连接：https://gitee.com/slyZz/codes/b0w73erv9uyqapxdnh4jz87css

参考网页：html

制做网页：git

响应式设计（文字及图片都设有超链接，可点击）：网络

1）当鼠标放在文字上面移动的时候文字颜色发生变化，如图：flex

2）点开网页的时候图片自动从右至左移动，代码参考他人的想法及代码，利用css+js编写，js代码以下this

 1 <script>
 2     Pic2.innerHTML=Pic1.innerHTML;
 3     function scrolltoleft(){
 4         sm.scrollLeft++;
 5         if(sm.scrollLeft>=Pic1.scrollWidth)
 6             sm.scrollLeft=0;
 7     }
 8     var MyMar=setInterval(scrolltoleft,40); 
 9     function mouseover(x){
10         x.style.width="210";
11         x.style.height="256"
12         x.style.cursor="pointer"
13     }
14     function mouseout(x){
15         x.style.width="105";
16         x.style.height="128"
17     }
18     sm.onmouseover=function(){
19         clearInterval(MyMar);
20     }
21     sm.onmouseout=function(){
22         MyMar = setInterval(scrolltoleft,40);
23     } 
24 </script>

效果以下图：spa

3）下拉菜单，如图：设计

完整代码：code

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8" />
  5         <title>玄机科技官网</title>
  6         <style type="text/css">
  7         *{
  8              margin:0px; padding:0px;
  9              }  
 10         a{
 11              text-decoration:none;
 12             }
 13         div{
 14             width: 100%;
 15             height:100%;    
 16              }
 17         #nav{
 18              width:100%; 
 19              height:70px; 
 20              margin:0 auto;
 21              }  
 22         #nav ul{ 
 23             list-style:none;
 24             padding-left: 35%;
 25             }  
 26         #nav ul li{ 
 27             float:left; 
 28             line-height:70px; 
 29             text-align:center; 
 30             position:relative; 
 31             padding-left:5%;
 32             }  
 33         #nav ul li a{ 
 34             text-decoration:none; 
 35             color:#E92435; 
 36             display:block;
 37             padding:0px 10px;
 38             }  
 39         #nav ul li a:hover{ 
 40             color:#7FFFD4; 
 41             background:#333
 42             }  
 43         #nav ul li ul{ 
 44             position:absolute; 
 45             display:none;
 46             }  
 47         #nav ul li ul li{ 
 48             float:none; 
 49             line-height:70px; 
 50             text-align:left;
 51             }  
 52         #nav ul li ul li a{ 
 53             width:100%;
 54             }  
 55         #nav ul li ul li a:hover{ 
 56             background-color:#999;
 57             }  
 58         #nav ul li:hover ul{ 
 59             display:block;
 60             }  
 61         #bg{
 62             width:100%;
 63             height:600px;
 64         }
 65         #sm{
 66             overflow:hidden;
 67             width:100%;
 68             height:600px;
 69             margin:0 auto;
 70             padding-top:10px;
 71         }
 72         #main{
 73             width: 100%;
 74             height: 40%;
 75         }
 76         #show{
 77             width: 30%;
 78             height: 30%;
 79             display: flex;
 80             align-items: flex-start;
 81             padding-left: 20%;
 82             margin-top: 2%;
 83         }
 84         #bor{
 85             border: dashed;
 86             border-color:lightgray;
 87             padding-left: 2%;
 88         }
 89         #character{
 90             width: 100%;
 91             height: 10%;
 92             font-family: "楷体";
 93             font-size:16px;
 94             borde:1px;
 95             background-color: #999999;
 96         }
 97         #enn{
 98             width: 70%;
 99             height: 70%;
100             background-color:#000000;
101             padding-left: 30%;
102             display: flex;
103             align-items: flex-start;
104         }
105         #war{
106             width: 50%;
107             height: 50%;
108             font: "微软雅黑";
109             font-size: 10px;
110             padding-left: 10%;
111         }
112 </style>  
113 </head>  
114 <body> 
115 <div id="nav">  
116     <ul>  
117         <li><img src="img/logo.png"/></li>
118         <li><a href="http://www.xjent.com/home/index/about_us.html">关于玄机</a></li>
119         <li><a href="#">旗下品牌</a>  
120             <ul>  
121                 <li><a href="http://www.xjent.com/home/article/lists?category=44"><img src="img/qsmy.png"/></a></li>  
122                 <li><a href="http://www.xjent.com/home/article/lists?category=58"><img src="img/txjg.png"/></a></li>  
123                 <li><a href="http://www.xjent.com/home/article/lists?category=61"><img src="img/ty.png"/></a></li>  
124                 <li><a href="http://www.xjent.com/home/article/lists?category=65"><img src="img/wgj.png"/></a></li>  
125             </ul>          
126         </li>  
127         <li><a href="http://www.xjent.com/home/article/lists/category/1.html" >资讯中心</a></li>  
128         <li><a href="https://loveqsmy.taobao.com/">周边购买</a></li>  
129         <li><a href="http://www.xjent.com/home/index/join_us.html">招贤纳士</a></li> 
130         <li><a href="http://www.xjent.com/home/index/contact_us.html" >联系咱们</a></li> 
131     </ul>  
132 </div> 
133 <div id="bg">
134     <div id="sm">    
135         <table>
136             <tr>
137             <td id="Pic1">
138                 <table>    
139                     <tr>
140                     <td><img src="img/2ecf2b9d9442a28cdfd5f99987dff033.png" onmouseover="mouseover(this)" onmouseout="mouseout(this)"/></td>
141                     <td><img src="img/2074a5669e3a0f02ca6bd4e6f641b80a.png" onmouseover="mouseover(this)" onmouseout="mouseout(this)"/></td>
142                     <td><img src="img/4ea06717e684dcb058f620191b5b3b82.png" onmouseover="mouseover(this)" onmouseout="mouseout(this)"/></td>
143                     <td><img src="img/19caa455e57ef7838552dfde6cf63be2.png" onmouseover="mouseover(this)" onmouseout="mouseout(this)"/></td>
144                     <td><img src="img/0ae9a2ca4ec40d0928625049394701dc.png" onmouseover="mouseover(this)" onmouseout="mouseout(this)"/></td>
145                     </tr>
146                 </table>
147                 </td>
148               <td id="Pic2"></td>
149             </tr>
150         </table>
151         </div>
152     </div>
153 <script>
154     Pic2.innerHTML=Pic1.innerHTML;
155     function scrolltoleft(){
156         sm.scrollLeft++;
157         if(sm.scrollLeft>=Pic1.scrollWidth)
158             sm.scrollLeft=0;
159     }
160     var MyMar=setInterval(scrolltoleft,40); 
161     function mouseover(x){
162         x.style.width="210";
163         x.style.height="256"
164         x.style.cursor="pointer"
165     }
166     function mouseout(x){
167         x.style.width="105";
168         x.style.height="128"
169     }
170     sm.onmouseover=function(){
171         clearInterval(MyMar);
172     }
173     sm.onmouseout=function(){
174         MyMar = setInterval(scrolltoleft,40);
175     } 
176 </script>            
177 <div id="main">
178     <div id="show">
179         <p id="bor"><a href="http://www.xjent.com/home/article/lists?category=44"><img src="img/brand-qsmy.png"/ ></a></p>
180         <p id="bor"><a href="http://www.xjent.com/home/article/lists?category=58"><img src="img/brand-txjg.png"/></a></p>
181         <p id="bor"><a href="http://www.xjent.com/home/article/lists?category=61"><img src="img/brand-ty.png"/></a></p>
182         <p id="bor"><a href="http://www.xjent.com/home/article/lists?category=65"><img src="img/brand-wgj.png"/></a></p>
183     </div>
184 </div>
185 <div id="character">
186     <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;旗下网络游戏适合年满<font color="#E92435">18周岁以上</font>的用户使用；请您肯定已如实进行实名注册；为了您的健康，请合理控制游戏时间。 健康游戏公告: 抵制不良游戏  拒绝盗版游戏  注意自我保护  谨防受骗上当  适度游戏益脑  沉迷游戏伤身  合理安排时间  享受健康生活</p>
187 </div>
188 <div id="enn">
189     <p><a href="http://www.xjent.com/"><img src="img/捕获.PNG"/></a></p>
190     <p id="war"><a href="http://www.xjent.com/#"><font color="aliceblue">玄机科技 | 服务条款 | 家长监护 | 玄机招聘 | 玄机客服 | 公司地址 | 商务合做 | 品牌故事 | 关于咱们<br>上海非匠信息技术有限公司 版权全部<br>COPYRIGHT©2017-2018 TENCENT.ALL RIGHTS RESERVED.
191         <br><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011202003478"><font color="aliceblue">沪公网安备 31011202003478号 | 联系地址：上海市闵行区陈行路2388号2号楼</font></a><br>沪ICP备17008541号-1 |文网文号:沪网文(2016)0082-082号 |全国文化市场统一举报电话：12318</font></a></p>
192 </div>
193     </body>
194 </html>