`
有志青年
  • 浏览: 4397 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
最近访客 更多访客>>
社区版块
存档分类

小小de页面

HTML 
阅读更多 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="ie=Edge" />
<title>无标题文档</title>
<style>
*{margin:0; padding:0; border:0px; font-size:12px; color:#000;}
	.wrap{width:950px; margin:0 auto;}
		#nav{ margin:35px 0;}
			#nav ul{ float: right; list-style:none; display:inline;}
				#nav ul li{ float:left; line-height:19px;}
					#nav ul li a{ text-decoration:none; word-spacing:3px;}
					
		#content{float:left;}  
			#content .col{float:left; margin-left:10px; }
			#content .col.first{margin-left:0px;}
				#content .col .rc{width:230px; height:38px; border-bottom:15px solid #000; height:115px;}
				#content .col .rh{border-top:15px solid #000; height:38px; line-height:38px; font-size:25px; font-weight:bolder;}
	    #foot{margin-top:28px;margin-left:240px; }
			#foot ul{}
				#foot li{ float:left; width:134px; margin-left:26px; }
				#foot li em{ font-weight:bold; font-size:13px;}
				#foot li span{ display:block;}
.clear{ clear:both;}
</style>
</head>
<!--原稿地址：http://72rivingtonstreet.com/-->
<body>
<div class="wrap">
	<div id="nav">
    	<ul>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">NOW ,THEN & NEXT</a></li>
            <li><a href="#">SHOP</a></li>
            <li><a href="#">LIBRARY</a></li>
            <li><a href="#">LOCATION & OPENING TIMES</a></li>
            <li><a href="#">PRESS</a></li>
            <li><a href="#">MAIN YCN WEBSITE</a></li>
        </ul>
        <div class="clear"></div>
    </div>
   
   	<div id="content">
    	<div class="col first">
        	<div class="rc rh"></div>
            <div class="rc"><a href="#"><img src="logo.gif" width="230" height="115" /></a></div>
            <div class="rc"></div>
            <div class="rc"></div>
        </div>
        <div class="col">
        	<div class="rc rh">NOW</div>
            <div class="rc"><a href="#"><img src="m1.gif" width="230" height="115" /></a></div>
            <div class="rc"><a href="#"><img src="m1.gif" width="230" height="115" /></a></div>
            <div class="rc"><a href="#"><img src="m1.gif" width="230" height="115" /></a></div>
        </div>
        <div class="col">
        	<div class="rc rh">SHOP</div>
            <div class="rc"><a href="#"><img src="m1.gif" width="230" height="115" /></a></div>
            <div class="rc"><a href="#"><img src="m1.gif" width="230" height="115" /></a></div>
            <div class="rc"><a href="#"><img src="m1.gif" width="230" height="115" /></a></div>
        </div>
        <div class="col">
        	<div class="rc rh">LIBRARY</div>
            <div class="rc"><a href="#"><img src="m1.gif" width="230" height="115" /></a></div>
            <div class="rc"><a href="#"><img src="m1.gif" width="230" height="115" /></a></div>
            <div class="rc"><a href="#"><img src="m1.gif" width="230" height="115" /></a></div>
        </div>
    </div>
    <div class="clear"></div>
    <div id="foot">
    	<div>
        	<ul>
            	<li>
                	<em>location & Opening Times</em>
                    <p>
                    	<span>YCN.72 Rivington Street </span>
                        <span>London, EC2A 3AY </span>
                        <span>  United Kingdom</span>
                        <span>  t. +44 (0) 207 033 2140</span>
                        <span>e. info@ycnonline.com</span>
					</p>
                </li>
                <li>
                	<em>Now, Then & Next</em>
                    <p>
                     	<span>YCN.72 Rivington Street </span>
                        <span>London, EC2A 3AY </span>
                        <span>  United Kingdom</span>
                        <span>  t. +44 (0) 207 033 2140</span>
                        <span>e. info@ycnonline.com</span>
					</p>
                </li>
                <li>
                	<em>Library</em>
                    <p>
                    	<span>YCN.72 Rivington Street </span>
                        <span>London, EC2A 3AY </span>
                        <span>  United Kingdom</span>
                        <span>  t. +44 (0) 207 033 2140</span>
                        <span>e. info@ycnonline.com</span>
					</p>
                </li>
                <li>
                	<em>Shop</em>
                    <p>
                        <span>YCN.72 Rivington Street </span>
                        <span>London, EC2A 3AY </span>
                        <span>  United Kingdom</span>
                        <span>  t. +44 (0) 207 033 2140</span>
                        <span>e. info@ycnonline.com</span>
					</p>
                </li>
            </ul>
        </div>
    
    </div>
</div>
<script>
	
</script>
</body>
</html>



在页面的最后测试中出现问题，就是，margin出现问题，间距增加。一开始认为是由于IE6的bug空白叠加，最后发现时因为浮动没有清除，导致这种情况的出现，
  • 大小: 138.7 KB
分享到：
| 语义化的HTML结构到底有什么好处？
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    displaytag小小研究

    这篇“displaytag小小研究”可能涉及了对DisplayTag库的深入理解和使用技巧。 在DisplayTag中，属性文件起着至关重要的作用。这些属性文件主要用于本地化，也就是根据用户的语言环境显示相应的文本。DisplayTag支持...

    soledades:与 Luis de Góngora 的 "Soledades. Edición digital" 相关的 TEI 编码和数据集

    注释soledades_anotada.xml soledades_anotada_schematron.sch soledades_anotada.xml编码标准多个 XSLT 表来生成 HTML 页面图片建议引用：目前无法访问简单的soledades_simple.xml soledades_simple.sch

    UWR-calendar-script:一个小小的python脚本，可自动生成UWR（http

    之后，它将下载一些页面，这可能需要几秒钟的时间。 该脚本通过打印出使用ubuntuusers.de语法的表结束。 该表涵盖了未来13天内日历中列出的所有事件。 但是，开始日期将始终是下周一，即发布UWR的日期。

    CursoPracticoDeJS:JS de Platzi 实践课程实践

    4. **AJAX与Fetch API**：学习异步编程，用以从服务器获取数据并更新页面，提供无刷新用户体验。 5. **面向对象编程**：理解类和对象的概念，以及如何在JavaScript中实现面向对象的设计模式。 6. **HTML基础**：...

    k11h-website:鹈鹕文件生成k11h.de

    静态网站生成器的主要作用是从Markdown、ReStructuredText等简单的文本格式文件生成HTML页面，这些页面无需服务器端脚本即可直接在客户端浏览器中显示。 【描述】"k11h网站 鹈鹕文件生成k11h.de" 描述了这个项目的...

    maria-anna-waloschek.de

    它还包括用于平滑页面转换的Turbolinks和捆绑所有资产的Webpack！入门只需运行常规命令并查看package.json文件即可查看可用的脚本和软件包。 对于懒惰的人： npm i要建立那个大的node_modules文件夹npm run dev以...

    ITONICS Web Clipper: Cloud-crx插件

    出现一个窗口，其中页面的标题，描述和图像会自动填充内容。 根据需要编辑信息，然后就可以使用了。 Inspiration会立即上传到ITONICS平台，您可以稍后再使用它。 您将再也不会失去主意！ 别忘了：每一个小小的灵感都...

    ITONICS Web Clipper-crx插件

    出现一个窗口，其中页面的标题，描述和图像会自动填充内容。根据需要编辑信息，然后就可以使用了。Inspiration会立即上传到ITONICS平台，您可以稍后再使用它。您将再也不会失去主意！别忘了：每一个小小的灵感都可以...

    HTTP协议的Header头信息详解.txt

    当一个页面链接到另一个页面时，后者可以通过`Referer`头部了解来源。 ##### 6. Range `Range`头部用于请求部分数据，而不是整个对象。例如： ``` Range: bytes=500-999 ``` 这表明请求的是第500字节到第999字节...

Magicbox
Global site tag (gtag.js) - Google Analytics