CSS排版页面实例代码

创建css文件如下:

@charset "utf-8";/* CSS Document */*{    margin:0px;    padding:0px;    border:0px;}#box{    width:1100px;    height:760px;    margin:auto;}#hen{    width:1100px;    height:160px;    background-color:#936;}#zuo{    width:250px;    height:500px;    margin-top:10px;    background-color:#03C;    float:left;    margin-bottom:10px;}#zhong-1{    width:262px;    height:300px;    margin-top:10px;    margin-left:10px;    float:left;    background-color:#000;}#zhong-2{    width:262px;    height:300px;    margin-top:10px;    margin-left:10px;    float:left;    background-color:#000;}#xia{    width:544px;    height:190px;    background-color:#03C;    margin-top:10px;    float:left;    margin-bottom:10px;}#you{    width:295px;    height:500px;    margin-left:10px;    margin-top:10px;    background-color:#3F6;    float:right;    margin-bottom:10px;}#dibu{    width:1100px;    height:50px;    margin-top:10px;    background-color:#CF3;    clear:both;}

登录后复制

html文件如下:

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">CSS排版页面 
    
    
    
    
    
    
    
    

登录后复制

最终实现效果如图:

CSS排版页面实例代码

以上就是CSS排版页面实例代码的详细内容,更多请关注【创想鸟】其它相关文章!

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

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2904278.html

(0)
上一篇 2025年3月11日 02:00:31
下一篇 2025年3月6日 21:01:32

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 从css谈模块化

    模块化是现今我们随处都可以听到的一个名词,什么是模块化?为什么我们需要模块化?这是本系列文章我们要弄明白的一个问题。我们也借这部分内容,顺带回顾一下前端的发展历程。   说实话,模块化这个主题有点大,我一时也不知道从哪里讲起比较合适,通常来…

    2025年3月11日
    200
  • css多浏览常见问题详细介绍

    关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着…

    编程技术 2025年3月11日
    200
  • CSS伪类和伪元素的区别

    和伪元素皆独立于文档结构。它们获取元素的途径也不是基于id、、这些基础的元素特征,而是在处于特殊的元素(伪类),或者是元素中特别的内容(伪元素)。区别总结如下: CSS伪类 (Pseudo-classes):用于向某些选择器添加特殊的效果,…

    编程技术 2025年3月11日
    200
  • div+css浮动的解决方法

    如何清楚浮动(一)   已知一个大的div容器,这个容器包含了两个子div容器,然后在这两个子div容器的后面再添加一个div(这个div表示浮动的div容器),清楚浮动的div容器设置css样式为浮动:both,此时,大的div标签的内部…

    编程技术 2025年3月11日
    200
  • CSS教程(一)初识CSS

    css教程(一)认识css     dreamweaver4是现今最好的网站编辑工具之一,用它来给制作网页的css样式表会更简单、更方便。本教程教你如何利用dreamweaver4在页面中加入css,你不用死记硬背的记代码标记,也不用去看很…

    2025年3月11日
    200
  • CSS教程(二)基础语法

    1.  基本语法 css的定义是由三个部分构成:选择符(selector),属性(properties)和属性的取值(value)。基本格式如下:selector {property: value} (选择符 {属性:值})选择符是可以是多…

    2025年3月11日
    200
  • CSS教程(三)伪类——动态链接

    伪类可以看做是一种特殊的类选择符,是能被支持css的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。 1.  语法 伪类的语法是在原有的语法里加上一个伪类(pseudo-class):selecto…

    2025年3月11日
    200
  • CSS教程(四)如何在网页中插入CSS

    前两章我们了解了css的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用。当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:链入外部样式表、内部样式表、导入外表样式表和内嵌样式。   链入外部样式表 链…

    2025年3月11日
    200
  • CSS教程(五)如何使用DW4创建CSS

    1. css styles面板 通过前面几章的学习,相信大家对css有了一定的了解,这一章我们来讲解如何利用dreamweaver4来创建css。首先运行dreamweaver4,启动后,选择菜单下的windows->css styl…

    2025年3月11日
    200
  • CSS教程(六) DW4中CSS属性详解

    在dreamweaver4的css样式里包含了w3c规范定义的所有css1的属性,dreamweaver4把这些属性分为type(类型)、background(背景)、block(块)、box(盒子)、border(边框)、 list(列表…

    2025年3月11日
    200

发表回复

登录后才能评论