軟件工程第二次做業

時間 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。