runsly html+css教程 2023-05-25

css布局需要注意的几点

一个网页的布局，对于用户体验以及百度的排名的影响是很重大的，就算你网站的内容再好，只要布局很差，那也是没用，所以当我们从设计那边拿到的图片后不是能随便的乱加到自己的网页上，只有对图片进行分析后，才能很好的CSS布局。

布局在分析中占很大部分，我们分析网页美工图片不是分析图片好看是否，而是从css布局出发分析网页的美工图片，而CSS布局分析直接影响以后的css重构html页面是否好写的一步。

布局知识：

DIV+CSS布局，CSS布局是网页html通过div标签+css样式表代码开发制作的（html）网页的统称。

div+css布局好处：便于维护，有利seo（谷歌将网页打开速度作为排名因素及SEO因素），网页打开速度更快，符合web标准等。

制作div+css网页前思考布局：

首先我们拿到一张网页美工图片我们将从上下、上中下、左右、上中（中包括左右）下布局框架来思考。

下面通过一个实例讲解下CSS布局分析，我们以DIVCSS5列表页面分析css布局：

首先我们可以分析出我们DIV CSS布局重构此页面结构框架，我们可以看出是上、中、下结构，其中又包括了左右结构。

由此我们就要写此页面CSS和html时候就先从上到下从外到内原则写css与html。

我们首先建一个web的文件夹并在此文件夹里新建html页面命名为index.html ，css文件命名为index.css。这里有个诀窍就是可以导入模板方式来建css与html初始页面，然后将css文件引用到html，也就是我在模板里介绍的css模板，再在CSS模板的基础上再写再添加css。

以下是index.html 的html代码：

以下为引用的内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>css布局案例实验页面-www.divcss5.com.cn</title> 
<link href="index.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div id="header">我是头部（上）</div> 
<div id="centers"> 
<div class="c_left">我是中的左</div> 
<div class="c_right">我是中的右</div> 
<div class="clear">&nbsp;</div> 
</div> 
<div id="footer">我是底部（下）</div> 
</body> 
</html>
index .css的CSS代码如下：

以下为引用的内容：

body, div, address, blockquote, iframe, ul, ol, dl, dt, dd, li, dl, h1, h2, h3, h4, h5, h6, p, pre, table, caption, th, td, form, legend, fieldset, input, button, select, textarea {margin:0; padding:0; font-weight: normal;font-style: normal;font-size: 100%; font-family: inherit;} 
ol, ul ,li{list-style: none;} 
img {border: 0;} 
body {color:#000;background:#FFF; text-align: center; font: 12px/1.5 Arial, Helvetica, sans-serif;} 
.clearfix:after {clear:both; content:"."; display:block; height:0pt; visibility:hidden; overflow:hidden;} 
.clear{clear:both;height:1px; margin-top:-1px; width:100%;} 
.dis{display:block;} 
.undis{display:none;} 
/*此上面代码是初始CSS模板，下面是新写CSS布局框架代码*/ 
#header ,#centers ,#footer{ width:100%; margin:0 auto; clear:both;font-size:18px; line-height:68px; font-weight:bold;} 
#header{ height:68px; border:1px solid #CCCCCC; } 
#centers{ padding:8px 0;} 
#footer{ border-top:1px solid #CCCCCC; background:#F2F2F2;} 
#centers .c_left{ float:left; width:230px; border:1px solid #00CC66; background:#F7F7F7; margin-right:5px; } 
#centers .c_right{ float:left; width:500px;border:1px solid #00CC66; background:#F7F7F7}

你可以考出此两段代码新建个试试，我们就布局出以上美工页面CSS和html框架，然后根据各内容继续添加CSS与html源代码。

关于css布局_div css布局重要性就这么多，希望对您有帮助。以上案例未详解希望你亲自多实践，只有实践才能练好技术。