精华内容
下载资源
问答
  • 校园班级网页设计制作网页作品介绍作品首页截图网页代码预览作品来源 网页作品介绍 班级网页设计HTML静态网页设计作业使用dreamweaver制作,采用DIV+CSS布局,共5页,首页使用CSS排版比较丰富,色彩鲜明有活力。顶部...

    网页作品介绍

    班级网页设计HTML静态网页设计作业使用dreamweaver制作,采用DIV+CSS布局,共5页,首页使用CSS排版比较丰富,色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度,主体内容区域宽度为学生网页作业标准的1024PX,使用CSS制作了导航鼠标经过和页面选中效果,有表单页面。

    作品首页截图

    校园班级网页设计

    网页代码预览

    说明:以下为首页部分代码示例

    <body>
    <div class="top">
    	<div class="head">
    		<div class="logo"><img src="images/logo.png" height="60px"></div>
    		<div class="menu">
    			<ul>
    				<li><a href="">班级首页</a></li>
    				<li><a href="">班级通知</a></li>
    				<li><a href="">班级活动</a></li>
    				<li><a href="">失物招领</a></li>
    
    			</ul>
    		</div>
    	</div>
    </div>
    <div class="banner"><img src="images/banner.jpg" width="100%"></div>
    </body>
    

    作品来源

    www.stu-works.com/html/xiaoyuan/282.html

    展开全文
  • 本单元我们主要探讨基本网页特效的设计方法特效赏析任务1-1 JavaScript实现动态加载网页内容 网页中常见的底部导航栏与版权信息如图1-1所示 图1-1所示的底部导航栏与版权信息可以采用HTML代码实现代码如表1-1所示也...
  • 网页设计

    2017-03-27 10:12:00
    从需求出发  分  我们刚开始学习写字的时候,是不会去考虑,写出来的某句话好不好,文章结构合适不合适,因为...比如,分成头部、导航、侧边栏、banner区、主内容区、底部等。  然而这样貌似还是不够,因为...

     从需求出发

      分

      我们刚开始学习写字的时候,是不会去考虑,写出来的某句话好不好,文章结构合适不合适,因为我们是意识不到的。写代码也一样,刚开始,我们只是去定义规则,能用对了属性,语法正确,把页面实现出来了,就好。慢慢地,就会发现,页面也是有结构的,我们按照页面的结构去组织代码,会不会更好?比如,分成头部、导航、侧边栏、banner区、主内容区、底部等。

      然而这样貌似还是不够,因为还有一些东西,复用度是很高的,又不好把它归为任何一个固有模块,比如:面包屑、分页、弹窗等,它们不适合被放到某一个固有模块的代码中,就可以单独的分出一段专属的css和js,或许,这就是组件化的由来~

      拆

      在分了之后,我们的代码看起来已经比之前好很多了,组织清晰,维护性大幅提高,但是,好像还是不够,我们会发现另外一些东西,很细小,但复用度也很高,它们同样不适合被放到模块中去,比如,边框、背景、图标、字体、边距、布局方式等等。如果我们在每个需要它们的地方,都定义一次,它们会被重复很多次,显然,这背离好的实践,会造成代码冗余和维护困难。所以,我们需要“拆”。拆过之后会怎样?我们想在哪里用可以直接加,需要改的时候统一改。

      排

      经过了“分”、“拆”,我们的代码结构已经十分清晰,各个内容模块,功能模块,UI模块都乖巧的等待召唤,那么还差什么?是的,还差有序的组织,分类清晰之后,还需要排列有序,从不同纬度去考量,我们总能精益求精。举个栗子,我们可能会看到像这样:

    @import "mod_reset.css";

    @import "ico_sprite.css";

    @import "mod_btns.css";

    @import "header.css";

    @import "mod_tab.css";

    @import "footer.css";

      我们将不同的部分按照一定的顺序去摆放,能让我们的代码看起来更加有序,易于维护,同时,有利于进行继承或层叠覆盖。不要小看这一步,看似可有可无,实际要求比较高的统筹规划能力,可以减少冗余代码和快速定位问题位置等。

    转载于:https://www.cnblogs.com/1028405GW/p/6625413.html

    展开全文
  • 刀剑神域动漫网页设计知识点介绍网页制作说明网页代码演示导航代码正文代码网页效果预览成品地址 知识点介绍 使用dreamweaver制作采用table表格布局、网页背景颜色、底部版权区域 网页制作说明 本学生网页设计作业...

    知识点介绍

    使用dreamweaver制作采用table表格布局、网页背景颜色、底部版权区域

    网页制作说明

    本学生网页设计作业作品使用dreamweaver采用表格table布局制作,网页设计成品共6页,大小为5.3M,题材为刀剑神域动漫。
    整体页面宽度为1200PX,页面精美,但技术简单,经典上中下结构,制作了底部版权区。

    网页代码演示

    导航代码

    <table width="1200" border="0" cellspacing="0" id="menu" >
      <tr valign="top">
        <td><a href="">网站首页</a></td>
        <td><a href="">作品背景</a></td>
        <td><a href="">故事介绍</a></td>
        <td><a href="">登场角色</a></td>
        <td><a href="">关联作品</a></td>
    	<td><a href="">精美图册</a></td>
      </tr>
    </table>
    

    正文代码

    <table width="1200" border="0" id="zheng">
      <tr>
        <td width="330" rowspan="2"><img src="images/sy.jpg" width="314"/></td>
        <td height="60"><p>刀剑神域是由川原砾著作,abec负责插画,电击文库所属的轻小说,也是作者继《加速世界》后又一文库化的作品。繁体中文版由台湾角川发行,简体中文版由天闻角川发行,并授权爱奇艺轻小说、SF轻小说、咪咕阅读在其平台上发布电子版。</p></td>
      </tr>
      <tr>
        <td><table width="840" border="0" id="jj">
      <tr>
        <td width="100">中文名</td>
        <td width="300">刀剑神域</td>
        <td width="100">原版名称</td>
        <td>ソードアート・オンライン</td>
      </tr>
      <tr>
        <td width="100">出版社</td>
        <td width="300">ASCII Media Works</td>
        <td width="100">所属文库</td>
        <td>电击文库</td>
      </tr>
      <tr>
        <td width="100">出版期间</td>
        <td width="300">2009年04月10日—未完结</td>
        <td width="100">刊行册数</td>
        <td>22卷(未完结)</td>
      </tr>
      <tr>
        <td width="100">作    者</td>
        <td width="300">川原砾</td>
        <td width="100">插    画</td>
        <td>abec</td>
      </tr>
      <tr>
        <td width="100">译    者</td>
        <td colspan="4">周庭旭(第1卷+3-18卷)(中国台湾)、林星宇(第2卷)(中国台湾)、幽远(10-20卷)(中国大陆)、陈定刚(第21卷)(中国大陆)</td>
      </tr>
    </table>
    </td>
      </tr>
    </table>
    

    网页效果预览

    动漫网页设计制作

    成品地址

    stu-works.com/html/dongman/209.html

    展开全文
  • 实现div始终固定在窗口底部代码

    千次阅读 2013-12-03 10:28:35
    网上实现这种功能的代码挺多的,但有个问题,网页如果放大的话,这个div会跟着放大,但不像网页的其他内容,它不能左右滑动,结果显示不全。而工作上的需求是jsp页面在手机上浏览的,这样就非常郁闷。后来换了一种...

            网上实现这种功能的代码挺多的,但有个问题,网页如果放大的话,这个div会跟着放大,但不像网页的其他内容,它不能左右滑动,结果显示不全。而工作上的需求是jsp页面在手机上浏览的,这样就非常郁闷。后来换了一种方式,就是在网页一加载的时候,从窗体底部生成一个div,然后设置随着滚动条的滑动,div也自动滑动到窗体底部。同样能达到效果,而且放大后能显示完整。不过设计网页时最后得控制一下整体的最小宽度。

           以下是实现的js代码:

     <script>
    function $(id)
    {
      return document.getElementById(id);
    }
    var LoginUI = !!window.LoginUI || {};
    
    LoginUI.getViewportWidth = function(){
        var width=0;
        if(document.documentElement && document.documentElement.clientWidth){
        width=document.documentElement.clientWidth;}
        else if(document.body && document.body.clientWidth){
        width=document.body.clientWidth;}
        else if(window.innerWidth){
        width=window.innerWidth-18;}
        return width;
    }
    
    
    LoginUI.getViewportHeight = function() {
        var height=0;
        if(window.innerHeight){
        height=window.innerHeight;}
        else if(document.documentElement&&document.documentElement.clientHeight){
        height=document.documentElement.clientHeight;}
        else if(document.body&&document.body.clientHeight){
        height=document.body.clientHeight;}
        return height;
    }
    
    LoginUI.getViewportScrollX = function(){
        var scrollX=0;
        if(document.documentElement&&document.documentElement.scrollLeft){
        scrollX=document.documentElement.scrollLeft;}
        else if(document.body&&document.body.scrollLeft){
        scrollX=document.body.scrollLeft;}
        else if(window.pageXOffset){
        scrollX=window.pageXOffset;}
        else if(window.scrollX){
        scrollX=window.scrollX;}
        return scrollX;
    }
    
    LoginUI.getViewportScrollY=function() {
        var scrollY=0;
        if(document.documentElement&&document.documentElement.scrollTop){
        scrollY=document.documentElement.scrollTop;}
        else if(document.body&&document.body.scrollTop){
        scrollY=document.body.scrollTop;}
        else if(window.pageYOffset){
        scrollY=window.pageYOffset;}
        else if(window.scrollY){
        scrollY=window.scrollY;}
        return scrollY;
    }
    
    function scrollMsgTip()
    {
    
    document.getElementById("msgtip").style.display="block";
    
       var t = LoginUI.getViewportHeight() + 
          LoginUI.getViewportScrollY() - $("msgtip").offsetHeight;
       $("msgtip").style.top = t + "px"; 
       
       /*
       $("msgtip").style.left = LoginUI.getViewportWidth() + 
          LoginUI.getViewportScrollX() - $("msgtip").offsetWidth + "px";
        */  
       
    }
    
    function scrollTip()
    {
        scrollMsgTip();
        
    }
    
    window.onload = scrollTip;
    window.onscroll = scrollTip;
    window.scrollTo(5, 5);//这段可以去掉,工作上的需求加上的
    
    
    //以下可以去掉,工作上的需求加上的
    function initScrollA(){//再执行一次移动document.getElementById("msgtip").style.display="block";var t = LoginUI.getViewportHeight() + LoginUI.getViewportScrollY() - $("msgtip").offsetHeight; $("msgtip").style.top = t + "px"; }
    //以下可以去掉,工作上的需求加上的
    function timeOut(){ setTimeout('initScrollA()',100); }</script>
    
    

    展开全文
  • 6 音乐视频播放网页设计;实例探析 任务6-1 探析基于HTML5的网页音乐播放器之一 效果展示 网页音乐播放器0601.html的浏览效果如图6-1所示 网页音乐播放器0601.html的主体结构为顶部中部底部结构顶部分布了多个播放...
  • 网页作品介绍班级网页设计HTML静态网页设计作业使用dreamweaver制作,采用DIV+CSS布局,共5页,首页使用CSS排版比较丰富,色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度,主体内容区域宽度为学生网页作业标准...
  • 歌单推荐三、新歌首发四、底部版权、外链部分设计< footer >五、关于不同浏览器格式的统一五、完整代码行六、完整代码实现效果 布局思路 这个练习项目通过模仿QQ音乐网页版的布局模式和基础动画效果达到以下...
  • 很多时候为了方便在手机端浏览网站,我们设计网站的时候要尽可能的以最简便的方式呈现完整的内容。toolbar工具 栏就是其中一个比较简单的方式,在终端浏览... toolbar设计网页中的代码如下:          
  • 现在很多网站运行者在拿到网站程序系统安装运行后,想在网站中添加广告位,大部分运行...所谓网页悬浮广告或固定位,大部分其实不适合后台管理,除非网站的程序员已经设计好了,位置也固定好了,您后台只做修改操作...
  • 而鼠标经过出现的下划线,通过只设置底部边框样式来实现,就是说边框本来有上下左右,现在只显示下边框,并设置为黄色 具体代码: <!doctype html> <html> <head> <meta charset="utf-8"> &...
  • html+css底部自动固定底部 ...这个时候如果是大屏的话,底部下面会有多余的空白区域,而网页设计需求必须要底部贴近浏览器底部。 固定定位,绝度定位都不好使。 废话不多说,直接上代码实现: &...
  • 本节书摘来自异步社区《渐进增强——跨平台用户体验...渐进增强——跨平台用户体验设计“总有些人干过这种事,在网页顶部或底部搞一个小黄条,写上‘请使用XX浏览器(如IE6)访问本网站以获得最佳访问效果’。要我说,...
  • 最近在用wordpress写页面时,设计师给出了一种网页排布图样,之前从未遇到过,其在电脑上(分辨率大于768px)的效果图如下:而在手机(分辨率小于等于768px)上要求这样排列:我想到了两种方法第一种是用bootstrap的row...
  • 而不需要返回产品页面中间部分,找到购物按钮来下单,这样的网页设计,购物体验比较好,所以分享给大家,同时,由于电脑端设置这样的按钮会显得不太好看(博主没UI设计师配合),就只做了手机端的代码。如果电脑手机...
  • 那么在做这样的项目时,首先要做的除了对单个网页的框架进行设计以外,我们还应该注意代码的冗余问题,就是要使你设计的那个框架能够很好的兼容这几个网页的内容,达到写最少的代码实现同样的功能的效果。...
  • 为了防止广告打开的速度慢,而影响到网页的整体速度,搞了这段代码.Js加载广告,不影响网页的打开速度首页,把这段代码放在网页显示广告的地方,设计家园广告载入中...然后在网页的最底部,放入下面的代码在这里可以放广告...
  • 博闻广记古典式网页模板是以html5+css3+js进行制作,不带php代码,是纯粹的静态网页模板,可套用任何程序。博闻广记是一款高端大气、古典优雅的主题,采用html5+css3响应式、智能化设计,兼容IE8、9、10、11和各种...
  • CoolTab 选项卡效果代码,作者系国外源码爱好者,这是国外脚本爱好者实现的CoolTab,这是示例,它将网页中的很多内容用一个选项卡来实现,比如我们用它可制作一些页面底部的信息,像关于我们、联系方式、网站声明、...
  • Gulp-静态网页模块化

    2018-01-05 19:55:00
    比如:整套代码有50个页面,其中有40个页面顶部和底部模块相同。那么同样的两段代码我们复制了40遍(最难受的方法)。然后,这个问题就这样解决了。再然后,产品经理看了几遍后突然说顶部的某块需要改改设计。。。...
  • 比如:整套代码有50个页面,其中有40个页面顶部和底部模块相同。那么同样的两段代码我们复制了40遍(最难受的方法)。然后,这个问题就这样解决了。再然后,产品经理看了几遍后突然说顶部的某块需要改改设计。。。...
  • 最近在用wordpress写页面时,设计师给出了一种网页排布图样,之前从未遇到过,其在电脑上(分辨率大于768px)的效果图如下: 而在手机(分辨率小于等于768px)上要求这样排列: 我想到了两种方法 第一种是用...
  • 接下来是废话,如果你不想看可以直接联系我们定制微信:guoguoll666仿真网页 banner 设计·网页里能做的,我们(也许)都能做!点击左右箭头,切换画面点击底部圆点,跳转画面点击画面中央,跳转对应链接无限次循环...
  • 本书适合 Web 设计与开发的初学者和爱好者自学,也适合有一定 Web 前端开发基础的网页开发人员阅读,同时也可作为各院校相关专业的教材使用。 第1章 移动设备与Web技术 1 1.1 了解移动互联网 1 1.1.1 移动互联网...
  • 利用html和csss实现京东首页静态页面

    千次阅读 2017-08-12 17:54:09
    2.京东首页整体分为页面头部导航,中部内容和页面底部服务栏,其中头部导航与底部服务在每个京东子页面里出现,可以将其css代码写入base.css中 3.编写html代码时重要的是进行结构分析,比如轮播图的设计,首先使用...
  • 网页设计中,时常要用到把某个元素始终定位在屏幕上,即使滚动浏览器窗口也不会发生变化。 一般我们会使用position:fixed来进行绝对固定,但IE6并不支持position:fixed属性,所以必须对IE6进行”特殊照顾”。 ...

空空如也

空空如也

1 2 3 4 5
收藏数 93
精华内容 37
关键字:

网页设计底部代码