WP主题制作-第11课:宽度和浮动

本课将介绍如何设置每个DIV(或不可见框)的宽度以及如何布置它们。它还将向您显示一些解决方法,以使主题在Firefox和Internet Explorer中正确显示或看起来相同。

在开始之前,请打开以下项目:  Xampp Control,  主题文件夹,  Firefox 浏览器,  Internet Explorer  浏览器,  index.php和  style.css

第1步

您要做的第一件事是确定主题的整体宽度。我们将使用750像素(750像素);每100个像素为1英寸。您的主题取决于大多数博客访问者的视图规格。您要避免的是针对大多数使用800px x 600px分辨率的受众群体使用900px主题,这意味着您900px主题将超出屏幕100个像素。那是不可以的。

无论如何,如何将整体宽度限制为750像素?
您需要将所有内容放在750px的框或DIV中。一切都包括页眉,容器,边栏和页脚。

 在<body>之后  添加:  <div id =” wrapper” >  在</ body>之前  添加:  </ div >

style.css中键入以下内容  :
#wrapper { 
margin:0 auto 0 auto; 
宽度:750px;
文字对齐:左;
}

在CSS中,尤其是在style.css中,井号()是您使用id寻址DIV的方式  。这段时间是您如何在课堂上解决DIV问题  。对于一个类示例,如果您的代码是  <div class =“ wrapper”>,  则使用  .wrapper  而不是  #wrapper  来处理  包装程序  DIV。

保存index.php和style.css文件。刷新Firefox和Internet Explorer浏览器(按F5键)以查看更改。

进一步说明

  • 保证金:0自动0自动;  装置(在确切顺序)  0上边距,  汽车右边距,  0下边距,和  左侧汽车余量。现在,请记住,将左右页边距设置为自动居中即可。
  • 宽度:750px; 是不言自明的。
  • 文字对齐:左; 正在将文本在包装器DIV中向左对齐,   因为您将把  body {text-align:left;}  更改为  text-align:center;

第2步

继续并更改  text-align:左; 在  body {}中  以  文本对齐:居中;

为什么呢 (我假设您使用的是Firefox和Internet Explorer 6)。您的布局可能对您而言合适,但对使用Internet Explorer早期版本的用户而言则不合适。还记得将左右页边距设置为自动居中吗?嗯,这不适用于所有Internet Explorer,因此  正文{text-align:center; }  是旧版IE将包装器  DIV或框居中的修复程序  。

(顺便说一下,Firefox和Internet Explorer中的文本大小现在不同。我们将在以后进行修复。)

第三步

使  标题  以750px的宽度向左浮动:

#header { 
float:left; 
宽度:750px;
}

第四步

使  容器  以500px的宽度向左浮动:

#container { 
float:left; 
宽度:500像素;
}

第5步

使  补充工具栏  向左浮动,宽度为240px,背景为灰色:(缺少10px;我知道。)

.sidebar { 
float:left; 
宽度:240像素;
背景:#eeeeee;
}

注意,您没有使用井号来标记  补充工具栏  DIV;你用了一段时间。另外,还记得#ffffff是白色的吗? 背景:#eeeeee; 非常浅灰色。您将背景色添加到了补充工具栏,目的只是为了在以后添加剩余的10个像素时看到区别。

第6步

使  页脚  向左浮动,并以750px的宽度清除两者:

#footer { 
清除:两者;
向左飘浮; 
宽度:750px;
}

页眉  和  页脚  样式有什么区别  ?答案是  明确的。 在  页脚{}中。在那里可以确保页脚不会将自身附加到其上方的任何内容上,例如补充工具栏或容器。

保存style.css文件。刷新浏览器。

步骤7

使用边距将剩余的10个像素添加到补充工具栏中。现在,您的侧边栏样式代码如下所示:

.sidebar { 
float:left; 
宽度:240像素;
背景:#eeeeee;
边距:0 0 0 10px; 
}

保存文件并刷新浏览器,以看到侧边栏左侧添加了10像素的空间。
边距:0 0 0 10px;  具体来说就是0顶部,0右侧,0底部,10像素左。当size为0时,   不需要px后缀。

步骤8(额外步骤)

以防万一您得到的是20px的边距而不是10px的边距。20px的边距会破坏您的布局,并将侧栏推到页面底部,因为20px的边距会使Container和Sidebar宽度的总和等于760px而不是750px。这个额外的步骤是  Internet Explorer的  错误,因为在Firefox中不存在将设置的边距加倍的错误。

要解决此错误,请添加  display:inline;  到侧边栏。现在您的侧边栏应该是:

.sidebar { 
float:left; 
宽度:240像素;
背景:#eeeeee;
边距:0 0 0 10px; 
显示:内联;
}

今天的课程到此结束。如果您有任何疑问,请随时问我。我在这里为您提供帮助,而不仅仅是向您展示绳索。

这就是索引和样式文件中的内容。

<div id =“ wrapper”>

<div id =“ header”>

<h1> <a href="<?php bloginfo('url'); ?>“> <?php bloginfo('name'); ?> </a> </ h1>
<?php bloginfo('description'); ?>

</ div>

<div id =“ container”>

	<?php if(have_posts()):?> <?php while(have_posts()):the_post(); ?>

		<div class =“ post” id =“ post-<?php the_ID();?>”>

			<h2> <a href="<?php the_permalink(); ?>“ title =” <?php the_title();?>“> <?php the_title(); ?> </a> </ h2>

			<div class =“ entry”>

				<?php the_content(); ?>

				<p class =“ postmetadata”>
<?php _e('Filed under&#58;'); ?> <?php the_category(',')?> <?php _e('by'); ?> <?php the_author(); ?> <br/>
<?php comments_popup_link('无评论&#187;','1评论&#187;','%评论&#187;'); ?> <?php edit_post_link('Edit','&#124;',''); ?>
				</ p>

			</ div>

		</ div>

	<?php结束;?>

		<div class =“ navigation”>
			<?php posts_nav_link(); ?>
		</ div>

	<?php else:?>

		<div class =“ post”>
			<h2> <?php _e('未找到'); ?> </ h2>
		</ div>

	<?php endif; ?>

</ div>

<div class =“ sidebar”>

<ul>

<?php if(function_exists('dynamic_sidebar')&& dynamic_sidebar()):else:?>

	<li id =“ search”>
		<?php include(TEMPLATEPATH。'/searchform.php'); ?>
	</ li>

	<li id =“ calendar”> <h2> <?php _e('Calendar'); ?> </ h2>
		<?php get_calendar(); ?>
	</ li>

	<?php wp_list_pages('depth = 3&title_li = <h2>页面</ h2>'); ?&gt;

	<li> <h2> <?php _e('Categories'); ?> </ h2>
		<ul>
			<?php wp_list_cats('sort_column = name&optioncount = 1&hierarchical = 0'); ?>
		</ ul>
	</ li>

	<li> <h2> <?php _e('Archives'); ?> </ h2>
		<ul>
			<?php wp_get_archives('type = monthly'); ?>
		</ ul>
	</ li>

	<?php get_links_list(); ?>

	<li> <h2> <?php _e('Meta'); ?> </ h2>
		<ul>
			<?php wp_register(); ?>
			<li> <?php wp_loginout(); ?> </ li>
			<?php wp_meta(); ?>
		</ ul>
	</ li>

<?php endif; ?>

</ ul>

</ div>

<div id =“ footer”>
<p>
版权&#169; 2007 <a href="<?php bloginfo('url'); ?>“> <?php bloginfo('name'); ?> </a>
</ p>
</ div>

</ div> </ body>
</ html>

这是样式文件。

/ *  
主题名称:教程
主题URI:https://wpdesigner.com
说明:这是我的教程主题。
版本:1.0
作者:小土豆
作者URI:https://wpdesigner.com/

* /

身体{
	边距:0;
	字体系列:Arial,Helvetica,乔治亚州,无衬线;
	font-size:12px;
	文本对齐:居中;
	垂直对齐:顶部;
	背景:#ffffff;
	颜色:#000000;
}

a:链接,a:已访问{
	文字装饰:下划线;
	颜色:#336699;
}

a:悬停{
	文字修饰:无;
}

#wrapper {
	保证金:0自动0自动;
	宽度:750px;
	文字对齐:左;
}

#header {
	向左飘浮;
	宽度:750px;
}

#容器{
	向左飘浮;
	宽度:500像素;
}

.sidebar {
	向左飘浮;
	宽度:240像素;
	背景:#eeeeee;
	边距:0 0 0 10px;
	显示:内联;
}

#footer {
	清楚的
	向左飘浮;
	宽度:750px;
}

如果您已阅读本课程的第一版,请不要忘记我显示给您的屏幕截图。截屏时,我忘记关闭侧边栏的小部件插件,这使侧边栏看上去与您应有的外观有所不同。

未经允许不得转载:创之梦博客 » WP主题制作-第11课:宽度和浮动

赞 (0)
分享到:更多 ()

欢迎各位吐槽评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址