12月25晚-12月29日做的两个网页

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>仿山东理工大学</title>
  6     <link rel="stylesheet" href="css/wangye.css">
  7     <link href="img/favicon.ico" rel="shortcut icon">
  8 </head>
  9 <body>
 10     <!--页头-->
 11     <div id="head_1">
 12         <div class="center_div head_div">
 13             <img class="img1" src="img/QQ图片20171226133838.jpg">
 14             <!--右边搜索框-->
 15             <div class="head_div1">
 16                 <div class="hdd div_hdd1">
 17                 <div class="hdd1_div">
 18                     <a href="#">在校生</a>
 19                     <span>+</span>
 20                     <a href="#">教职工</a>
 21                     <span>+</span>
 22                     <a href="#">考生</a>
 23                     <span>+</span>
 24                     <a href="#">校友</a>
 25                     <span>+</span>
 26                     <a href="#">访客</a>
 27                     <span>+</span>
 28                 </div>
 29                 </div>
 30                 <div class="hdd div_hdd2">
 31                     <input type="text" class="text1" placeholder="请输入关键字">
 32                     <input type="image" src="img/QQ图片20171226145940.jpg" class="text2">
 33                 </div>
 34             </div>
 35         </div>
 36     </div>
 37     <!--导航-->
 38     <div class="dh">
 39         <div class="dh_div">
 40         <ul>
 41             <li> <a href="#">首页</a></li>
 42             <li> <a href="#">新闻网</a></li>
 43             <li> <a href="#">学校概况</a></li>
 44             <li> <a href="#">机构设置</a></li>
 45             <li> <a href="#">师资队伍</a></li>
 46             <li> <a href="#">科学研究</a></li>
 47             <li> <a href="#">人才培养</a></li>
 48             <li> <a href="#">招生就业</a></li>
 49             <li> <a href="#">大学文化</a></li>
 50             <li> <a href="#">国际交流</a></li>
 51             <li> <a href="#">校友联谊</a></li>
 52         </ul>
 53         </div>
 54     </div>
 55     <!--轮播图-->
 56     <div class="lbt">
 57         <img src="img/QQ图片20171226155554.jpg">
 58     </div>
 59     <!--内容-->
 60 
 61 
 62     <!--内容-->
 63     <div class="nr1">
 64     <div class="nr1_1">
 65             <div class="nr2">
 66                 <div class="nr2_1">
 67                     <span class="span2">学校新闻</span>
 68                     <span class="span1"><a href="#">【更多】</a></span>
 69                     <div><img src="img/QQ20171223095502.jpg" alt="" class="nr2_img"></div>
 70                     <span class="span3">
 71                     <h4>我校与周村区签订战略合作协议</h4>
 72                     </span>
 73                     <span class="span4">
 74                     <a href="#">--吕传毅提出“大米小米一起熬”校...</a>
 75                     </span>
 76                     <p class="p2">
 77                         <span class="p1">本网讯12月24日,山东理工大学与周村区战略合作签约仪式暨2017校城融合创新发展论坛,在杏园宾馆北楼二层会议室举行。由此,双方步入融合发...</span> <span class="span_1">[详细]</span> 
 78                     </p>
 79                     <div class="liebiao">
 80                         <ul>
 81                             <li><a href="#">我校女篮实现CUBA山东赛区三连冠</a><span>12-26</span></li>
 82                             <li><a href="#">山东省法学理论研究会年会在我校举行</a><span>12-26</span></li>
 83                             <li><a href="#">学校成立校欧美同学会</a><span>12-26</span></li>
 84                             <li><a href="#">“不忘初心幼儿情 童展歌舞迎新年”联欢会...</a><span>12-26</span></li>
 85                             <li><a href="#">省学校后勤协会七届一次理事会在我校召开 </a><span>12-26</span></li>
 86                             <li><a href="#">“E路领航”2017年度学风建设表彰会举行</a><span>12-26</span></li>
 87                         </ul>
 88                     </div>
 89                 </div>
 90                 <div class="nr2-2">
 91                     <span class="n22_1">通知公告</span>
 92                     <span class="n22_2"><a href="#">[更多]</a></span>
 93                     <span><img src="img/QQ20171223095502.jpg" width="100%"></span>
 94                     <div class="n22_lb2">
 95                         <ul>
 96                             <li><span><a href="#">2018年招收攻读硕士学位研究生招生简章</a></span></li>
 97                             <li><span><a href="#">2018年全国硕士研究生招生考试公告</a></span></li>
 98                             <li><span><a href="#">诚聘海内外高层次人才启事</a></span></li>
 99                         </ul>
100                     </div>
101                 </div>
102             </div>
103             <div class="nr3">
104                 <div class="nr3_1">
105                     <span class="nr3_span1">视频理工</span>
106                     <span class="nr3_span">图说理工</span>
107                     <div><img src="img/QQ20171223095502.jpg" width="100%"></div>
108                     <div class="nr3_img">
109                         <img src="img/QQ20171227111320.png" width="100%">
110                     </div>
111                 </div>
112                 <div class="nr3_2">
113                     <span class="nr3_mt">媒体报道</span>
114                     <span class="nr3_gd">[更多]</span>
115                     <div class="nr3_img"><img src="img/QQ20171223095502.jpg" width="100%"></div>
116                     <div class="nr3_lieb">
117                         <ul>
118                             <li><span>〖山东省教育厅〗</span><a href="#">定标准、划底线,山理工“七项规定”...</a></li>
119                             <li><span>〖齐鲁晚报〗</span><a href="#">实施人才优先战略,打造高水平师资队...</a></li>
120                             <li><span>〖大众网〗</span><a href="#">山东理工大学管理学院举行冬季呼吸道...</a></li>
121                             <li><span>〖大众网〗</span><a href="#">山东理工大学管理学院举行海外游学分...</a></li>
122                             <li><span>〖大众网〗</span><a href="#">山东理工大学管理学院邀请新西兰国立...</a></li>
123                             <li><span>〖山东省教育厅〗</span><a href="#">山理工推出思政工作质量保障体系构建...</a></li>
124                             <li><span>〖大众网〗</span><a href="#">周村区与山东理工大学2017校城融合创...</a></li>
125                         </ul>
126                     </div>
127                 </div>
128             </div>
129             <div class="nr4">
130                 <div class="nr4_1">
131                     <span class="nr4_span1">学术活动</span>
132                     <span class="nr4_span2">[更多]</span>
133                     <div class="nr4_img"><img src="img/QQ20171223095502.jpg" width="100%"></div>
134                     <div class="nr4_img1"><img src="img/QQ20171221171528.png">
135                     <span class="nr4_lieb1">
136                         <ul>
137                             <li><a href="#">文史研究的选题、设计与研...</a></li>
138                             <li>主讲:郑杰文教授 </li>
139                             <li>地点:文学与新闻传播学院会议室 </li>
140                         </ul>
141                     </span>
142                     </div>
143                     <div class="nr4_img2">
144                     <img src="img/QQ20171221171528.png">
145                     <span class="nr4_lieb2">
146                         <ul>
147                             <li><a href="#">文史研究的选题、设计与研...</a></li>
148                             <li>主讲:郑杰文教授 </li>
149                             <li>地点:文学与新闻传播学院会议室 </li>
150                         </ul>
151                     </span>
152                     </div>
153                     <div class="nr4_img3">
154                     <img src="img/QQ20171221171528.png">
155                     <span class="nr4_lieb3">
156                         <ul>
157                             <li><a href="#">文史研究的选题、设计与研...</a></li>
158                             <li>主讲:郑杰文教授 </li>
159                             <li>地点:文学与新闻传播学院会议室 </li>
160                         </ul>
161                     </span>
162                     </div>
163                     <div class="nr4_img4">
164                     <img src="img/QQ20171221171528.png">
165                     <span class="nr4_lieb4">
166                         <ul>
167                             <li><a href="#">文史研究的选题、设计与研...</a></li>
168                             <li>主讲:郑杰文教授 </li>
169                             <li>地点:文学与新闻传播学院会议室 </li>
170                         </ul>
171                     </span>
172                     </div>
173                 </div>
174                 <div class="nr4_2">
175                     <div>
176                         <span class="nr4_zt">专题信息</span>
177                         <span class="nr4_gd">[更多]</span>
178                         <div class="div_img"><img src="img/QQ20171223095502.jpg" width="100%"></div>
179                         <div class="div_lieb">
180                             <ul>
181                                 <li><a href="">山东理工大学“审核评估评建”专题网站</a></li>
182                                 <li><a href="">山东理工大学“一精神”“一规划”专题</a></li>
183                                 <li><a href="">山东理工大学“两学一做”学习教育网站</a></li>
184                             </ul>
185                         </div>
186                     </div>
187                 </div>
188             </div>
189         </div>
190         
191     </div>
192     
193         <!--底部导航-->
194     <div class="footdh">
195         <div class="fdb">
196             <ul>
197                 <li><a href="#">站点导航</a></li>
198                 <li><a href="#">在线学习</a></li>
199                 <li><a href="#">校园VPN</a></li>
200                 <li><a href="#">邮件系统</a></li>
201                 <li><a href="#">办公系统</a></li>
202                 <li><a href="#">招标采购</a></li>
203                 <li><a href="#">信息公开</a></li>
204                 <li><a href="#">图书馆</a></li>
205             </ul>
206         </div>
207     </div>
208     
209     <!--底部-->
210     <div class="db">
211         <img src="img/QQ20171226223605.png" alt="">
212     </div>
213 </body>
214 </html>
View Code
css样式
View Code

 

效果图:

网页二:

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>企业名称</title>
  6 <link rel="stylesheet" href="wangye1.css">
  7 </head>
  8 <body>
  9     <!--页头-->
 10     <div class="yt">
 11         <div class="yt1">
 12             <img src="logo.gif">
 13         </div>
 14         <div class="yt2">
 15             <span>搜索产品</span>
 16             <input type="text" id="yt2_text">
 17             <input type="image" src="btn_srh.gif" class="yt2_img">
 18         </div>
 19     </div>
 20     <!--导航-->
 21     <div class="dh">
 22         <div class="dh1">
 23             <ul>
 24                 <li><a href="">首页</a></li>
 25                 <li><a href="">企业新闻</a></li>
 26                 <li><a href="">企业简介</a></li>
 27                 <li><a href="">产品展厅</a></li>
 28                 <li><a href="">企业历史</a></li>
 29                 <li><a href="">招商加盟</a></li>
 30                 <li><a href="">网上下单</a></li>
 31                 <li><a href="">联系我们</a></li>
 32             </ul>
 33         </div>
 34         <div class="dh2">
 35             <ul>
 36                 <li>企业动态</li>
 37                 <li>领导活动</li>
 38                 <li>产品资讯</li>
 39                 <li>通知公告</li>
 40             </ul>
 41         </div>
 42     </div>
 43     <!--图片内容1-->
 44     <div class="tpnr1">
 45         <div class="tpnr1_div">
 46             <img src="pic.jpg" alt="">
 47             <input type="image" src="btn_login.gif">
 48             <input type="image" src="btn_login1.gif">
 49         </div>
 50         <div class="tpnr2_div">
 51             <h2>定位层始终保持在当前可见屏</h2>
 52             <div class="tpnr_span">
 53                 <p class="nrtp_p">看到很多这样的广告,页面两边各方一个方块图片广告;拖动滚动条时广告随之滚动,始终停留在屏幕的上方或下方。对..</p>
 54             </div>
 55             <div class="tpnr2_img">
 56                 <img src="tb-1.jpg" alt="">
 57                 
 58             </div>
 59             <div class="tpnr2_lieb">
 60                 <ul>
 61                     <li>纯CSS实现DIV三列等高布局</li>
 62                     <li>HTML元素的ID和Name属性的区别</li>
 63                     <li>完美兼容ie6,ie7,ie8以及firefox的CSS透明滤镜</li>
 64                     <li>DIV+CSS实现放大镜效果的分页样式</li>
 65                     <li>javascript为FF设置首页</li>
 66                     <li>复制到系统剪切板之IE,FF兼容版</li>
 67                 </ul>
 68             </div>
 69             <div class="tpnr2_lieb2">
 70                 <ul>
 71                     <li>09-11</li>
 72                     <li>09-13</li>
 73                     <li>09-19</li>
 74                     <li>10-05</li>
 75                     <li>10-11</li>
 76                     <li>10-12</li>
 77                 </ul>
 78             </div>
 79         </div>
 80         <div class="tpnr3_div">
 81             <img src="cpdg.jpg" alt="" class="img1">
 82             <div class="tpnr3_nr1">
 83                 <img src="icon2.gif" alt="">
 84             </div>
 85             <div class="tpnr3_nr2">
 86                 <ul>
 87                     <li>语音业务:</li>
 88                     <li>普通电话丨数字语音中继</li>
 89                 </ul>
 90             </div>
 91             <div class="tpnr3_nr3">
 92                 <ul>
 93                     <li>语音业务:</li>
 94                     <li>普通电话丨数字语音中继</li>
 95                 </ul>
 96             </div>
 97             <div class="tpnr3_nr4">
 98                 <ul>
 99                     <li>语音业务:</li>
100                     <li>普通电话丨数字语音中继</li>
101                 </ul>
102             </div>
103         </div>
104     </div>
105     <!--图片内容2文字内容-->
106     <div class="wznr">
107         <div class="wznr1">
108             <div class="wznr1_1">
109             <div class="wznr1_1_1"><img src="rmcp.gif" alt=""></div>
110                 <div class="tp1">
111                 <div class="wznr1_img">
112                     <ul>
113                         <li><img src="pic4.gif" alt=""></li>
114                         <li>产品名称</li>
115                     </ul>
116                 </div>
117                 <div class="wznr2_img">
118                     <ul>
119                         <li><img src="pic4.gif" alt=""></li>
120                         <li>这里是产品名称</li>
121                     </ul>
122                 </div>
123                 <div class="wznr3_img">
124                     <ul>
125                         <li><img src="pic4.gif" alt=""></li>
126                         <li>产品名称</li>
127                     </ul>
128                 </div>
129                 <div class="wznr4_img">
130                     <ul>
131                         <li><img src="pic4.gif" alt=""></li>
132                         <li>这里是产品名称</li>
133                     </ul>
134                 </div>
135                 <div class="wznr5_img">
136                     <ul>
137                         <li><img src="pic4.gif" alt=""></li>
138                         <li>产品名称</li>
139                     </ul>
140                 </div>
141             </div>
142                         <div class="tp2">
143                 <div class="wznr_img1">
144                     <ul>
145                         <li><img src="pic4.gif" alt=""></li>
146                         <li>产品名称</li>
147                     </ul>
148                 </div>
149                 <div class="wznr_img2">
150                     <ul>
151                         <li><img src="pic4.gif" alt=""></li>
152                         <li>这里是产品名称</li>
153                     </ul>
154                 </div>
155                 <div class="wznr_img3">
156                     <ul>
157                         <li><img src="pic4.gif" alt=""></li>
158                         <li>产品名称</li>
159                     </ul>
160                 </div>
161                 <div class="wznr_img4">
162                     <ul>
163                         <li><img src="pic4.gif" alt=""></li>
164                         <li>这里是产品名称</li>
165                     </ul>
166                 </div>
167                 <div class="wznr_img5">
168                     <ul>
169                         <li><img src="pic4.gif" alt=""></li>
170                         <li>产品名称</li>
171                     </ul>
172                 </div>
173             </div>
174         </div>
175             <div class="wznr1_2">
176             <div class="wznr1_2-1">
177                 <span><img src="qiyelis-1.jpg" alt="">企业历史</span>
178                 <div class="gd1"><a href="#">更多</a></div>
179                 <div class="div_gd"><img src="gd-2.jpg" alt=""></div>
180             <div class="div_pic">
181                 <img src="pic5.gif" alt="">
182             </div>
183             <div class="div_h5">
184                 <h5>多角度对比苹果ipod系列真机</h5>
185                 <p>导言:北京时间9月2日凌晨1点,苹果在旧金山举行新品发布会,数码特派记者在美国现场直播</p>
186             </div>
187             <div class="wznr1_2_img">
188                 <img src="www-1.jpg" alt="">
189             </div>
190             <div class="div_ul">
191                 <ul>
192                     <li>纯CSS实现DIV三列等高布局</li>
193                     <li>HTML元素的ID和Name属性的区别</li>
194                     <li>完美兼容ie6,ie7,ie8以及firefox的CSS透明滤镜</li>
195                     <li>DIV+CSS实现放大镜效果的分页样式</li>
196                     <li>javascript为FF设置首页</li>
197                     <li>复制到系统剪切板之IE,FF兼容版</li>
198                     <li>DIV+CSS实现放大镜效果的分页样式</li>
199                 </ul>
200             </div>
201             </div>    
202             <div class="wznr1_2-2">
203                 <span><img src="qiyelis-1.jpg" alt="">招商加盟</span>
204                 <div class="gd2"><a href="#">更多</a></div>
205                 <div class="div_gd1"><img src="gd-2.jpg" alt=""></div>
206             <div class="div_pic2">
207                 <img src="pic5.gif" alt="">
208             </div>
209             <div class="div_h5_2">
210                 <h5>多角度对比苹果ipod系列真机</h5>
211                 <p>导言:北京时间9月2日凌晨1点,苹果在旧金山举行新品发布会,数码特派记者在美国现场直播</p>
212             </div>
213             <div class="wznr1_2_img2">
214                 <img src="www-1.jpg" alt="">
215             </div>
216             <div class="div_ul2">
217                 <ul>
218                     <li>纯CSS实现DIV三列等高布局</li>
219                     <li>HTML元素的ID和Name属性的区别</li>
220                     <li>完美兼容ie6,ie7,ie8以及firefox的CSS透明滤镜</li>
221                     <li>DIV+CSS实现放大镜效果的分页样式</li>
222                     <li>javascript为FF设置首页</li>
223                     <li>复制到系统剪切板之IE,FF兼容版</li>
224                     <li>DIV+CSS实现放大镜效果的分页样式</li>
225                 </ul>
226             </div>
227         </div>
228     </div>
229         </div>
230         <div class="wznr2">
231             <div class="wznr2_1">
232                 <img src="wd-1.jpg">
233                 <div class="chapin">
234                     <img src="xtb-1.jpg" alt=""><span>最新出的这个产品如何使用?</span>
235                 </div>
236                 <div class="chanpin1">
237                     <img src="xtb2-1.jpg" alt=""><span>该产品采用全新的技术,较上一产品有质的飞跃,功能上增强了许多,使用方法更简单</span>
238                 </div>
239                 <div class="chapin1">
240                     <img src="xtb-1.jpg" alt=""><span>最新出的这个产品如何使用?</span>
241                 </div>
242                 <div class="chanpin2">
243                     <img src="xtb2-1.jpg" alt=""><span>该产品采用全新的技术,较上一</span>
244                 </div>
245                 <div class="chapin2">
246                     <img src="xtb-1.jpg" alt=""><span>最新出的这个产品如何使用?</span>
247                 </div>
248                 <div class="chanpin3">
249                     <img src="xtb2-1.jpg" alt=""><span>该产品采用全新的技术,较上一产品有质的飞跃,功能上增</span>
250                 </div>
251                 <div class="chapin3">
252                     <img src="xtb-1.jpg" alt=""><span>最新出的这个产品如何使用?</span>
253                 </div>
254                 <div class="chanpin4">
255                     <img src="xtb2-1.jpg" alt=""><span>该产品采用全新的技术,较上一产品有质的飞跃,功能上增</span>
256                 </div>
257                 <div class="chapin4">
258                     <img src="xtb-1.jpg" alt=""><span>最新出的这个产品如何使用?</span>
259                 </div>
260                 <div class="chanpin5">
261                     <img src="xtb2-1.jpg" alt=""><span>该产品采用全新的技术,较上一产品有质的飞跃,功能上增强了许多,使用方法更简单</span>
262                 </div>
263                 
264             </div>
265             <div class="wznr2_2">
266                 <span><img src="111-2.jpg" alt=""></span>
267                 <img src="tel.gif" alt="" width="100%">
268             </div>
269         </div>
270     </div>
271     <!--底部导航-->
272     <div class="dbdh">
273         <div class="dbdh1">
274             <div class="dbdh1-1">
275                     <ul>
276                 <li>关于我们</li>
277                 <span>丨丨</span>
278                 <li>产品目录</li>
279                 <span>丨丨</span>
280                 <li>联系我们</li>
281                 <span>丨丨</span>
282                 <li>友情链接</li>
283                 <span>丨丨</span>
284                 <li>反馈问题</li>
285                 <span>丨丨</span>
286                 <li>广告合作</li>
287             </ul>
288             </div>
289         
290         </div>
291     <div class="dbdh2"></div>
292     </div>
293 </body>
294 </html>
View Code

css样式:

  1 /* CSS Document */
  2 * {
  3     margin: 0px;
  4     padding: 0px
  5 }
  6 /*页头*/
  7 .yt {
  8     width: 900px;
  9     height: 70px;
 10 }
 11 .yt1 {
 12     width: 65%;
 13     height: 100%;
 14     position: relative
 15 }
 16 .yt2 {
 17     width: 35%;
 18     height: 100%;
 19 }
 20 .yt1, .yt2 {
 21     float: left
 22 }
 23 .yt1 img {
 24     position: relative;
 25     top: 10px;
 26 }
 27 .yt2_img {
 28     position: relative;
 29     top: 25px;
 30     left: 28px
 31 }
 32 .yt2 span {
 33     position: relative;
 34     top: 19px;
 35     left: 33px;
 36     font-size: 14px
 37 }
 38 #yt2_text {
 39     position: relative;
 40     top: 19px;
 41     left: 30px
 42 }
 43 /*导航*/
 44 .dh {
 45     width: 900px;
 46     height: 70px;
 47 }
 48 .dh1 {
 49     width: 900px;
 50     height: 50%;
 51     background-color: orange;
 52 }
 53 .dh2 {
 54     width: 100%;
 55     height: 50%;
 56 }
 57 .dh1 ul li {
 58     line-height: 30px;
 59     float: left;
 60     list-style-type: none;
 61     margin-left: 38px;
 62 }
 63 .dh1 ul li a {
 64     color: white;
 65     text-decoration: none
 66 }
 67 /*.dh1 ul li a:visited{color: black}*/
 68 .dh2 ul li {
 69     float: left;
 70     list-style-type: none;
 71     margin-left: 38px;
 72 }
 73 /*.dh2 ul li{left: 0px;top:5px;position: relative}*/
 74 /*图片内容*/
 75 .tpnr1 {
 76     width: 900px;
 77     height: 270px;
 78 }
 79 .tpnr1_div {
 80     width: 29.8%;
 81     height: 100%;
 82 }
 83 .tpnr2_div {
 84     width: 45.2%;
 85     height: 100%;
 86     background-image: url(hot_bg.gif);
 87     background-size: cover
 88 }
 89 .tpnr3_div {
 90     width: 23%;
 91     height: 100%;
 92     background-image: url(side_bg.gif)
 93 }
 94 .tpnr1_div, .tpnr2_div, .tpnr3_div {
 95     float: left
 96 }
 97 .tpnr2_div, .tpnr3_div {
 98     margin-left: 1%
 99 }
100 .tpnr2_div h2 {
101     position: relative;
102     top: 19px;
103     left: 2px;
104     text-align: center;
105     font-weight: normal;
106     color: #515151
107 }
108 .nrtp_p {
109     font-size: 14px;
110     color: rgba(110,110,110,1.00);
111     position: relative;
112     top: 26px;
113     left: 6px
114 }
115 .tpnr_span {
116     border-bottom: 1px dashed #ccc;
117     width: 90%;
118     height: 85px;
119     margin: 0 auto
120 }
121 .tpnr2_img {
122     width: 30px;
123     height: 119px;
124     position: relative;
125     top: 10px;
126     left: 10px
127 }
128 /*.tpnr2_img img{position: relative;left: 22px;top: 19px}*/
129 .tpnr2_lieb ul li {
130     list-style-position: inside;
131     font-size: 13px;
132     margin-top: 4px
133 }
134 .tpnr2_lieb ul {
135     list-style-type: none;
136 }
137 /*.spa1,.spa2,.spa3,.spa4,.spa5{float: right;}*/
138 .tpnr2_lieb2 ul li {
139     font-size: 13px;
140     list-style-type: none;
141     margin-top: 4px;
142     color: rgba(87,159,17,1.00)
143 }
144 .tpnr2_lieb2 {
145     position: relative;
146     top: 3px;
147     left: 66px
148 }
149 .tpnr2_img, .tpnr2_lieb, .tpnr2_lieb2 {
150     float: left
151 }
152 .tpnr3_nr1 {
153     position: relative;
154     left: 8px;
155     top: 28px;
156     width: 48px;
157     height: 194px
158 }
159 .tpnr3_nr2 {
160     position: relative;
161     left: 59px;
162     top: -154px;
163     font-size: 13px;
164 }
165 .tpnr3_nr2 ul li {
166     list-style-type: none
167 }
168 .tpnr3_nr3 {
169     position: relative;
170     left: 59px;
171     top: -117px;
172     font-size: 13px;
173 }
174 .tpnr3_nr3 ul li {
175     list-style-type: none
176 }
177 .tpnr3_nr4 {
178     position: relative;
179     left: 59px;
180     top: -80px;
181     font-size: 13px;
182 }
183 .tpnr3_nr4 ul li {
184     list-style-type: none
185 }
186 /*文字内容*/
187 .wznr {
188     width: 900px;
189     height: 605px;
190     
191 }
192 .wznr1 {
193     width: 76%;
194     height: 100%;
195     
196 }
197 .wznr2 {
198     width: 23.5%;
199     height: 100%;
200     
201 }
202 .wznr1, .wznr2 {
203     float: left
204 }
205 .wznr2 {
206     margin-left: 0.5%
207 }
208 .wznr1_1 {
209     width: 100%;
210     height: 51%;
211     background-image: url( wznr-1.jpg);
212     background-size: 100% 100%;
213     background-repeat: no-repeat;
214     position: relative
215 }
216 .wznr1_1_1 img {
217     position: relative;
218     top: 5px;
219     left: 10px
220 }
221 .wznr1_img ul li {
222     list-style-type: none;
223     font-size: 14px
224 }
225 .tp1 {
226     width: 100%;
227     height: 50%
228 }
229 .wznr1_img, .wznr2_img, .wznr3_img, .wznr4_img, .wznr5_img {
230     float: left;
231 }
232 .wznr1_img {
233     position: relative;
234     left: 5px;
235     top: 18px
236 }
237 .wznr2_img {
238     position: relative;
239     top: 18px;
240     left: 30px
241 }
242 .wznr3_img {
243     position: relative;
244     top: 18px;
245     left: 60px
246 }
247 .wznr4_img {
248     position: relative;
249     top: 18px;
250     left: 90px
251 }
252 .wznr5_img {
253     position: relative;
254     top: 18px;
255     left: 120px
256 }
257 .wznr2_img ul li {
258     list-style-type: none;
259     font-size: 14px
260 }
261 .wznr3_img ul li {
262     list-style-type: none;
263     font-size: 14px
264 }
265 .wznr4_img ul li {
266     list-style-type: none;
267     font-size: 14px
268 }
269 .wznr5_img ul li {
270     list-style-type: none;
271     font-size: 14px
272 }
273 .wznr_img1, .wznr_img2, .wznr_img3, .wznr_img4, .wznr_img5 {
274     float: left;
275     position: relative;
276 }
277 .wznr_img2 ul li {
278     list-style-type: none;
279     font-size: 14px
280 }
281 .wznr_img3 ul li {
282     list-style-type: none;
283     font-size: 14px
284 }
285 .wznr_img4 ul li {
286     list-style-type: none;
287     font-size: 14px
288 }
289 .wznr_img5 ul li {
290     list-style-type: none;
291     font-size: 14px
292 }
293 .wznr_img1 ul li {
294     list-style-type: none;
295     font-size: 14px
296 }
297 .wznr_img1 {
298     left: 5px;
299     top: 11px
300 }
301 .wznr_img2 {
302     left: 30px;
303     top: 11px
304 }
305 .wznr_img3 {
306     left: 60px;
307     top: 11px
308 }
309 .wznr_img4 {
310     left: 90px;
311     top: 11px
312 }
313 .wznr_img5 {
314     left: 120px;
315     top: 11px
316 }
317 .wznr1_2 {
318     width: 100%;
319     height: 49%;
320     
321 }
322 .wznr2_1 {
323     width: 100%;
324     height: 78%;
325     background-image: url(side_bg.gif)
326 }
327 .wznr2_1 img {
328     position: relative;
329     left: 10px;
330     top: 5px
331 }
332 .chapin span {
333     font-size: 13px;
334     position: relative;
335     left: 10px;
336     top: 10px;
337     font-weight: bold
338 }
339 .chapin img {
340     position: relative;
341     top: 12px
342 }
343 .chanpin1 span {
344     font-size: 13px;
345     font-weight: normal;
346     position: relative;
347     top: 20px;
348     left: 10px;
349 }
350 .chanpin1 img {
351     position: relative;
352     top: 20px
353 }
354 .chanpin1 {
355     height: 90px;
356     border-bottom: 1px dashed #ccc;
357     width: 100%
358 }
359 .chapin1 span {
360     font-size: 13px;
361     position: relative;
362     left: 10px;
363     top: 10px;
364     font-weight: bold
365 }
366 .chapin1 img {
367     position: relative;
368     top: 12px
369 }
370 .chanpin2 span {
371     font-size: 13px;
372     font-weight: normal;
373     position: relative;
374     top: 6px;
375     left: 10px;
376 }
377 .chanpin2 img {
378     position: relative;
379     top: 8px
380 }
381 .chanpin2 {
382     height: 40px;
383     border-bottom: 1px dashed #ccc;
384     width: 100%
385 }
386 .chapin2 span {
387     font-size: 13px;
388     position: relative;
389     left: 10px;
390     top: 7px;
391     font-weight: bold
392 }
393 .chapin2 img {
394     position: relative;
395     top: 9px
396 }
397 .chanpin3 span {
398     font-size: 13px;
399     font-weight: normal;
400     position: relative;
401     top: 7px;
402     left: 10px;
403 }
404 .chanpin3 img {
405     position: relative;
406     top: 9px
407 }
408 .chanpin3 {
409     height: 50px;
410     border-bottom: 1px dashed #ccc;
411     width: 100%
412 }
413 .chapin3 span {
414     font-size: 13px;
415     position: relative;
416     left: 10px;
417     top: 0px;
418     font-weight: bold
419 }
420 .chapin3 img {
421     position: relative;
422     top: 2px
423 }
424 .chanpin4 span {
425     font-size: 13px;
426     font-weight: normal;
427     position: relative;
428     top: 8px;
429     left: 10px;
430 }
431 .chanpin4 img {
432     position: relative;
433     top: 10px
434 }
435 .chanpin4 {
436     height: 60px;
437     border-bottom: 1px dashed #ccc;
438     width: 100%
439 }
440 .chapin4 span {
441     font-size: 13px;
442     position: relative;
443     left: 10px;
444     top: 9px;
445     font-weight: bold
446 }
447 .chapin4 img {
448     position: relative;
449     top: 11px
450 }
451 .chanpin5 span {
452     font-size: 13px;
453     font-weight: normal;
454     position: relative;
455     top: 9px;
456     left: 10px;
457 }
458 .chanpin5 img {
459     position: relative;
460     top: 11px
461 }
462 .chanpin5 {
463     height: 75px;
464     border-bottom: 1px dashed #ccc;
465     width: 100%
466 }
467 .wznr2_2 {
468     width: 100%;
469     height: 22%;
470     background-image: url(tub-1.jpg);
471     background-size: 100% 100%;
472     background-repeat: no-repeat
473 }
474 .wznr1_2-1 {
475     width: 49.5%;
476     height: 100%;
477     background-image: url( bj-2.jpg);
478     background-size: cover;
479     position: relative;
480     
481 }
482 .wznr1_2-2 {
483     width: 49.5%;
484     height: 100%;
485     background-image: url(bj-2.jpg);
486     margin-left: 1%;
487     background-size: cover;
488     position: relative
489 }
490 .wznr1_2-1, .wznr1_2-2 {
491     float: left
492 }
493 .img1 {
494     position: relative;
495     top: 5px;
496     left: 10px
497 }
498 .div_gd, .gd1 {
499     float: right
500 }
501 .gd1 a {
502     text-decoration: none;
503     font-size: 13px;
504     color: rgba(240,157,70,1)
505 }
506 .div_pic {
507     margin-top: 20px;
508     margin-left: 10px;
509     width: 91px;
510     height: 70px
511 }
512 .wznr1_2-1 span {
513     margin-left: 10px
514 }
515 .div_h5 {
516     position: relative;
517     top: -73px;
518     left: 102px;
519     width: 240px
520 }
521 .div_h5 h5{color: rgba(51,102,153,1)}
522 .div_h5_2 h5{color: rgba(51,102,153,1)}
523 .div_h5 p {
524     font-size: 13px
525 }
526 .wznr1_2_img, .div_ul {
527     float: left
528 }
529 .div_ul ul {
530     list-style-type: none
531 }
532 .div_ul ul li {
533     font-size: 13px
534 }
535 .div_ul {
536     line-height: 22px;
537     position: relative;
538     top: -57px;
539     left: 11px
540 }
541 .wznr1_2_img {
542     position: relative;
543     top: -49px;
544     left: 8px;
545 }
546 .div_gd1, .gd2 {
547     float: right
548 }
549 .gd2 a {
550     text-decoration: none;
551     font-size: 13px;
552     color: rgba(240,157,70,1)
553 }
554 .div_pic2 {
555     margin-top: 20px;
556     margin-left: 10px;
557     width: 91px;
558     height: 70px
559 }
560 .wznr1_2-2 span {
561     margin-left: 10px
562 }
563 .div_h5_2 {
564     position: relative;
565     top: -73px;
566     left: 102px;
567     width: 240px
568 }
569 .div_h5_2 p {
570     font-size: 13px
571 }
572 .wznr1_2_img2, .div_ul2 {
573     float: left
574 }
575 .div_ul2 ul {
576     list-style-type: none
577 }
578 .div_ul2 ul li {
579     font-size: 13px
580 }
581 .div_ul2 {
582     line-height: 22px;
583     position: relative;
584     top: -57px;
585     left: 11px
586 }
587 .wznr1_2_img2 {
588     position: relative;
589     top: -49px;
590     left: 8px;
591 }
592 /*底部导航*/
593 .dbdh {
594     width: 900px;
595     height: 100px;
596 }
597 .dbdh1 {
598     width: 100%;
599     height: 30px;
600     background-image: url(dibu-3.jpg);
601 }
602 .dbdh2 {
603     width: 100%;
604     height: 70px;
605 }
606 .dbdh1 ul li, .dbdh1 ul span {
607     float: left;
608     color: white;
609 }
610 .dbdh1 ul li {
611     list-style-type: none;
612     margin-left: 10px
613 }
614 .dbdh1-1 {
615     width: 75%;
616     height: 100%;
617     margin: 0 auto;
618     line-height: 30px
619 }
620 .dbdh1 ul span {
621     margin-left: 10px
622 }
View Code

效果图:

 

转载于:https://www.cnblogs.com/chenyang-1/p/8158936.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/487060.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2运行内存多大_智能设备中的内存与容量为何傻傻分不清?它们的区别是什么?...

在日常生活中&#xff0c;很多时候会把某些电子产品的容量说成内存&#xff0c;或者把内存说成了容量。比如有人问&#xff1a;“这个手机的内存多大&#xff1f;”或许会有这样回答的&#xff1a;“内存是256G。”这种问答方式虽然看似很普通&#xff0c;如果让业内人士以及了…

Nature突破:首个比头发丝还细的机器人诞生了!可用针头注射入人体

来源&#xff1a;科研大匠1959年&#xff0c;诺贝尔奖得主、理论物理学家Richard Feynman 首次提出微型医用机器人的概念。此后&#xff0c;将电子器件微型化以生产细胞大小的机器人一直是科学家们追求的目标&#xff0c;但由于缺乏合适的微米级致动器系统&#xff0c;该技术一…

腾讯云云机安装dockers

云机的配置 首先更新一下源&#xff08;更新前一直装不了&#xff09;下载dockers-ce&#xff08;社区版&#xff09;启动dockers服务使用hello-world进行测试&#xff08;由于本地没有hello-world这个镜像&#xff0c;所以dockers会下载下来并且在容器里运行&#xff09;转载于…

移动短信回执怎么开通_才知道移动积分需要主动开通功能,才会消费产生积分,垃圾!!!...

几天前朋友突然跟我说用移动积分兑换了流量&#xff0c;于是我很好奇就打开移动APP想查询下自己有多少积分&#xff0c;毕竟几年了从来没想到过积分兑换。有趣的事情发生了&#xff0c;我发现自己的积分显示是0&#xff0c;这怎么可能呢。用了好几年的号码怎么可能没有积分。当…

AIoT成功的关键要素

来源&#xff1a;中国工业和信息化本文发表于《中国工业和信息化》杂志2020年8月刊总第26期随着科技的不断发展&#xff0c;一些在功能上具有相互补充作用的技术正在不可避免地发生结合——例如&#xff0c;人工智能&#xff08;AI&#xff09;和物联网&#xff08;IoT&#xf…

中富之命能有多少钱_邯郸白铁风管工每天工资多少钱?白铁风管价格多少钱你能接受?...

邯郸白铁风管工每天工资多少钱&#xff1f;白铁风管价格多少钱你能接受&#xff1f;身为买家&#xff0c;认为白铁风管价格越低越好&#xff0c;身为厂家&#xff0c;希望在市场价格合理的情况下获得更高的利润。白铁风管工人一天的工资也是一样。以下小编就来说一下白铁风管的…

人工智能的尽头是人工?

来源&#xff1a;CAA混合智能专委会上个月出门&#xff0c;发现十字路口的交警和辅警人数明显增加了。我不禁有些诧异&#xff0c;近十年来&#xff0c;人工智能最成功和最有效的落地成果不就是安防和交通相关应用吗&#xff0c;而十字路口往往都是视频监控最密集的地方&#x…

3种团队分组适应项目_业务团队怎样做目标管理?更能激励员工?(附实操方法)...

导语&#xff1a;目标管理是业务团队的核心&#xff0c;好的目标管理激励员工&#xff0c;差的目标管理形同虚设&#xff01;很多公司有这样的现象&#xff1a;每次给业务团队订目标的时候&#xff0c;总是需要经过一番讨价还价之后&#xff0c;才能最终确定&#xff0c;然而结…

AI处理器热潮正在消退

来源&#xff1a;technews(台) 作者&#xff1a;痴汉水球俗语说得好&#xff1a;海水退潮之后&#xff0c;才知道谁没穿裤子。但历史的教训往往证明残酷的事实&#xff1a;结果站在浪里的所有人&#xff0c;全部都没有穿裤子。处理器业界的年度盛事第32届IEEE HotChips&#x…

gtj2018如何生成工程量报表_土建软件GTJ2018中的十个问题及解决方法

问题1柱汇总计算报错提示&#xff1a;直筋长度的计算结果小于0&#xff1f;方法一&#xff1a;调整为【纵筋销固】就可以计算出来钢筋量。但是设置插筋和纵筋锚固计算出来是有量差的&#xff0c;可以在编辑钢筋中把手算的长度手动添加下或者是在单构件输入界面去手动添加下。方…

重磅|我国科学家成功研制全球神经元规模最大的类脑计算机

来源&#xff1a;浙江大学9月1日&#xff0c;亿级神经元类脑计算机重大成果新闻发布会在杭州召开。浙江大学校长吴朝晖院士出席并讲话。他表示&#xff0c;人工智能浪潮正加快智能增强时代的到来&#xff0c;类脑计算机将成为未来计算的主要形态和重要平台&#xff0c;将在模拟…

java 毫秒转分钟和秒_PDF如何转换CAD文件?教你一分钟批量转上百文件方法,看完秒懂!...

如今科技这么发达&#xff0c;很多人在工作中都会遇到形形色色的各类文件。而同时也因为工作需求碰到文件格式转换难题&#xff0c;如&#xff1a;PDF如何快速转换成CAD文件&#xff1f;今天小编就教大家一个方法&#xff0c;让你轻松一秒完成百个PDF文件转CAD。具体操作方法&a…

数据库设计-规范化规则

SQL反模式一书在附录章节给出了设计关系数据库的规范化规则&#xff0c;一个简明的规范化规则清单。 关系是什么 在规范化之前&#xff0c;我们先要理解下关系。 数学中关系定义&#xff1a;两个不同数据域上的值的集合&#xff0c;通过一个条件得到的一个所有可能组合的子集。…

AI 如果 “智力爆炸” ,只有普通智力的人类是蝼蚁还是宠物?

编译&#xff5c;吴婷婷编审&#xff5c;王新凯出品&#xff5c;学术头条想象一下&#xff0c;当你推倒多米诺骨牌时&#xff0c;第一张牌倒下&#xff0c;而后每一块牌迅速产生反应&#xff0c;直至最后一块牌。实际上&#xff0c;这种连锁反应不局限于物理界&#xff0c;而是…

Java容器---Set: HashSet TreeSet LinkedHashSet

1.Set接口概述 Set 不保存重复的元素&#xff08;如何判断元素相同呢&#xff1f;&#xff09;。如果你试图将相同对象的多个实例添加到Set中&#xff0c;那么它就会阻止这种重复现象。 Set中最常被使用的是测试归属性&#xff0c;你可以很容易地询问某个对象是否在某个Set中。…

马斯克脑机接口遭质疑:不是新技术,没体现神经解码进展

来源&#xff1a;AI前线作者 | 李冬梅马斯克的脑机接口实验&#xff0c;一经发布&#xff0c;就引来了诸多关注&#xff0c;业内专家们对此实验的评价却褒贬不一。北京时间 8 月 29 日&#xff0c;Neuralink 公司发布的神秘技术终于揭开了它的面纱&#xff0c;在视频直播中&am…

坯子库和suapp哪个好用_「双全科技」进销存软件哪个简单好用,管家婆进销存软件教程...

进销存软件哪个简单好用&#xff0c;管家婆进销存软件教程随着国家信息化的发展越来越趋于成熟&#xff0c;越来越多的企业需要进销存软件来提高工作效率&#xff0c;企业家们不再采用传统的库存管理模式&#xff0c;进销存管理系统解决了企业日常经营中一系列库存问题&#xf…

吴恩达推荐笔记:22 张图总结深度学习全部知识

来源&#xff5c;Sophia知乎https://zhuanlan.zhihu.com/p/152362317编辑 | 公众号极市平台本文仅用于学术分享&#xff0c;如有侵权&#xff0c;联系后台作删文处理最近在做笔记查阅内容&#xff0c;觉得这个总结太美观了&#xff0c;真是棒&#xff01;吴恩达在推特上展示了一…

使用nfs映射远程服务器磁盘目录

参考&#xff1a;http://www.centoscn.com/CentosSecurity/SoftSecurity/2015/0408/5118.htmlhttp://www.cnblogs.com/mchina/archive/2013/01/03/2840040.html说明&#xff1a; 本文是在MacOS上做客户端&#xff0c;因为MacOS内核是类Unix&#xff0c;所以本文也适用于Linux客…

ios笔试题算法_微软笔试题-Dijkstra算法

Dijkstra算法是典型的算法。Dijkstra算法是很有代表性的算法。Dijkstra一般的表述通常有两种方式&#xff0c;一种用永久和临时标号方式&#xff0c;一种是用OPEN, CLOSE表的方式&#xff0c;这里均采用永久和临时标号的方式。注意该算法要求图中不存在负权边。      用Dij…