CSS 布局教程文章主页练习

各位老铁们好，相信很多人对CSS 布局教程文章主页练习都不是特别的了解，因此呢，今天就来为大家分享下关于CSS 布局教程文章主页练习以及的问题知识，还望可以帮助大家，解决大家的一些困惑，下面一起来看看吧！

材料：

第一步：删除默认的HTML 间距。

*{padding:0;margin:0;}

ps（我们可以稍后修改，根据网页中使用的html元素的数量如body、h1、div等）

第二步：按下渲染头部的灰色背景，但将其无限延伸

HTML 代码：

div 类=’顶部’

div id=’顶部’

p读书屋欢迎您！ /p

/div

/div

两个DIV 是嵌套的。 div class=’top’需要100%添加背景，内层div id=’top’可以实现居中布局。

.top{width:100%;background:#f5f5f5;height:35px;}

说明：宽度100%，添加背景颜色，设置高度，这样在缩放网页时，始终可以看到灰色的背景

#top {width:970px;margin:0 auto;}

说明：网页宽度为970像素，因此id=top的div元素居中margin:0 auto；

#top p{font-size:13px;line-height:35px;}

说明：改变文字大小，只需一行宣传文字，通过行高（与高度相同）line-height:35px实现垂直居中；

第三步：使用典型的以图代字的方法来实现标志，这有利于SEO

HTML 代码：

div id=’标题’

h1

a href=’#’css教程/a

/h1

/div

CSS编码：

#标题h1 a{

background:url(images/logo.png) 无重复0 50%;

显示：块；

宽度：215px;高度：60px;

文本缩进：-9999px；

}

添加背景图像。由于是A的内联元素，所以转换为display:block；然后指定宽度和高度。最后，缩进文本。使用较大的负值从屏幕上删除文本

第四步：实施导航。导航需要有无限延伸的背景，有一个|导航中间的线。

HTML 代码：

div 类=’nav’

div id=’导航’

乌尔

li a href=’#’首页/a|/li

lia href=’#’ASP.NET/a|/li

lia href=’#’CSS 基础知识/a|/li

lia href=’#’CSS 基础知识/a|/li

lia href=’#’CSS 基础知识/a|/li

lia href=’#’CSS 基础知识/a|/li

lia href=’#’CSS 基础知识/a|/li

lia href=’#’CSS 基础知识/a/li

/ul

/div

/div

CSS代码：

首先，为外部DIV 添加100% 宽度和背景颜色。

.nav{宽度：100%;高度：50px;背景：#1a539c;}

导航使用li，因此默认的点被删除。

ul li{list-style:none;}

用于导航的CSS 编码

#nav ul li{float:left;line-height:50px;color:#133d72;text-align:center;}

解释：float:left；使导航显示在一行中，line-height:50px;垂直居中，设置文字颜色color:#133d72;只要是垂直线就行。

让导航中的A元素有一个块元素，这将有助于我们在鼠标悬停时添加背景颜色

#nav ul li a{color:#fff;font-size:13px;display:block;width:114px;text-decoration:none;float:left;}

鼠标悬停CSS 代码：

#nav ul li a:hover{background:#133d72;text-decoration:underline;}

主题内容为两栏布局

div id=’主’

div 类=’左’

/div

div 类=’右’

/div

/div

先实现两栏布局，然后在里面写内容。 PS（先标记内容）如下

!–带注释，布局左侧内容开始–

div 类=’左’

/div

!–布局左侧内容通过备注结束–

首先，给外部div id=’main’ 使其居中。计算左右宽度（根据盒模型）并添加浮动属性

CSS 代码；

#main .left{width:473px;margin-right:20px;float:left;}

#main .right{width:473px;float:left;}

确定左右两侧后，内容将具有相同的效果，从顶部开始有间隙和边缘。将带有类容器的DIV 添加到内容中并为其添加样式

#main .container{border:1px Solid #ddd;margin-top:10px;} 列名使用h3

h3a href=’#’asp.net basics/a/h3 CSS 代码：

#main .container h3{

背景：url(images/lbj.jpg) 重复-x;height:31px;

文本缩进：20px；

}

#main .container h3 a{

颜色：#133d72;字体大小：15px;

行高：31px；

} 栏目介绍和统一使用叙述列表，

dl

dtimg src=’images/0011.jpg’//dt

dd class=’biaoti’asp.net基础专栏/dd

dd 文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍/dd

/dl叙述性列表特别适合图片、标题、简介等网页表达。在网页的中上部使用叙述性列表，标题在图片下方会更容易。

CSS代码：

#main .container dl{

内边距：10px；

边框底部：1px 虚线#ccc;height:78px;

}

解释：让整个dl与边框留出一定的距离（padding:10px;）。从底部添加一条虚线（border-bottom:1px dashed #ccc;）并设置高度。

#main .container dl dt{

float:left;margin-right:10px;}

解释： 浮动

#main .container dl dd.biaoti{

字体大小：14px;行高：25px;

}

说明：为dd添加一个类。由于这个类是给dd用的，所以直接写成dd.biaoti。请注意不要包含空格。空格选择器表示包含。

#main .container dl dd{

行高：22px;字体大小：13px;

以下是典型的新闻列表格式。

乌尔

lia href=’#’新闻标准新闻标题新闻标题标题/aspan2015-5-1/span/li

……

/ul 我们首先向新闻列表添加背景颜色和填充

#main.container ul{

填充：10px;背景：#fbfbfb;

}

控制li的高度并添加底线：

#main .container ul li{

高度：28px;行高：28px;

边框底部：1px实心#f1f1f1；

字体大小：13px；

}

新闻标题和日期应并排显示，并且日期应相应对齐。相应地，我们需要将a转成块元素，方便我们设置宽度。问题是日期换行，因此添加一个浮点数。我们还可以在链接中添加一个小背景图标。当鼠标悬停时可以更改背景图标。

#main .container ul li a{

宽度：380px;显示：块；浮动：左；

color:#333;padding-left:13px;

background: url(images/ss.png) 无重复0 50%;

}

#main .container ul li a:hover{

背景： url(images/ss2.png) 无重复0 50%;color:#133d72

}

所有使用.container 类的div 都具有相同的效果。

最后给大家一个完整的HTML代码：

div 类=’顶部’

div id=’顶部’

欢迎来到pcss教程栏！ /p

/div

/div

div id=’标题’

h1

a href=’#’css教程/a

/h1

/div

div 类=’nav’

div id=’导航’

乌尔

li a href=’#’首页/a|/li

lia href=’#’CSS 基础知识/a|/li

lia href=’#’CSS 基础知识/a|/li

lia href=’#’CSS 基础知识/a|/li

lia href=’#’CSS 基础知识/a|/li

lia href=’#’CSS 基础知识/a|/li

lia href=’#’CSS 基础知识/a|/li

lia href=’#’CSS 基础知识/a/li

/ul

/div

/div

div id=’横幅’

横幅

/div

div id=’主’

div 类=’左’

div 类=’容器’

h3a href=’#’CSS基础知识/a/h3

dl

dtimg src=’images/0011.jpg’//dt

dd class=’biaoti’CSS基础栏/dd

dd 文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍/dd

/dl

乌尔

lia href=’#’新闻标准新闻标题新闻标题新闻标题标题/aspan2015-5-1/span/li

……

/ul

/div

div 类=’容器’

h3a href=’#’CSS提示/a/h3

dl

dtimg src=’images/0011.jpg’//dt

dd class=’biaoti’asp.net基础专栏/dd

dd 文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍/dd

/dl

乌尔

lia href=’#’新闻标准新闻标题新闻标题新闻标题标题/aspan2015-5-1/span/li

……

/ul

/div

/div

div 类=’右’

div 类=’容器’

h3a href=’#’CSS3 基础知识/a/h3

dl

dtimg src=’images/0011.jpg’//dt

dd class=’biaoti’asp.net基础专栏/dd

dd 文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍/dd

/dl

乌尔

lia href=’#’新闻标准新闻标题新闻标题新闻标题标题/aspan2015-5-1/span/li

……

/ul

/div

div 类=’容器’

h3a href=’#’CSS基础知识/a/h3

dl

dtimg src=’images/0011.jpg’//dt

dd class=’biaoti’asp.net基础专栏/dd

dd 文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍/dd

/dl

乌尔

lia href=’#’新闻标准新闻标题新闻标题新闻标题标题/aspan2015-5-1/span/li

……

/ul

/div

/div

/div

CSS代码：

*{padding:0;margin:0;}

a{text-decoration:none;}

a:hover{text-decoration:underline;}

.top{width:100%;background:#f5f5f5;height:35px;}

#顶部，#header，#nav，#banner，#main{width:970px;margin:0 auto;}

#top p{font-size:13px;line-height:35px;}

#标题h1 a{

background:url(images/logo.png) 无重复0 50%;

显示：块；

宽度：215px;高度：60px;

文本缩进：-9999px；

}

.nav{宽度：100%;高度：50px;背景：#1a539c;}

ul li{list-style:none;}

#nav ul li{float:left;line-height:50px;color:#133d72;text-align:center;}

#nav ul li a{color:#fff;font-size:14px;display:block;width:114px;text-decoration:none;float:left;}

#nav ul li a:hover{background:#133d72;text-decoration:underline;}

#横幅{height:50px;}

#main .left{width:473px;margin-right:20px;float:left;}

#main .right{width:473px;float:left;}

#main .container{border:1px 实心#ddd;margin-top:10px;}

#main .container h3{

背景：url(images/lbj.jpg) 重复-x;height:31px;

文本缩进：20px；

}

#main .container h3 a{

颜色：#133d72;字体大小：15px;

行高：31px；

}

#main .container dl{

内边距：10px；

边框底部：1px 虚线#ccc;height:78px;

}

#main .container dl dt{

float:left;margin-right:10px;}

#main .container dl dd.biaoti{

字体大小：14px;行高：25px;

}

#main .container dl dd{

行高：22px;字体大小：13px;

}

#main.container ul{

填充：10px;背景：#fbfbfb;

}

#main .container ul li{

高度：28px;行高：28px;

边框底部：1px实心#f1f1f1；

字体大小：13px；

}

#main .container ul li a{

宽度：380px;显示：块；浮动：左；

color:#333;padding-left:13px;

background: url(images/ss.png) 无重复0 50%;

}

#main .container ul li a:hover{

背景： url(images/ss2.png) 无重复0 50%;color:#133d72

用户评论

暮染轻纱

这篇文章真的太棒了！正好我最近想学习前端开发，这个CSS布局教程就解决了我的难点，练习题目也做得很好，很适合初学者!

    有12位网友表示赞同！

陌潇潇

终于找到一个介绍CSS布局的教程，之前看其他文章都觉得过于复杂，这篇写的简单易懂，尤其是那些常用元素的例子，简直就是入门必备！

    有20位网友表示赞同！

屌国女农

这个教程确实很有帮助，我用它完成了练习页面布局，感觉自己对CSS有了更深入的理解，接下来我要继续学习更高阶的面试技巧！

    有20位网友表示赞同！

不相忘

CSS布局一直是我的痛点，看了这篇文章后总算有点眉目了。虽然还是有很多不明白的地方，但我打算多实践几次，相信会越来越熟练。

    有5位网友表示赞同！

慑人的傲气

练习页面布局挺有意思的，感觉自己一步步摸索出解决方案的感觉很有成就感！ 希望以后能提供更多复杂的项目案例练习，可以更提高实战能力！

    有11位网友表示赞同！

沐晴つ

这篇文章讲得很详细，图文并茂，但我还是有点不太敢动手实践。是不是有相关视频教程或教学直播？这样学习效果会更好吧?

    有15位网友表示赞同！

来自火星球的我

感觉这个教程有点局限于基础知识，对比较高级的布局方法和技巧介绍很少，希望能再补充一些内容！

    有7位网友表示赞同！

烟雨萌萌

我尝试着按照教程一步步操作，发现实际实施过程中还是存在一些问题，可能需要找到更详细的解决方案。

    有15位网友表示赞同！

﹎℡默默的爱

太棒了！这篇文章真的让我受益匪浅，我终于可以摆脱使用float布局的噩梦了!

    有6位网友表示赞同！

眼角有泪°

虽然CSS布局确实是个重要技能，但我觉得这个教程的内容有点过于基础了，建议针对不同水平的用户提供更具体的学习路径。

    有20位网友表示赞同！

挽手余生ら

我已经看过很多关于CSS布局的文章了，这个教程与众不同的地方在于它将理论和实践结合得很好，练习项目能够加深我的理解！

    有5位网友表示赞同！

情如薄纱

我认为这篇教程的内容比较浅显，针对一些特殊情况或者新兴的布局方法缺乏讲解，希望作者能更新内容，更全面地介绍CSS布局知识!

    有20位网友表示赞同！

晨与橙与城

这次练习让我意识到自己对CSS基础知识掌握还不够牢固，还需要多加巩固才能更好地理解这种布局方式。

    有18位网友表示赞同！

孤岛晴空

学习过程中遇到了几个小问题，在博客评论区发问也得到了及时回复，很不错的学习体验！希望以后能提供更丰富的社区互动功能。

    有19位网友表示赞同！

不忘初心

这篇文章写的简单明了，但是缺乏一些交互式元素或者代码示例，这样学习效果可能会更好！

    有17位网友表示赞同！

?娘子汉

这个教程确实比较实用，能够帮助我快速上手CSS布局的常用方法。 之前一直苦恼在页面布局方面, 现在终于能顺利完成。

    有13位网友表示赞同！

陌上花

我已经很久没有认真系统地学习前端知识了，这篇CSS布局教程让我重拾了学习的动力！

    有20位网友表示赞同！

心安i

学习内容质量不错，讲解也很清晰明了，但我希望可以提供更多的案例和实战练习！

    有13位网友表示赞同！