HTML和CSS实例讲解

最新推荐文章于 2024-03-25 19:58:02 发布

成魔的羔羊

最新推荐文章于 2024-03-25 19:58:02 发布

阅读量928

点赞数

分类专栏： HTML CSS

HTML CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

主要讲一个网页的HTML和CSS实例，怎么实现网页的效果图！
实际网页效果图的实现是简单
兴趣是建在会的基础上

这次主要讲的是HTML和CSS实例应用

在看了这节之后你就觉得其实HTML和CSS其实不难理解

这一节呢主要讲的是HTML和CSS的思路及代码写法的技巧

下面来看下面的一个网页，如图：

看到这张图之后呢

这个主要分了3个大的部分，然后对大块进行命名：

第一部分块命名为headed

第二部分块命名为product

第三部分块命名为footer

如下图：

接着可以把HTML部分大块给写出来！这个部分要用什么标签呢？在前面已经讲过了div标签，在回顾一下div标签的内容：

div标签：独占一行空间

小结：div标签是最干净的标签

所以在这里写大块的时候用DIV标签，因为大体被划分为3大块，要写3个div标签，基本上所有的标签都是有头有尾，大家在写的时候，

不要忘了<div></div>就是一组来写，前面<div>写完了，后面的直接</的时候按enter就出来，｛标签名用尖括号(成对的符号)包含｝

这样可以节省很多时间，这只是一个小技巧。

如下面：

<body>

</body>

</html>

上面的例子当中出现了body,body是文档主体标签：所有网页内容要放在body标签内，这个大家是必须知道的

每个DIV标签大块都会做一个类名的定义，下面说到了一个类，大家来复习一下之前在WEB布局已经讲过的内容（类名的定义）

.类名{属性:值;}

用“.”符号来定义类名，类名前一定要加点

在标签内用class属性命名类名称（调用）

注：类名称定义时不能用数字开头

这个复习完了，给上面3个大块的DIV标签类名进行定义,上面图片在三个大块里面里面写出命名，下面加到DIV里面去,如：

</div>

</div>

</div>

这个大体的部局已经完成.

接下来就开始做第一大块headed,当然第一大块分为2小块

里面的内容也是用DIV来写的，这个是写在了

<div class="headed"></div>里面，因为子级是包含在了父级里了，不多费话，代码如下：

</div>

整个网页内容代码如下：

<body>

</div>

</body>

</html>

在网站界面图可以看到top里面有内容，有logo和列表评测中心，视频直播，微博互动，型男手册，登录和注册

这些内容我又分为2个部分！一部分为logo,另一部分为top_nav,下面开始加入LOGO和top_nav如图：

代码如下：

</div>

</div>

在这个里面出现了img标签，在来回顾一下这个标签：

img图像标签，插入图像

详细讲解：

图像在哪？用src属性来指向

注：在使用图片前，先将图片拷贝在网站站点内（根文件夹）

网页常用图格式:

jpg gif png

图像色彩模式不能是CMYK

用images文件夹来整理图片文件

在细讲一下图片输出，现在用的图片输出是用PNG格式的，主要的是在PSD里面的存出来，不过我存出来都带背景的PNG格式的，也可以做不带背景，图片输出在WEB布局5里面有实际说明，想具体了解的去看WEB标准化布局之五！

在PNG输出之后，把相应的文件用英文命名。如下图本人做的

接下来把top_nav里面的内容给写出来，这下面我又给分成小块了，如图：

下面把里面的结构给添出来，大体结构如下：

</div>

</div>

这个里面出现了A标签和span标签，

a链接标签：

1、href属性决定显示为链接样式

2、文本颜色变为蓝色

3、文本出现了下划线修饰

4、鼠标指向会出现手形光标样式

注：当链接地址未知时，在href对应的值里面写"#"号

深入理解：

链接时相对关系的重要（相对路径）

制作锚标记（书签）：

放书签：<a id="书签名"></a>

找书签：<a href="#书签名"></a>

span文本内容修饰标签：最干净的标签

然后现在在里面加内容，如下：

</div>

</div>

</div>

在headed里面的还有nav导航栏的标签还没有写，下面把nav分为2个小块，左边就叫nav_left,右边就叫nav_right,

下面来写以下的结构：

</div>

</div>

下面在把文字内容标签给加上：如下：

<ul>

</ul>

</div>

</div>

<div>

在上面出现UL,li，在讲一下ul,li：

ul li无序列表标签：

1、ul和li都独占一行空间

2、ul标签与上下文之间有较大的间距

3、上阵不离父子兵（ul li必须一起使用）

4、li前面有个修饰的点（列表样式）

5、li有文本缩进现象

在下面把网页的内容也给加上：

<ul>

</ul>

</div>

</div>

讲到这里，headed一大块的HTML已经讲完了，大家按F12出来的网页肯定和网页的实际效果不一样，所以要把相应的css部分属性写完！

在上面相应的标签类的属性进行对于块进行命名了

当然我教大家写CSS是直接写在head里面啦,下面来介绍一下CSS：

1.利用<style></style>书写CSS

推荐：在<head></head>标签中使用<style></style>标签

2、利用style属性来书写CSS，在每一个标签内都有style属性

3、外部调用CSS: <link rel="stylesheet" href="css/MyDesignCss.css" />

现在开始CSS之旅吧

首先我们要重置标签,下面是我们本次实例当需要重置的标签，在所有的网页当中都会有重置标签：

/*重置，清理不干净的标签*/

*{ font-size:12px; font-family:"宋体"; color:#444;margin:0 auto;}/*是共用的意思*/

body{ margin:0; background:#161616;}

a{ text-decoration:none; display:block; color:#FFF;}

img{ border:none; display:block}

ul li{list-style:none; margin:0; padding:0;}

input{ border:none;}

下面来理解一下，下面所出现的内容:

1.“*”的用法，通配符：代表所有标签（每一个标签）

2.同属性定义（多个对象拥有相同的属性），

用逗号分隔对象名进行定义div,h1{color:red;}

优点：代码的优化

关于里面的font-size,font-family,color等都是CSS的常用属性

下面HTML标签a,img,ul li,input是本实例中都会有用到的，标签会有自带修饰，要清理掉！

body的整个网页背景background设置成了单，若是图片就用background-image背景图像注意用url()指定，background-repeat背景重复，

background-position背景位置

下面来写相应的块的属性

这个思路和下面写HTML是一样的道理！

这个是类headed的说明

/*headed*/

.headed{width:952px;height:140px;} /*这个是块的整体高*/

/*当然这个是headed里面的top左边和右边2个小块*/

.top{height:87px;overflow:hidden;} /*这个top是指LOGO和top_nav,overflow是溢出的意思，这个就是子级溢出后父级的如何控制溢出部分？注：要把overflow加给父级*/

.top_nav{width:726px;height:87px;float:right;}/*这个是相对测评中心，视频直播等，相对logo就要向右浮动*/

.logo{float:left;}/*logo图片是img相对就要向左浮动*/

/*top_right相对于要top的右边导航说明*/

.top_right{width:726px;

float:right;

margin-left:7px;}/*相对于top_right父级的定义，里面的内容是宽度和向右浮动，margin-left是向右移动，*/

.top_right a{float:right;

width:92px;

height:22px;

color:#FFF;

padding-top:10px;}/*相对于top_right的子级A的定义*/

.top_right img{float:left; padding-left:18px;}

.top_right span{ color:#FFF;

float:right;

width:52px;

margin-top:4px;}/*相对于top_right子级span的定义*/

.top_right .man{ color:#f88c00;}

.top_right span:hover{ color:#F93;} /*span:hover是指相对应的DIV里面的伪类定义（对象的特殊特性说明）

对象：伪类名｛｝a:hover {color:red;}，hover伪类：鼠标经过的效果*/

.login{float:right;height:55px; padding-top:20px;width:726px;}/*是login是登录注册里面向对应，因为在效果图里面是平行，所以在

这里要向右浮动，向上20px,宽度是726和的top_right是一样的宽度，在这里给定义了*/

.login a{float:right; margin-left:5px;}/*相对登录里面的向右浮动，左边距是5PX,若是没有浮动出现，直接出现成列表形式*/

关于这一部分就不多说明，大家应该多少可以看明白了！

主要是做nav来说明，具体的图片如：

.nav{width:952px;height:102px;}/*下面导航，在这里其实大家可以针对实际效果图来做*/

.navleft{ float:left;width:400px; }

.navleft ul{ padding-left:0; list-style:none; margin-left:0;}/*这个主要清除UL里面的包含的其它的效果，当没有这样的时*/

.navleft li{float:left; padding-right:30px; padding-top:20px;}

.navleft a{ color:#999;}

.navright{float:right;width:525px; padding-top:20px;}

.navright a{float:right; margin-left:50px;}

.navright img{float:left;}

.buy{ color:#c0973d;}

这就是相对应headed的说明！基本完毕！这个里面对于相关的单词拼写的一些技巧性问题，比如在里面写里面属性的时候，可以自由打个空格，里面

有相应的单词，可以自己来选！

当自己写的时候有问题，建议大家给全部重新删了，在重新写，你就知道自己问题所错的地方在哪儿，也可以自己慢慢给自己找出自己出的问题在哪儿

，这样是学习进步最快的！

上面写完，可以显示的具体如下效果！

下面开始写产品这一块！

这一块是的最简单一个，这里是直接写在product里面的这一大块里面，直接在<div class="product"></div>

具体如下：

</div>

相应的CSS就更简单了，如下：

/*产品系列展示*/

.product a{ padding-bottom:40px;}

在效果图里面每个底边边距是40像素，是直接设置为40像素。

这一块大家自行写完了就可以自己在浏览器里面预览了！不多说了！这个是最简单的

最后一块就是页脚

这一大块被我分成了三小块，主要是左中右三部分，左中右分别是footer_left,footer_middle,footer_right，不用看大家也明白了吧！

在HTML里面是这样写的：

<input><a class="mail" href=""><img src="images/infor.png" /></a>

</div>

</div>

<a href=""><span>2013年会员积分况礼</span></a>

<a href=""><span>其它国家地区和网站</span><img src="images/sanjiao.png" /></a>

</div>

<p>巴黎欧莱雅顾客关怀中心：400-821-5098 会员积分兑礼服务热线：400-820-0660</p>

</div>

<p>沪ICP备11031739号-1</p>

</div>

</div>

关于input输入标签的意思

说明一下在里面是解释说明的意思，方便自己看和以后修改！

在这里我就不多说，大家慢慢去理解消化了。其实呢已经很简单了！

相应的CSS的属性如下：

.footer{height:154px; width:952px; margin-top:25px}

.footer_left{width:173px; height:153px;float:left; }

.footer_left input{ background:#282828; width:147px; height:24px;}

.footer_left .mail{float:right;}

.footer_middle{ float:left; width:640px;

.footer_first {width:480px;}

.footer_first a{ float:left; width:80px; border-right:1px solid #FFF;color:#FFF;}

.footer_first span{ margin-left:14px;color:#FFF;}

.footer_vip{ float:left;}

.footer_vip a{ padding-left:15px; float:left;}

.footer_vip span{ color:#FFF;}

.footer_vip img{float:right;}

.footer_phone {width:480px; text-align: center; height:12px; padding-top:14px;}

.footer_phone {margin-top:10px;}

.footer_copyright p{ padding-top:24px; text-align:center;}

.footer_right{ float:right;}

这下基本上是全部完成！按F12可以直接在网页里面浏览！

HTML和CSS代码呢其实不难，兴趣是建在会的基础上的！

附件会附上所写的HTML和CSS代码，欢迎前来一起学习讨论！

成魔的羔羊

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录