首页 / CSS / 应用WEB标准实例：列表页面的制作_经验交流

应用WEB标准实例：列表页面的制作_经验交流

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了应用WEB标准实例：列表页面的制作_经验交流，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4618字，纯文字阅读大概需要7分钟。

内容图文

实例效果图：

整体观察思考：

在开始制作页面前，我们首先要观察图的结构，考虑怎样布局，布局对一个网站来说非常重要，他是整个体系的骨骼。

再看此图

很经典的三行两列结构，分为四块，TOP、RIGHT、LEFT、BOTTOM。如下图

应用WEB标准实例：列表页面的制作_经验交流 - 文章图片

以上我们思考过整体的结构,接下来我们要考虑如何把思考出来的结构变化成"骨骼"

如下图(盒模型来分析)

制作流程：

主体制作 --> 细节制作

一、制作主体：

xhtml：

css：

@import url("http://www.07art.com/public/public.css");
.editorChoose{width:591px;height:400px;border:1px solid #aaa;background:#fff;}
/*TOP内容*/
.editorChoose h1{height:30px;line-height:30px;border-bottom:1px solid #aaa;text-align:center;font-weight:bold;color:#000;background:#efefef;}
/*LEFT内容*/
.edLeft{float:left;width:142px;height:317px;border-right:1px solid #aaa;overflow:auto;}
/*RIGHT内容*/
.edRight{float:right;width:448px;height:317px;overflow:auto;}
/*BOTTOM内容*/
.edBottom{clear:both;padding-top:15px;height:35px;border-top:1px solid #aaa;text-align:center;background:#efefef;}

骨骼出来了,接下来我们该在骨骼上添加"血"遇"肉",这样才算完整的.

二、细节制作：

(1) TOP制作

先来看一下TOP容器中的细节部分。

应用WEB标准实例：列表页面的制作_经验交流 - 文章图片

看上去这里很简洁，文字居中，关闭按钮居右并且距上8px、距右10px的距离。

考虑TOP的结构，关闭按钮在右边，那么我们就要给关闭按钮一个右浮动(float:right;)。

注意:当关闭按钮要右浮动的时候，关闭按钮放在文字前面。

选择图片

相对应的css

.editorChoose h1{height:30px;line-height:30px;border-bottom:1px solid #aaa;text-align:center;font-weight:bold;color:#000;background:#efefef;}/*文字居中*/
.editorChoose h1 img{float:right;margin:8px 10px 0px 0px;}/*图片居右*/

(2) RIGHT制作

看一下RIGHT容器中的细节部分。

应用WEB标准实例：列表页面的制作_经验交流 - 文章图片

红块区域为重复区域,所以只做一块,然后copy就可以.

相对应的css

.edRight div{width:95px;padding:18px 0px 12px 10px;float:left;}
.edBottom{clear:both;padding-top:15px;height:35px;border-top:1px solid #aaa;text-align:center;background:#efefef;}

(3) LEFT制作

看一下RIGHT容器中的细节部分。

应用WEB标准实例：列表页面的制作_经验交流 - 文章图片

这是一个列表性质的图，首先就要考虑ul li。

h2 标签写相册“相册列表”位置

ul 写下面的列表，并用overflow:auto;来控制滚动条，

xhtml：

相册列表

我的一家幸福生活

包身工是怎么死的？

杨文你真是个混蛋！

小白被抛弃

我的一家幸福生活

栀子花开

我的野蛮女友

蓝色生死恋

这该死的爱

湖南大学

新一佳

新一佳

新一佳

新一佳

新一佳

css：

.edLeft h2{padding:1px 1px 0px 1px;height:26px;border-bottom:1px solid #aaa;}
.edLeft h2 span{text-align:center;height:25px;background:#BFBDBD;color:#000;text-align:center;font-weight:bold;line-height:25px;display:block;}
.edLeft{float:left;width:142px;height:317px;border-right:1px solid #aaa;}
.edLeft ul{height:290px;overflow:auto;}
.edLeft li{height:27px;line-height:27px;border-bottom:1px solid #aaa;padding-left:10px;}
.edLeft li a{color:#000;}
.edLeft li a:link,.edLeft dd a:visited{text-decoration:none;}
.edLeft li a:hover{text-decoration:underline;}
.edLeft li.background{background:#ECEBEB;}

(4) BOTTOM制作

应用WEB标准实例：列表页面的制作_经验交流 - 文章图片

这里我把按钮写成input的形式

相对应的css

.edBottom input{width:37px;height:22px;color:#000;border:1px solid #555;background:#aaa;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="description" content="应用WEB标准实例：列表页面的制作" /> 
<meta name="keywords" content="应用WEB标准实例：列表页面的制作" /> 
<meta name="author" content="http://www.07art.com" /> 
<meta name="robots" content="all" /> 
<title>11111111111</title> 
<style type="text/css"> 
@import url("http://www.07art.com/public/public.css"); 
.editorChoose{width:591px;height:400px;border:1px solid #aaa;background:#fff;} 
/*TOP内容*/ 
.editorChoose h1{height:30px;line-height:30px;border-bottom:1px solid #aaa;text-align:center;font-weight:bold;color:#000;background:#efefef;} 
.editorChoose h1 img{float:right;margin:8px 10px 0px 0px;} 
 /*LEFT内容*/ 
.edLeft{float:left;width:142px;height:317px;border-right:1px solid #aaa;} 
.edLeft h2{padding:1px 1px 0px 1px;height:26px;border-bottom:1px solid #aaa;} 
.edLeft h2 span{text-align:center;height:25px;background:#BFBDBD;color:#000;text-align:center;font-weight:bold;line-height:25px;display:block;} 
.edLeft{float:left;width:142px;height:317px;border-right:1px solid #aaa;} 
.edLeft ul{height:290px;overflow:auto;} 
.edLeft li{height:27px;line-height:27px;border-bottom:1px solid #aaa;padding-left:10px;} 
.edLeft li a{color:#000;} 
.edLeft li a:link,.edLeft dd a:visited{text-decoration:none;} 
.edLeft li a:hover{text-decoration:underline;} 
.edLeft li.background{background:#ECEBEB;} 
/*RIGHT内容*/ 
.edRight{float:right;width:448px;height:317px;overflow:auto;} 
.edRight div{width:95px;padding:18px 0px 12px 10px;float:left;} 
.edBottom{clear:both;padding-top:15px;height:35px;border-top:1px solid #aaa;text-align:center;background:#efefef;} 
/*BOTTOM内容*/ 
.edBottom input{width:37px;height:22px;color:#000;border:1px solid #555;background:#aaa;} 
</style>

</head>

<body>

<div class="editorChoose"> 
    <h2><img src="" alt=""/>选择图片</h2> 
    <div class="edRight"> 
        <div> 
            <input name="checkbox" type="checkbox" value="" />  
            <img src="" alt=""/> 
        </div> 
        <div> 
            <input name="checkbox" type="checkbox" value="" />  
            <img src="" alt=""/> 
        </div> 
        <div> 
            <input name="checkbox" type="checkbox" value="" />  
            <img src="" alt=""/> 
        </div> 
        <div> 
            <input name="checkbox" type="checkbox" value="" />  
            <img src="" alt=""/> 
        </div> 
        <div> 
            <input name="checkbox" type="checkbox" value="" />  
            <img src="" alt=""/> 
        </div> 
        <div> 
            <input name="checkbox" type="checkbox" value="" />  
            <img src="" alt=""/> 
        </div> 
        <div> 
            <input name="checkbox" type="checkbox" value="" />  
            <img src="" alt=""/> 
        </div> 
        <div> 
            <input name="checkbox" type="checkbox" value="" />  
            <img src="" alt=""/> 
        </div> 
        <div> 
            <input name="checkbox" type="checkbox" value="" />  
            <img src="" alt=""/> 
        </div> 
        <div> 
            <input name="checkbox" type="checkbox" value="" />  
            <img src="" alt=""/> 
        </div> 
        <div> 
            <input name="checkbox" type="checkbox" value="" />  
            <img src="" alt=""/> 
        </div> 
        <div> 
            <input name="checkbox" type="checkbox" value="" />  
            <img src="" alt=""/> 
        </div> 
        <div> 
            <input name="checkbox" type="checkbox" value="" />  
            <img src="" alt=""/> 
        </div> 
        <div> 
            <input name="checkbox" type="checkbox" value="" />  
            <img src="" alt=""/> 
        </div> 
        <div> 
            <input name="checkbox" type="checkbox" value="" />  
            <img src="" alt=""/> 
        </div> 
    </div> 
    <div class="edLeft"> 
        <h2><span>相册列表</span></h2> 
        <ul> 
            <li>我的一家幸福生活</li> 
            <li>包身工是怎么死的？</li> 
            <li>杨文你真是个混蛋！</li> 
            <li  class="background">小白被抛弃</li> 
            <li>我的一家幸福生活</li> 
            <li>栀子花开</li> 
            <li>我的野蛮女友</li> 
            <li>蓝色生死恋</li> 
            <li>这该死的爱</li> 
            <li>湖南大学</li> 
            <li>新一佳</li> 
            <li>新一佳</li> 
            <li>新一佳</li> 
            <li>新一佳</li> 
            <li>新一佳</li> 
        </ul> 
    </div> 
     
    <div class="edBottom"><input type="button" name="button" value="确 定"/>　　　　<input name="button" type="button" value="取 消"/></div> 
</div>

</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

内容总结

以上是互联网集市为您收集整理的应用WEB标准实例：列表页面的制作_经验交流全部内容，希望文章能够帮你解决应用WEB标准实例：列表页面的制作_经验交流所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/415688.html

来源：【匿名】

【上一篇】css实现行间距效果_经验交流【下一篇】php无法调用css怎么办

更多 ►

【应用WEB标准实例：列表页面的制作_经验交流】教程文章相关的互联网学习教程文章

div+css的基础简介及应用（二）——CSS的常用属性【图】

1.CSS常用属性??应用示例如下：<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>css常用属性-背景</title><style type="text/css">#bg_CSS01{border: 2px #00ff00 solid;background: #ff00ff;width: 200px;height: 200px;}#bg_CSS02{border: 2px #00ff00 solid;background-color: #000000;width: 200px;height: 200px;}#bg_CSS03{border: 2px #00ff00 solid;bac...

html5+css3之动画在webapp中的应用

动画在webapp的现状 webapp模式的网站追求的就是一个体验，是HTML5&CSS3浪潮下的产物，抛开体验不说，webapp模式门槛比较高；而体验优化的一个重点便是动画，可以说动画是webapp的一个亮点。但也是一个难点，一个痛点，主要原因是：移动端手机的碎片化严重。设备、型号、版本、分辨率等差异导致移动端需要考虑的主流情况达10多种，而Hybrid带来的webview可以让情况更加糟糕所以说，近两年想在移动端大范围的使用动画，或者使用weba...

CSS3教程:边框属性border的极致应用【图】

这里讨论的都是关于边框属性border的极致应用，这些应用虽说有些剑走偏门，但在一些特殊的场合，可能还是会用得上的，如果你对HTML代码有洁癖，有切肤之痛，并且认为冗余的标签影响到你的视觉神经，那么你可以权当一种业余欣赏。作者：冰极峰博客地址：http://www.cnblogs.com/binyong这世界太疯狂，Border属性也搞模仿秀！这里讨论的都是关于边框属性border的极致应用，这些应用虽说有些剑走偏门，但在一些特殊的场合，可能还是会...

CSS应用心得

单纯Html配合CSS网页下面用程序来实际总结一下首先，在写程序的应该具有一个良好的编程习惯。第一：排版，拥有一个良好的排版，有助于我们能够快速的理解以及阅读程序；第二：注释，就如以下程序，作为一个非本人编写的程序，如果没有有效的注释，那么程序阅读以及修改起来是及其困难的；第三：模块化，模块化为了让我们程序员自己能够快速的看清结构布局，从而很好的去把握程序的每一步，以免在程序出现问题的时候不便于修改。 <!...

css3在移动端中应用2（超实用）

阴影box-shadow:<length><length><length>||color;<style type="text/css"> div{ -webkit-box-shadow:3px 4px 2px #000; -moz-box-shadow:3px 4px 2px #000; box-shadow:3px 4px 2px #000; padding:5px 4px;}</style><style type="text/css"> div{ text-shadow:5px -10px 5px red; color:#666; font-size:16px;}</style>背景background-size:10px 5px;-webkit-background-size:10px 5px;background-ori...

水平居中，css flex应用

http://imweb.io/topic/5751983c3eef750438d5cb82justify-content: space-evenly;http://www.css88.com/archives/7760原文：https://www.cnblogs.com/992516410zhen/p/8460730.html

CSS伪类before和after的应用【图】

最近看到一些关于伪类的文章和实例，感觉印象不怎么深刻，今天在项目中出现了效果如图，记下来在文字两遍各有一条横线.1.页面局部区域布局div->span->汉字（小户型）2.span上有class为quote-right <div><span class="quote-right">小户型</span></div>3那么在css中增加其对应的伪类.quote-right:before,.quote-right:after{content: '';display:inline-block;width: 20%;margin: 5px 5%;border-bottom: 1px solid #cacaca;} .qu...

45个非常奇妙的CSS3 特性应用示例【图】

这篇文字收集了45个让人觉得不可思议的 CSS3 应用示例，它们验证了 CSS3 Transform 和 Transition 等属性的强大能力。随着越来越多的浏览器对 CSS3 支持的不断完善，设计师和开发者们有了更多的选择，以前需要使用 JavaScript 才能实现的各种很酷的界面效果和动画，如今使用纯 CSS 代码就可以很容易实现。CSS3 Clock With jQueryAnother Image GallerySliding Vinyl3D Cube That Rotates Using Arrow KeysMultiple 3D Cubes (Slide...

CSS中position详解与常见应用实现【代码】【图】

在web前台开发时候，我们必不可少的会用到postion属性进行布局定位。今天总结了一下position知识点，与常用功能与大家分享，欢迎大家交流指正。首先我们对postion属性进行详解。在CSS3中，对于postion是这么描述的总结如下:static 是默认布局，设置top\left。。属性不会有作用。relative是相对布局，设置的top\left。。会相对文件中的控件。absolute是绝对定位，设置的top\left。。会相对整个页面而定。fixed是相对浏览器窗口定位，...

8款强大的CSS3/HTML5动画及应用源码【图】

1、CSS3 jQuery UI控制滑杆插件今天我们要来分享一款基于CSS3和jQuery UI的控制滑杆插件，这款控制滑杆是在HTML5滑杆元素的基础上进行自定义CSS3渲染，所以外观更加漂亮。另外，这款控制滑杆插件是纵向的，当然你也可以通过设置让它水平放置。在线演示源码下载2、HTML5版切水果游戏 HTML5游戏极品这是一款由百度JS小组提供的HTML5版切水果游戏，记得切水果游戏当年非常火，今天我找到了一款基于HTML5实现的网页版切水果游戏。虽然和...

关于CSS中的display:table-cell使用技巧的几种应用【图】

一、display:table-cell属性简述 display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了display:table-cell属性在实际项目中的应用。我们都知道，单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以display:table-cell还是有不少潜在的使用价值的，虽说IE6/7不支持此属性，但是幸运的是...

【转】15个无比华丽的HTML5/CSS3动画应用

原文转自：http://www.html5cn.org/article-7089-1.html前几天，HTML5标准已经尘埃落定，未来的Web将会是由HTML5主导，当然作为开发者对这一喜讯更为动心。本文主要分享了15个无比华丽的HTML5/CSS3动画应用，供大家参考学习。1、HTML5/CSS3图片选择动画可选择多张图片今天我们来分享一款既炫酷又实用的HTML5图片选择特效，当图片被选中时，图片上就会覆盖一个半透明的层，上面有一个勾，并且在选中的时候图片出现弹跳的动画效果。...

HTML5应用程序缓存_html/css_WEB-ITnose

HTML 5 应用程序缓存的介绍 http://www.w3school.com.cn/html5/html_5_app_cache.asp 接下来通过实际案例介绍HTML5应用程序缓存的介绍。一应用服务器应用服务器使用tomcat. 在tomcat的web.xml 添加如下配置,因为manifest文件返回时MIME-type必须为 text/cache-manifest <mime-mapping> appcache <mime-type>text/cache-manifest</mime-type> </mime-mapping> 二页面 manifest文件default.appcache 缓存s...

蝉知5.1发布，增加布局方案跨主题应用功能_html/css_WEB-ITnose

蝉知企业门户系统5.1正式发布了，本次升级对后台界面进行了重大改进，增加了布局方案跨主题应用功能，设置前台各个页面css和js代码的功能，还提供了基于七牛的cdn资源。关于蝉知蝉知企业门户系统是由易软天创团队开发的一款专向企业营销使用的企业门户系统。企业使用蝉知系统可以非常方便地搭建一个专业的企业营销网站，进行宣传，开展业务，服务客户。蝉知内置了文章、产品、论坛、评论、会员、博客、手册...

关于CSS伪元素的应用【图】

利用CSS伪元素：before 和：after 可以在文档前后插入内容而不改变文档原有结构，下面有个不错的示例，大家可以参考下利用CSS伪元素：before 和：after 可以在文档前后插入内容而不改变文档原有结构，再配合 box-shadow 可以实现很炫的效果, 下面就展示三个例子： 1、利用 :before 和 :after 添加背景，比如给一段文字前后打引号； 2、利用 :before, :after, box-shadow 实现3D阴影效果; 3、利用 :before, :after, box-shadow ...

首页 / CSS / 应用WEB标准实例：列表页面的制作_经验交流

应用WEB标准实例：列表页面的制作_经验交流

内容导读

内容图文

实例效果图：

整体观察思考：

制作流程：

一、制作主体：

二、细节制作：

(1) TOP制作

注意:当关闭按钮要右浮动的时候，关闭按钮放在文字前面。

选择图片

(2) RIGHT制作

(3) LEFT制作

相册列表

(4) BOTTOM制作

内容总结

内容备注

内容手机端

【应用WEB标准实例：列表页面的制作_经验交流】教程文章相关的互联网学习教程文章

div+css的基础简介及应用（二）——CSS的常用属性【图】

html5+css3之动画在webapp中的应用

CSS3教程:边框属性border的极致应用【图】

CSS应用心得

css3在移动端中应用2（超实用）

水平居中，css flex应用

CSS伪类before和after的应用【图】

45个非常奇妙的CSS3 特性应用示例【图】

CSS中position详解与常见应用实现【代码】【图】

8款强大的CSS3/HTML5动画及应用源码【图】

关于CSS中的display:table-cell使用技巧的几种应用【图】

【转】15个无比华丽的HTML5/CSS3动画应用

HTML5应用程序缓存_html/css_WEB-ITnose

蝉知5.1发布，增加布局方案跨主题应用功能_html/css_WEB-ITnose

关于CSS伪元素的应用【图】

WEB - 相关标签

实例 - 相关标签

CSS - 技术教程分类

CSS - 最新教程

CSS - 最热教程