400-1100-266

9:00-24:00（工作日）
主页 > 知识库 > CSS网页布局入门教程1：一列固定宽度

CSS网页布局入门教程1：一列固定宽度
热门标签：呼叫中心市场需求 铁路电话系统 网站文章发布 银行业务 智能手机 美图手机 检查注册表项 服务器配置
本系列教程为入门级教程，适合初学者学习，由最简单的知识一点一点进阶。主要以实例为主，很少部分理论，这样更适应初学者快速掌握。因本人也正在学习，难免有一些错误或疏漏地方，望各位给予指正。本教程参考《CSS网站布局实录》一书，在此向作者表示感谢。
要想学好DIV+CSS，首先要有一定的HTML和CSS知识，如果这些你还不了解，建议你先去补习这一课，再来学习本教程。另外还要抛弃传统表格布局的思维模式，至于为什么，在你学习本教程中慢慢就会体会到。如果这些你都准备好了，那么开始吧！

一列固定宽度
一列固定宽度是基础中的基础，所以这节做为入门的第一节。
我们给div使用了layout作为id名称，为了便于查看，使用了background-color: #E8F5FE;将div的背景色设置成浅蓝色，用border: 2px solid #A9C9E2;将边框设置成天蓝色。背景色和边框的属性将会在以后的教程中讲解。
由于是固定宽度布局，因此我们直接设置了宽度属性width: 300px;与高度属性height: 200px;最终效果请点击“运行此代码”按钮查看。

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

下面讲解一下具体的步骤，因为本系列为入门级教程，所以采用dreaweaver可视化开发，让您少去手工写代码（但起码能看懂每句的意思），同时教程中尽量配图，做到简洁易懂。如果您对CSS了解较多，本步骤可略过。

1、打开dreamweaver（以8.0为例），选择文件——新建



如图，注意选择好文档类型，建议选择XHTML 1.0 Transitional类型，有关文档类型更多知识，请参考：选择合适的Doctype，解决CSS失效问题

选择工具栏的插入div标签工具，在对话框的ID框，可以先写入id的名称，然后在CSS面板中新建CSS样式，或者直接点击下边的新建css样式按钮，创建成功后会自动插入id名称，点击确定即可看到div标签已经插入到页面中了。



CSS样式设置如下：









注：红线框内的部分为本例中需要设置的部分。

怎么样，一列固定宽度，就这么简单！
您可能感兴趣的文章:
  • CSS网页布局入门教程3：一列固定宽度居中
  • CSS网页布局入门教程4：二列固定宽度
  • CSS网页布局入门教程6：左列固定，右列宽度自适应
  • 表格头固定而列可滚动的效果
  • 基于jquery的固定表头和列头的代码
  • android开发之横向滚动/竖向滚动的ListView(固定列头)
  • asp.net gridview列宽固定的几种方法介绍
  • HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列

标签：沧州 河南 长治 沈阳 新疆 乐山 上海 红河

巨人网络通讯声明：本文标题《CSS网页布局入门教程1：一列固定宽度》，本文关键词  ；如发现本文内容存在版权问题，烦请提供相关信息告之我们，我们将及时沟通与处理。本站内容系统采集于网络，涉及言论、版权与本站无关。
  • 相关文章
  • 推荐文章

    上一篇：超强推荐CSS打造经典鼠标触发显示选项

    下一篇：CSS网页布局入门教程2：一列自适应宽度

     
    微信咨询办理
    在线QQ客服
    ( 客服小王 )
    ( 客服小李 )
    ( 客服小刘 )
    ( 客服小张 )
    关于我们 | 荣誉资质 | 呼叫中心 | 代理加盟 | 客户案例 | 服务支持 | 产品介绍 | 行业资讯

    Copyright © 1999-2012 诚信 合法 规范的巨人网络 www.1330.cn 始建于2005年

    全国网站建设网站开发咨询热线：400-1100-266   0514-86177077

    江苏扬州巨人网络科技有限公司   总部地址：江苏省扬州信息产业基地11号楼4层

    《增值电信业务经营许可证》苏B2-20120278    苏ICP备15040257号 网站地图
    全国咨询热线
    400-1100-266
    在线客服( QQ：340506921 )
    版权所有：巨人网络(扬州)科技有限公司——拥有网站建设十年经验，具备独立网站开发能力，能够提供完善的网站设计及相关的网站制作服务！     全国统一服务热线：400-1100-266
    收缩
    • 微信客服
    • 微信二维码

    • 电话咨询

    • 400-1100-266