设为首页收藏本站
开启辅助访问
搜索
快捷导航
论坛 › 学院 › 平面设计学院 › 关于网页尺寸的疑问？
发新帖
返回列表
6 1149
电梯直达  跳转到指定楼层

[交流] 关于网页尺寸的疑问？

朴实厚重笃学善思|中级会员 |勤币 279 |学币 0
发表于 2016-7-13 09:33 | 复制链接 | 打印 | 上一主题 | 下一主题

第一个问题：网页中全屏尺寸是1366*768但是高度的768px还包括了浏览器自身的导航栏，那如何定义网页设计稿尺寸才能使我们的网页，显示全屏并且没有滚动条？
第二个问题：我不清楚老师有懂前端代码的没？我这边有个代码，但显示的时候图片没有对齐到浏览器顶端，就是上面这个图，我的目的是想将图片紧挨着窗口上端，请老师指教；
代码如下：
  1. <!doctype html>
  2. <html>

  4. <head>
  5. <meta charset="utf-8">
  6. <title>LeaderElephant</title>
  7. <style>
  8. .bgcolor{
  9.         background-color: #f3f3f2;
  10. }
  11. .flexslider {
  12.         margin: 0px auto 20px;
  13.         position: relative;
  14.         width: 100%;
  15.         height: 482px;
  16.         overflow: hidden;
  17.         zoom: 1;
  18. }

  20. .flexslider .slides li {
  21.         width: 100%;
  22.         height: 100%;
  23. }

  25. .flex-direction-nav a {
  26.         width: 70px;
  27.         height: 70px;
  28.         line-height: 99em;
  29.         overflow: hidden;
  30.         margin: -35px 0 0;
  31.         display: block;
  32.         background: url(images/ad_ctr.png) no-repeat;
  33.         position: absolute;
  34.         top: 50%;
  35.         z-index: 10;
  36.         cursor: pointer;
  37.         opacity: 0;
  38.         filter: alpha(opacity=0);
  39.         -webkit-transition: all .3s ease;
  40.         border-radius: 35px;
  41. }

  43. .flex-direction-nav .flex-next {
  44.         background-position: 0 -70px;
  45.         right: 0;
  46. }

  48. .flex-direction-nav .flex-prev {
  49.         left: 0;
  50. }

  52. .flexslider:hover .flex-next {
  53.         opacity: 0.8;
  54.         filter: alpha(opacity=25);
  55. }

  57. .flexslider:hover .flex-prev {
  58.         opacity: 0.8;
  59.         filter: alpha(opacity=25);
  60. }

  62. .flexslider:hover .flex-next:hover,
  63. .flexslider:hover .flex-prev:hover {
  64.         opacity: 1;
  65.         filter: alpha(opacity=50);
  66. }

  68. .flex-control-nav {
  69.         width: 100%;
  70.         position: absolute;
  71.         bottom: 10px;
  72.         text-align: center;
  73. }

  75. .flex-control-nav li {
  76.         margin: 0 2px;
  77.         display: inline-block;
  78.         zoom: 1;
  79.         *display: inline;
  80. }

  82. .flex-control-paging li a {
  83.         background: url(images/dot.png) no-repeat 0 -16px;
  84.         display: block;
  85.         height: 16px;
  86.         overflow: hidden;
  87.         text-indent: -99em;
  88.         width: 16px;
  89.         cursor: pointer;
  90. }

  92. .flex-control-paging li a.flex-active,
  93. .flex-control-paging li.active a {
  94.         background-position: 0 0;
  95. }

  97. .flexslider .slides a img {
  98.         width: 100%;
  99.         height: 482px;
  100.         display: block;
  101. }
  102. </style>
  103. </head>
  104. <body class="bgcolor">
  105. <!-- 轮播 -->
  106. <div id="banner_tabs" class="flexslider">
  107.         <ul class="slides">
  108.                 <li>
  109.                         <a title="" target="_blank" href="#">
  110.                                 <img width="1920" height="482" alt="" style="background: url(images/美景.jpg) no-repeat center;" src="images/alpha.png">
  111.                         </a>
  112.                 </li>
  113.                 <li>
  114.                         <a title="" href="#">
  115.                                 <img width="1920" height="482" alt="" style="background: url(images/科技.jpg) no-repeat center;" src="images/alpha.png">
  116.                         </a>
  117.                 </li>
  118.                 <li>
  119.                         <a title="" href="#">
  120.                                 <img width="1920" height="482" alt="" style="background: url(images/banner1.jpg) no-repeat center;" src="images/alpha.png">
  121.                         </a>
  122.                 </li>
  123.                 <li>
  124.                         <a title="" href="#">
  125.                                 <img width="1920" height="482" alt="" style="background: url(images/banner2.jpg) no-repeat center;" src="images/alpha.png">
  126.                         </a>
  127.                 </li>
  128.                 <li>
  129.                         <a title="" href="#">
  130.                                 <img width="1920" height="482" alt="" style="background: url(images/banner3.jpg) no-repeat center;" src="images/alpha.png">
  131.                         </a>
  132.                 </li>
  133.         </ul>
  134.         <ul class="flex-direction-nav">
  135.                 <li><a class="flex-prev" href="javascript:;">Previous</a></li>
  136.                 <li><a class="flex-next" href="javascript:;">Next</a></li>
  137.         </ul>
  138.         <ol id="bannerCtrl" class="flex-control-nav flex-control-paging">
  139.                 <li><a>1</a></li>
  140.                 <li><a>2</a></li>
  141.                 <li><a>2</a></li>
  142.                 <li><a>2</a></li>
  143.                 <li><a>2</a></li>
  144.         </ol>
  145. </div>
  146. <script src="js/jquery-1.10.2.min.js"></script>
  147. <script src="js/slider.js"></script>
  148. <script type="text/javascript">
  149. $(function() {
  150.         var bannerSlider = new Slider($('#banner_tabs'), {
  151.                 time: 5000,
  152.                 delay: 400,
  153.                 event: 'hover',
  154.                 auto: true,
  155.                 mode: 'fade',
  156.                 controller: $('#bannerCtrl'),
  157.                 activeControllerCls: 'active'
  158.         });
  159.         $('#banner_tabs .flex-prev').click(function() {
  160.                 bannerSlider.prev()
  161.         });
  162.         $('#banner_tabs .flex-next').click(function() {
  163.                 bannerSlider.next()
  164.         });
  165. })
  166. </script>
  167. </body>
  168. </html>

复制代码


本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有帐号？立即注册

x
举报 使用道具
| 回复

共6个回复 最后回复于 2016-7-21 18:28

晓峰年华
新手上路
勤币 60   学币 0  
沙发
发表于 2016-7-13 11:46:19 | 只看该作者
同学，我来简单回答下你的问题，图片设置成背景的话就可以全屏显示并且没有滚动条，至于高度全屏显示的话，因为显示器的屏幕尺寸跟分辨率会有不同，所以高度是没办法达到一致是全屏的
举报 使用道具
回复 支持 反对
朴实厚重笃学善思
中级会员
勤币 279   学币 0  
板凳
发表于 2016-7-14 21:58:15 | 只看该作者
晓峰年华 发表于 2016-7-13 11:46
同学，我来简单回答下你的问题，图片设置成背景的话就可以全屏显示并且没有滚动条，至于高度全屏显示的话， ...

但是图片设置为背景填充的话就没法做到轮播头图的效果，应该是代码哪出了错，但我不清楚是哪？
举报 使用道具
回复 支持 反对
潜意式
版主
勤币 18146   学币 398  
地板
发表于 2016-7-15 18:59:44 | 只看该作者
.flexslider .slides a img
设置这个类样式position为absolute，然后设置top值为0就顶对齐了。
举报 使用道具
回复 支持 反对
晓峰年华
新手上路
勤币 60   学币 0  
5#
发表于 2016-7-18 22:11:37 | 只看该作者
朴实厚重笃学善思 发表于 2016-7-14 21:58
但是图片设置为背景填充的话就没法做到轮播头图的效果，应该是代码哪出了错，但我不清楚是哪？ ...

背景一样做轮播效果的
举报 使用道具
回复 支持 反对
朴实厚重笃学善思
中级会员
勤币 279   学币 0  
6#
发表于 2016-7-20 21:07:41 | 只看该作者
潜意式 发表于 2016-7-15 18:59
.flexslider .slides a img
设置这个类样式position为absolute，然后设置top值为0就顶对齐了。 ...

我把,display:block；删除后和按老师您说的效果一样，和浏览器窗口还是有大约5px的距离
举报 使用道具
回复 支持 反对
潜意式
版主
勤币 18146   学币 398  
7#
发表于 2016-7-21 18:28:25 | 只看该作者
设置CSS样式padding:0  margin:0试试。可能是默认的间距。
举报 使用道具
回复 支持 反对
发新帖
返回列表
B Color Image Link Quote Code Smilies
高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表