divcss布局实例之(完整切图篇)

大标 2022年9月16日03:48:43网络推广评论0阅读模式

Divcss布局示例二(全切)

今天,我想带领大家使用div+CSS来裁剪一个普通企业网站的主页,同时也要考虑你对之前所学CSS知识的理解。

首先,让我们看看我们要完成的网页的剪切图片,如下所示:

让我们先分析一下这个页面的布局。大部分可以分为标题、导航、横幅,然后是主要内容区域,最后是尾部,如下图所示。主要内容区域中的布局是典型的两栏布局,然后左侧内容区域被分为两栏布局。我们可以理解为“两列集合两列"

然后开始编码:

第一步 如您所知,默认情况下,当没有添加样式时,我们的HTML标记是间隔的,因此我们需要首先将所有标记的填充和边距设置为0

许多人使用的一种方法是根据正文中使用的HTML标记将其重置为0

另一种懒惰的方法是用*(表示全部)将其重置为0,然后在完成所有HTML编码后根据主体中使用的标记重置它。

例如,如果我们在body标记中使用,div,P,我们可以将body,div和P作为选择器。没有必要写*

代码如下: *{
余量:0px;
填充:0px;
}

第二步:实现了网页的整体背景。我们希望结果内容居中,背景渐变始终覆盖屏幕
通过这种方式,我们可以向主体添加背景图片。我们需要将其水平平铺

代码如下: 身体{
背景:url(image/bj.jpg)重复-x;
}

实际上,这个地方还应该添加一个内容,即背景图片应该平铺在顶部。然后我们不知道网页有多高。其他的呢?大多数都是。用渐变背景的最低颜色填充。全文如下:

背景:颜色值、背景图像、位置、是否平铺

步骤3:通过前面的观察,我们可以先将网页分成五部分,然后为其编写相应的HTML代码
HTML代码:

代码如下: <div id=”标题gt;</div>
<div id=”导航gt;</div>
<div id=”横幅”></div>
<div id=”主&8221;></div>
<div id=”页脚gt;</div>

根据PS测量,这五个部分占据950宽并居中。我们可以先使用CSS组选择器将这五个div居中

代码如下:

#页眉、#nav、35;横幅、"main、footer{
保证金:0px自动;
宽度:950px;
}

步骤4:完成标题
标识:一般来说,本部分有两个要求。1.点击徽标返回网站主页。2.关注搜索引擎优化?因此,我们使用以下HTML代码:
<h1>&书信电报;a href=&8221;#&8221;& gt;北京捷飞CSS页面剪切&lt/a></h1>
如何实现CSS编码?
你可以先考虑一下。然后看看我在下面写的CSS代码。事实上,这个地方使用了CSS图像换词技术。CSS代码如下:

我们使用文本缩进的负值将内容移出容器

代码如下:

#集管h1 a{
背景:url(image/logo.jpg);
宽度:476px;
高度:102px;
显示:块;
文本缩进:-9999px;
}

好,现在让我们完成标题的正确部分,或者先编写HTML代码

复制代码

代码如下:

<ul>
<li>&书信电报;a href=&8221;#&8221;& gt;CSS图像剪切训练&lt/a></li>
<li>&书信电报;a href=&8221;#&8221;& gt;设置为主页&lt/a></li>
<li>&书信电报;a href=&8221;#&8221;& gt;添加到集合&lt/a></li>
</ul>

CSS代码:

复制代码

代码如下:

#集管h1{
浮动:左;
}

让我们首先将H1浮动到左侧。这样,右侧的UL部分可以显示在同一行中。

复制代码

代码如下:

#标题ul{
浮动:左;
填充:50px 0px 0 px 200px;
列表样式:无;
}

为了避免问题,UL也可以浮动。你可以试一试。如果您没有在不同版本的IE中设置浮动,Firefox中的性能是否一致

复制代码

代码如下:

#标题ulli{
浮动:左;
填充:0px至10px;
}
上面的代码在Firefox和IE8中没有问题,但在IE6中会有问题。我们将在后面解释。
#标题ulli

结论:事实上,通过这里的解释,你应该不会觉得困难。这是典型的两列布局。但是内容被改变为H1和UL。它们都是块元素。因此,直接使用float属性

步骤5:完成导航效果。效果描述:打开鼠标,背景将变为浅蓝色,将产生当前页面的效果。
HTML代码:

代码如下:
<ul>
<li>&书信电报;a href=&8221;#&8220;& gt;HTML</a></li>
<li>&书信电报;a href=&8221;#&8220;& gt;CSS基础&lt/a></li>
<li>&书信电报;a href=&8221;#&8220;& gt;CSS布局&lt/a></li>
<li>&书信电报;a href=&8221;#&8220;& gt;CSS实例&lt/a></li>
<li>&书信电报;a href=&8221;#&8220;& gt;哈克</a></li>
<li>&书信电报;a href=&8221;#&8220;& gt;行业新闻&lt/a></li>
<li>&书信电报;a href=&8221;#&8220;& gt;CSS视频&lt/a></li>
</ul>

现在,直接编写导航代码会导致问题吗?如果你已经学会了盒子模型和浮动,你应该知道
导航部分中的文本位于标题的右侧。如何解决?
事实上,全方位消除浮动取决于我们
CSS代码如下:

.清楚{
明确:两者都是;
}

此时,对于我们<div id=”导航gt;</div>
变成<div id=”导航;class=“清除"></div>
现在让我们看一看。我们解决了上述问题了吗。事实上,如果我们按照标准箱模型计算,如果计算正确,这个问题就不会发生。
现在完成导航的CSS样式

复制代码

代码如下:

#导航{
填充顶部:3px;
}
#导航ul{
列表样式:无;
}
#纳夫·乌尔利{
浮动:左;
}

默认情况下,Li是一个块元素,它占据了整个显示行,因此它向左浮动,以便显示在一行中。设置a的状态后,当鼠标悬停在我们想要的位置时,整个背景会发生变化。测试结果:让Li具有宽度和高度,然后设置背景。它能达到我们的效果吗?a不让它变成一块

复制代码

代码如下:

#nav ul li a{
显示:块;
宽度:135px;
高度:56px;
线高:56px;
颜色:#fff;
文本对齐:居中;
文本装饰:无;
字体大小:14px;
}

显示:块;让a元素成为一个块,然后为其设置宽度和高度背景。这里还有一个关键点,即线高度:56px,对应于高度56px。可以达到什么效果。想想看,学生们?

复制代码

代码如下:

#导航ul li a:悬停{
背景:177cb7;
}

现在我们的导航基本完成了,但在目前的状态下,仍然有一个缺失的导航效果。我该怎么办?
事实上,向当前页面的a链接添加ID为current的标记非常简单。如下:

复制代码

代码如下:

<a href=&8221;#&8221; id=&8221;电流gt;主页&lt/a>

接下来,该状态与鼠标悬停时的状态相同,因此非常简单。只需在鼠标悬停状态后添加#NAV UL Li a#当前选择器。你完成了吗

第六步:产品推广的横幅形象。该公司的网站通常是动画或JS/jQuery的特效。现在,让我们放一张照片

复制代码

代码如下:

<img src=&8221;图像/横幅。jpg;高度=&8221;184″ src=&8221;http://files.jb51.net/file_images/article/201304/psdcutpic/image005.jpg&#8221 ; 宽度=&8221;127″ /& gt;

步骤7:创建主要内容区域:
主内容区域右侧导航的HTML代码:
代码如下:

<div类=”子菜单”>
<h5>培训课程&lt/h5>
<ul>
<li>&书信电报;a href=&8221;#&8221;& gt;主页&lt/a></li>
<li>&书信电报;a href=&8221;#&8220;& gt;网站制作&lt/a></li>
<li>&书信电报;a href=&8221;#&8220;& gt;网站制作&lt/a></li>
<li>&书信电报;a href=&8221;#&8220;& gt;网站制作&lt/a></li>
<li>&书信电报;a href=&8221;#&8220;& gt;网站制作&lt/a></li>
<li>&书信电报;a href=&8221;#&8220;& gt;DIV CSS培训&lt/a></li>
<li>&书信电报;a href=&8221;#&8220;& gt;DIV CSS培训&lt/a></li>
<li>&书信电报;a href=&8221;#l&8221;>联系我们&lt/a></li>
</ul>
</div>

CSS代码:在上述生产过程中提到了以下代码。所以我直接给出了,不再解释了。
代码如下:

#主要{
填充:10px 0px;
}
#主容器{
宽度:674px;
右边空白:50px;
浮动:左;
}
#主菜单子菜单{
宽度:226px;
浮动:左;
边缘底部:10px;
}
#主菜单子菜单h5{
背景:19577c;
高度:39px;
文本对齐:居中;
颜色:#fff;
字体大小:15px;
线高:39px;
}
#主.子菜单ul li{
边框底部:1px实体#D4D4;
背景:f1f1f1;
}
#主.子菜单ul li a{
显示:块;
颜色:#000;
高度:36px;
线高:36px;
文本装饰:无;
左填充:60px;
背景:url(image/li.jpg)无重复40px 50%;
}
#主。子菜单ul li a:悬停{
颜色:#177cb7;
背景:url(image/li3.jpg)无重复40px 50%;
}

步骤8:对内容的主要区域进行编码:通过上述效果的图片,您可以首先考虑如何编写HTML。我使用DLDD。我们必须学习这个标签的用法。这在描述产品时非常常见,经常使用。
现在让我们看看HTML代码:
<div类=”新闻gt;
<dl类=”薛晓”>
<h5>学校简介<a href=&8221;#&8221;& gt;&书信电报;img src=&8221;图片/更多。jpg”/></a></h5>
<dt>&书信电报;img src=&8221;image/223.jpg;alt=&8221;杰弗里标志lt;/dt>
<dd>捷飞学校特色:实行家庭教学模式,小班教学的完美结合,让学生按需学习,预约上课,完全根据学生的实际情况教学,确保他们学习。&lt/dd>
</dl>
<dl类=”新文”>
<h5>学校新闻<a href=&8221;#&8221;& gt;&书信电报;img src=&8221;图片/更多。jpg”/></a></h5>
<dd>&书信电报;a href=&8221;#&8221;& gt;图形设计中的色彩匹配方案/a>&书信电报;span>2013-4-14</span></dd>
<dd>&书信电报;a href=&8221;#&8221;& gt;图形设计中的色彩匹配方案/a>&书信电报;span>2013-4-14</span></dd>
<dd>&书信电报;a href=&8221;#&8221;& gt;图形设计中的色彩匹配方案/a>&书信电报;span>2013-4-14</span></dd>
<dd>&书信电报;a href=&8221;#&8221;& gt;图形设计中的色彩匹配方案/a>&书信电报;span>2013-4-14</span></dd>
</dl>
</div>
然后是最低产品部分的HTML编码:
<div类=”产品透明&8221;>
<h5>优质课程<a href=&8221;#&8221;& gt;&书信电报;img src=&8221;图片/更多。jpg”/></a></h5>
<ul>
<li>&书信电报;a href=&8221;#&8221;& gt;&书信电报;img src=&8221;image/css。gif”/></a></li>
<li>&书信电报;a href=&8221;#&8221;& gt;&书信电报;img src=&8221;image/css。gif”/></a></li>
<li>&书信电报;a href=&8221;#&8221;& gt;&书信电报;img src=&8221;image/css。gif”/></a></li>
<li>&书信电报;a href=&8221;#&8221;& gt;&书信电报;img src=&8221;image/css。gif”/></a></li>
</ul>
</div>
现在开始编写CSS代码:
第一选择是学校简介和新闻。事实上,如果仔细观察这两个,它们也是两列布局,因此设置宽度并设置左浮动:
#主容器dl{
宽度:300px;
浮动:左;
}
然后是列名:因为这两种效果是相同的。因此,您可以直接使用组选择器写入这两个。
#主容器dl h5,#main.产品h5{
边框底部:1px#000实心;
边缘底部:15px;
字体大小:17px;
}

#主容器dl h5 a{
左填充:170px;
}
首先完成左侧的学校简介,然后让简介浮动在图片右侧:
#主容器dl dt{
浮动:左;
宽度:110px;
}
#主容器dl dt img{
边框:1px实心#ccc;
}
#主容器dl。薛晓dd{
字体大小:12px;
左边距:25px;
浮动:左;
宽度:165px;
文本缩进:2em;
}
单独设置新闻的DD标记
#主容器dl。新汶dd{
高度:22px;
线高:22px;
背景:url(image/li.jpg)无重复0 50%;
}
#主容器dl。新汶dd a{
颜色:#000;
文本装饰:无;
左填充:20px;
}
#主容器dl。新汶dd span{
左填充:25px;
}
#主容器dl.xuexiao{
右边空白:40px;
}
现在我们开始完成产品的CSS代码:
#主要产品{
填充顶部:20px;
}
与顶部保持一定距离。
#主要产品h5 a{
左填充:510px;
}
#主要产品ul li{
浮动:左;
左填充:10px;
}
让李向左浮动。
最后一步:完成底部:
HTML代码:
<div id=”页脚;类=&8221;清除gt;
<p>联系我们:北京市石景山区皓月办公楼328室;电话:010-88685956;15910646335(陈老师);
</div>
CSS代码:
#页脚{
背景:d1dce3;
高度:50px;
线高:50px;
文本对齐:居中;
}
现在我们已经完成了一页的剪切。
几个错误:头标记在IE6中有以下表达式。因此,让我们用以下代码解决它:

<!– [如果IE 6]>
<![endif]–>
上面的代码意味着只有IE6可以识别它。这样,我们可以单独编辑IE6的样式。
<!– [如果IE 6]>
<样式类型;文本/css”>
#标题ulli{
宽度:80px;
浮动:左;
填充:0px至10px;
}
标题:在标题右侧添加宽度值
#主容器dl dt img{
边框:1px实心#ccc;
}
#主容器dl。学小dt{
浮动:左;
宽度:110px;
}
#主容器dl。薛晓dd{
字体大小:12px;
左边距:20px;
浮动:右;
宽度:145px;
文本缩进:2em;
}
#页脚{
边缘顶部:-10px;
}
</风格>
<![endif]–>
它还涉及一些其他知识。我将在后续课程中对此进行解释。

weinxin
我的微信
微信扫一扫
大标
  • 本文由 发表于 2022年9月16日03:48:43
  • 转载请务必保留本文链接:https://www.tanhuibiao.com/3607.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: