第6天:DIV+CSS页面布局实战

今天我从早上9:00写代码一直写到下午18:00,写的我差点抑郁了,还好最后终于写出了一个完整页面,没有做动画效果,就是练习了一下DIV+CSS布局,做的是福务达(www.zzfwd.cn)的主页,真是不容易。然后放松了一下,收拾了一下东西,看了一会电视剧,心情才好点了。在这个例子中我总结了几点经验:

1、ul中只能放li,li是个容器,li中可以放任何标签内容。

2、在写CSS之前,记得要对标签等清除默认样式,这样在后面布局中就不会有误差。

3、任何一种效果都可以用多种方法实现,不一定要和别人一样,要有自己的想法,写出属于自己的风格,代码要精简优化。

在写代码过程中,有个问题,一直困扰着我,“如何让内容在container中居中”,虽然我用自己的方法解决了,但还是不满意,一定有更好的方法,这个问题,我之后百度了一下,有这么几种方法,一定得记住。

以下是常用的两种水平居中方法:

一、行内元素居中

行内元素居中是只针对行内元素的,比如文本(text)、图片(img)、按钮等行内元素,可通过给父元素设置 text-align:center 来实现。另外,如果块状元素属性display 被设置为inline时,也是可以使用这种方法。但有个首要条件是子元素必须没有被float影响,否则一切都是无用功。

text-align:center

二、块元素居中

1、定宽块状元素居中

满足定宽(块状元素的宽度width为固定值)和块状两个条件的元素可以通过设置“左右margin”值为“auto”来实现居中。

margin:0 auto;(必须设置宽度

2、不定宽元素居中方法后续再学习总结

今天做的练习代码有点多,就不附了。图片为证。运行效果如下:

时间: 2024-10-12 22:50:18

第6天:DIV+CSS页面布局实战的相关文章

div+css页面布局-html代码

<html> <head> <title>div+css页面布局</title> <meta http-equiv="content-type" content="text/html" > <link rel="stylesheet" type="text/css" href="css/layout.css" /> </head&

浅谈div+css页面布局

解释:  DIV+CSS是Web设计标准,是一种网页布局方法.与传统的通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离.“DIV+CSS”其实是错误的叫法,而标准的叫法应该是XHTML+CSS.因为DIV和table都是XHTML或HTML语言中的一个标记,而CSS只是一种表现形式. 方法: 在HTML文档中加入CSS.css是层叠样式表(Cascading Style Sheets)的缩写,用于定义HTML元素的显示形式,是W3C推出的格式化网页内容的标准技术,也是

&lt;div+css页面布局课堂笔记&gt;11---页面布局网站首页设计实例__终极版(仿csdn首页)

1. firstPage.html文件: <span style="font-size:14px;"><!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html"> <title> 标准的页面布局首页 </title> <link rel="sty

div+css页面布局

实现效果: 500 Internal Server Error (图片为效果图:上--左右--下) 代码: <!DOCTYPE html> <html> <head> <!--或者利用DW里面的母版--> <style type="text/css"> * { margin:0; padding:0; } #container { width:70%; background-color:Red; margin:0px auto

css基础css页面布局基础

样式可以在HTML中定义,也可以在一个单独的外部样式文件中定义.样式可以分为嵌入式样式表,外部样式表,内联样式表. 外部样式表:首先要建一个后缀为.css的样式表文件,然后在web文档中的<head>段使用<link>标记,这样就可以将一个外部样式表文件链接到文档中. 语法:<link rel="stylesheet" type="text/css" href="样式表的url"/> 嵌入式样式表:在web文档

DIV+CSS网页布局常用的一些基础知识整理

CSS命名规范一.文件命名规范 全局样式:global.css:框架布局:layout.css:字体样式:font.css:链接样式:link.css:打印样式:print.css: 二.常用类/ID命名规范页 眉:header内 容:content容 器:container页 脚:footer 版 权:copyright 导 航:menu主导航:mainMenu子导航:subMenu 标 志:logo标 语:banner标 题:title侧边栏:sidebar 图 标:Icon注 释:note

html+css页面布局

http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Consortium,万维网联盟    W3C的职能:负责制定和维护Web行业标准    W3C标准包括一系列的标准: HTML内容方面:XHTML 样式美化方面:CSS 结构文档访问方面:DOM 页面

【div+css网页布局详解】

前言: 网页布局是制作一个网页的第一步也是最重要的一步,今天来详细谈一下使用div+css布局的方法. 用dw编写网页的时候是可以通过两种方法的,一是图形界面,二是代码,初学的话可以用图形界面,学的差不多的时候使用代码更能提高效率. 因为现在css3和之前css2有较大改动,咱们先从css2的说起吧. (笔者采用的是dreamweaver cs6,破解版下载地址:http://www.aa25.cn/download/954.shtml) 一.单列布局 一个网页编写手先要搭一个框架,就像下图样:

【转】一个DIV+CSS代码布局的简单导航条

原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现.同时不用图片做背景,直接使用背景色实现,鼠标经过悬停对应栏目名称是对应背景蓝色变深. 导航条部分效果截图 一般导航条采用ul li列表布局,这里也不例外DIVCSS5实例也采用列表标签ul li+ CSS布局. 一.布局思维思考   -   TOP 在实际DIV+CSS布局项目中,一般不会只使用一次